Restyle

11 files changed, 48 insertions, 86 deletions

diff --git a/ui/app/components/app-header/index.scss b/ui/app/components/app-header/index.scss
index 325844af..e87fa188 100644
--- a/ui/app/components/app-header/index.scss
+++ b/ui/app/components/app-header/index.scss
@@ -1,23 +1,20 @@
 .app-header {
   align-items: center;
-  background: $gallery;
+  background: $black;
   position: relative;
   z-index: $header-z-index;
   display: flex;
   flex-flow: column nowrap;
   width: 100%;
   flex: 0 0 auto;
-
   @media screen and (max-width: 575px) {
     padding: 12px;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
     z-index: $mobile-header-z-index;
   }
-
   @media screen and (min-width: 576px) {
     height: 75px;
     justify-content: center;
-
     &--back-drop {
       &::after {
         content: '';
@@ -29,62 +26,51 @@
       }
     }
   }
-
   &__metafox-logo {
     cursor: pointer;
-
     &--icon {
       @media screen and (min-width: $break-large) {
         display: none;
       }
     }
-
     &--horizontal {
       @media screen and (max-width: $break-small) {
         display: none;
       }
     }
   }
-
   &__contents {
     display: flex;
     justify-content: space-between;
     flex-flow: row nowrap;
     width: 100%;
-
     @media screen and (max-width: 575px) {
       height: 100%;
     }
-
     @media screen and (min-width: 576px) {
       width: 85vw;
     }
-
     @media screen and (min-width: 769px) {
       width: 80vw;
     }
-
     @media screen and (min-width: 1281px) {
       width: 62vw;
     }
   }
-
   &__logo-container {
     display: flex;
     flex-direction: row;
     align-items: center;
     cursor: pointer;
   }
-
   &__account-menu-container {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
   }
-
   &__network-component-wrapper {
     display: flex;
     flex-direction: row;
     align-items: center;
   }
-}
+}
\ No newline at end of file
diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss
index 6bd52282..654c8a4a 100644
--- a/ui/app/components/pages/unlock-page/index.scss
+++ b/ui/app/components/pages/unlock-page/index.scss
@@ -7,46 +7,38 @@
   padding: 30px;
   font-weight: 400;
   color: $silver-chalice;
-
   &__container {
-    background: $white;
+    background: $dark-gray;
     display: flex;
     align-self: stretch;
     justify-content: center;
     flex: 1 0 auto;
     height: 100vh;
   }
-
   &__mascot-container {
     margin-top: 24px;
   }
-
   &__title {
     margin-top: 5px;
     font-size: 2rem;
     font-weight: 800;
     color: $tundora;
   }
-
   &__form {
     width: 100%;
     margin: 56px 0 8px;
   }
-
   &__links {
     margin-top: 25px;
     width: 100%;
   }
-
   &__link {
     cursor: pointer;
-
     &--import {
       color: $ecstasy;
     }
-
     &--use-classic {
       margin-top: 10px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js
index 94915df7..9a0a4cb8 100644
--- a/ui/app/components/pages/unlock-page/unlock-page.component.js
+++ b/ui/app/components/pages/unlock-page/unlock-page.component.js
@@ -82,7 +82,7 @@ export default class UnlockPage extends Component {
 
   renderSubmitButton () {
     const style = {
-      backgroundColor: '#f7861c',
+      backgroundColor: '#954a97',
       color: 'white',
       marginTop: '20px',
       height: '60px',
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 0461b615..412931bf 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -91,7 +91,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
               marginLeft: '23px',
               marginRight: '12px',
               fontSize: '20px',
-              color: '#F7861C',
+              color: '#954a97',
             },
           }),
         ]),
diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js
index 2c72d812..fc5a1820 100644
--- a/ui/app/components/text-field/text-field.component.js
+++ b/ui/app/components/text-field/text-field.component.js
@@ -23,11 +23,20 @@ const styles = {
   },
   materialFocused: {},
   materialUnderline: {
+    '&:before': {
+      borderBottom: '2px solid #aeaeae',
+    },
+    '&:hover:before': {
+      borderBottom: '2px solid #aeaeae',
+    },
     '&:after': {
-      borderBottom: '2px solid #f7861c',
+      borderBottom: '2px solid #954a97',
     },
   },
   materialError: {},
+  materialInput: {
+    color: 'white',
+  },
   // Non-material styles
   formLabel: {
     '&$formLabelFocused': {
@@ -53,6 +62,9 @@ const styles = {
       border: '1px solid #2f9ae0',
     },
   },
+  input: {
+    color: 'white',
+  },
   largeInputLabel: {
     ...inputLabelBase,
     fontSize: '1rem',
@@ -84,7 +96,7 @@ const TextField = props => {
         disableUnderline: !material,
         classes: {
           root: material ? '' : classes.inputRoot,
-          input: material ? '' : classes.input,
+          input: material ? classes.materialInput : classes.input,
           underline: material ? classes.materialUnderline : '',
           focused: material ? '' : classes.inputFocused,
         },
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 5826a8b4..c21f8d60 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -19,7 +19,6 @@
   text-transform: uppercase;
   outline: none;
   font-family: Roboto;
-
   &--disabled,
   &[disabled] {
     cursor: auto;
@@ -30,13 +29,12 @@
 
 .btn-primary {
   color: $curious-blue;
+  background: $dexon-purple;
   border: 2px solid $spindle;
-
   &:active {
-    background: $zumthor;
+    background: $dexon-purple;
     border-color: $curious-blue;
   }
-
   &:hover {
     border-color: $curious-blue;
   }
@@ -45,12 +43,10 @@
 .btn-secondary {
   color: $monzo;
   border: 2px solid lighten($monzo, 40%);
-
   &:active {
     background: lighten($monzo, 55%);
     border-color: $monzo;
   }
-
   &:hover {
     border-color: $monzo;
   }
@@ -59,12 +55,10 @@
 .btn-default {
   color: $scorpion;
   border: 2px solid $dusty-gray;
-
   &:active {
-    background: $gallery;
+    background: $dexon-purple;
     border-color: $dusty-gray;
   }
-
   &:hover {
     border-color: $scorpion;
   }
@@ -73,12 +67,12 @@
 .btn-confirm {
   color: $white;
   border: 2px solid $curious-blue;
-  background-color: $curious-blue;
+  background-color: $dexon-purple;
 }
 
 .btn-raised {
   color: $curious-blue;
-  background-color: $white;
+  background-color: $dexon-purple;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
   padding: 6px;
   height: initial;
@@ -105,11 +99,9 @@
   font-size: .85rem;
   font-weight: 400;
   transition: border-color .3s ease;
-
   &:hover {
     border-color: $curious-blue;
   }
-
   &--disabled,
   &[disabled] {
     cursor: auto;
@@ -129,7 +121,6 @@
   font-weight: 400;
   transition: border-color .3s ease;
   width: 100%;
-
   &:hover {
     border-color: $scorpion;
   }
@@ -145,34 +136,29 @@
 //   text-align: center;
 //   line-height: 25px;
 // }
-
 // .btn-red {
 //   background: rgba(254, 35, 17, 1);
 //   box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
 // }
-
 button[disabled],
 input[type="submit"][disabled] {
   cursor: not-allowed;
-  opacity: .5;
-  // background: rgba(197, 197, 197, 1);
+  opacity: .5; // background: rgba(197, 197, 197, 1);
   // box-shadow: 0 3px 6px rgba(197, 197, 197, .36);
 }
 
 // button.spaced {
 //   margin: 2px;
 // }
-
 // button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
 //   transform: scale(1.1);
 // }
 // button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
 //   transform: scale(0.95);
 // }
-
 button.primary {
   padding: 8px 12px;
-  background: #f7861c;
+  background: $dexon-purple;
   box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
   color: $white;
   font-size: 1.1em;
@@ -181,8 +167,7 @@ button.primary {
 }
 
 .btn-light {
-  padding: 8px 12px;
-  // background: #FFFFFF; // $bg-white
+  padding: 8px 12px; // background: #FFFFFF; // $bg-white
   box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
   color: #585d67; // TODO: make reusable light button color
   font-size: 1.1em;
@@ -195,19 +180,6 @@ button.primary {
   opacity: .5;
 }
 
-// TODO: cleanup: not used anywhere
-button.btn-thin {
-  border: 1px solid;
-  border-color: #4d4d4d;
-  color: #4d4d4d;
-  background: rgb(255, 174, 41);
-  border-radius: 4px;
-  min-width: 200px;
-  margin: 12px 0;
-  padding: 6px;
-  font-size: 13px;
-}
-
 .btn-tertiary {
   border: 1px solid transparent;
   border-radius: 2px;
@@ -215,4 +187,4 @@ button.btn-thin {
   font-size: 16px;
   line-height: 24px;
   padding: 16px 42px;
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss
index feec71c8..9cb0dceb 100644
--- a/ui/app/css/itcss/components/sections.scss
+++ b/ui/app/css/itcss/components/sections.scss
@@ -26,7 +26,7 @@ textarea.twelve-word-phrase {
 .initialize-screen hr {
   width: 60px;
   margin: 12px;
-  border-color: #f7861c;
+  border-color: #954a97;
   border-style: solid;
 }
 
@@ -46,7 +46,7 @@ textarea.twelve-word-phrase {
 /* unlock */
 .error {
   // color: #e20202;
-  color: #f7861c;
+  color: #954a97;
   margin-bottom: 9px;
 }
 
@@ -232,7 +232,7 @@ textarea.twelve-word-phrase {
   margin-bottom: 2px;
   font-size: 11px;
   text-rendering: geometricPrecision;
-  color: #f7861c;
+  color: #954a97;
 }
 
 .name-label:hover .edit-text {
@@ -253,7 +253,7 @@ textarea.twelve-word-phrase {
 /* Ether Balance Widget */
 
 .ether-balance-amount {
-  color: #f7861c;
+  color: #954a97;
 }
 
 .ether-balance-label {
@@ -335,14 +335,14 @@ textarea.twelve-word-phrase {
 .input-container:hover .buy-inputs {
   box-sizing: inherit;
   border: solid;
-  border-color: #f7861c;
+  border-color: #954a97;
   border-width: .5px;
   border-radius: 2px;
 }
 
 .buy-inputs:focus {
   border: solid;
-  border-color: #f7861c;
+  border-color: #954a97;
   border-width: .5px;
   border-radius: 2px;
 }
@@ -425,7 +425,7 @@ textarea.twelve-word-phrase {
 
 .qr-message {
   font-size: 12px;
-  color: #f7861c;
+  color: #954a97;
 }
 
 div.message-container > div:first-child {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 42a8655d..f91455ea 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -8,11 +8,11 @@ $black: #000;
 $orange: #ffa500;
 $red: #f00;
 $gray: #808080;
-
 /*
   Colors
   http://chir.ag/projects/name-that-color
  */
+
 $white-linen: #faf6f0; // formerly 'faint orange (textfield shades)'
 $rajah: #f5c26d; // formerly 'light orange (button shades)'
 $buttercup: #f5a623; // formerly 'dark orange (text)'
@@ -53,16 +53,19 @@ $cornflower-blue: #7057ff;
 $saffron: #f6c343;
 $dodger-blue: #3099f2;
 $zumthor: #edf7ff;
-$ecstasy: #f7861c;
+$ecstasy: #954a97;
 $linen: #fdf4f4;
 $oslo-gray: #8C8E94;
 $polar: #fafcfe;
 $blizzard-blue: #bfdef3;
 $mischka: #dddee9;
+$dexon-purple: #954A97;
+$dark-gray: #222222;
 
 /*
   Z-Indicies
  */
+
 $dropdown-z-index: 30;
 $token-icon-z-index: 15;
 $container-z-index: 15;
@@ -72,7 +75,6 @@ $main-container-z-index: 18;
 $send-card-z-index: 20;
 $sidebar-z-index: 26;
 $sidebar-overlay-z-index: 25;
-
 /*
   Z Indicies - Current
   app - 11
@@ -85,10 +87,8 @@ $sidebar-overlay-z-index: 25;
 /*
   Responsive Breakpoints
  */
+
 $break-small: 575px;
 $break-midpoint: 780px;
 $break-large: 576px;
-
-
-$primary-font-type: Roboto;
-
+$primary-font-type: Roboto;
\ No newline at end of file
diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss
index 209614c6..61d7fc81 100644
--- a/ui/app/css/itcss/tools/utilities.scss
+++ b/ui/app/css/itcss/tools/utilities.scss
@@ -5,7 +5,7 @@
 /* color */
 
 .color-orange {
-  color: #f7861c; // TODO: move to settings/variables
+  color: #954a97; // TODO: move to settings/variables
 }
 
 .color-forest {
@@ -302,7 +302,7 @@ hr.horizontal-line {
 
 .check {
   margin-left: 7px;
-  color: #f7861c;
+  color: #954a97;
   flex: 1 0 auto;
   display: flex;
   justify-content: flex-end;
diff --git a/ui/index.html b/ui/index.html
index 9dfaefbb..8c8db1d8 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>MetaMask</title>
+    <title>Dex San</title>
   </head>
   <body>
 
diff --git a/ui/index.js b/ui/index.js
index bd9ecc28..7dbc5ba6 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -63,8 +63,8 @@ async function startApp (metamaskState, accountManager, opts) {
     store.dispatch(actions.updateMetamaskState(metamaskState))
   })
 
-  // global metamask api - used by tooling
-  global.metamask = {
+  // global dexsan api - used by tooling
+  global.dexsan = {
     updateCurrentLocale: (code) => {
       store.dispatch(actions.updateCurrentLocale(code))
     },