Merge pull request #314 from NastiaS/greetingsBranch

Greetings branch
7 years ago · 17f7ac1b94
7 changed files with 57 additions and 95 deletions
--- 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<Props, State> {
    }
  }

+  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<Props, State> {
  _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<Props, State> {
        <Box horizontal alignItems="flex-end">
          <Box grow>
            <Text color="dark" ff="Museo Sans" fontSize={7}>
-              {t('dashboard:greetings', { name: username })}
+              {t(timeFrame)}
            </Text>
            <Text color="grey" fontSize={5} ff="Museo Sans|Light">
              {totalAccounts > 0
--- 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<Props, State> {
  state = {
-    username: this.props.settings.username,
    isHardResetModalOpened: false,
    isPasswordModalOpened: false,
    isDisablePasswordModalOpened: false,
@ -69,16 +64,6 @@ class TabProfile extends PureComponent<Props, State> {
    })
  }

-  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<Props, State> {
  render() {
    const { t, settings } = this.props
    const {
-      username,
      isHardResetModalOpened,
      isPasswordModalOpened,
      isDisablePasswordModalOpened,
@ -127,14 +111,6 @@ class TabProfile extends PureComponent<Props, State> {
          desc="Lorem ipsum dolor sit amet"
        />
        <Body>
-          <Row title={t('settings:profile.username')} desc={t('settings:profile.usernameDesc')}>
-            <Input
-              small
-              placeholder={t('settings:profile.username')}
-              onChange={this.handleChangeUsername}
-              value={username}
-            />
-          </Row>
          <Row title={t('settings:profile.password')} desc={t('settings:profile.passwordDesc')}>
            <Box horizontal flow={2} align="center">
              {isPasswordEnabled && (
--- 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<Props, State> {

  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<Props, State> {
            <Box justifyContent="center">
              <Bar />
            </Box>
+            <Box justifyContent="center" onClick={this.navigateToSettings}>
+              <IconSettings size={16} />
            </Box>
-          <Box horizontal noShrink>
-            <DropDown
-              items={[
-                {
-                  key: 'profile',
-                  label: t('common:editProfile'),
-                  icon: <IconUser size={16} />,
-                  onClick: () => {
-                    const url = '/settings/profile'
-
-                    if (location.pathname !== url) {
-                      history.push(url)
-                    }
-                  },
-                },
-                ...(hasPassword
-                  ? [
-                      {
-                        key: 'lock',
-                        label: t('common:lockApplication'),
-                        icon: <IconUser size={16} />,
-                        onClick: this.handleLock,
-                      },
-                    ]
-                  : []),
-              ]}
-              renderItem={({ item, isHighlighted }) => (
-                <DropDownItem isHighlighted={isHighlighted}>
-                  <Box color={isHighlighted ? 'wallet' : ''}>{item.icon}</Box>
-                  <Box>{item.label}</Box>
-                </DropDownItem>
+            {hasPassword && (
+              <Fragment>
+                <Box justifyContent="center">
+                  <Bar />
+                </Box>
+                <Box justifyContent="center" onClick={this.handleLock}>
+                  <IconLock size={16} />
+                </Box>
+              </Fragment>
            )}
-              alignItems="center"
-              ff="Open Sans|SemiBold"
-              flow={1}
-              fontSize={4}
-              horizontal
-              justifyContent="center"
-              offsetTop={-2}
-            >
-              <Box>{username}</Box>
-              <IconAngleDown size={12} />
-            </DropDown>
          </Box>
        </Inner>
      </Container>
--- a/src/icons/Lock.js
+++ b/src/icons/Lock.js
@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg width={size} height={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M15 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 14.5v-7A1.5 1.5 0 0 1 2.5 6h1V4.5A4.506 4.506 0 0 1 8.012 0C10.5.006 12.5 2.056 12.5 4.544V6h1A1.5 1.5 0 0 1 15 7.5zM5 6h6V4.5c0-1.653-1.347-3-3-3s-3 1.347-3 3V6zm8.5 1.5h-11v7h11v-7z"
+    />
+  </svg>
+)
--- 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',
--- 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,
--- 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