aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-03-22 05:13:16 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-03-22 05:17:08 +0800
commita60c8f7d8c05d4d92e16ff73833606989064cb48 (patch)
treedbf90444136b1302d406aab919816596595c24b1
parent4e5cd472c2b784ca2314eea76b1a106fd04ef0ad (diff)
downloaddexon-0x-contracts-a60c8f7d8c05d4d92e16ff73833606989064cb48.tar.gz
dexon-0x-contracts-a60c8f7d8c05d4d92e16ff73833606989064cb48.tar.zst
dexon-0x-contracts-a60c8f7d8c05d4d92e16ff73833606989064cb48.zip
Updated padding and colors
-rw-r--r--packages/react-shared/CHANGELOG.md4
-rw-r--r--packages/react-shared/src/utils/colors.ts3
-rw-r--r--packages/website/ts/components/wallet.tsx13
3 files changed, 14 insertions, 6 deletions
diff --git a/packages/react-shared/CHANGELOG.md b/packages/react-shared/CHANGELOG.md
index 43b92d58a..bf0fb7ab1 100644
--- a/packages/react-shared/CHANGELOG.md
+++ b/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_
diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts
index 2eead95c7..ea0165305 100644
--- a/packages/react-shared/src/utils/colors.ts
+++ b/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',
};
diff --git a/packages/website/ts/components/wallet.tsx b/packages/website/ts/components/wallet.tsx
index 4e7d0776e..a3ba92ee1 100644
--- a/packages/website/ts/components/wallet.tsx
+++ b/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,
},
};