From 1a1bfd465abf5ea19363d1a12da1cb8f8c8584b6 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 24 Sep 2018 15:20:37 +0200 Subject: [PATCH 01/29] Added default text color --- src/config/colors.js | 2 ++ src/support/BaseStyles.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/config/colors.js b/src/config/colors.js index f6f5421f..c9eb2cca 100644 --- a/src/config/colors.js +++ b/src/config/colors.js @@ -2,6 +2,8 @@ export default { WHITE: '#FFFFFF', BACKGROUND: '#EBEBEB', + TEXT: '#333333', + HEADER: '#1A1A1A', BODY: '#E3E3E3', MAIN: '#FBFBFB', diff --git a/src/support/BaseStyles.js b/src/support/BaseStyles.js index 74e21313..d6100a2a 100644 --- a/src/support/BaseStyles.js +++ b/src/support/BaseStyles.js @@ -1,4 +1,5 @@ import { injectGlobal } from 'styled-components'; +import colors from 'config/colors'; import normalize from 'styled-normalize'; const baseStyles = () => injectGlobal` @@ -11,6 +12,7 @@ const baseStyles = () => injectGlobal` font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: 14px; + color: ${colors.TEXT}; } * , *:before , *:after { From 6199ac5ef38faf9da8540a054bf9ffedb06f0948 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 24 Sep 2018 15:38:19 +0200 Subject: [PATCH 02/29] Styled divider --- .../LeftNavigation/components/CoinMenu/index.js | 3 +-- .../LeftNavigation/components/Divider/index.js | 15 +++++---------- .../components/StickyContainer/index.js | 3 --- .../Wallet/components/LeftNavigation/index.js | 3 +-- 4 files changed, 7 insertions(+), 17 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index d0859e51..578ff20b 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -44,8 +44,7 @@ class CoinMenu extends Component { {coins.map(coin => ( diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js index 0b30e28b..185a6594 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js @@ -12,20 +12,16 @@ const Wrapper = styled.div` font-size: ${FONT_SIZE.SMALLER}; color: ${colors.TEXT_SECONDARY}; background: ${colors.LANDING}; - ${props => props.borderTop && css` - border-top: 1px solid ${colors.DIVIDER}; - `} - ${props => props.borderBottom && css` - border-bottom: 1px solid ${colors.DIVIDER}; + ${props => props.hasBorder && css` + border: 1px solid ${colors.BODY}; `} `; const Divider = ({ - textLeft, textRight, borderTop = false, borderBottom = false, + textLeft, textRight, hasBorder = false, }) => (

{textLeft}

{textRight}

@@ -35,8 +31,7 @@ const Divider = ({ Divider.propTypes = { textLeft: PropTypes.string, textRight: PropTypes.string, - borderTop: PropTypes.bool, - borderBottom: PropTypes.bool, + hasBorder: PropTypes.bool, }; export default Divider; diff --git a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js index 9a360f14..def4b97d 100644 --- a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js @@ -22,11 +22,9 @@ const AsideWrapper = styled.aside` min-width: 320px; overflow: hidden; background: ${colors.MAIN}; - border-right: 1px solid ${colors.DIVIDER}; .fixed { position: fixed; - border-right: 1px solid ${colors.DIVIDER}; } .fixed-bottom { @@ -35,7 +33,6 @@ const AsideWrapper = styled.aside` position: fixed; bottom: 0; background: ${colors.MAIN}; - border-right: 1px solid ${colors.DIVIDER}; } } `; diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index ef3e79f9..ab1e5399 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -28,7 +28,6 @@ const Footer = styled.div` width: 320px; bottom: 0; background: ${colors.MAIN}; - border-right: 1px solid ${colors.DIVIDER}; `; const Body = styled.div` @@ -42,7 +41,7 @@ const Help = styled.div` text-align: center; width: 319px; padding: 8px 0px; - border-top: 1px solid ${colors.DIVIDER}; + border-top: 1px solid ${colors.BACKGROUND}; `; const A = styled.a` From f8a947e187fc8a125dafb05bae92f25192987781 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 24 Sep 2018 16:40:38 +0200 Subject: [PATCH 03/29] Padding in accounts --- src/components/DeviceHeader/index.js | 2 +- src/components/Footer/index.js | 1 + src/config/variables.js | 2 + .../components/StickyContainer/index.js | 2 + .../Wallet/components/LeftNavigation/index.js | 4 +- .../components/TopNavigationAccount/index.js | 11 +- src/views/Wallet/index.js | 2 +- .../Wallet/views/AccountReceive/index.js | 5 +- src/views/Wallet/views/AccountSend/index.js | 2 +- .../components/AccountBalance/index.js | 34 +++- .../Wallet/views/AccountSummary/index.js | 170 +++++++++--------- 11 files changed, 135 insertions(+), 100 deletions(-) diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index c47e3d3b..2b117dab 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -15,7 +15,7 @@ import colors from 'config/colors'; const Wrapper = styled.div` position: relative; - height: 64px; + height: 70px; width: 320px; display: flex; align-items: center; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index 8f19462c..2b988cba 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -16,6 +16,7 @@ const Wrapper = styled.div` color: ${colors.TEXT_SECONDARY}; padding: 22px 48px; display: flex; + border-top: 1px solid ${colors.BACKGROUND}; `; const StyledLink = styled(Link)` diff --git a/src/config/variables.js b/src/config/variables.js index 542e6986..4c900387 100644 --- a/src/config/variables.js +++ b/src/config/variables.js @@ -3,6 +3,8 @@ export const FONT_SIZE = { SMALLER: '12px', SMALL: '14px', BASE: '16px', + TOP_MENU: '17px', + BIG: '21px', BIGGER: '32px', BIGGEST: '36px', }; diff --git a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js index def4b97d..65827a9a 100644 --- a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js @@ -22,8 +22,10 @@ const AsideWrapper = styled.aside` min-width: 320px; overflow: hidden; background: ${colors.MAIN}; + border-right: 1px solid ${colors.BACKGROUND}; .fixed { + border-right: 1px solid ${colors.BACKGROUND}; position: fixed; } diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index ab1e5399..87651e1a 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -11,7 +11,9 @@ import CoinMenu from './components/CoinMenu'; import DeviceMenu from './components/DeviceMenu'; import StickyContainer from './components/StickyContainer'; -const Header = styled(DeviceHeader)``; +const Header = styled(DeviceHeader)` + border-right: 1px solid ${colors.BACKGROUND}; +`; const TransitionGroupWrapper = styled(TransitionGroup)` width: 640px; diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index 8a0c47ad..17058116 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/index.js @@ -1,5 +1,6 @@ import styled from 'styled-components'; import React from 'react'; +import { FONT_SIZE } from 'config/variables'; import { NavLink } from 'react-router-dom'; import colors from 'config/colors'; import Indicator from './components/Indicator'; @@ -7,20 +8,21 @@ import Indicator from './components/Indicator'; const Wrapper = styled.div` position: relative; display: flex; + height: 100%; flex: 1; align-items: center; justify-content: space-between; - padding: 0px 28px; + padding: 0px 30px 0 40px; max-width: 600px; `; const StyledNavLink = styled(NavLink)` font-weight: 500; - font-size: 14px; + font-size: ${FONT_SIZE.TOP_MENU}; color: ${colors.TEXT_SECONDARY}; margin: 0px 4px; padding: 20px; - + &.active, &:hover { transition: all 0.3s ease-in-out; @@ -44,8 +46,9 @@ const TopNavigationAccount = (props) => { return ( Summary - Send Receive + Send + {/* Sign & Verify */} ); diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index 07024a52..ff9777d9 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -66,7 +66,7 @@ const MainContent = styled.article` `; const Navigation = styled.nav` - height: 64px; + height: 70px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); display: flex; background: ${colors.WHITE}; diff --git a/src/views/Wallet/views/AccountReceive/index.js b/src/views/Wallet/views/AccountReceive/index.js index 412f9229..5b84484d 100644 --- a/src/views/Wallet/views/AccountReceive/index.js +++ b/src/views/Wallet/views/AccountReceive/index.js @@ -16,7 +16,10 @@ import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables'; import type { Props } from './Container'; -const Wrapper = styled.div``; +const Wrapper = styled.div` + padding-top: 20px; +`; + const StyledH2 = styled(H2)` padding: 20px 48px; `; diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index d7d2ffa3..fbeeac63 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -24,7 +24,7 @@ import type { Props } from './Container'; const SmallScreenWidth = '850px'; const Wrapper = styled.section` - padding: 0 48px; + padding: 20px 48px; `; const StyledH2 = styled(H2)` diff --git a/src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js b/src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js index 17384817..243b48d5 100644 --- a/src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js +++ b/src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js @@ -22,7 +22,7 @@ type State = { }; const Wrapper = styled.div` - padding: 0 48px 25px; + padding: 10px 0 25px 0; position: relative; display: flex; @@ -52,12 +52,31 @@ const HideBalanceIconWrapper = styled.div` `; const FiatValue = styled.div` - font-size: ${FONT_SIZE.BASE}; - font-weight: ${FONT_WEIGHT.BASE}; + font-weight: ${FONT_WEIGHT.BIGGER}; + font-size: ${FONT_SIZE.BIG}; margin: 7px 0; + min-height: 25px; color: ${colors.TEXT_PRIMARY}; `; +const FiatValueRate = styled.div` + font-weight: ${FONT_WEIGHT.BIGGER}; + font-size: ${FONT_SIZE.BASE}; + min-height: 25px; + margin: 7px 0; + display: flex; + align-items: center; + color: ${colors.TEXT_PRIMARY}; +`; + +const BalanceWrapper = styled.div` + margin-right: 48px; +`; + +const BalanceRateWrapper = styled(BalanceWrapper)` + padding-left: 50px; +`; + const CoinBalace = styled.div` font-size: ${FONT_SIZE.SMALLER}; color: ${colors.TEXT_SECONDARY}; @@ -68,9 +87,6 @@ const Label = styled.div` color: ${colors.TEXT_SECONDARY}; `; -const BalanceWrapper = styled.div` - margin-right: 48px; -`; class AccountBalance extends Component { constructor(props: Props) { @@ -125,11 +141,11 @@ class AccountBalance extends Component { {this.props.balance} {selectedCoin.symbol} {fiatRate && ( - + - ${fiatRateValue} + ${fiatRateValue} 1.00 {selectedCoin.symbol} - + )} )} diff --git a/src/views/Wallet/views/AccountSummary/index.js b/src/views/Wallet/views/AccountSummary/index.js index 0a5d6644..c22485b1 100644 --- a/src/views/Wallet/views/AccountSummary/index.js +++ b/src/views/Wallet/views/AccountSummary/index.js @@ -18,8 +18,12 @@ import AddedToken from './components/AddedToken'; import type { Props } from './Container'; +const Content = styled.div` + padding-left: 35px; +`; + const AccountHeading = styled.div` - padding: 20px 48px 20px 45px; + padding: 30px 48px 30px 0; display: flex; justify-content: space-between; align-items: center; @@ -28,7 +32,7 @@ const AccountHeading = styled.div` const H2Wrapper = styled.div` display: flex; align-items: center; - padding: 20px 48px; + padding: 20px 0; `; const StyledTooltip = styled(Tooltip)` @@ -54,7 +58,7 @@ const StyledIcon = styled(Icon)` `; const AsyncSelectWrapper = styled.div` - padding: 0px 48px 32px 48px; + padding-bottom: 32px; `; const AddedTokensWrapper = styled.div``; @@ -77,89 +81,91 @@ const AccountSummary = (props: Props) => { return ( - - - -

Account #{parseInt(account.index, 10) + 1}

-
- See full transaction history - -
+ + + + +

Account #{parseInt(account.index, 10) + 1}

+
+ See full transaction history + +
- - - -

Tokens

- - Insert token name, symbol or address to be able to send it. - - )} - > - - -
- {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */} - {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */} - - {/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */} - {/* TODO: Input's box-shadow */} - - 'Loading...'} - noOptionsMessage={() => 'Token not found'} - onChange={(token) => { - const isAdded = tokens.find(t => t.symbol === token.symbol); - if (!isAdded) { - props.addToken(token, account); - } - }} - loadOptions={input => props.loadTokens(input, account.network)} - formatOptionLabel={(option) => { - const isAdded = tokens.find(t => t.symbol === option.symbol); - if (isAdded) { - return `${option.name} (Already added)`; - } - return option.name; - }} - getOptionLabel={option => option.name} - getOptionValue={option => option.symbol} + - - - {tokens.map(token => ( - +

Tokens

+ + Insert token name, symbol or address to be able to send it. + + )} + > + + + + {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */} + {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */} + + {/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */} + {/* TODO: Input's box-shadow */} + + 'Loading...'} + noOptionsMessage={() => 'Token not found'} + onChange={(token) => { + const isAdded = tokens.find(t => t.symbol === token.symbol); + if (!isAdded) { + props.addToken(token, account); + } + }} + loadOptions={input => props.loadTokens(input, account.network)} + formatOptionLabel={(option) => { + const isAdded = tokens.find(t => t.symbol === option.symbol); + if (isAdded) { + return `${option.name} (Already added)`; + } + return option.name; + }} + getOptionLabel={option => option.name} + getOptionValue={option => option.symbol} /> - ))} -
+ + + + {tokens.map(token => ( + + ))} + +
); }; From 0ef3672a543ae728e582c7f8d2607e04a9377a43 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 24 Sep 2018 16:46:52 +0200 Subject: [PATCH 04/29] Added inputs and textarea in signandverify --- src/components/Textarea/index.js | 4 ++-- src/views/Wallet/views/AccountSignVerify/index.js | 9 ++------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 8eecff33..cdc9eb9a 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -13,7 +13,7 @@ const Wrapper = styled.div` const disabledColor = colors.TEXT_PRIMARY; -const TextArea = styled.textarea` +const StyledTextarea = styled.textarea` width: 100%; padding: 6px 12px; box-sizing: border-box; @@ -102,7 +102,7 @@ const Textarea = ({ {topLabel && ( {topLabel} )} -