From 0b3f75e0962fa8d4a3f2fac5b5f3e66ee9ead66e Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 11:37:08 +0200 Subject: [PATCH 01/10] Focus state for Button outline --- src/components/base/Button/index.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js index ec4b822f..4a621b83 100644 --- a/src/components/base/Button/index.js +++ b/src/components/base/Button/index.js @@ -69,15 +69,23 @@ const buttonStyles: { [_: string]: Style } = { `, }, outline: { - default: p => ` - background: transparent; - border: 1px solid ${ - p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet - }; - color: ${ - p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet - }; - `, + default: p => { + const c = p.outlineColor + ? p.theme.colors[p.outlineColor] || p.outlineColor + : p.theme.colors.wallet + return ` + background: transparent; + border: 1px solid ${c}; + color: ${c}; + box-shadow: ${ + p.isFocused + ? ` + 0 0 0 1px ${darken(c, 0.3)} inset, + 0 0 0 4px ${rgba(c, 0.3)};` + : '' + } + ` + }, active: p => ` color: ${darken( p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet, From 7ebbf5c85e3035d9b532aed59035ae5b01ff5232 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 11:55:22 +0200 Subject: [PATCH 02/10] Update button focus & outline button style --- src/components/base/Button/index.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js index 4a621b83..1750a8a1 100644 --- a/src/components/base/Button/index.js +++ b/src/components/base/Button/index.js @@ -36,7 +36,7 @@ const buttonStyles: { [_: string]: Style } = { ? ` 0 0 0 1px ${darken(p.theme.colors.wallet, 0.3)} inset, 0 0 0 1px ${rgba(p.theme.colors.wallet, 0.5)}, - 0 0 0 4px ${rgba(p.theme.colors.wallet, 0.3)};` + 0 0 0 3px ${rgba(p.theme.colors.wallet, 0.3)};` : '' } `, @@ -56,7 +56,7 @@ const buttonStyles: { [_: string]: Style } = { ? ` 0 0 0 1px ${darken(p.theme.colors.alertRed, 0.3)} inset, 0 0 0 1px ${rgba(p.theme.colors.alertRed, 0.5)}, - 0 0 0 4px ${rgba(p.theme.colors.alertRed, 0.3)}; + 0 0 0 3px ${rgba(p.theme.colors.alertRed, 0.3)}; ` : '' } @@ -80,12 +80,19 @@ const buttonStyles: { [_: string]: Style } = { box-shadow: ${ p.isFocused ? ` - 0 0 0 1px ${darken(c, 0.3)} inset, - 0 0 0 4px ${rgba(c, 0.3)};` + 0 0 0 3px ${rgba(c, 0.3)};` : '' } ` }, + hover: p => { + const c = p.outlineColor + ? p.theme.colors[p.outlineColor] || p.outlineColor + : p.theme.colors.wallet + return ` + background: ${rgba(c, 0.1)}; + ` + }, active: p => ` color: ${darken( p.outlineColor ? p.theme.colors[p.outlineColor] || p.outlineColor : p.theme.colors.wallet, From 883703b8e3946f795552b68aab9022dc528181c2 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 12:04:29 +0200 Subject: [PATCH 03/10] Add arrow for add account empty state --- src/components/MainSideBar/index.js | 10 +++++++++- src/components/base/SideBar/SideBarList.js | 10 +++++----- static/images/arrow-add.svg | 14 ++++++++++++++ 3 files changed, 28 insertions(+), 6 deletions(-) create mode 100644 static/images/arrow-add.svg diff --git a/src/components/MainSideBar/index.js b/src/components/MainSideBar/index.js index 63f83a84..5196c0b2 100644 --- a/src/components/MainSideBar/index.js +++ b/src/components/MainSideBar/index.js @@ -15,6 +15,7 @@ import type { UpdateStatus } from 'reducers/update' import { MODAL_RECEIVE, MODAL_SEND, MODAL_ADD_ACCOUNTS } from 'config/constants' +import { i } from 'helpers/staticPath' import { accountsSelector } from 'reducers/accounts' import { openModal } from 'reducers/modals' import { getUpdateStatus } from 'reducers/update' @@ -65,6 +66,13 @@ class MainSideBar extends PureComponent { push(to) } + ADD_ACCOUNT_EMPTY_STATE = ( + + + {this.props.t('app:emptyState.sidebar.text')} + + ) + handleClickDashboard = () => this.push('/') handleOpenSendModal = () => this.props.openModal(MODAL_SEND) handleOpenReceiveModal = () => this.props.openModal(MODAL_RECEIVE) @@ -130,7 +138,7 @@ class MainSideBar extends PureComponent { {accounts.map(account => ( { render() { - const { children, title, scroll, titleRight, emptyText, ...props } = this.props + const { children, title, scroll, titleRight, emptyState, ...props } = this.props const ListWrapper = scroll ? GrowScroll : Box return ( @@ -34,9 +34,9 @@ class SideBarList extends Component { {children} - ) : emptyText ? ( + ) : emptyState ? ( - {emptyText} + {emptyState} ) : null} diff --git a/static/images/arrow-add.svg b/static/images/arrow-add.svg new file mode 100644 index 00000000..c2858c40 --- /dev/null +++ b/static/images/arrow-add.svg @@ -0,0 +1,14 @@ + + + + fleche + Created with Sketch. + + + + + + + + + \ No newline at end of file From cf1f027e20e64ce77657dcade43cce8e77166f78 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 12:11:39 +0200 Subject: [PATCH 04/10] Update device interaction style --- src/components/DeviceInteraction/components.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/DeviceInteraction/components.js b/src/components/DeviceInteraction/components.js index 10a6bcb3..0e60f771 100644 --- a/src/components/DeviceInteraction/components.js +++ b/src/components/DeviceInteraction/components.js @@ -4,7 +4,6 @@ import React from 'react' import styled from 'styled-components' import { radii } from 'styles/theme' -import { rgba } from 'styles/helpers' import TranslatedError from 'components/TranslatedError' import Box from 'components/base/Box' @@ -18,7 +17,6 @@ export const DeviceInteractionStepContainer = styled(Box).attrs({ horizontal: true, ff: 'Open Sans', fontSize: 3, - bg: 'white', color: 'graphite', })` position: relative; @@ -27,19 +25,13 @@ export const DeviceInteractionStepContainer = styled(Box).attrs({ min-height: 80px; border: 1px solid ${p => p.theme.colors.fog}; border-color: ${p => - p.isError ? p.theme.colors.alertRed : p.isActive || p.isSuccess ? p.theme.colors.wallet : ''}; + p.isError ? p.theme.colors.alertRed : p.isActive && !p.isFinished ? p.theme.colors.wallet : ''}; border-top-color: ${p => (p.isFirst || p.isActive ? '' : 'transparent')}; border-bottom-color: ${p => (p.isPrecedentActive ? 'transparent' : '')}; border-bottom-left-radius: ${p => (p.isLast ? `${radii[1]}px` : 0)}; border-bottom-right-radius: ${p => (p.isLast ? `${radii[1]}px` : 0)}; border-top-left-radius: ${p => (p.isFirst ? `${radii[1]}px` : 0)}; border-top-right-radius: ${p => (p.isFirst ? `${radii[1]}px` : 0)}; - box-shadow: ${p => - p.isActive && !p.isSuccess - ? ` - ${rgba(p.isError ? p.theme.colors.alertRed : p.theme.colors.wallet, 0.2)} 0 0 3px 2px - ` - : 'none'}; ` export const IconContainer = ({ From 225524b497de285eef4286138ececd958c697db0 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 17:04:29 +0200 Subject: [PATCH 05/10] Update DeviceInteraction icons style --- .../DeviceInteraction/components.js | 20 ++++++++++-- src/components/EnsureDeviceApp.js | 4 +-- src/components/GenuineCheck.js | 8 ++--- src/icons/GenuineCheck.js | 32 ------------------- src/icons/Home.js | 20 +++--------- src/icons/SmoothBorders.js | 18 +++++++++++ src/icons/Usb.js | 23 ++++--------- 7 files changed, 53 insertions(+), 72 deletions(-) delete mode 100644 src/icons/GenuineCheck.js create mode 100644 src/icons/SmoothBorders.js diff --git a/src/components/DeviceInteraction/components.js b/src/components/DeviceInteraction/components.js index 0e60f771..a81e425f 100644 --- a/src/components/DeviceInteraction/components.js +++ b/src/components/DeviceInteraction/components.js @@ -12,6 +12,7 @@ import Spinner from 'components/base/Spinner' import IconCheck from 'icons/Check' import IconCross from 'icons/Cross' import IconExclamationCircle from 'icons/ExclamationCircle' +import IconSmoothBorders from 'icons/SmoothBorders' export const DeviceInteractionStepContainer = styled(Box).attrs({ horizontal: true, @@ -34,6 +35,19 @@ export const DeviceInteractionStepContainer = styled(Box).attrs({ border-top-right-radius: ${p => (p.isFirst ? `${radii[1]}px` : 0)}; ` +const AbsCenter = styled.div` + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; +` + +const smoothBorders = + export const IconContainer = ({ children, isTransparent, @@ -42,15 +56,15 @@ export const IconContainer = ({ isTransparent: boolean, }) => ( - {children} + {smoothBorders} + {children} ) diff --git a/src/components/EnsureDeviceApp.js b/src/components/EnsureDeviceApp.js index 23385b67..edbc3f7e 100644 --- a/src/components/EnsureDeviceApp.js +++ b/src/components/EnsureDeviceApp.js @@ -27,7 +27,7 @@ import { getCurrentDevice } from 'reducers/devices' export const WrongAppOpened = createCustomErrorClass('WrongAppOpened') export const WrongDeviceForAccount = createCustomErrorClass('WrongDeviceForAccount') -const usbIcon = +const usbIcon = const Bold = props => const mapStateToProps = state => ({ @@ -107,7 +107,7 @@ class EnsureDeviceApp extends Component<{ { id: 'address', title: this.renderOpenAppTitle, - icon: Icon ? : null, + icon: Icon ? : null, run: this.openAppInteractionHandler, }, ]} diff --git a/src/components/GenuineCheck.js b/src/components/GenuineCheck.js index e1f8e2bc..f00a0e8e 100644 --- a/src/components/GenuineCheck.js +++ b/src/components/GenuineCheck.js @@ -24,7 +24,7 @@ import Text from 'components/base/Text' import IconUsb from 'icons/Usb' import IconHome from 'icons/Home' -import IconGenuineCheck from 'icons/GenuineCheck' +import IconCheck from 'icons/Check' const DeviceNotGenuineError = createCustomErrorClass('DeviceNotGenuine') @@ -36,9 +36,9 @@ type Props = { device: ?Device, } -const usbIcon = -const homeIcon = -const genuineCheckIcon = +const usbIcon = +const homeIcon = +const genuineCheckIcon = const mapStateToProps = state => ({ device: getCurrentDevice(state), diff --git a/src/icons/GenuineCheck.js b/src/icons/GenuineCheck.js deleted file mode 100644 index 791c0ff4..00000000 --- a/src/icons/GenuineCheck.js +++ /dev/null @@ -1,32 +0,0 @@ -// @flow - -import React, { Fragment } from 'react' - -const path = ( - - - - -) - -export default ({ size, ...p }: { size: number }) => ( - - {path} - -) diff --git a/src/icons/Home.js b/src/icons/Home.js index cc38981f..4c4b509e 100644 --- a/src/icons/Home.js +++ b/src/icons/Home.js @@ -4,29 +4,19 @@ import React, { Fragment } from 'react' const path = ( - ) export default ({ size, ...p }: { size: number }) => ( - + {path} ) diff --git a/src/icons/SmoothBorders.js b/src/icons/SmoothBorders.js new file mode 100644 index 00000000..e69e67e2 --- /dev/null +++ b/src/icons/SmoothBorders.js @@ -0,0 +1,18 @@ +// @flow + +import React from 'react' + +const inner = ( + +) + +export default ({ size, ...p }: { size: number }) => ( + + {inner} + +) diff --git a/src/icons/Usb.js b/src/icons/Usb.js index 45be58c8..32870e01 100644 --- a/src/icons/Usb.js +++ b/src/icons/Usb.js @@ -2,24 +2,15 @@ import React from 'react' -const group = ( - - - - +const inner = ( + ) export default ({ size, ...p }: { size: number }) => ( - - {group} + + {inner} ) From 6c5274fd3cc923f27195e8fdd8530da180123a49 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 18:22:37 +0200 Subject: [PATCH 06/10] Fix modals gradient box hiding the modal footer border --- src/components/GradientBox.js | 4 ++-- src/components/modals/OperationDetails.js | 2 +- src/components/modals/ReleaseNotes.js | 2 +- src/components/modals/UpdateFirmware/Disclaimer.js | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/GradientBox.js b/src/components/GradientBox.js index dc637006..1c928be9 100644 --- a/src/components/GradientBox.js +++ b/src/components/GradientBox.js @@ -5,10 +5,10 @@ export default styled.div` width: 100%; height: 60px; position: absolute; - bottom: 68px; + bottom: 0; left: 0; right: 0; - background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%); + background: linear-gradient(rgba(255, 255, 255, 0), #ffffff); z-index: 2; pointer-events: none; ` diff --git a/src/components/modals/OperationDetails.js b/src/components/modals/OperationDetails.js index 7fd95721..f3ee4618 100644 --- a/src/components/modals/OperationDetails.js +++ b/src/components/modals/OperationDetails.js @@ -129,7 +129,7 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => { return ( {t('app:operationDetails.title')} - + diff --git a/src/components/modals/ReleaseNotes.js b/src/components/modals/ReleaseNotes.js index 37e7b35c..28abeb41 100644 --- a/src/components/modals/ReleaseNotes.js +++ b/src/components/modals/ReleaseNotes.js @@ -221,7 +221,7 @@ class ReleaseNotes extends PureComponent { return ( {t('app:releaseNotes.title')} - + {content} diff --git a/src/components/modals/UpdateFirmware/Disclaimer.js b/src/components/modals/UpdateFirmware/Disclaimer.js index 330795eb..532410ce 100644 --- a/src/components/modals/UpdateFirmware/Disclaimer.js +++ b/src/components/modals/UpdateFirmware/Disclaimer.js @@ -58,8 +58,8 @@ class DisclaimerModal extends PureComponent { {t('app:manager.firmware.disclaimerAppReinstall')} - - + + {firmware.notes} From fc53f28b746eabad317037803d39d640b1fdfe97 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 18:29:30 +0200 Subject: [PATCH 07/10] Polishe the Exchanges page --- src/components/ExchangePage/index.js | 6 +++--- src/components/ManagerPage/AppsList.js | 4 ++-- src/components/ManagerPage/Dashboard.js | 2 +- src/components/ManagerPage/ManagerGenuineCheck.js | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/ExchangePage/index.js b/src/components/ExchangePage/index.js index fb92fbb0..f3b770fc 100644 --- a/src/components/ExchangePage/index.js +++ b/src/components/ExchangePage/index.js @@ -44,13 +44,13 @@ class ExchangePage extends PureComponent { return ( - + {t('app:exchange.title')} - + {t('app:exchange.desc')} - {cards.map(card => )} + {cards.map(card => )} ) } diff --git a/src/components/ManagerPage/AppsList.js b/src/components/ManagerPage/AppsList.js index 8b8efd9f..22390ec3 100644 --- a/src/components/ManagerPage/AppsList.js +++ b/src/components/ManagerPage/AppsList.js @@ -205,7 +205,7 @@ class AppsList extends PureComponent { { ( - + {t('app:manager.title')} diff --git a/src/components/ManagerPage/ManagerGenuineCheck.js b/src/components/ManagerPage/ManagerGenuineCheck.js index 8b7effc3..a5255073 100644 --- a/src/components/ManagerPage/ManagerGenuineCheck.js +++ b/src/components/ManagerPage/ManagerGenuineCheck.js @@ -31,7 +31,7 @@ class ManagerGenuineCheck extends PureComponent { alt="connect your device" style={{ marginBottom: 30, maxWidth: 362, width: '100%' }} /> - + {t('app:manager.device.title')} From 31f217af25f1893b7fa126050b5814c0fd2feb7a Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 18:38:30 +0200 Subject: [PATCH 08/10] Update font-weight and icon styles of DeviceInteraction --- src/components/DeviceInteraction/DeviceInteractionStep.js | 2 +- src/components/EnsureDeviceApp.js | 6 +++--- src/components/GenuineCheck.js | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/DeviceInteraction/DeviceInteractionStep.js b/src/components/DeviceInteraction/DeviceInteractionStep.js index 3ba0fb8a..3e4a3ce5 100644 --- a/src/components/DeviceInteraction/DeviceInteractionStep.js +++ b/src/components/DeviceInteraction/DeviceInteractionStep.js @@ -180,7 +180,7 @@ class DeviceInteractionStep extends PureComponent< {step.icon} {title && ( - + {title} )} diff --git a/src/components/EnsureDeviceApp.js b/src/components/EnsureDeviceApp.js index edbc3f7e..c63caa6b 100644 --- a/src/components/EnsureDeviceApp.js +++ b/src/components/EnsureDeviceApp.js @@ -27,8 +27,8 @@ import { getCurrentDevice } from 'reducers/devices' export const WrongAppOpened = createCustomErrorClass('WrongAppOpened') export const WrongDeviceForAccount = createCustomErrorClass('WrongDeviceForAccount') -const usbIcon = -const Bold = props => +const usbIcon = +const Bold = props => const mapStateToProps = state => ({ device: getCurrentDevice(state), @@ -107,7 +107,7 @@ class EnsureDeviceApp extends Component<{ { id: 'address', title: this.renderOpenAppTitle, - icon: Icon ? : null, + icon: Icon ? : null, run: this.openAppInteractionHandler, }, ]} diff --git a/src/components/GenuineCheck.js b/src/components/GenuineCheck.js index f00a0e8e..1e3f04af 100644 --- a/src/components/GenuineCheck.js +++ b/src/components/GenuineCheck.js @@ -36,15 +36,15 @@ type Props = { device: ?Device, } -const usbIcon = -const homeIcon = -const genuineCheckIcon = +const usbIcon = +const homeIcon = +const genuineCheckIcon = const mapStateToProps = state => ({ device: getCurrentDevice(state), }) -const Bold = props => +const Bold = props => // to speed up genuine check, cache result by device id const genuineDevices = new WeakSet() From fbefd8f844320ff21f470035a8915257cd674208 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 18:42:59 +0200 Subject: [PATCH 09/10] Max-width on settings rows --- src/components/SettingsPage/SettingsSection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SettingsPage/SettingsSection.js b/src/components/SettingsPage/SettingsSection.js index acd1f44b..03d9678c 100644 --- a/src/components/SettingsPage/SettingsSection.js +++ b/src/components/SettingsPage/SettingsSection.js @@ -106,7 +106,7 @@ export function SettingsSectionRow({ {title} - + {desc} From cf17e829f061b421ded4750ce5fbcf4afd177d4d Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 3 Jul 2018 18:47:21 +0200 Subject: [PATCH 10/10] Display text next to spinner in add account modal import step --- .../modals/AddAccounts/steps/03-step-import.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/modals/AddAccounts/steps/03-step-import.js b/src/components/modals/AddAccounts/steps/03-step-import.js index b84586cc..b74046fa 100644 --- a/src/components/modals/AddAccounts/steps/03-step-import.js +++ b/src/components/modals/AddAccounts/steps/03-step-import.js @@ -15,9 +15,9 @@ import CurrencyBadge from 'components/base/CurrencyBadge' import Button from 'components/base/Button' import AccountsList from 'components/base/AccountsList' import IconExclamationCircleThin from 'icons/ExclamationCircleThin' -import TranslatedError from '../../../TranslatedError' -import Spinner from '../../../base/Spinner' -import Text from '../../../base/Text' +import TranslatedError from 'components/TranslatedError' +import Spinner from 'components/base/Spinner' +import Text from 'components/base/Text' import type { StepProps } from '../index' @@ -281,6 +281,9 @@ class StepImport extends PureComponent { {scanStatus === 'scanning' ? ( + + {t('app:common.sync.syncing')} + ) : null}