Implement ETH/WETH conversion and allowance toggle styling

packages/react-shared/CHANGELOG.md

@@ -4,3 +4,4 @@
 
     * Added new colors (#468)
     * Fix section and menuItem text display to replace dashes with spaces.
+    * Reorganized colors and added new ones

packages/react-shared/src/utils/colors.ts

@@ -1,7 +1,6 @@
 import { colors as materialUiColors } from 'material-ui/styles';
 
-export const colors = {
-    ...materialUiColors,
+const baseColors = {
     gray40: '#F8F8F8',
     grey50: '#FAFAFA',
     grey100: '#F5F5F5',
@@ -27,6 +26,7 @@ export const colors = {
     lightBlue: '#60A4F4',
     lightBlueA700: '#0091EA',
     linkBlue: '#1D5CDE',
+    mediumBlue: '#488AEA',
     darkBlue: '#4D5481',
     turquois: '#058789',
     lightPurple: '#A81CA6',
@@ -45,7 +45,22 @@ export const colors = {
     orange: '#E69D00',
     amber800: '#FF8F00',
     darkYellow: '#caca03',
-    walletBoxShadow: 'rgba(56, 59, 137, 0.2)',
-    walletBorder: '#f5f5f6',
-    walletDefaultItemBackground: '#fbfbfc',
+};
+
+const appColors = {
+    // wallet specific colors
+    walletBoxShadow: 'rgba(56, 59, 137, 0.2)',
+    walletBorder: '#ededee',
+    walletDefaultItemBackground: '#fbfbfc',
+    walletFocusedItemBackground: '#f0f1f4',
+    allowanceToggleShadow: 'rgba(0, 0, 0, 0)',
+    allowanceToggleOffTrack: '#adadad',
+    allowanceToggleOnTrack: baseColors.mediumBlue,
+    wrapEtherConfirmationButton: baseColors.mediumBlue,
+};
+
+export const colors = {
+    ...materialUiColors,
+    ...baseColors,
+    ...appColors,
 };