From 8edb4186c7ad2b11b87110081d5fb13d886eaf34 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Wed, 2 May 2018 17:40:52 +0200 Subject: [PATCH 1/4] remove all user refs and update design of the top bar --- src/components/DashboardPage/index.js | 6 +- .../SettingsPage/sections/Profile.js | 24 ----- src/components/TopBar.js | 87 ++++++------------- src/icons/Lock.js | 12 +++ src/reducers/settings.js | 2 - src/types/common.js | 1 - static/i18n/en/dashboard.yml | 2 +- 7 files changed, 40 insertions(+), 94 deletions(-) create mode 100644 src/icons/Lock.js diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index 2bf6fa32..e8b49cac 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -36,7 +36,6 @@ import AccountCard from './AccountCard' import AccountsOrder from './AccountsOrder' const mapStateToProps = state => ({ - username: state.settings.username, accounts: getVisibleAccounts(state), counterValue: getCounterValueCode(state), settings: state.settings, @@ -53,7 +52,6 @@ type Props = { accounts: Account[], push: Function, counterValue: string, - username: string, settings: Settings, } @@ -121,7 +119,7 @@ class DashboardPage extends PureComponent { _cacheBalance = null render() { - const { push, accounts, t, counterValue, username } = this.props + const { push, accounts, t, counterValue } = this.props const { accountsChunk, selectedTime, daysCount } = this.state const totalAccounts = accounts.length @@ -131,7 +129,7 @@ class DashboardPage extends PureComponent { - {t('dashboard:greetings', { name: username })} + {t('dashboard:greetings')} {totalAccounts > 0 diff --git a/src/components/SettingsPage/sections/Profile.js b/src/components/SettingsPage/sections/Profile.js index 67f2bd19..8f210275 100644 --- a/src/components/SettingsPage/sections/Profile.js +++ b/src/components/SettingsPage/sections/Profile.js @@ -7,12 +7,9 @@ import bcrypt from 'bcryptjs' import type { Settings, T } from 'types/common' -import debounce from 'lodash/debounce' - import { unlock } from 'reducers/application' import db, { setEncryptionKey } from 'helpers/db' -import Input from 'components/base/Input' import CheckBox from 'components/base/CheckBox' import Box from 'components/base/Box' import Button from 'components/base/Button' @@ -43,12 +40,10 @@ type State = { isHardResetModalOpened: boolean, isPasswordModalOpened: boolean, isDisablePasswordModalOpened: boolean, - username: string, } class TabProfile extends PureComponent { state = { - username: this.props.settings.username, isHardResetModalOpened: false, isPasswordModalOpened: false, isDisablePasswordModalOpened: false, @@ -69,16 +64,6 @@ class TabProfile extends PureComponent { }) } - debounceSaveUsername = debounce( - v => this.props.saveSettings({ username: v.trim() || 'Anonymous' }), - 250, - ) - - handleChangeUsername = username => { - this.setState({ username }) - this.debounceSaveUsername(username) - } - handleOpenHardResetModal = () => this.setState({ isHardResetModalOpened: true }) handleCloseHardResetModal = () => this.setState({ isHardResetModalOpened: false }) handleOpenPasswordModal = () => this.setState({ isPasswordModalOpened: true }) @@ -113,7 +98,6 @@ class TabProfile extends PureComponent { render() { const { t, settings } = this.props const { - username, isHardResetModalOpened, isPasswordModalOpened, isDisablePasswordModalOpened, @@ -127,14 +111,6 @@ class TabProfile extends PureComponent { desc="Lorem ipsum dolor sit amet" /> - - - {isPasswordEnabled && ( diff --git a/src/components/TopBar.js b/src/components/TopBar.js index b67f50b0..32759d5f 100644 --- a/src/components/TopBar.js +++ b/src/components/TopBar.js @@ -1,6 +1,6 @@ // @flow -import React, { PureComponent } from 'react' +import React, { PureComponent, Fragment } from 'react' import { compose } from 'redux' import { translate } from 'react-i18next' import { connect } from 'react-redux' @@ -17,11 +17,10 @@ import { lock } from 'reducers/application' import { hasPassword } from 'reducers/settings' import IconActivity from 'icons/Activity' -import IconAngleDown from 'icons/AngleDown' import IconDevices from 'icons/Devices' -import IconUser from 'icons/User' +import IconLock from 'icons/Lock' +import IconSettings from 'icons/Settings' -import DropDown, { DropDownItem as DDItem } from 'components/base/DropDown' import Box from 'components/base/Box' import GlobalSearch from 'components/GlobalSearch' @@ -65,19 +64,7 @@ const Activity = styled.div` width: 4px; ` -const DropDownItem = styled(DDItem).attrs({ - horizontal: true, - justifyContent: 'flex-start', - alignItems: 'center', - flow: 3, - ff: 'Open Sans|SemiBold', - px: 2, -})` - height: 35px; -` - const mapStateToProps = state => ({ - username: state.settings.username, hasAccounts: getAccounts(state).length > 0, hasPassword: hasPassword(state), }) @@ -93,7 +80,6 @@ type Props = { location: Location, lock: Function, t: T, - username: string, } type State = { @@ -150,8 +136,16 @@ class TopBar extends PureComponent { handleLock = () => this.props.lock() + navigateToSettings = () => { + const { location, history } = this.props + const url = '/settings' + + if (location.pathname !== url) { + history.push(url) + } + } render() { - const { location, hasPassword, history, hasAccounts, username, t } = this.props + const { hasPassword, hasAccounts, t } = this.props const { sync } = this.state return ( @@ -169,50 +163,19 @@ class TopBar extends PureComponent { - - - , - onClick: () => { - const url = '/settings/profile' - - if (location.pathname !== url) { - history.push(url) - } - }, - }, - ...(hasPassword - ? [ - { - key: 'lock', - label: t('common:lockApplication'), - icon: , - onClick: this.handleLock, - }, - ] - : []), - ]} - renderItem={({ item, isHighlighted }) => ( - - {item.icon} - {item.label} - - )} - alignItems="center" - ff="Open Sans|SemiBold" - flow={1} - fontSize={4} - horizontal - justifyContent="center" - offsetTop={-2} - > - {username} - - + + + + {hasPassword && ( + + + + + + + + + )} diff --git a/src/icons/Lock.js b/src/icons/Lock.js new file mode 100644 index 00000000..f8633faf --- /dev/null +++ b/src/icons/Lock.js @@ -0,0 +1,12 @@ +// @flow + +import React from 'react' + +export default ({ size, ...p }: { size: number }) => ( + + + +) diff --git a/src/reducers/settings.js b/src/reducers/settings.js index 464c32b3..dd1a4b7d 100644 --- a/src/reducers/settings.js +++ b/src/reducers/settings.js @@ -9,7 +9,6 @@ import type { State } from 'reducers' export type SettingsState = { hasCompletedOnboarding: boolean, - username: string, counterValue: string, language: string, orderAccounts: string, @@ -29,7 +28,6 @@ const language = window.navigator.language.split('-')[0] const defaultState: SettingsState = { hasCompletedOnboarding: false, - username: 'Anonymous', counterValue: 'USD', language, orderAccounts: 'balance|asc', diff --git a/src/types/common.js b/src/types/common.js index e12720f8..d8eb5748 100644 --- a/src/types/common.js +++ b/src/types/common.js @@ -32,7 +32,6 @@ export type Settings = { hasCompletedOnboarding: boolean, language: string, orderAccounts: string, - username: string, counterValue: string, password: { isEnabled: boolean, diff --git a/static/i18n/en/dashboard.yml b/static/i18n/en/dashboard.yml index 463f7daf..73afd798 100644 --- a/static/i18n/en/dashboard.yml +++ b/static/i18n/en/dashboard.yml @@ -1,5 +1,5 @@ title: Dashboard -greetings: 'Good morning, {{name}}.' +greetings: 'Good morning!' summary: here is the summary of your account summary_plural: 'here is the summary of your {{count}} accounts' noAccounts: no accounts From 6becf2cfe3f06e1752dac93d52daf6d3cda8cc17 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Thu, 3 May 2018 17:06:50 +0200 Subject: [PATCH 2/4] make greetings dynamic based on the local time of user --- src/components/DashboardPage/index.js | 21 +++++++++++++++++++-- static/i18n/en/dashboard.yml | 6 +++++- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index e8b49cac..c6baa3b1 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -10,6 +10,7 @@ import { formatCurrencyUnit, getFiatCurrencyByTicker, } from '@ledgerhq/live-common/lib/helpers/currencies' +import moment from 'moment' import type { Account } from '@ledgerhq/live-common/lib/types' @@ -110,6 +111,22 @@ class DashboardPage extends PureComponent { } } + handleGreeting = () => { + const localTimeHour = new Date().getHours() + if (localTimeHour) { + const afternoon_breakpoint = 12 + const evening_breakpoint = 17 + + if (localTimeHour >= afternoon_breakpoint && localTimeHour < evening_breakpoint) { + return 'dashboard:greeting.afternoon' + } else if (localTimeHour >= evening_breakpoint) { + return 'dashboard:greeting.evening' + } + return 'dashboard:greeting.morning' + } + return '' + } + handleChangeSelectedTime = item => this.setState({ selectedTime: item.key, @@ -121,7 +138,7 @@ class DashboardPage extends PureComponent { render() { const { push, accounts, t, counterValue } = this.props const { accountsChunk, selectedTime, daysCount } = this.state - + const timeFrame = this.handleGreeting() const totalAccounts = accounts.length return ( @@ -129,7 +146,7 @@ class DashboardPage extends PureComponent { - {t('dashboard:greetings')} + {timeFrame ? t(timeFrame) : t('dashboard:defaultGreeting')} {totalAccounts > 0 diff --git a/static/i18n/en/dashboard.yml b/static/i18n/en/dashboard.yml index 73afd798..688ebf3c 100644 --- a/static/i18n/en/dashboard.yml +++ b/static/i18n/en/dashboard.yml @@ -1,5 +1,9 @@ title: Dashboard -greetings: 'Good morning!' +greeting: + morning: "Good Morning!" + evening: "Good Evening!" + afternoon: "Good Afternoon!" +defaultGreeting: 'Greetings!' summary: here is the summary of your account summary_plural: 'here is the summary of your {{count}} accounts' noAccounts: no accounts From 8a89e27d17cc249ac69663df54d20b5cdfe92432 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Thu, 3 May 2018 17:08:14 +0200 Subject: [PATCH 3/4] remove not needed dependancy --- src/components/DashboardPage/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index c6baa3b1..e7c4353d 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -10,7 +10,6 @@ import { formatCurrencyUnit, getFiatCurrencyByTicker, } from '@ledgerhq/live-common/lib/helpers/currencies' -import moment from 'moment' import type { Account } from '@ledgerhq/live-common/lib/types' From cd87867285ab1e4bc02777dba33d7e9a8a3dea1a Mon Sep 17 00:00:00 2001 From: NastiaS Date: Thu, 3 May 2018 17:26:15 +0200 Subject: [PATCH 4/4] remove default greetings per comment --- src/components/DashboardPage/index.js | 21 +++++++++------------ static/i18n/en/dashboard.yml | 1 - 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index e7c4353d..a84a20b7 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -112,18 +112,15 @@ class DashboardPage extends PureComponent { handleGreeting = () => { const localTimeHour = new Date().getHours() - if (localTimeHour) { - const afternoon_breakpoint = 12 - const evening_breakpoint = 17 - - if (localTimeHour >= afternoon_breakpoint && localTimeHour < evening_breakpoint) { - return 'dashboard:greeting.afternoon' - } else if (localTimeHour >= evening_breakpoint) { - return 'dashboard:greeting.evening' - } - return 'dashboard:greeting.morning' + const afternoon_breakpoint = 12 + const evening_breakpoint = 17 + + if (localTimeHour >= afternoon_breakpoint && localTimeHour < evening_breakpoint) { + return 'dashboard:greeting.afternoon' + } else if (localTimeHour >= evening_breakpoint) { + return 'dashboard:greeting.evening' } - return '' + return 'dashboard:greeting.morning' } handleChangeSelectedTime = item => @@ -145,7 +142,7 @@ class DashboardPage extends PureComponent { - {timeFrame ? t(timeFrame) : t('dashboard:defaultGreeting')} + {t(timeFrame)} {totalAccounts > 0 diff --git a/static/i18n/en/dashboard.yml b/static/i18n/en/dashboard.yml index 688ebf3c..9965b8a3 100644 --- a/static/i18n/en/dashboard.yml +++ b/static/i18n/en/dashboard.yml @@ -3,7 +3,6 @@ greeting: morning: "Good Morning!" evening: "Good Evening!" afternoon: "Good Afternoon!" -defaultGreeting: 'Greetings!' summary: here is the summary of your account summary_plural: 'here is the summary of your {{count}} accounts' noAccounts: no accounts