ui - redesign - unlock menu

2 files changed, 51 insertions, 182 deletions

diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 18d921700..860491a3d 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -18,6 +18,11 @@ html, body {
   color: #4D4D4D;
   font-weight: 300;
   line-height: 1.4em;
+  background: #F7F7F7;
+}
+
+input:focus {
+  outline: none;
 }
 
 #app-content {
@@ -47,17 +52,7 @@ button:active {
   transform: scale(0.95);
 }
 
-button.primary {
-  margin: 10px;
-  padding: 6px;
-  border: none;
-  border-radius: 3px;
-  background: #F7861C;
-  font-weight: 500;
-  color: white;
-}
-
-input, textarea {
+/*input, textarea {
   width: 300px;
   padding: 6px;
   border-radius: 6px;
@@ -65,7 +60,7 @@ input, textarea {
   outline: none;
   border: 1px solid #F5A623;
   background: #FAF6F0;
-}
+}*/
 
 a {
   text-decoration: none;
@@ -84,6 +79,17 @@ app
   color: #909090;
 }
 
+button.primary {
+  margin: 10px;
+  padding: 8px 12px;
+  background: #F7861C;
+  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
+  color: white;
+  font-size: 1.1em;
+  font-family: 'Transat Standard';
+  text-transform: uppercase;
+}
+
 button.btn-thin {
   border: 1px solid;
   border-color: #4D4D4D;
@@ -115,7 +121,7 @@ h2.page-subtitle {
 }
 
 .app-primary {
-  background: #F7F7F7;
+
 }
 
 .app-footer {
@@ -217,23 +223,41 @@ app sections
   margin: -2px 8px 0px -8px;
 }
 
-.unlock-screen label {
-  color: #F3C83E;
-  font-weight: 500;
+.unlock-screen #metamask-mascot-container {
+  margin-top: 24px;
+}
+
+.unlock-screen h1 {
+  margin-top: -28px;
+  margin-bottom: 42px;
 }
 
 .unlock-screen input[type=password] {
-  width: 60%;
-  height: 22px;
-  padding: 2px;
-  border-radius: 4px;
-  border: 2px solid #F3C83E;
-  background: #FAF6F0;
+  width: 260px;
+  height: 36px;
+  margin-bottom: 24px;
+  padding: 8px;
 }
 
-.unlock-screen input[type=password]:focus {
-  outline: none;
-  border: 3px solid #F3C83E;
+/* Webkit */
+.password-box::-webkit-input-placeholder {
+  text-align: center;
+  font-size: 1.2em;
+}
+/* Firefox 18- */
+.password-box:-moz-placeholder {
+  text-align: center;
+  font-size: 1.2em;
+}
+/* Firefox 19+ */
+.password-box::-moz-placeholder {
+  text-align: center;
+  font-size: 1.2em;
+}
+/* IE */
+.password-box:-ms-input-placeholder {
+  text-align: center;
+  font-size: 1.2em;
 }
 
 /* accounts */
@@ -251,7 +275,6 @@ app sections
 }
 
 .accounts-list-option:hover {
-  background: pink;
   transform: scale(1.1);
 }
 
@@ -346,157 +369,3 @@ app sections
   background: #FAF6F0;
 }
 
-
-/*
-react toggle
-*/
-
-/* overrides */
-
-.react-toggle-track-check {
-  display: none;
-}
-.react-toggle-track-x {
-  display: none;
-}
-
-/* modified original */
-
-.react-toggle {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  padding: 0;
-
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.react-toggle-screenreader-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.react-toggle--disabled {
-  opacity: 0.5;
-  -webkit-transition: opacity 0.25s;
-  transition: opacity 0.25s;
-}
-
-.react-toggle-track {
-  width: 50px;
-  height: 24px;
-  padding: 0;
-  border-radius: 30px;
-  background-color: #4D4D4D;
-  -webkit-transition: all 0.2s ease;
-  -moz-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: #000000;
-}
-
-.react-toggle--checked .react-toggle-track {
-  background-color: rgb(255, 174, 41);
-}
-
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: rgb(243, 151, 0);
-}
-
-.react-toggle-track-check {
-  position: absolute;
-  width: 14px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin-top: auto;
-  margin-bottom: auto;
-  line-height: 0;
-  left: 8px;
-  opacity: 0;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-check {
-  opacity: 1;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle-track-x {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin-top: auto;
-  margin-bottom: auto;
-  line-height: 0;
-  right: 10px;
-  opacity: 1;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-x {
-  opacity: 0;
-}
-
-.react-toggle-thumb {
-  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 22px;
-  height: 22px;
-  border: 1px solid #4D4D4D;
-  border-radius: 50%;
-  background-color: #FAFAFA;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  -webkit-transition: all 0.25s ease;
-  -moz-transition: all 0.25s ease;
-  transition: all 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-thumb {
-  left: 27px;
-  border-color: #828282;
-}
-/*
-      .react-toggle--focus .react-toggle-thumb {
-        -webkit-box-shadow: 0px 0px 3px 2px #0099E0;
-        -moz-box-shadow: 0px 0px 3px 2px #0099E0;
-        box-shadow: 0px 0px 2px 3px #0099E0;
-      }
-
-      .react-toggle:active .react-toggle-thumb {
-        -webkit-box-shadow: 0px 0px 5px 5px #0099E0;
-        -moz-box-shadow: 0px 0px 5px 5px #0099E0;
-        box-shadow: 0px 0px 5px 5px #0099E0;
-      }
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 22e578ec6..c366a5d5f 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -5,7 +5,7 @@
 }
 
 .color-forest {
-  color: #08525D; 
+  color: #0A5448; 
 }
 
 /* lib */
@@ -175,4 +175,4 @@ hr.horizontal-line {
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;
-}
\ No newline at end of file
+}