diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index 2bf6fa32..a84a20b7 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, } @@ -112,6 +110,19 @@ class DashboardPage extends PureComponent { } } + handleGreeting = () => { + const localTimeHour = new Date().getHours() + 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' + } + handleChangeSelectedTime = item => this.setState({ selectedTime: item.key, @@ -121,9 +132,9 @@ 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 timeFrame = this.handleGreeting() const totalAccounts = accounts.length return ( @@ -131,7 +142,7 @@ class DashboardPage extends PureComponent { - {t('dashboard:greetings', { name: username })} + {t(timeFrame)} {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..9965b8a3 100644 --- a/static/i18n/en/dashboard.yml +++ b/static/i18n/en/dashboard.yml @@ -1,5 +1,8 @@ title: Dashboard -greetings: 'Good morning, {{name}}.' +greeting: + morning: "Good Morning!" + evening: "Good Evening!" + afternoon: "Good Afternoon!" summary: here is the summary of your account summary_plural: 'here is the summary of your {{count}} accounts' noAccounts: no accounts