Refine component style

4 files changed, 26 insertions, 40 deletions

diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js
index fc5a1820..4326c78a 100644
--- a/ui/app/components/text-field/text-field.component.js
+++ b/ui/app/components/text-field/text-field.component.js
@@ -7,7 +7,7 @@ const inputLabelBase = {
   transform: 'none',
   transition: 'none',
   position: 'initial',
-  color: '#5b5b5b',
+  color: '#9b9b9b',
 }
 
 const styles = {
@@ -27,7 +27,7 @@ const styles = {
       borderBottom: '2px solid #aeaeae',
     },
     '&:hover:before': {
-      borderBottom: '2px solid #aeaeae',
+      borderBottom: '2px solid #954a97cc!important',
     },
     '&:after': {
       borderBottom: '2px solid #954a97',
@@ -40,10 +40,10 @@ const styles = {
   // Non-material styles
   formLabel: {
     '&$formLabelFocused': {
-      color: '#5b5b5b',
+      color: '#9b9b9b',
     },
     '&$materialError': {
-      color: '#5b5b5b',
+      color: '#9b9b9b',
     },
   },
   formLabelFocused: {},
@@ -52,14 +52,14 @@ const styles = {
     'label + &': {
       marginTop: '8px',
     },
-    border: '1px solid #d2d8dd',
+    border: '1px solid #777777',
     height: '48px',
     borderRadius: '4px',
     padding: '0 16px',
     display: 'flex',
     alignItems: 'center',
     '&$inputFocused': {
-      border: '1px solid #2f9ae0',
+      border: '1px solid #d2d8dd',
     },
   },
   input: {
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index c21f8d60..23ba1bb5 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -28,15 +28,14 @@
 }
 
 .btn-primary {
-  color: $curious-blue;
+  color: $white;
   background: $dexon-purple;
-  border: 2px solid $spindle;
+  border: 2px solid $dexon-purple;
   &:active {
-    background: $dexon-purple;
-    border-color: $curious-blue;
+    border-color: $white;
   }
   &:hover {
-    border-color: $curious-blue;
+    border-color: $white;
   }
 }
 
@@ -53,14 +52,14 @@
 }
 
 .btn-default {
-  color: $scorpion;
+  color: $white;
   border: 2px solid $dusty-gray;
+  background: $dusty-gray;
   &:active {
-    background: $dexon-purple;
-    border-color: $dusty-gray;
+    border-color: $white;
   }
   &:hover {
-    border-color: $scorpion;
+    border-color: $white;
   }
 }
 
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index c828a2b2..1b3db8d0 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -8,24 +8,20 @@
 }
 
 .network-component.pointer {
-  border: 2px solid $silver;
-  border-radius: 82px;
+  border: 1px solid $dexon-purple;
+  border-radius: 4px;
   padding: 7px 3px;
   flex: 0 0 auto;
   display: flex;
-
   &.ethereum-network .menu-icon-circle div {
     background-color: rgba(3, 135, 137, .7) !important;
   }
-
   &.ropsten-test-network .menu-icon-circle div {
     background-color: rgba(233, 21, 80, .7) !important;
   }
-
   &.kovan-test-network .menu-icon-circle div {
     background-color: rgba(105, 4, 150, .7) !important;
   }
-
   &.rinkeby-test-network .menu-icon-circle div {
     background-color: rgba(235, 179, 63, .7) !important;
   }
@@ -42,7 +38,6 @@
   display: flex;
   align-items: center;
   font-size: .6em;
-
   .fa-caret-down {
     line-height: 15px;
     font-size: 12px;
@@ -55,30 +50,27 @@
   font-family: Roboto;
   font-size: 12px;
   flex: 1 0 auto;
-  color: $tundora;
+  color: $dexon-purple;
   font-weight: 500;
 }
 
 .dropdown-menu-item .fa.delete {
-    margin-right: 10px;
-    display: none;
+  margin-right: 10px;
+  display: none;
 }
 
 .dropdown-menu-item:hover .fa.delete {
-    display: inherit;
+  display: inherit;
 }
 
 .network-droppo {
   right: 2px;
-
   @media screen and (min-width: 576px) {
     right: calc(((100% - 85vw) / 2) + 2px);
   }
-
   @media screen and (min-width: 769px) {
     right: calc(((100% - 80vw) / 2) + 2px);
   }
-
   @media screen and (min-width: 1281px) {
     right: calc(((100% - 65vw) / 2) + 2px);
   }
@@ -166,4 +158,4 @@
 
 .network-caret {
   margin: 0 8px 2px;
-}
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index d8e62c97..2682741d 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -3,7 +3,6 @@
  */
 
 @import './reset.scss';
-
 * {
   box-sizing: border-box;
 }
@@ -11,9 +10,9 @@
 html,
 body {
   font-family: Roboto, Arial;
-  color: #4d4d4d;
+  color: $white;
   font-weight: 400;
-  background: #f7f7f7;
+  background: $dark-gray;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -43,16 +42,17 @@ textarea:focus {
 }
 
 /* stylelint-disable */
+
 #app-content {
   overflow-x: hidden;
   height: 100%;
   display: flex;
   flex-direction: column;
-
   @media screen and (max-width: $break-small) {
     background-color: $white;
   }
 }
+
 /* stylelint-enable */
 
 a {
@@ -90,27 +90,22 @@ input.form-control {
   border: 1px solid $alto;
   border-radius: 3px;
   width: 100%;
-
   &::-webkit-input-placeholder {
     font-weight: 100;
     color: $dusty-gray;
   }
-
   &::-moz-placeholder {
     font-weight: 100;
     color: $dusty-gray;
   }
-
   &:-ms-input-placeholder {
     font-weight: 100;
     color: $dusty-gray;
   }
-
   &:-moz-placeholder {
     font-weight: 100;
     color: $dusty-gray;
   }
-
   &--error {
     border: 1px solid $monzo;
   }
@@ -120,4 +115,4 @@ input.form-control {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}
\ No newline at end of file