Updated padding and colors

packages/react-shared/CHANGELOG.md

@@ -1,3 +1,7 @@
 # CHANGELOG
 
+## v0.1.0 - _TBD, 2018_
+
+    * Added new colors (#468)
+
 ## v0.0.1 - _March 8, 2018_

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

@@ -45,4 +45,7 @@ export const colors = {
     orange: '#E69D00',
     amber800: '#FF8F00',
     darkYellow: '#caca03',
+    walletBoxShadow: 'rgba(56, 59, 137, 0.2)',
+    walletBorder: '#f5f5f6',
+    walletDefaultItemBackground: '#fbfbfc',
 };

packages/website/ts/components/wallet.tsx

@@ -1,5 +1,6 @@
 import { ZeroEx } from '0x.js';
 import {
+    colors,
     constants as sharedConstants,
     EtherscanLinkSuffixes,
     Styles,
@@ -59,16 +60,16 @@ interface AccessoryItemConfig {
 const styles: Styles = {
     wallet: {
         width: 346,
-        backgroundColor: '#ffffff',
+        backgroundColor: colors.white,
         borderBottomRightRadius: 10,
         borderBottomLeftRadius: 10,
         borderTopRightRadius: 10,
         borderTopLeftRadius: 10,
-        boxShadow: '0px 4px 6px rgba(56, 59, 137, 0.2)',
+        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
         overflow: 'hidden',
     },
     list: {
-        padding: '0px 0px 0px 0px',
+        padding: 0,
     },
     tokenItemInnerDiv: {
         paddingLeft: 60,
@@ -80,12 +81,12 @@ const styles: Styles = {
         paddingLeft: 24,
     },
     borderedItem: {
-        borderBottomColor: '#f5f5f6',
+        borderBottomColor: colors.walletBorder,
         borderBottomStyle: 'solid',
         borderWidth: 1,
     },
     tokenItem: {
-        backgroundColor: '#fbfbfc',
+        backgroundColor: colors.walletDefaultItemBackground,
         paddingTop: 8,
         paddingBottom: 8,
     },
@@ -98,7 +99,7 @@ const styles: Styles = {
     },
     amountLabel: {
         fontWeight: 'bold',
-        color: 'black',
+        color: colors.black,
     },
 };