From d468c9dbdeff4b8b735919f24ada77e639548e5d Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 23 Sep 2022 10:15:02 -0500 Subject: [PATCH] Dark Mode: Elevate the theme dropdown from experimental to regular settings (#15865) * Dark Mode: Elevate the theme dropdown from experimental to regular settings * Fix search * Fix test * Adjust settings order * removing renderTheme call from experimental tab and rearranging setting ref number in general tab Co-authored-by: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com> --- .../files-to-convert.json | 2 +- ui/helpers/constants/settings.js | 14 ++--- ui/helpers/utils/settings-search.test.js | 4 +- ui/pages/routes/routes.component.js | 2 +- .../experimental-tab.component.js | 57 ----------------- .../experimental-tab.container.js | 4 -- .../settings-tab/settings-tab.component.js | 62 ++++++++++++++++++- .../settings-tab.constant.js} | 0 .../settings-tab/settings-tab.container.js | 5 +- 9 files changed, 75 insertions(+), 75 deletions(-) rename ui/pages/settings/{experimental-tab/experimental-tab.constant.js => settings-tab/settings-tab.constant.js} (100%) diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json index 3a184644d..8d4dc9ac3 100644 --- a/development/ts-migration-dashboard/files-to-convert.json +++ b/development/ts-migration-dashboard/files-to-convert.json @@ -1531,7 +1531,6 @@ "ui/pages/settings/contact-list-tab/view-contact/view-contact.container.js", "ui/pages/settings/experimental-tab/experimental-tab.component.js", "ui/pages/settings/experimental-tab/experimental-tab.component.test.js", - "ui/pages/settings/experimental-tab/experimental-tab.constant.js", "ui/pages/settings/experimental-tab/experimental-tab.container.js", "ui/pages/settings/experimental-tab/index.js", "ui/pages/settings/flask/snaps-list-tab/index.js", @@ -1580,6 +1579,7 @@ "ui/pages/settings/settings-tab/index.js", "ui/pages/settings/settings-tab/settings-tab.component.js", "ui/pages/settings/settings-tab/settings-tab.component.test.js", + "ui/pages/settings/settings-tab/settings-tab.constant.js", "ui/pages/settings/settings-tab/settings-tab.container.js", "ui/pages/settings/settings.component.js", "ui/pages/settings/settings.component.test.js", diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js index 41d998814..a2bb8cf7d 100644 --- a/ui/helpers/constants/settings.js +++ b/ui/helpers/constants/settings.js @@ -34,6 +34,13 @@ export const SETTINGS_CONSTANTS = [ route: `${GENERAL_ROUTE}#current-language`, icon: 'fa fa-cog', }, + { + tabMessage: (t) => t('general'), + sectionMessage: (t) => t('theme'), + descriptionMessage: (t) => t('themeDescription'), + route: `${GENERAL_ROUTE}#theme`, + icon: 'fa fa-flask', + }, { tabMessage: (t) => t('general'), sectionMessage: (t) => t('accountIdenticon'), @@ -313,13 +320,6 @@ export const SETTINGS_CONSTANTS = [ route: `${EXPERIMENTAL_ROUTE}#enable-advanced-gas`, icon: 'fa fa-flask', }, - { - tabMessage: (t) => t('experimental'), - sectionMessage: (t) => t('theme'), - descriptionMessage: (t) => t('themeDescription'), - route: `${EXPERIMENTAL_ROUTE}#theme`, - icon: 'fa fa-flask', - }, { tabMessage: (t) => t('advanced'), sectionMessage: (t) => t('enhancedTokenDetection'), diff --git a/ui/helpers/utils/settings-search.test.js b/ui/helpers/utils/settings-search.test.js index fc8a22b13..43dea6c7d 100644 --- a/ui/helpers/utils/settings-search.test.js +++ b/ui/helpers/utils/settings-search.test.js @@ -165,7 +165,7 @@ describe('Settings Search Utils', () => { describe('getNumberOfSettingsInSection', () => { it('should get good general section number', () => { - expect(getNumberOfSettingsInSection(t, t('general'))).toStrictEqual(5); + expect(getNumberOfSettingsInSection(t, t('general'))).toStrictEqual(6); }); it('should get good advanced section number', () => { @@ -192,7 +192,7 @@ describe('Settings Search Utils', () => { it('should get good experimental section number', () => { expect(getNumberOfSettingsInSection(t, t('experimental'))).toStrictEqual( - 3, + 2, ); }); diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index 9783f0f8e..b412b0f8e 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -77,7 +77,7 @@ import ConfirmationPage from '../confirmation'; import OnboardingFlow from '../onboarding-flow/onboarding-flow'; import QRHardwarePopover from '../../components/app/qr-hardware-popover'; import { SEND_STAGES } from '../../ducks/send'; -import { THEME_TYPE } from '../settings/experimental-tab/experimental-tab.constant'; +import { THEME_TYPE } from '../settings/settings-tab/settings-tab.constant'; import DeprecatedTestNetworks from '../../components/ui/deprecated-test-networks/deprecated-test-networks'; import NewNetworkInfo from '../../components/ui/new-network-info/new-network-info'; diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js index 4175bc9c5..ca7fba8c1 100644 --- a/ui/pages/settings/experimental-tab/experimental-tab.component.js +++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js @@ -5,9 +5,7 @@ import { getNumberOfSettingsInSection, handleSettingsRefs, } from '../../../helpers/utils/settings-search'; -import Dropdown from '../../../components/ui/dropdown'; import { EVENT } from '../../../../shared/constants/metametrics'; -import { THEME_TYPE } from './experimental-tab.constant'; export default class ExperimentalTab extends PureComponent { static contextTypes = { @@ -22,8 +20,6 @@ export default class ExperimentalTab extends PureComponent { openSeaEnabled: PropTypes.bool, eip1559V2Enabled: PropTypes.bool, setEIP1559V2Enabled: PropTypes.func, - theme: PropTypes.string, - setTheme: PropTypes.func, customNetworkListEnabled: PropTypes.bool, setCustomNetworkListEnabled: PropTypes.func, }; @@ -196,58 +192,6 @@ export default class ExperimentalTab extends PureComponent { ); } - renderTheme() { - const { t } = this.context; - const { theme, setTheme } = this.props; - - const themesOptions = [ - { - name: t('lightTheme'), - value: THEME_TYPE.LIGHT, - }, - { - name: t('darkTheme'), - value: THEME_TYPE.DARK, - }, - { - name: t('osTheme'), - value: THEME_TYPE.OS, - }, - ]; - - const onChange = (newTheme) => { - this.context.trackEvent({ - category: EVENT.CATEGORIES.SETTINGS, - event: 'Theme Changed', - properties: { - theme_selected: newTheme, - }, - }); - setTheme(newTheme); - }; - - return ( -
-
- {this.context.t('theme')} -
- {this.context.t('themeDescription')} -
-
-
-
- -
-
-
- ); - } - renderCustomNetworkListToggle() { const { t } = this.context; const { customNetworkListEnabled, setCustomNetworkListEnabled } = @@ -291,7 +235,6 @@ export default class ExperimentalTab extends PureComponent { {this.renderOpenSeaEnabledToggle()} {this.renderCollectibleDetectionToggle()} {this.renderEIP1559V2EnabledToggle()} - {this.renderTheme()} {this.renderCustomNetworkListToggle()} ); diff --git a/ui/pages/settings/experimental-tab/experimental-tab.container.js b/ui/pages/settings/experimental-tab/experimental-tab.container.js index d27f7e572..a572f45c4 100644 --- a/ui/pages/settings/experimental-tab/experimental-tab.container.js +++ b/ui/pages/settings/experimental-tab/experimental-tab.container.js @@ -5,14 +5,12 @@ import { setUseCollectibleDetection, setOpenSeaEnabled, setEIP1559V2Enabled, - setTheme, setCustomNetworkListEnabled, } from '../../../store/actions'; import { getUseCollectibleDetection, getOpenSeaEnabled, getEIP1559V2Enabled, - getTheme, getIsCustomNetworkListEnabled, } from '../../../selectors'; import ExperimentalTab from './experimental-tab.component'; @@ -22,7 +20,6 @@ const mapStateToProps = (state) => { useCollectibleDetection: getUseCollectibleDetection(state), openSeaEnabled: getOpenSeaEnabled(state), eip1559V2Enabled: getEIP1559V2Enabled(state), - theme: getTheme(state), customNetworkListEnabled: getIsCustomNetworkListEnabled(state), }; }; @@ -33,7 +30,6 @@ const mapDispatchToProps = (dispatch) => { dispatch(setUseCollectibleDetection(val)), setOpenSeaEnabled: (val) => dispatch(setOpenSeaEnabled(val)), setEIP1559V2Enabled: (val) => dispatch(setEIP1559V2Enabled(val)), - setTheme: (val) => dispatch(setTheme(val)), setCustomNetworkListEnabled: (val) => dispatch(setCustomNetworkListEnabled(val)), }; diff --git a/ui/pages/settings/settings-tab/settings-tab.component.js b/ui/pages/settings/settings-tab/settings-tab.component.js index dc2d37217..35231813e 100644 --- a/ui/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/pages/settings/settings-tab/settings-tab.component.js @@ -9,11 +9,13 @@ import locales from '../../../../app/_locales/index.json'; import Jazzicon from '../../../components/ui/jazzicon'; import BlockieIdenticon from '../../../components/ui/identicon/blockieIdenticon'; import Typography from '../../../components/ui/typography'; +import { EVENT } from '../../../../shared/constants/metametrics'; import { getNumberOfSettingsInSection, handleSettingsRefs, } from '../../../helpers/utils/settings-search'; +import { THEME_TYPE } from './settings-tab.constant'; const sortedCurrencies = availableCurrencies.sort((a, b) => { return a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()); @@ -37,6 +39,7 @@ export default class SettingsTab extends PureComponent { static contextTypes = { t: PropTypes.func, metricsEvent: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -55,6 +58,8 @@ export default class SettingsTab extends PureComponent { lastFetchedConversionDate: PropTypes.number, selectedAddress: PropTypes.string, tokenList: PropTypes.object, + theme: PropTypes.string, + setTheme: PropTypes.func, }; settingsRefs = Array( @@ -144,7 +149,7 @@ export default class SettingsTab extends PureComponent { return (
@@ -179,7 +184,7 @@ export default class SettingsTab extends PureComponent { return (
@@ -320,6 +325,58 @@ export default class SettingsTab extends PureComponent { ); } + renderTheme() { + const { t } = this.context; + const { theme, setTheme } = this.props; + + const themesOptions = [ + { + name: t('lightTheme'), + value: THEME_TYPE.LIGHT, + }, + { + name: t('darkTheme'), + value: THEME_TYPE.DARK, + }, + { + name: t('osTheme'), + value: THEME_TYPE.OS, + }, + ]; + + const onChange = (newTheme) => { + this.context.trackEvent({ + category: EVENT.CATEGORIES.SETTINGS, + event: 'Theme Changed', + properties: { + theme_selected: newTheme, + }, + }); + setTheme(newTheme); + }; + + return ( +
+
+ {this.context.t('theme')} +
+ {this.context.t('themeDescription')} +
+
+
+
+ +
+
+
+ ); + } + render() { const { warning } = this.props; @@ -329,6 +386,7 @@ export default class SettingsTab extends PureComponent { {this.renderCurrentConversion()} {this.renderUsePrimaryCurrencyOptions()} {this.renderCurrentLocale()} + {this.renderTheme()} {this.renderBlockieOptIn()} {this.renderHideZeroBalanceTokensOptIn()}
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.constant.js b/ui/pages/settings/settings-tab/settings-tab.constant.js similarity index 100% rename from ui/pages/settings/experimental-tab/experimental-tab.constant.js rename to ui/pages/settings/settings-tab/settings-tab.constant.js diff --git a/ui/pages/settings/settings-tab/settings-tab.container.js b/ui/pages/settings/settings-tab/settings-tab.container.js index 18bae977e..0888670da 100644 --- a/ui/pages/settings/settings-tab/settings-tab.container.js +++ b/ui/pages/settings/settings-tab/settings-tab.container.js @@ -6,8 +6,9 @@ import { setUseNativeCurrencyAsPrimaryCurrencyPreference, setHideZeroBalanceTokens, setParticipateInMetaMetrics, + setTheme, } from '../../../store/actions'; -import { getTokenList, getPreferences } from '../../../selectors'; +import { getTokenList, getPreferences, getTheme } from '../../../selectors'; import SettingsTab from './settings-tab.component'; const mapStateToProps = (state, ownProps) => { @@ -39,6 +40,7 @@ const mapStateToProps = (state, ownProps) => { lastFetchedConversionDate, selectedAddress, tokenList, + theme: getTheme(state), }; }; @@ -54,6 +56,7 @@ const mapDispatchToProps = (dispatch) => { dispatch(setParticipateInMetaMetrics(val)), setHideZeroBalanceTokens: (value) => dispatch(setHideZeroBalanceTokens(value)), + setTheme: (val) => dispatch(setTheme(val)), }; };