Integrate the new settings design

7 years ago · 01313f5065
16 changed files with 452 additions and 377 deletions
--- a/src/components/SettingsPage/Display.js
+++ b/src/components/SettingsPage/Display.js
@ -1,98 +0,0 @@
 // @flow
 import React, { PureComponent } from 'react'
 import type { SettingsDisplay, T } from 'types/common'
 import Box, { Card } from 'components/base/Box'
 import Button from 'components/base/Button'
 import Label from 'components/base/Label'
 import Select from 'components/base/Select'
 type InputValue = SettingsDisplay
 type Props = {
  t: T,
  settings: SettingsDisplay,
  onSaveSettings: Function,
 }
 type State = {
  inputValue: InputValue,
 }
 class TabProfile extends PureComponent<Props, State> {
  state = {
    inputValue: {
      language: this.props.settings.language,
    },
  }
  getDatas() {
    const { t } = this.props
    return {
      languages: [
        {
          key: 'en',
          name: t('language:en'),
        },
        {
          key: 'fr',
          name: t('language:fr'),
        },
      ],
    }
  }
  handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
    this.setState(prev => ({
      inputValue: {
        ...prev.inputValue,
        [key]: value,
      },
    }))
  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault()
    const { onSaveSettings } = this.props
    const { inputValue } = this.state
    onSaveSettings({
      ...inputValue,
    })
  }
  render() {
    const { t } = this.props
    const { inputValue } = this.state
    const { languages } = this.getDatas()
    const currentLanguage = languages.find(l => l.key === inputValue.language)
    return (
      <form onSubmit={this.handleSubmit}>
        <Card flow={3}>
          <Box flow={1}>
            <Label>{t('settings:display.language')}</Label>
            <Select
              onChange={item => this.handleChangeInput('language')(item.key)}
              renderSelected={item => item && item.name}
              value={currentLanguage}
              items={languages}
            />
          </Box>
          <Box horizontal justifyContent="flex-end">
            <Button primary type="submit">
              {t('common:save')}
            </Button>
          </Box>
        </Card>
      </form>
    )
  }
 }
 export default TabProfile
--- a/src/components/SettingsPage/Money.js
+++ b/src/components/SettingsPage/Money.js
@ -1,88 +0,0 @@
 // @flow
 import React, { PureComponent } from 'react'
 import { getFiatUnit } from '@ledgerhq/currencies'
 import type { SettingsMoney, T } from 'types/common'
 import Box, { Card } from 'components/base/Box'
 import Button from 'components/base/Button'
 import Label from 'components/base/Label'
 import Select from 'components/base/Select'
 const counterValues = ['USD', 'EUR', 'JPY', 'GBP'].sort().map(c => {
  const { name } = getFiatUnit(c)
  return {
    key: c,
    name,
  }
 })
 type InputValue = SettingsMoney
 type Props = {
  t: T,
  settings: SettingsMoney,
  onSaveSettings: Function,
 }
 type State = {
  inputValue: InputValue,
 }
 class TabProfile extends PureComponent<Props, State> {
  state = {
    inputValue: {
      counterValue: this.props.settings.counterValue,
    },
  }
  handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
    this.setState(prev => ({
      inputValue: {
        ...prev.inputValue,
        [key]: value,
      },
    }))
  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault()
    const { onSaveSettings } = this.props
    const { inputValue } = this.state
    onSaveSettings({
      ...inputValue,
    })
  }
  render() {
    const { t } = this.props
    const { inputValue } = this.state
    const currentCounterValues = counterValues.find(l => l.key === inputValue.counterValue)
    return (
      <form onSubmit={this.handleSubmit}>
        <Card flow={3}>
          <Box flow={1}>
            <Label>{t('settings:display.counterValue')}</Label>
            <Select
              onChange={item => this.handleChangeInput('counterValue')(item.key)}
              renderSelected={item => item && item.name}
              value={currentCounterValues}
              items={counterValues}
            />
          </Box>
          <Box horizontal justifyContent="flex-end">
            <Button primary type="submit">
              {t('common:save')}
            </Button>
          </Box>
        </Card>
      </form>
    )
  }
 }
 export default TabProfile
--- a/src/components/SettingsPage/Profile.js
+++ b/src/components/SettingsPage/Profile.js
@ -1,124 +0,0 @@
 // @flow
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import bcrypt from 'bcryptjs'
 import get from 'lodash/get'
 import set from 'lodash/set'
 import { setEncryptionKey } from 'helpers/db'
 import type { SettingsProfile, T } from 'types/common'
 import { unlock } from 'reducers/application'
 import Box, { Card } from 'components/base/Box'
 import Input from 'components/base/Input'
 import CheckBox from 'components/base/CheckBox'
 import Button from 'components/base/Button'
 import Label from 'components/base/Label'
 type InputValue = SettingsProfile
 type Props = {
  t: T,
  settings: SettingsProfile,
  onSaveSettings: Function,
  unlock: Function,
 }
 type State = {
  inputValue: InputValue,
 }
 const mapDispatchToProps = {
  unlock,
 }
 class TabProfile extends PureComponent<Props, State> {
  state = {
    inputValue: {
      password: {
        ...this.props.settings.password,
        value: undefined,
      },
    },
  }
  handleChangeInput = (key: string) => (value: $Values<InputValue>) =>
    this.setState(prev => ({
      inputValue: {
        ...set(prev.inputValue, key, value),
      },
    }))
  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault()
    const { onSaveSettings, unlock } = this.props
    const { inputValue } = this.state
    const settings = {
      ...inputValue,
      password: {
        ...inputValue.password,
        value: '',
      },
    }
    const password = get(inputValue, 'password', {})
    if (password.state === true && password.value.trim() !== '') {
      settings.password.value = bcrypt.hashSync(password.value, 8)
      setEncryptionKey('accounts', password.value)
    } else {
      setEncryptionKey('accounts', undefined)
    }
    unlock()
    onSaveSettings(settings)
  }
  render() {
    const { t } = this.props
    const { inputValue } = this.state
    const isPasswordChecked = get(inputValue, 'password.state', false)
    return (
      <form onSubmit={this.handleSubmit}>
        <Card flow={3}>
          <label>
            <Box
              horizontal
              alignItems="center"
              flow={2}
              style={{ cursor: 'pointer' }}
              onClick={() => this.handleChangeInput('password.state')(!isPasswordChecked)}
            >
              <CheckBox isChecked={isPasswordChecked} />
              <div>{t('settings:profile.protectWithPassword')}</div>
            </Box>
          </label>
          {get(inputValue, 'password.state') === true && (
            <Box flow={1}>
              <Label>{t('settings:profile.password')}</Label>
              <Input
                value={get(inputValue, 'password.value', '')}
                onChange={this.handleChangeInput('password.value')}
                type="password"
              />
            </Box>
          )}
          <Box horizontal justifyContent="flex-end">
            <Button primary type="submit">
              {t('common:save')}
            </Button>
          </Box>
        </Card>
      </form>
    )
  }
 }
 export default connect(null, mapDispatchToProps)(TabProfile)
--- a/src/components/SettingsPage/SettingsSection.js
+++ b/src/components/SettingsPage/SettingsSection.js
@ -0,0 +1,95 @@
 // @flow
 import React from 'react'
 import styled from 'styled-components'
 import { rgba } from 'styles/helpers'
 import Box, { Card } from 'components/base/Box'
 export const SettingsSection = styled(Card).attrs({ p: 0 })``
 const SettingsSectionHeaderContainer = styled(Box).attrs({
  p: 4,
  horizontal: true,
  align: 'center',
 })`
  border-bottom: 1px solid ${p => p.theme.colors.lightFog};
  line-height: normal;
 `
 const RoundIconContainer = styled(Box).attrs({
  align: 'center',
  justify: 'center',
  bg: p => rgba(p.theme.colors.wallet, 0.2),
  color: 'wallet',
 })`
  height: 30px;
  width: 30px;
  border-radius: 50%;
 `
 export const SettingsSectionBody = styled(Box)`
  > * + * {
    border-top: 1px solid ${p => p.theme.colors.lightFog};
  }
 `
 export function SettingsSectionHeader({
  title,
  desc,
  icon,
 }: {
  title: string,
  desc: string,
  icon: any,
 }) {
  return (
    <SettingsSectionHeaderContainer>
      <RoundIconContainer mr={3}>{icon}</RoundIconContainer>
      <Box>
        <Box ff="Museo Sans|Regular" color="dark">
          {title}
        </Box>
        <Box ff="Open Sans" fontSize={3}>
          {desc}
        </Box>
      </Box>
    </SettingsSectionHeaderContainer>
  )
 }
 const SettingsSectionRowContainer = styled(Box).attrs({ p: 4, horizontal: true, align: 'center' })`
  cursor: ${p => (p.onClick ? 'pointer' : '')};
 `
 export function SettingsSectionRow({
  title,
  desc,
  children,
  onClick,
 }: {
  title: string,
  desc: string,
  children?: any,
  onClick?: ?Function,
 }) {
  return (
    <SettingsSectionRowContainer onClick={onClick}>
      <Box grow>
        <Box ff="Open Sans|SemiBold" color="dark" fontSize={4}>
          {title}
        </Box>
        <Box ff="Open Sans" fontSize={3} color="grey">
          {desc}
        </Box>
      </Box>
      <Box>{children}</Box>
    </SettingsSectionRowContainer>
  )
 }
 SettingsSectionRow.defaultProps = {
  children: null,
  onClick: null,
 }
--- a/src/components/SettingsPage/index.js
+++ b/src/components/SettingsPage/index.js
@ -4,7 +4,6 @@ import React, { PureComponent } from 'react'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
 import moment from 'moment'
 import type { Settings, T } from 'types/common'
 import type { SaveSettings } from 'actions/settings'
@ -16,10 +15,10 @@ import { fetchCounterValues } from 'actions/counterValues'
 import Pills from 'components/base/Pills'
 import Box from 'components/base/Box'
-import TabDisplay from './Display'
+import SectionDisplay from './sections/Display'
-import TabProfile from './Profile'
+import SectionCurrencies from './sections/Currencies'
-import TabTools from './Tools'
+import SectionProfile from './sections/Profile'
-import TabMoney from './Money'
+import SectionAbout from './sections/About'
 const mapStateToProps = state => ({
  settings: state.settings,
@ -55,68 +54,45 @@ class SettingsPage extends PureComponent<Props, State> {
  }
  handleSaveSettings = newSettings => {
-    const { fetchCounterValues, saveSettings, i18n, settings } = this.props
+    const { fetchCounterValues, saveSettings, settings } = this.props
    saveSettings(newSettings)
    if (newSettings.language !== settings.language) {
      i18n.changeLanguage(newSettings.language)
      moment.locale(newSettings.language)
    }
    if (newSettings.counterValue !== settings.counterValue) {
      fetchCounterValues()
    }
  }
  render() {
-    const { settings, t } = this.props
+    const { settings, t, i18n, saveSettings } = this.props
    const { tab } = this.state
    const props = {
      t,
      settings,
-      onSaveSettings: this.handleSaveSettings,
+      saveSettings,
    }
    this._items = [
      {
        key: 'display',
        label: t('settings:tabs.display'),
-        value: () => <TabDisplay {...props} />,
+        value: () => <SectionDisplay {...props} i18n={i18n} />,
      },
      {
        key: 'money',
        label: t('settings:tabs.money'),
        value: () => <TabMoney {...props} />,
      },
      {
        key: 'material',
        isDisabled: true,
        label: t('settings:tabs.material'),
        value: () => <div>{'Matériel'}</div>,
      },
      {
-        key: 'app',
+        key: 'currencies',
-        isDisabled: true,
+        label: t('settings:tabs.currencies'),
-        label: t('settings:tabs.app'),
+        value: () => <SectionCurrencies {...props} />,
        value: () => <div>{'App (beta)'}</div>,
      },
      {
        key: 'tools',
        label: t('settings:tabs.tools'),
        value: () => <TabTools {...props} />,
      },
      {
        key: 'blockchain',
        isDisabled: true,
        label: t('settings:tabs.blockchain'),
        value: () => <div>{'Blockchain'}</div>,
      },
      {
        key: 'profile',
        label: t('settings:tabs.profile'),
-        value: () => <TabProfile {...props} />,
+        value: () => <SectionProfile {...props} />,
      },
      {
        key: 'about',
        label: t('settings:tabs.about'),
        value: () => <SectionAbout {...props} />,
      },
    ]
@ -124,10 +100,10 @@ class SettingsPage extends PureComponent<Props, State> {
    return (
      <Box>
-        <Box fontSize={7} mb={4}>
+        <Box ff="Museo Sans|Regular" color="dark" fontSize={7} mb={5}>
          {t('settings:title')}
        </Box>
-        <Pills mb={6} items={this._items} activeKey={item.key} onChange={this.handleChangeTab} />
+        <Pills mb={4} items={this._items} activeKey={item.key} onChange={this.handleChangeTab} />
        {item.value && item.value()}
      </Box>
    )
--- a/src/components/SettingsPage/sections/About.js
+++ b/src/components/SettingsPage/sections/About.js
@ -0,0 +1,62 @@
 // @flow
 import React, { PureComponent } from 'react'
 import { shell } from 'electron'
 import type { T } from 'types/common'
 import IconHelp from 'icons/Help'
 import IconChevronRight from 'icons/ChevronRight'
 import {
  SettingsSection as Section,
  SettingsSectionHeader as Header,
  SettingsSectionBody as Body,
  SettingsSectionRow as Row,
 } from '../SettingsSection'
 type Props = {
  t: T,
 }
 class SectionAbout extends PureComponent<Props> {
  handleOpenLink = (url: string) => () => shell.openExternal(url)
  render() {
    const { t } = this.props
    return (
      <Section>
        <Header
          icon={<IconHelp size={16} />}
          title={t('settings:tabs.about')}
          desc="Lorem ipsum dolor sit amet"
        />
        <Body>
          <Row
            onClick={this.handleOpenLink('http://google.com')}
            title={t('settings:about.faq')}
            desc={t('settings:about.faqDesc')}
          >
            <IconChevronRight size={16} />
          </Row>
          <Row
            onClick={this.handleOpenLink('http://google.com')}
            title={t('settings:about.contactUs')}
            desc={t('settings:about.contactUsDesc')}
          >
            <IconChevronRight size={16} />
          </Row>
          <Row
            onClick={this.handleOpenLink('http://google.com')}
            title={t('settings:about.terms')}
            desc={t('settings:about.termsDesc')}
          >
            <IconChevronRight size={16} />
          </Row>
        </Body>
      </Section>
    )
  }
 }
 export default SectionAbout
--- a/src/components/SettingsPage/sections/Currencies.js
+++ b/src/components/SettingsPage/sections/Currencies.js
@ -0,0 +1,53 @@
 // @flow
 import React, { PureComponent } from 'react'
 import type { T } from 'types/common'
 import IconCurrencies from 'icons/Currencies'
 import {
  SettingsSection as Section,
  SettingsSectionHeader as Header,
  SettingsSectionBody as Body,
  SettingsSectionRow as Row,
 } from '../SettingsSection'
 type Props = {
  t: T,
 }
 class TabCurrencies extends PureComponent<Props> {
  render() {
    const { t } = this.props
    return (
      <Section>
        <Header
          icon={<IconCurrencies size={16} />}
          title={t('settings:tabs.currencies')}
          desc="Lorem ipsum dolor sit amet"
        />
        <Body>
          <Row
            title={t('settings:currencies.confirmationsToSpend')}
            desc={t('settings:currencies.confirmationsToSpendDesc')}
          />
          <Row
            title={t('settings:currencies.confirmationsNb')}
            desc={t('settings:currencies.confirmationsNbDesc')}
          />
          <Row
            title={t('settings:currencies.transactionsFees')}
            desc={t('settings:currencies.transactionsFeesDesc')}
          />
          <Row
            title={t('settings:currencies.explorer')}
            desc={t('settings:currencies.explorerDesc')}
          />
        </Body>
      </Section>
    )
  }
 }
 export default TabCurrencies
--- a/src/components/SettingsPage/sections/Display.js
+++ b/src/components/SettingsPage/sections/Display.js
@ -0,0 +1,93 @@
 // @flow
 import React, { PureComponent } from 'react'
 import moment from 'moment'
 import type { Settings, T } from 'types/common'
 import Select from 'components/base/Select'
 import IconDisplay from 'icons/Display'
 import {
  SettingsSection as Section,
  SettingsSectionHeader as Header,
  SettingsSectionBody as Body,
  SettingsSectionRow as Row,
 } from '../SettingsSection'
 type Props = {
  t: T,
  settings: Settings,
  saveSettings: Function,
  i18n: Object,
 }
 type State = {
  cachedLanguageKey: string,
 }
 class TabProfile extends PureComponent<Props, State> {
  state = {
    cachedLanguageKey: this.props.settings.language,
  }
  getDatas() {
    const { t } = this.props
    return {
      languages: [{ key: 'en', name: t('language:en') }, { key: 'fr', name: t('language:fr') }],
    }
  }
  handleChangeLanguage = (languageKey: string) => {
    const { i18n, saveSettings } = this.props
    this.setState({ cachedLanguageKey: languageKey })
    window.requestIdleCallback(() => {
      i18n.changeLanguage(languageKey)
      moment.locale(languageKey)
      saveSettings({ language: languageKey })
    })
  }
  render() {
    const { t } = this.props
    const { cachedLanguageKey } = this.state
    const { languages } = this.getDatas()
    const currentLanguage = languages.find(l => l.key === cachedLanguageKey)
    return (
      <Section>
        <Header
          icon={<IconDisplay size={16} />}
          title={t('settings:tabs.display')}
          desc="Lorem ipsum dolor sit amet"
        />
        <Body>
          <Row
            title={t('settings:display.counterValue')}
            desc={t('settings:display.counterValueDesc')}
          >
            {'-'}
          </Row>
          <Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
            <Select
              style={{ minWidth: 130 }}
              small
              onChange={item => this.handleChangeLanguage(item.key)}
              renderSelected={item => item && item.name}
              value={currentLanguage}
              items={languages}
            />
          </Row>
          <Row title={t('settings:display.region')} desc={t('settings:display.regionDesc')}>
            {'-'}
          </Row>
          <Row title={t('settings:display.stock')} desc={t('settings:display.stockDesc')}>
            {'-'}
          </Row>
        </Body>
      </Section>
    )
  }
 }
 export default TabProfile
--- a/src/components/SettingsPage/sections/Profile.js
+++ b/src/components/SettingsPage/sections/Profile.js
@ -0,0 +1,56 @@
 // @flow
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
 // import type { Settings, T } from 'types/common'
 import type { T } from 'types/common'
 import { unlock } from 'reducers/application'
 import IconUser from 'icons/User'
 import {
  SettingsSection as Section,
  SettingsSectionHeader as Header,
  SettingsSectionBody as Body,
  SettingsSectionRow as Row,
 } from '../SettingsSection'
 type Props = {
  t: T,
  // settings: Settings,
  // onSaveSettings: Function,
  // unlock: Function,
 }
 type State = {}
 const mapDispatchToProps = {
  unlock,
 }
 class TabProfile extends PureComponent<Props, State> {
  state = {}
  render() {
    const { t } = this.props
    return (
      <Section>
        <Header
          icon={<IconUser size={16} />}
          title={t('settings:tabs.profile')}
          desc="Lorem ipsum dolor sit amet"
        />
        <Body>
          <Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
            noetuhnoeth
          </Row>
        </Body>
      </Section>
    )
  }
 }
 export default connect(null, mapDispatchToProps)(TabProfile)
--- a/src/components/SettingsPage/sections/Tools.js
+++ b/src/components/SettingsPage/sections/Tools.js
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@ -34,20 +34,21 @@ type Props = {
  searchable?: boolean,
  value?: Object | null,
  disabled: boolean,
  small?: boolean,
 }
 const Container = styled(Box).attrs({ relative: true, color: 'graphite' })``
 const TriggerBtn = styled(Box).attrs({
  alignItems: 'center',
-  ff: 'Open Sans|SemiBold',
+  ff: p => (p.small ? 'Open Sans' : 'Open Sans|SemiBold'),
  flow: 2,
-  fontSize: 4,
+  fontSize: p => (p.small ? 3 : 4),
  horizontal: true,
  px: 3,
 })`
  ${space};
-  height: 40px;
+  height: ${p => (p.small ? '34' : '40')}px;
  background: ${p => (p.disabled ? p.theme.colors.lightGrey : p.bg || p.theme.colors.white)};
  border-bottom-left-radius: ${p => (p.flatLeft ? 0 : p.theme.radii[1])}px;
  border-bottom-right-radius: ${p => (p.flatRight ? 0 : p.theme.radii[1])}px;
@ -149,6 +150,7 @@ class Select extends PureComponent<Props> {
  static defaultProps = {
    bg: undefined,
    disabled: false,
    small: false,
    fakeFocusRight: false,
    flatLeft: false,
    flatRight: false,
@ -251,6 +253,7 @@ class Select extends PureComponent<Props> {
      renderSelected,
      searchable,
      value,
      small,
      ...props
    } = this.props
@ -276,7 +279,7 @@ class Select extends PureComponent<Props> {
          if (disabled) {
            return (
              <Container {...getRootProps({ refKey: 'innerRef' })}>
-                <TriggerBtn disabled bg={props.bg} tabIndex={0}>
+                <TriggerBtn disabled bg={props.bg} tabIndex={0} small={small}>
                  {renderSelectedItem({ selectedItem, renderSelected, placeholder })}
                </TriggerBtn>
              </Container>
@ -308,6 +311,7 @@ class Select extends PureComponent<Props> {
                  flatLeft={flatLeft}
                  flatRight={flatRight}
                  tabIndex={0}
                  small={small}
                >
                  <Box grow>
                    {renderSelectedItem({ selectedItem, renderSelected, placeholder })}
--- a/src/icons/Currencies.js
+++ b/src/icons/Currencies.js
@ -0,0 +1,12 @@
 // @flow
 import React from 'react'
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
    <path
      fill="currentColor"
      d="M8 5.581c-3.865 0-7-1.083-7-2.79C1 1.083 4.135 0 8 0s7 1.083 7 2.79c0 1.708-3.135 2.791-7 2.791zm-7-2.79c0-.309.241-.558.538-.558.298 0 .539.25.539.558v10.418c0 .28.516.704 1.517 1.05 1.142.396 2.714.625 4.406.625 1.692 0 3.264-.23 4.406-.625 1.001-.346 1.517-.77 1.517-1.05V2.791c0-.309.241-.558.539-.558.297 0 .538.25.538.558v10.418C15 14.921 11.88 16 8 16s-7-1.08-7-2.79V2.79zM13.923 8c0-.308.241-.558.539-.558.297 0 .538.25.538.558 0 1.711-3.12 2.79-7 2.79S1 9.712 1 8c0-.308.241-.558.538-.558.298 0 .539.25.539.558 0 .28.516.704 1.517 1.05 1.142.395 2.714.624 4.406.624 1.692 0 3.264-.229 4.406-.624 1.001-.346 1.517-.77 1.517-1.05zM8 4.465c1.682 0 3.254-.23 4.399-.625 1.004-.347 1.524-.772 1.524-1.05 0-.277-.52-.702-1.524-1.048-1.145-.396-2.717-.626-4.399-.626s-3.254.23-4.399.626c-1.004.346-1.524.771-1.524 1.049 0 .277.52.702 1.524 1.049 1.145.395 2.717.625 4.399.625z"
    />
  </svg>
 )
--- a/src/icons/Display.js
+++ b/src/icons/Display.js
@ -0,0 +1,12 @@
 // @flow
 import React from 'react'
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" width={size} height={size} {...p}>
    <path
      fill="currentColor"
      d="M3.2 2.26c-.552 0-1 .471-1 1.051v6.547c0 .58.448 1.05 1 1.05h9.6c.552 0 1-.47 1-1.05V3.31c0-.58-.448-1.05-1-1.05H3.2zm5.4 9.909v1.57h1.96c.331 0 .6.283.6.63 0 .349-.269.631-.6.631H5.44c-.331 0-.6-.282-.6-.63 0-.348.269-.63.6-.63H7.4v-1.571H3.2c-1.215 0-2.2-1.035-2.2-2.311V3.31C1 2.035 1.985 1 3.2 1h9.6C14.015 1 15 2.035 15 3.311v6.547c0 1.276-.985 2.311-2.2 2.311H8.6z"
    />
  </svg>
 )
--- a/src/icons/Help.js
+++ b/src/icons/Help.js
@ -0,0 +1,12 @@
 // @flow
 import React from 'react'
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
    <path
      fill="currentColor"
      d="M3.3 4.007a6.167 6.167 0 1 0 .707-.707l2.135 2.135a3.167 3.167 0 1 1-.707.707L3.3 4.007zM8 15.167A7.167 7.167 0 1 1 8 .833a7.167 7.167 0 0 1 0 14.334zm0-5a2.167 2.167 0 1 0 0-4.334 2.167 2.167 0 0 0 0 4.334zm1.387-4.054c0-.128.048-.256.146-.353l2.353-2.354a.5.5 0 0 1 .708.708L10.24 6.467a.5.5 0 0 1-.707-.707l2.827-2.827a.5.5 0 0 1 .707.707L10.24 6.467a.5.5 0 0 1-.853-.354zm.146 4.127a.5.5 0 0 1 .707-.707l2.827 2.827a.5.5 0 1 1-.707.707L9.533 10.24zM3.64 13.067a.5.5 0 1 1-.707-.707L5.76 9.533a.5.5 0 1 1 .707.707L3.64 13.067z"
    />
  </svg>
 )
--- a/src/types/common.js
+++ b/src/types/common.js
@ -12,23 +12,15 @@ export type Devices = Array<Device>
 // -------------------- Settings
-export type SettingsProfile = {
+export type Settings = {
  language: string,
  counterValue: string,
  password: {
-    state: boolean,
+    isEnabled: boolean,
    value: string,
  },
 }
 export type SettingsDisplay = {
  language: string,
 }
 export type SettingsMoney = {
  counterValue: string,
 }
 export type Settings = SettingsProfile & SettingsDisplay & SettingsMoney
 export type T = (?string, ?Object) => string
 // -------------------- Manager
--- a/static/i18n/en/settings.yml
+++ b/static/i18n/en/settings.yml
@ -1,16 +1,34 @@
 title: Settings
 tabs:
  display: Display
-  money: Money
+  currencies: Currencies
  material: Material
  app: App (beta)
  tools: Tools
  blockchain: Blockchain
  profile: Profile
  about: About
 display:
-  language: Language
+  language: Interface language
-  counterValue: Counter Value
+  languageDesc: Lorem ipsum dolor sit amet
-  orderAccounts: Order accounts
+  counterValue: Countervalue
  counterValueDesc: Lorem ipsum dolor sit amet
  region: Region
  regionDesc: Lorem ipsum dolor sit amet
  stock: Stock market indicators
  stockDesc: Lorem ipsum dolor sit amet
 currencies:
  confirmationsToSpend: Confirmations to spend
  confirmationsToSpendDesc: Lorem ipsum dolor sit amet
  confirmationsNb: Number of confirmations
  confirmationsNbDesc: Lorem ipsum dolor sit amet
  transactionsFees: Transactions fees
  transactionsFeesDesc: Lorem ipsum dolor sit amet
  explorer: Blockchain explorer
  explorerDesc: Lorem ipsum dolor sit amet
 profile:
  protectWithPassword: Protect local data with a password
  password: Password
 about:
  faq: FAQ
  faqDesc: Lorem ipsum dolor sit amet
  contactUs: Contact us
  contactUsDesc: Lorem ipsum dolor sit amet
  terms: Terms and Privacy policy
  termsDesc: Lorem ipsum dolor sit amet