diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-03-22 05:13:16 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-03-22 05:17:08 +0800 |
commit | a60c8f7d8c05d4d92e16ff73833606989064cb48 (patch) | |
tree | dbf90444136b1302d406aab919816596595c24b1 | |
parent | 4e5cd472c2b784ca2314eea76b1a106fd04ef0ad (diff) | |
download | dexon-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.md | 4 | ||||
-rw-r--r-- | packages/react-shared/src/utils/colors.ts | 3 | ||||
-rw-r--r-- | packages/website/ts/components/wallet.tsx | 13 |
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, }, }; |