From 298bcdf54675a437a08a3f73287f651834ecc0cc Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 10 Jan 2019 17:28:39 +0100 Subject: [PATCH 1/4] generate lighter color for token icons --- .../Wallet/views/Account/Summary/components/Token/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/views/Account/Summary/components/Token/index.js b/src/views/Wallet/views/Account/Summary/components/Token/index.js index 11c616a8..4c699325 100644 --- a/src/views/Wallet/views/Account/Summary/components/Token/index.js +++ b/src/views/Wallet/views/Account/Summary/components/Token/index.js @@ -58,8 +58,8 @@ class AddedToken extends PureComponent { } render() { - const bgColor = new ColorHash({ lightness: 0.16 }); - const textColor = new ColorHash(); + const bgColor = new ColorHash({ lightness: 0.9 }); + const textColor = new ColorHash({ lightness: 0.3, saturation: 1 }); return ( From 21c67c060ee397f2f2f019aed734d803ab89bb3d Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 10 Jan 2019 18:30:10 +0100 Subject: [PATCH 2/4] follow design guidelines --- .../Account/Summary/components/Token/index.js | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/views/Wallet/views/Account/Summary/components/Token/index.js b/src/views/Wallet/views/Account/Summary/components/Token/index.js index 4c699325..00736200 100644 --- a/src/views/Wallet/views/Account/Summary/components/Token/index.js +++ b/src/views/Wallet/views/Account/Summary/components/Token/index.js @@ -3,6 +3,7 @@ import styled from 'styled-components'; import ColorHash from 'color-hash'; import ScaleText from 'react-scale-text'; import colors from 'config/colors'; +import { FONT_WEIGHT } from 'config/variables'; import Button from 'components/Button'; import Icon from 'components/Icon'; import ICONS from 'config/icons'; @@ -39,12 +40,26 @@ const P = styled.p` color: inherit; `; -const TokenName = styled.div` - flex: 1; +const TokenText = styled.div` + font-weight: ${FONT_WEIGHT.MEDIUM}; color: ${colors.TEXT_SECONDARY}; `; -const TokenBalance = styled.div``; +const TokenName = styled(TokenText)` + flex: 0 0 0; + padding-right: 5px; +`; + +const TokenSymbol = styled(TokenText)` + flex: 0 0 0; +`; + +const TokenBalance = styled(TokenText)` + flex: 1 0 0; + overflow: hidden; + text-overflow: ellipsis; + text-align: right; +`; const RemoveTokenButton = styled(Button)` padding: 0 0 0 10px; @@ -73,7 +88,8 @@ class AddedToken extends PureComponent { {this.props.token.name} - {this.getTokenBalance(this.props.token)} {this.props.token.symbol} + {this.getTokenBalance(this.props.token)} +  {this.props.token.symbol} this.props.removeToken(this.props.token)} From 2ca219414aa4ad2ff80fb1bba643977eaceffeb7 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 10 Jan 2019 18:39:28 +0100 Subject: [PATCH 3/4] break token balance to more lines instead of truncating --- .../Wallet/views/Account/Summary/components/Token/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/views/Wallet/views/Account/Summary/components/Token/index.js b/src/views/Wallet/views/Account/Summary/components/Token/index.js index 00736200..8251e405 100644 --- a/src/views/Wallet/views/Account/Summary/components/Token/index.js +++ b/src/views/Wallet/views/Account/Summary/components/Token/index.js @@ -56,8 +56,7 @@ const TokenSymbol = styled(TokenText)` const TokenBalance = styled(TokenText)` flex: 1 0 0; - overflow: hidden; - text-overflow: ellipsis; + word-break: break-all; text-align: right; `; From fb0f0c0c6942ceed3fbd48bbc2ccdb9e21f3f320 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 10 Jan 2019 18:43:29 +0100 Subject: [PATCH 4/4] cleanup --- .../Wallet/views/Account/Summary/components/Token/index.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/views/Wallet/views/Account/Summary/components/Token/index.js b/src/views/Wallet/views/Account/Summary/components/Token/index.js index 8251e405..4999b447 100644 --- a/src/views/Wallet/views/Account/Summary/components/Token/index.js +++ b/src/views/Wallet/views/Account/Summary/components/Token/index.js @@ -50,10 +50,6 @@ const TokenName = styled(TokenText)` padding-right: 5px; `; -const TokenSymbol = styled(TokenText)` - flex: 0 0 0; -`; - const TokenBalance = styled(TokenText)` flex: 1 0 0; word-break: break-all; @@ -87,8 +83,7 @@ class AddedToken extends PureComponent { {this.props.token.name} - {this.getTokenBalance(this.props.token)} -  {this.props.token.symbol} + {this.getTokenBalance(this.props.token)} {this.props.token.symbol} this.props.removeToken(this.props.token)}