diff --git a/src/components/SettingsPage/ReleaseNotesButton.js b/src/components/SettingsPage/ReleaseNotesButton.js index d6864d05..336d8e52 100644 --- a/src/components/SettingsPage/ReleaseNotesButton.js +++ b/src/components/SettingsPage/ReleaseNotesButton.js @@ -32,7 +32,7 @@ class ReleaseNotesButton extends PureComponent { openModal(MODAL_RELEASES_NOTES, version) }} > - {t('app:settings.about.releaseNotesBtn')} + {t('app:settings.help.releaseNotesBtn')} ) } diff --git a/src/components/SettingsPage/SettingsSection.js b/src/components/SettingsPage/SettingsSection.js index 03d9678c..de34dee1 100644 --- a/src/components/SettingsPage/SettingsSection.js +++ b/src/components/SettingsPage/SettingsSection.js @@ -24,8 +24,8 @@ const RoundIconContainer = styled(Box).attrs({ bg: p => rgba(p.theme.colors.wallet, 0.2), color: 'wallet', })` - height: 30px; - width: 30px; + height: 34px; + width: 34px; border-radius: 50%; ` diff --git a/src/components/SettingsPage/index.js b/src/components/SettingsPage/index.js index 51faedbf..dd8ed640 100644 --- a/src/components/SettingsPage/index.js +++ b/src/components/SettingsPage/index.js @@ -13,6 +13,7 @@ import Pills from 'components/base/Pills' import Box from 'components/base/Box' import SectionDisplay from './sections/Display' import SectionCurrencies from './sections/Currencies' +import SectionHelp from './sections/Help' import SectionAbout from './sections/About' import SectionTools from './sections/Tools' @@ -52,6 +53,11 @@ class SettingsPage extends PureComponent { label: props.t('app:settings.tabs.about'), value: SectionAbout, }, + { + key: 'help', + label: props.t('app:settings.tabs.help'), + value: SectionHelp, + }, ] if (EXPERIMENTAL_TOOLS_SETTINGS) { diff --git a/src/components/SettingsPage/sections/About.js b/src/components/SettingsPage/sections/About.js index 4e89356e..14592b54 100644 --- a/src/components/SettingsPage/sections/About.js +++ b/src/components/SettingsPage/sections/About.js @@ -2,15 +2,13 @@ import React, { PureComponent } from 'react' import { translate } from 'react-i18next' + import type { T } from 'types/common' + import TrackPage from 'analytics/TrackPage' -import IconHelp from 'icons/Help' -import resolveLogsDirectory from 'helpers/resolveLogsDirectory' import { urls } from 'config/support' +import IconLoader from 'icons/Loader' -import ExportLogsBtn from 'components/ExportLogsBtn' -import CleanButton from '../CleanButton' -import ResetButton from '../ResetButton' import ReleaseNotesButton from '../ReleaseNotesButton' import AboutRowItem from '../AboutRowItem' @@ -25,7 +23,7 @@ type Props = { t: T, } -class SectionAbout extends PureComponent { +class SectionHelp extends PureComponent { render() { const { t } = this.props const version = __APP_VERSION__ @@ -35,44 +33,19 @@ class SectionAbout extends PureComponent {
} + icon={} title={t('app:settings.tabs.about')} desc={t('app:settings.about.desc')} /> - + - - - - - - - - - - - - @@ -81,4 +54,4 @@ class SectionAbout extends PureComponent { } } -export default translate()(SectionAbout) +export default translate()(SectionHelp) diff --git a/src/components/SettingsPage/sections/Help.js b/src/components/SettingsPage/sections/Help.js new file mode 100644 index 00000000..cfd1ceb6 --- /dev/null +++ b/src/components/SettingsPage/sections/Help.js @@ -0,0 +1,72 @@ +// @flow + +import React, { PureComponent } from 'react' +import { translate } from 'react-i18next' +import type { T } from 'types/common' +import TrackPage from 'analytics/TrackPage' +import IconHelp from 'icons/Help' +import resolveLogsDirectory from 'helpers/resolveLogsDirectory' +import { urls } from 'config/support' + +import ExportLogsBtn from 'components/ExportLogsBtn' +import CleanButton from '../CleanButton' +import ResetButton from '../ResetButton' +import AboutRowItem from '../AboutRowItem' + +import { + SettingsSection as Section, + SettingsSectionHeader as Header, + SettingsSectionBody as Body, + SettingsSectionRow as Row, +} from '../SettingsSection' + +type Props = { + t: T, +} + +class SectionHelp extends PureComponent { + render() { + const { t } = this.props + + return ( +
+ + +
} + title={t('app:settings.tabs.help')} + desc={t('app:settings.help.desc')} + /> + + + + + + + + + + + + + + +
+ ) + } +} + +export default translate()(SectionHelp) diff --git a/src/icons/Currencies.js b/src/icons/Currencies.js index 58f168b7..21e10243 100644 --- a/src/icons/Currencies.js +++ b/src/icons/Currencies.js @@ -5,7 +5,7 @@ import React from 'react' const path = ( ) diff --git a/src/icons/Display.js b/src/icons/Display.js index c0dd7402..5ff99c26 100644 --- a/src/icons/Display.js +++ b/src/icons/Display.js @@ -5,7 +5,7 @@ import React from 'react' const path = ( ) diff --git a/src/icons/Help.js b/src/icons/Help.js index e3f2251d..d739c9b8 100644 --- a/src/icons/Help.js +++ b/src/icons/Help.js @@ -5,7 +5,7 @@ import React from 'react' const path = ( ) diff --git a/static/i18n/en/app.yml b/static/i18n/en/app.yml index 4a3b6a8e..866e3b9e 100644 --- a/static/i18n/en/app.yml +++ b/static/i18n/en/app.yml @@ -313,7 +313,8 @@ settings: # Always ensure descriptions carry full stops (.) display: General currencies: Currencies profile: Profile - about: Help + help: Help + about: About display: desc: Change settings that affect Ledger Live in general. language: Display language @@ -358,6 +359,8 @@ settings: # Always ensure descriptions carry full stops (.) reportErrors: Report bugs reportErrorsDesc: Share anonymous usage and diagnostics data to help improve Ledger products, services and security features. about: + desc: Learn about Ledger Live features + help: desc: Learn about Ledger Live features or get help. version: Version releaseNotesBtn: Details # Close button instead of continue.