update brand colors

ui/src/components/input/index.js

@@ -27,7 +27,7 @@ const Label = styled.label`
 `;
 
 const InputField = styled.input`
-  background: ${colors.white};
+  background: ${colors.brandSecondary};
   display: block;
   font-size: 16px;
   height: ${remcalc(50)};

ui/src/components/modal/index.js

@@ -1,12 +1,17 @@
+const constants = require('../../shared/constants');
 const React = require('react');
 const Styled = require('styled-components');
 
+const {
+  colors
+} = constants;
+
 const {
   default: styled
 } = Styled;
 
 const StyledModal = styled.div`
-  background: white;
+  background: ${colors.brandSecondary};
   display: block;
   left: 50%;
   margin: 0 auto;

ui/src/components/radio/index.js

@@ -49,7 +49,7 @@ const StyledSpan = styled.span`
     width: 10px;
     height: 10px;
     box-shadow: 0 0 0 1px #646464;
-    border: 8px solid white;
+    border: 8px solid ${colors.brandInactive};
     top: 5px;
     left: 5px;
     border-radius: 100%;

ui/src/shared/constants/boxes.js

@@ -6,13 +6,8 @@ const boxes = {
   insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
   border: {
     checked: `1px solid ${colors.brandPrimary}`,
-    unchecked: `1px solid ${colors.border}`,
+    unchecked: `1px solid ${colors.borderSecondary}`,
     confirmed: `1px solid ${colors.confirmation}`
-  },
-  background: {
-    primary: colors.brandPrimary,
-    secondary: colors.brandSecondary,
-    disabled: '#FAFAFA',
   }
 };
 

ui/src/shared/constants/colors.js

@@ -2,12 +2,26 @@ const brandPrimary = {
   brandPrimary: '#3B46CC',
   brandPrimaryDark: '#1838C0',
   brandPrimaryDarkest: '#12279F',
+  borderPrimary: '#2531BC',
+  borderPrimaryDark: '#2531BC',
+  borderPrimaryDarkest: '#062BA0',
+  brandPrimaryColor: '#FFFFFF'
 };
 
 const brandSecondary = {
-  brandSecondary: '#646464',
-  brandSecondaryDark: '#464646',
-  brandSecondaryDarkest: '#160D42',
+  brandSecondary: '#FFFFFF',
+  brandSecondaryDark: '#F8F8F8',
+  brandSecondaryDarkest: '#E9E9E9',
+  borderSecondary: '#D8D8D8',
+  borderSecondaryDark: '#D8D8D8',
+  borderSecondaryDarkest: '#D8D8D8',
+  brandSecondaryColor: '#464646'
+};
+
+const brandInactive = {
+  brandInactive: '#FAFAFA',
+  borderInactive: '#D8D8D8',
+  brandInactiveColor: '#919191'
 };
 
 const notifications = {
@@ -19,12 +33,9 @@ const notifications = {
 };
 
 const colors = {
-
-  white: '#FFFFFF',
-  backgroundInactive: '#F9F9F9',
-
   ...brandPrimary,
   ...brandSecondary,
+  ...brandInactive,
   ...notifications
 };