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>

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",

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'),

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,
       );
     });
 

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';
 

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 (
-      <div ref={this.settingsRefs[4]} className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{this.context.t('theme')}</span>
-          <div className="settings-page__content-description">
-            {this.context.t('themeDescription')}
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Dropdown
-              id="select-theme"
-              options={themesOptions}
-              selectedOption={theme}
-              onChange={onChange}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   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()}
       </div>
     );

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)),
   };

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 (
       <div
-        ref={this.settingsRefs[4]}
+        ref={this.settingsRefs[5]}
         className="settings-page__content-row"
         id="toggle-zero-balance"
       >
@@ -179,7 +184,7 @@ export default class SettingsTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[3]}
+        ref={this.settingsRefs[4]}
         className="settings-page__content-row"
         id="blockie-optin"
       >
@@ -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 (
+      <div ref={this.settingsRefs[3]} className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{this.context.t('theme')}</span>
+          <div className="settings-page__content-description">
+            {this.context.t('themeDescription')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Dropdown
+              id="select-theme"
+              options={themesOptions}
+              selectedOption={theme}
+              onChange={onChange}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   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()}
       </div>

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)),
   };
 };