refactor(settings): Move to new style settings row

Comprised of: - Row element - Content (title and description) - Action
2024-02-09 22:22:11 +00:00 · 2024-02-09 22:22:11 +00:00 · 84c1bc8df1
parent 48b919ebea
commit 84c1bc8df1
21 changed files with 1254 additions and 1071 deletions
--- a/package.json
+++ b/package.json
@ -47,7 +47,7 @@
    "stylelint": "^16.2.1",
    "stylelint-config-standard-scss": "^13.0.0",
    "stylelint-scss": "^6.1.0",
-    "vite": "5.1.0",
+    "vite": "5.1.1",
    "vite-plugin-progress": "^0.0.7"
  },
  "scripts": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,5 +1,9 @@
 lockfileVersion: '6.0'

+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
  '@eartharoid/i18n':
    specifier: 1.2.1
@ -74,7 +78,7 @@ devDependencies:
    version: 0.0.2
  '@vitejs/plugin-react-swc':
    specifier: ^3.6.0
-    version: 3.6.0(vite@5.1.0)
+    version: 3.6.0(vite@5.1.1)
  adm-zip:
    specifier: ^0.5.10
    version: 0.5.10
@ -106,11 +110,11 @@ devDependencies:
    specifier: ^6.1.0
    version: 6.1.0(stylelint@16.2.1)
  vite:
-    specifier: 5.1.0
-    version: 5.1.0(@types/node@20.11.17)(sass@1.70.0)
+    specifier: 5.1.1
+    version: 5.1.1(@types/node@20.11.17)(sass@1.70.0)
  vite-plugin-progress:
    specifier: ^0.0.7
-    version: 0.0.7(vite@5.1.0)
+    version: 0.0.7(vite@5.1.1)

 packages:

@ -2951,13 +2955,13 @@ packages:
    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
    dev: true

-  /@vitejs/plugin-react-swc@3.6.0(vite@5.1.0):
+  /@vitejs/plugin-react-swc@3.6.0(vite@5.1.1):
    resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==}
    peerDependencies:
      vite: ^4 || ^5
    dependencies:
      '@swc/core': 1.4.0
-      vite: 5.1.0(@types/node@20.11.17)(sass@1.70.0)
+      vite: 5.1.1(@types/node@20.11.17)(sass@1.70.0)
    transitivePeerDependencies:
      - '@swc/helpers'
    dev: true
@ -3298,7 +3302,7 @@ packages:
    hasBin: true
    dependencies:
      caniuse-lite: 1.0.30001585
-      electron-to-chromium: 1.4.662
+      electron-to-chromium: 1.4.664
      node-releases: 2.0.14
      update-browserslist-db: 1.0.13(browserslist@4.22.3)
    dev: true
@ -3657,8 +3661,8 @@ packages:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
    dev: true

-  /electron-to-chromium@1.4.662:
-    resolution: {integrity: sha512-gfl1XVWTQmPHhqEG0kN77SpUxaqPpMb9r83PT4gvKhg7P3irSxru3lW85RxvK1uI1j2CAcTWPjG/HbE0IP/Rtg==}
+  /electron-to-chromium@1.4.664:
+    resolution: {integrity: sha512-k9VKKSkOSNPvSckZgDDl/IQx45E1quMjX8QfLzUsAs/zve8AyFDK+ByRynSP/OfEfryiKHpQeMf00z0leLCc3A==}
    dev: true

  /embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22):
@ -5939,7 +5943,7 @@ packages:
    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
    dependencies:
      spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.16
+      spdx-license-ids: 3.0.17
    dev: true

  /spdx-exceptions@2.4.0:
@ -5950,11 +5954,11 @@ packages:
    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
    dependencies:
      spdx-exceptions: 2.4.0
-      spdx-license-ids: 3.0.16
+      spdx-license-ids: 3.0.17
    dev: true

-  /spdx-license-ids@3.0.16:
-    resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
+  /spdx-license-ids@3.0.17:
+    resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==}
    dev: true

  /split2@3.2.2:
@ -6422,7 +6426,7 @@ packages:
      spdx-expression-parse: 3.0.1
    dev: true

-  /vite-plugin-progress@0.0.7(vite@5.1.0):
+  /vite-plugin-progress@0.0.7(vite@5.1.1):
    resolution: {integrity: sha512-zyvKdcc/X+6hnw3J1HVV1TKrlFKC4Rh8GnDnWG/2qhRXjqytTcM++xZ+SAPnoDsSyWl8O93ymK0wZRgHAoglEQ==}
    engines: {node: '>=14', pnpm: '>=7.0.0'}
    peerDependencies:
@ -6431,11 +6435,11 @@ packages:
      picocolors: 1.0.0
      progress: 2.0.3
      rd: 2.0.1
-      vite: 5.1.0(@types/node@20.11.17)(sass@1.70.0)
+      vite: 5.1.1(@types/node@20.11.17)(sass@1.70.0)
    dev: true

-  /vite@5.1.0(@types/node@20.11.17)(sass@1.70.0):
-    resolution: {integrity: sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==}
+  /vite@5.1.1(@types/node@20.11.17)(sass@1.70.0):
+    resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==}
    engines: {node: ^18.0.0 || >=20.0.0}
    hasBin: true
    peerDependencies:
@ -6614,7 +6618,3 @@ packages:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
    dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@ -256,6 +256,14 @@ h5 {
    flex-flow: row;
    align-items: center;
    gap: 25px;
+    svg {
+      @include themed() {
+        background-color: t($modal-sidebar);
+        box-shadow: t($boxShadow);
+      }
+      padding: 15px;
+      border-radius: 100%;
+    }
  }

  .content {
--- a/src/components/modals/main/settings/Header.jsx
+++ b/src/components/modals/main/settings/Header.jsx
@ -9,7 +9,6 @@ import {
 } from 'react-icons/md';

 import Slider from './Slider';
-import SettingsItem from './SettingsItem';
 import EventBus from 'modules/helpers/eventbus';

 import { values } from 'modules/helpers/settings/modals';
--- a/src/components/modals/main/settings/PreferencesWrapper.jsx
+++ b/src/components/modals/main/settings/PreferencesWrapper.jsx
@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import SettingsItem from './SettingsItem';
+import { Row, Content, Action } from './SettingsItem';
 import variables from 'modules/variables';
 import Slider from './Slider';

@ -18,12 +18,14 @@ const PreferencesWrapper = ({ children, ...props }) => {
  return (
    <div className={shown ? 'preferences' : 'preferencesInactive'}>
      {props.zoomSetting && (
-        <SettingsItem
+        <Row>
+          <Content
            title={variables.getMessage(
              'modals.main.settings.sections.appearance.accessibility.widget_zoom',
            )}
            subtitle={variables.getMessage('modals.main.settings.sections.header.size')}
-        >
+          />
+          <Action>
            <Slider
              name={props.zoomSetting}
              min="10"
@ -33,7 +35,8 @@ const PreferencesWrapper = ({ children, ...props }) => {
              marks={values('zoom')}
              category={props.zoomCategory || props.category}
            />
-        </SettingsItem>
+          </Action>
+        </Row>
      )}
      {children}
    </div>
--- a/src/components/modals/main/settings/SettingsItem.jsx
+++ b/src/components/modals/main/settings/SettingsItem.jsx
@ -1,15 +1,22 @@
-import { memo } from 'react';
-
-function SettingsItem({ final, title, subtitle, children }) {
+function Row(props) {
  return (
-    <div className={final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
-      <div className="content">
-        <span className="title">{title}</span>
-        <span className="subtitle">{subtitle}</span>
-      </div>
-      <div className="action">{children}</div>
+    <div className={props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
+      {props.children}
    </div>
  );
 }

-export default memo(SettingsItem);
+function Content(props) {
+  return (
+    <div className="content">
+      <span className="title">{props.title}</span>
+      <span className="subtitle">{props.subtitle}</span>
+    </div>
+  );
+}
+
+function Action(props) {
+  return <div className="action">{props.children}</div>;
+}
+
+export { Row, Content, Action };
--- a/src/components/modals/main/settings/SettingsRow.jsx
+++ b/src/components/modals/main/settings/SettingsRow.jsx
@ -0,0 +1,15 @@
+import { memo } from 'react';
+
+function SettingsRow({ final, title, subtitle, children }) {
+  return (
+    <div className={final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
+      <div className="content">
+        <span className="title">{title}</span>
+        <span className="subtitle">{subtitle}</span>
+      </div>
+      <div className="action">{children}</div>
+    </div>
+  );
+}
+
+export default memo(SettingsRow);
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@ -17,7 +17,8 @@ import Text from '../Text';
 import Switch from '../Switch';
 import ResetModal from '../ResetModal';
 import Dropdown from '../Dropdown';
-import SettingsItem from '../SettingsItem';
+
+import { Row, Content, Action } from '../SettingsItem';
 import Section from '../Section';

 import time_zones from 'components/widgets/time/timezones.json';
@ -92,24 +93,31 @@ export default function AdvancedSettings() {
            onClick={() => setData(true)}
            icon={<MdDataUsage />}
          />
-          <SettingsItem
+          <Row>
+            <Content
              title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
              subtitle={variables.getMessage(
                'modals.main.settings.sections.advanced.offline_subtitle',
              )}
-          >
+            />
+            <Action>
              <Switch name="offlineMode" element=".other" />
-          </SettingsItem>
+            </Action>
+          </Row>

-          <SettingsItem
+          <Row>
+            <Content
              title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
              subtitle={variables.getMessage(
                'modals.main.settings.sections.advanced.timezone.subtitle',
              )}
-          >
+            />
+            <Action>
              <Dropdown name="timezone" category="timezone" manual={true}>
                <MenuItem value="auto">
-                {variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
+                  {variables.getMessage(
+                    'modals.main.settings.sections.advanced.timezone.automatic',
+                  )}
                </MenuItem>
                {time_zones.map((timezone) => (
                  <MenuItem value={timezone} key={timezone}>
@ -117,42 +125,51 @@ export default function AdvancedSettings() {
                  </MenuItem>
                ))}
              </Dropdown>
-          </SettingsItem>
-          <SettingsItem
+            </Action>
+          </Row>
+          <Row>
+            <Content
              title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
              subtitle={variables.getMessage(
                'modals.main.settings.sections.advanced.tab_name_subtitle',
              )}
-          >
+            />
+            <Action>
              <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
-          </SettingsItem>
+            </Action>
+          </Row>
          <FileUpload
            id="file-input"
            accept="application/json"
            type="settings"
            loadFunction={(e) => importSettings(e)}
          />
-          <SettingsItem
+          <Row>
+            <Content
              title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
              subtitle={variables.getMessage(
                'modals.main.settings.sections.advanced.custom_css_subtitle',
              )}
-          >
+            />
+            <Action>
              <Text name="customcss" textarea={true} category="other" customcss={true} />
-          </SettingsItem>
-          <SettingsItem
+            </Action>
+          </Row>
+          <Row final={true}>
+            <Content
              title={variables.getMessage('modals.main.settings.sections.experimental.title')}
              subtitle={variables.getMessage(
                'modals.main.settings.sections.advanced.experimental_warning',
              )}
-            final={true}
-          >
+            />
+            <Action>
              <Switch
                name="experimental"
                text={variables.getMessage('modals.main.settings.enabled')}
                element=".other"
              />
-          </SettingsItem>
+            </Action>
+          </Row>
          <Modal
            closeTimeoutMS={100}
            onRequestClose={() => setResetModal(false)}
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@ -7,7 +7,9 @@ import Dropdown from '../Dropdown';
 import Radio from '../Radio';
 import Slider from '../Slider';
 import Text from '../Text';
-import SettingsItem from '../SettingsItem';
+
+import { Row, Content, Action } from '../SettingsItem';
+
 import Section from '../Section';

 import { MdSource, MdOutlineKeyboardArrowRight, MdAccessibility } from 'react-icons/md';
@ -20,12 +22,14 @@ function AppearanceSettings() {

  const ThemeSelection = () => {
    return (
-      <SettingsItem
+      <Row>
+        <Content
          title={variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
          subtitle={variables.getMessage(
            'modals.main.settings.sections.appearance.theme.description',
          )}
-      >
+        />
+        <Action>
          <Radio
            name="theme"
            options={[
@ -44,16 +48,21 @@ function AppearanceSettings() {
            ]}
            category="other"
          />
-      </SettingsItem>
+        </Action>
+      </Row>
    );
  };

  const FontOptions = () => {
    return (
-      <SettingsItem
+      <Row>
+        <Content
          title={variables.getMessage('modals.main.settings.sections.appearance.font.title')}
-        subtitle={variables.getMessage('modals.main.settings.sections.appearance.font.description')}
-      >
+          subtitle={variables.getMessage(
+            'modals.main.settings.sections.appearance.font.description',
+          )}
+        />
+        <Action>
          <Checkbox
            name="fontGoogle"
            text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
@ -66,7 +75,9 @@ function AppearanceSettings() {
            category="other"
          />
          <Dropdown
-          label={variables.getMessage('modals.main.settings.sections.appearance.font.weight.title')}
+            label={variables.getMessage(
+              'modals.main.settings.sections.appearance.font.weight.title',
+            )}
            name="fontweight"
            category="other"
          >
@ -89,7 +100,9 @@ function AppearanceSettings() {
              {variables.getMessage('modals.main.settings.sections.appearance.font.weight.medium')}
            </option>
            <option value="600">
-            {variables.getMessage('modals.main.settings.sections.appearance.font.weight.semi_bold')}
+              {variables.getMessage(
+                'modals.main.settings.sections.appearance.font.weight.semi_bold',
+              )}
            </option>
            <option value="700">
              {variables.getMessage('modals.main.settings.sections.appearance.font.weight.bold')}
@ -101,7 +114,9 @@ function AppearanceSettings() {
            </option>
          </Dropdown>
          <Dropdown
-          label={variables.getMessage('modals.main.settings.sections.appearance.font.style.title')}
+            label={variables.getMessage(
+              'modals.main.settings.sections.appearance.font.style.title',
+            )}
            name="fontstyle"
            category="other"
          >
@ -115,18 +130,21 @@ function AppearanceSettings() {
              {variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
            </option>
          </Dropdown>
-      </SettingsItem>
+        </Action>
+      </Row>
    );
  };

  const WidgetStyle = () => {
    return (
-      <SettingsItem
+      <Row>
+        <Content
          title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
          subtitle={variables.getMessage(
            'modals.main.settings.sections.appearance.style.description',
          )}
-      >
+        />
+        <Action>
          <Radio
            name="widgetStyle"
            element=".other"
@ -142,19 +160,23 @@ function AppearanceSettings() {
            ]}
            category="widgets"
          />
-      </SettingsItem>
+        </Action>
+      </Row>
    );
  };

  const AccessibilityOptions = () => {
    return (
-      <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.appearance.accessibility.title')}
+      <Row final={true}>
+        <Content
+          title={variables.getMessage(
+            'modals.main.settings.sections.appearance.accessibility.title',
+          )}
          subtitle={variables.getMessage(
            'modals.main.settings.sections.appearance.accessibility.description',
          )}
-        final={true}
-      >
+        />
+        <Action>
          <Dropdown
            label={variables.getMessage(
              'modals.main.settings.sections.appearance.accessibility.text_shadow.title',
@ -204,7 +226,8 @@ function AppearanceSettings() {
              )
            }
          />
-      </SettingsItem>
+        </Action>
+      </Row>
    );
  };

--- a/src/components/modals/main/settings/sections/Date.jsx
+++ b/src/components/modals/main/settings/sections/Date.jsx
@ -4,7 +4,8 @@ import { useState } from 'react';
 import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
-import SettingsItem from '../SettingsItem';
+
+import { Row, Content, Action } from '../SettingsItem';
 import PreferencesWrapper from '../PreferencesWrapper';

 export default function Date() {
@ -77,10 +78,12 @@ export default function Date() {
        switch={true}
      />
      <PreferencesWrapper setting="date" switch={true} zoomSetting="zoomDate">
-        <SettingsItem
+        <Row>
+          <Content
            title={variables.getMessage('modals.main.settings.sections.time.type')}
            subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
-        >
+          />
+          <Action>
            <Dropdown
              name="dateType"
              onChange={(value) => {
@ -96,16 +99,18 @@ export default function Date() {
                {variables.getMessage('modals.main.settings.sections.date.type.short')}
              </option>
            </Dropdown>
-        </SettingsItem>
-        <SettingsItem
+          </Action>
+        </Row>
+        <Row final={true}>
+          <Content
            title={
              dateType === 'long'
                ? variables.getMessage('modals.main.settings.sections.date.type.long')
                : variables.getMessage('modals.main.settings.sections.date.type.short')
            }
            subtitle={variables.getMessage('modals.main.settings.sections.date.type_settings')}
-          final={true}
-        >
+          />
+          <Action>
            {dateType === 'long' ? longSettings : shortSettings}
            <Checkbox
              name="weeknumber"
@ -117,7 +122,8 @@ export default function Date() {
              text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
              category="date"
            />
-        </SettingsItem>
+          </Action>
+        </Row>
      </PreferencesWrapper>
    </>
  );
--- a/src/components/modals/main/settings/sections/Experimental.jsx
+++ b/src/components/modals/main/settings/sections/Experimental.jsx
@ -6,7 +6,8 @@ import { TextField } from '@mui/material';

 import EventBus from 'modules/helpers/eventbus';
 import { values } from 'modules/helpers/settings/modals';
-import SettingsItem from '../SettingsItem';
+
+import { Row, Content, Action } from '../SettingsItem';

 function ExperimentalSettings() {
  const [eventType, setEventType] = useState();
@ -20,9 +21,11 @@ function ExperimentalSettings() {
      <span className="subtitle">
        {variables.getMessage('modals.main.settings.sections.experimental.warning')}
      </span>
-      <SettingsItem
+      <Row>
+        <Content
          title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
-      >
+        />
+        <Action>
          <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
          <Slider
            title="Debug timeout"
@ -54,8 +57,11 @@ function ExperimentalSettings() {
          <button className="uploadbg" onClick={() => EventBus.emit(eventType, eventName)}>
            Send
          </button>
-      </SettingsItem>
-      <SettingsItem title="Data" final={true}>
+        </Action>
+      </Row>
+      <Row final={true}>
+        <Content title="Data" />
+        <Action>
          <button
            className="reset"
            style={{ marginLeft: '0px' }}
@ -63,7 +69,8 @@ function ExperimentalSettings() {
          >
            Clear LocalStorage
          </button>
-      </SettingsItem>
+        </Action>
+      </Row>
    </>
  );
 }
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@ -5,7 +5,8 @@ import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
-import SettingsItem from '../SettingsItem';
+
+import { Row, Content, Action } from '../SettingsItem';
 import PreferencesWrapper from '../PreferencesWrapper';

 const GreetingSettings = () => {
@ -23,10 +24,12 @@ const GreetingSettings = () => {

  const AdditionalOptions = () => {
    return (
-      <SettingsItem
+      <Row>
+        <Content
          title={variables.getMessage('modals.main.settings.additional_settings')}
          subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)}
-      >
+        />
+        <Action>
          <Checkbox
            name="events"
            text={variables.getMessage(`${GREETING_SECTION}.events`)}
@ -42,17 +45,21 @@ const GreetingSettings = () => {
            name="greetingName"
            category="greeting"
          />
-      </SettingsItem>
+        </Action>
+      </Row>
    );
  };

  const BirthdayOptions = () => {
    return (
-      <SettingsItem
+      <Row final={true}>
+        <Content
          title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
-        subtitle={variables.getMessage('modals.main.settings.sections.greeting.birthday_subtitle')}
-        final={true}
-      >
+          subtitle={variables.getMessage(
+            'modals.main.settings.sections.greeting.birthday_subtitle',
+          )}
+        />
+        <Action>
          <Switch
            name="birthdayenabled"
            text={variables.getMessage('modals.main.settings.enabled')}
@ -72,7 +79,8 @@ const GreetingSettings = () => {
            value={birthday.toISOString().substring(0, 10)}
            required
          />
-      </SettingsItem>
+        </Action>
+      </Row>
    );
  };

--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/src/components/modals/main/settings/sections/Message.jsx
@ -4,7 +4,7 @@ import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import { TextareaAutosize } from '@mui/material';

-import SettingsItem from '../SettingsItem';
+import { Row, Content, Action } from '../SettingsItem';
 import Header from '../Header';

 import EventBus from 'modules/helpers/eventbus';
@ -72,11 +72,14 @@ export default class Message extends PureComponent {
          switch={true}
        />
        <PreferencesWrapper setting="message" switch={true} zoomSetting="zoomMessage">
-          <SettingsItem title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} final={true}>
+          <Row final={true}>
+            <Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
+            <Action>
              <button onClick={() => this.modifyMessage('add')}>
                {variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
              </button>
-          </SettingsItem>
+            </Action>
+          </Row>
          <div className="messagesContainer">
            {this.state.messages.map((_url, index) => (
              <div className="messageMap" key={index}>
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@ -10,7 +10,7 @@ import AddModal from './quicklinks/AddModal';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';

-import SettingsItem from '../SettingsItem';
+import { Row, Content, Action } from '../SettingsItem';
 import Header from '../Header';
 import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
 import QuickLink from './quicklinks/QuickLink';
@ -121,13 +121,14 @@ function Navbar() {
        zoomSetting="zoomNavbar"
        zoomCategory="navbar"
      />
-      <SettingsItem
+      <Row final={false}>
+        <Content
          title={variables.getMessage('modals.main.settings.additional_settings')}
          subtitle={variables.getMessage(
            'modals.main.settings.sections.appearance.navbar.additional',
          )}
-        final={false}
-      >
+        />
+        <Action>
          <Checkbox
            name="navbarHover"
            text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
@ -160,15 +161,17 @@ function Navbar() {
            text={variables.getMessage('widgets.navbar.apps.title')}
            category="navbar"
          />
-      </SettingsItem>
+        </Action>
+      </Row>
      {showRefreshOptions && (
-        <SettingsItem
+        <Row final={false}>
+          <Content
            title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
            subtitle={variables.getMessage(
              'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
            )}
-          final={false}
-        >
+          />
+          <Action>
            <Dropdown name="refreshOption" category="navbar">
              <option value="page">
                {variables.getMessage(
@ -186,21 +189,24 @@ function Navbar() {
                {variables.getMessage('modals.main.settings.sections.background.title')}
              </option>
            </Dropdown>
-        </SettingsItem>
+          </Action>
+        </Row>
      )}

-      <SettingsItem
+      <Row final={true}>
+        <Content
          title={variables.getMessage('widgets.navbar.apps.title')}
          subtitle={variables.getMessage(
            'modals.main.settings.sections.appearance.navbar.apps_subtitle',
          )}
-        final={true}
-      >
+        />
+        <Action>
          <button onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}>
            {variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
            <MdAddLink />
          </button>
-      </SettingsItem>
+        </Action>
+      </Row>

      <div className="messagesContainer">
        {appsModalInfo.items.map((item, i) => (
--- a/src/components/modals/main/settings/sections/QuickLinks.jsx
+++ b/src/components/modals/main/settings/sections/QuickLinks.jsx
@ -6,7 +6,7 @@ import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Modal from 'react-modal';

-import SettingsItem from '../SettingsItem';
+import { Row, Content, Action } from '../SettingsItem';
 import AddModal from './quicklinks/AddModal';

 import EventBus from 'modules/helpers/eventbus';
@ -138,10 +138,12 @@ export default class QuickLinks extends PureComponent {
          switch={true}
        />
        <PreferencesWrapper setting="quicklinksenabled" switch={true} zoomSetting="zoomQuicklinks">
-          <SettingsItem
+          <Row>
+            <Content
              title={variables.getMessage('modals.main.settings.additional_settings')}
              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
-          >
+            />
+            <Action>
              <Checkbox
                name="quicklinksnewtab"
                text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
@ -152,13 +154,16 @@ export default class QuickLinks extends PureComponent {
                text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
                category="quicklinks"
              />
-          </SettingsItem>
-          <SettingsItem
+            </Action>
+          </Row>
+          <Row>
+            <Content
              title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
              subtitle={variables.getMessage(
                'modals.main.settings.sections.quicklinks.styling_description',
              )}
-          >
+            />
+            <Action>
              <Dropdown
                label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
                name="quickLinksStyle"
@ -174,13 +179,17 @@ export default class QuickLinks extends PureComponent {
                  {variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
                </option>
              </Dropdown>
-          </SettingsItem>
+            </Action>
+          </Row>

-          <SettingsItem title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} final={true}>
+          <Row final={true}>
+            <Content title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} />
+            <Action>
              <button onClick={() => this.setState({ showAddModal: true })}>
                {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink />
              </button>
-          </SettingsItem>
+            </Action>
+          </Row>

          {this.state.items.length === 0 && (
            <div className="photosEmpty">
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@ -12,7 +12,8 @@ import TextareaAutosize from '@mui/material/TextareaAutosize';
 import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
-import SettingsItem from '../SettingsItem';
+
+import { Row, Content, Action } from '../SettingsItem';
 import Section from '../Section';
 import PreferencesWrapper from '../PreferencesWrapper';

@ -98,10 +99,12 @@ export default class QuoteSettings extends PureComponent {

    const ButtonOptions = () => {
      return (
-        <SettingsItem
+        <Row>
+          <Content
            title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
            subtitle={variables.getMessage('modals.main.settings.sections.quote.buttons.subtitle')}
-        >
+          />
+          <Action>
            <Checkbox
              name="copyButton"
              text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
@ -117,7 +120,8 @@ export default class QuoteSettings extends PureComponent {
              text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
              category="quote"
            />
-        </SettingsItem>
+          </Action>
+        </Row>
      );
    };

@ -140,11 +144,12 @@ export default class QuoteSettings extends PureComponent {

    const AdditionalOptions = () => {
      return (
-        <SettingsItem
+        <Row final={true}>
+          <Content
            title={variables.getMessage('modals.main.settings.additional_settings')}
            subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
-          final={true}
-        >
+          />
+          <Action>
            <Checkbox
              name="authorLink"
              text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
@ -155,7 +160,8 @@ export default class QuoteSettings extends PureComponent {
              text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
              element=".other"
            />
-        </SettingsItem>
+          </Action>
+        </Row>
      );
    };

@ -163,15 +169,17 @@ export default class QuoteSettings extends PureComponent {
    if (this.state.quoteType === 'custom' && this.state.sourceSection === true) {
      customSettings = (
        <>
-          <SettingsItem
+          <Row final={true}>
+            <Content
              title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
              subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
-            final={true}
-          >
+            />
+            <Action>
              <button onClick={() => this.modifyCustomQuote('add')}>
                {variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
              </button>
-          </SettingsItem>
+            </Action>
+          </Row>

          {this.state.customQuote.length !== 0 ? (
            <div className="messagesContainer">
@ -255,13 +263,15 @@ export default class QuoteSettings extends PureComponent {
          />
        )}
        {this.state.sourceSection && (
-          <SettingsItem
+          <Row final={true}>
+            <Content
              title={variables.getMessage('modals.main.settings.sections.background.source.title')}
              subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
-            final={true}
-          >
+            />
+            <Action>
              <SourceDropdown />
-          </SettingsItem>
+            </Action>
+          </Row>
        )}
        {!this.state.sourceSection && (
          <PreferencesWrapper setting="quote" zoomSetting="zoomQuote" switch={true}>
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@ -6,7 +6,8 @@ import { MenuItem, TextField } from '@mui/material';
 import Header from '../Header';
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
-import SettingsItem from '../SettingsItem';
+
+import { Row, Content, Action } from '../SettingsItem';

 import EventBus from 'modules/helpers/eventbus';

@ -69,10 +70,12 @@ export default class SearchSettings extends PureComponent {

    const AdditionalOptions = () => {
      return (
-        <SettingsItem
+        <Row>
+          <Content
            title={variables.getMessage('modals.main.settings.additional_settings')}
            subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
-        >
+          />
+          <Action>
            {/* not supported on firefox */}
            {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
              <Checkbox
@ -98,19 +101,21 @@ export default class SearchSettings extends PureComponent {
              text={variables.getMessage(`${SEARCH_SECTION}.autocomplete`)}
              category="search"
            />
-        </SettingsItem>
+          </Action>
+        </Row>
      );
    };

    const SearchEngineSelection = () => {
      return (
-        <SettingsItem
+        <Row final={!this.state.customEnabled}>
+          <Content
            title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
            subtitle={variables.getMessage(
              'modals.main.settings.sections.search.search_engine_subtitle',
            )}
-          final={!this.state.customEnabled}
-        >
+          />
+          <Action>
            <Dropdown
              name="searchEngine"
              onChange={(value) => this.setSearchEngine(value)}
@ -125,7 +130,8 @@ export default class SearchSettings extends PureComponent {
                {variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]}
              </MenuItem>
            </Dropdown>
-        </SettingsItem>
+          </Action>
+        </Row>
      );
    };

@ -141,7 +147,9 @@ export default class SearchSettings extends PureComponent {
          <AdditionalOptions />
          <SearchEngineSelection />
          {this.state.customEnabled && (
-            <SettingsItem title={variables.getMessage(`${SEARCH_SECTION}.custom`)} final={true}>
+            <Row final={true}>
+              <Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
+              <Action>
                <TextField
                  label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
                  value={this.state.customValue}
@ -154,7 +162,8 @@ export default class SearchSettings extends PureComponent {
                    {variables.getMessage('modals.main.settings.buttons.reset')}
                  </span>
                </p>
-            </SettingsItem>
+              </Action>
+            </Row>
          )}
        </PreferencesWrapper>
      </>
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@ -5,8 +5,9 @@ import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Radio from '../Radio';
-import SettingsItem from '../SettingsItem';
+
 import PreferencesWrapper from '../PreferencesWrapper';
+import { Row, Content, Action } from '../SettingsItem';

 import { MdRefresh } from 'react-icons/md';

@ -33,14 +34,17 @@ const TimeSettings = () => {

  const WidgetType = () => {
    return (
-      <SettingsItem
+      <Row final={timeType === 'percentageComplete'}>
+        <Content
          title={variables.getMessage(`${TIME_SECTION}.type`)}
          subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
-        final={timeType === 'percentageComplete'}
-      >
+        />
+        <Action>
          <Dropdown name="timeType" onChange={(value) => setTimeType(value)} category="clock">
            <option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
-          <option value="analogue">{variables.getMessage(`${TIME_SECTION}.analogue.title`)}</option>
+            <option value="analogue">
+              {variables.getMessage(`${TIME_SECTION}.analogue.title`)}
+            </option>
            <option value="percentageComplete">
              {variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
            </option>
@ -48,16 +52,18 @@ const TimeSettings = () => {
              {variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
            </option>
          </Dropdown>
-      </SettingsItem>
+        </Action>
+      </Row>
    );
  };

  const digitalSettings = (
-    <SettingsItem
+    <Row final={true}>
+      <Content
        title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
        subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
-      final={true}
-    >
+      />
+      <Action>
        <Radio
          name="timeformat"
          options={[
@ -83,15 +89,17 @@ const TimeSettings = () => {
          text={variables.getMessage(`${TIME_SECTION}.digital.zero`)}
          category="clock"
        />
-    </SettingsItem>
+      </Action>
+    </Row>
  );

  const analogSettings = (
-    <SettingsItem
+    <Row final={true}>
+      <Content
        title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
        subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
-      final={true}
-    >
+      />
+      <Action>
        <Checkbox
          name="secondHand"
          text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
@ -122,16 +130,19 @@ const TimeSettings = () => {
          text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
          category="clock"
        />
-    </SettingsItem>
+      </Action>
+    </Row>
  );

  const verticalClock = (
    <>
-      <SettingsItem
+      <Row>
+        <Content
          title={variables.getMessage(
            'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
          )}
-      >
+        />
+        <Action>
          <div className="colourInput">
            <input
              type="color"
@ -148,12 +159,15 @@ const TimeSettings = () => {
            <MdRefresh />
            {variables.getMessage('modals.main.settings.buttons.reset')}
          </span>
-      </SettingsItem>
-      <SettingsItem
+        </Action>
+      </Row>
+      <Row>
+        <Content
          title={variables.getMessage(
            'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
          )}
-      >
+        />
+        <Action>
          <div className="colourInput">
            <input
              type="color"
@ -170,7 +184,8 @@ const TimeSettings = () => {
            <MdRefresh />
            {variables.getMessage('modals.main.settings.buttons.reset')}
          </span>
-      </SettingsItem>
+        </Action>
+      </Row>
      {digitalSettings}
    </>
  );
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@ -8,9 +8,11 @@ import Radio from '../Radio';
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
 import { TextField } from '@mui/material';
-import SettingsItem from '../SettingsItem';
+
 import PreferencesWrapper from '../PreferencesWrapper';

+import { Row, Content, Action } from '../SettingsItem';
+
 export default class WeatherSettings extends PureComponent {
  constructor() {
    super();
@ -44,7 +46,9 @@ export default class WeatherSettings extends PureComponent {

    const WidgetType = () => {
      return (
-        <SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)}>
+        <Row>
+          <Content title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)} />
+          <Action>
            <Dropdown
              label={variables.getMessage('modals.main.settings.sections.time.type')}
              name="weatherType"
@ -52,11 +56,16 @@ export default class WeatherSettings extends PureComponent {
              onChange={() => this.forceUpdate()}
            >
              <option value="1">{variables.getMessage(`${WEATHER_SECTION}.options.basic`)}</option>
-            <option value="2">{variables.getMessage(`${WEATHER_SECTION}.options.standard`)}</option>
-            <option value="3">{variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}</option>
+              <option value="2">
+                {variables.getMessage(`${WEATHER_SECTION}.options.standard`)}
+              </option>
+              <option value="3">
+                {variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}
+              </option>
              <option value="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option>
            </Dropdown>
-        </SettingsItem>
+          </Action>
+        </Row>
      );
    };

@ -89,7 +98,9 @@ export default class WeatherSettings extends PureComponent {
        );
      };
      return (
-        <SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.location`)}>
+        <Row>
+          <Content title={variables.getMessage(`${WEATHER_SECTION}.location`)} />
+          <Action>
            <TextField
              label={variables.getMessage(`${WEATHER_SECTION}.location`)}
              value={this.state.location}
@ -102,16 +113,16 @@ export default class WeatherSettings extends PureComponent {
              <MdAutoAwesome />
              {variables.getMessage(`${WEATHER_SECTION}.auto`)}
            </span>
-        </SettingsItem>
+          </Action>
+        </Row>
      );
    };

    const TemperatureFormat = () => {
      return (
-        <SettingsItem
-          title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)}
-          final={weatherType !== '4'}
-        >
+        <Row final={weatherType !== '4'}>
+          <Content title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)} />
+          <Action>
            <Radio
              name="tempformat"
              options={[
@ -130,7 +141,8 @@ export default class WeatherSettings extends PureComponent {
              ]}
              category="weather"
            />
-        </SettingsItem>
+          </Action>
+        </Row>
      );
    };

@ -167,10 +179,9 @@ export default class WeatherSettings extends PureComponent {
      ];

      return (
-        <SettingsItem
-          title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)}
-          final={true}
-        >
+        <Row final={true}>
+          <Content title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)} />
+          <Action>
            {weatherOptions.map((item) => (
              <Checkbox
                key={item.name}
@ -181,7 +192,8 @@ export default class WeatherSettings extends PureComponent {
                disabled={item.disabled}
              />
            ))}
-        </SettingsItem>
+          </Action>
+        </Row>
      );
    };

--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@ -9,7 +9,7 @@ import ChipSelect from '../../ChipSelect';
 import Dropdown from '../../Dropdown';
 import Slider from '../../Slider';
 import Radio from '../../Radio';
-import SettingsItem from '../../SettingsItem';
+import { Row, Content, Action } from '../../SettingsItem';
 import Text from '../../Text';

 import ColourSettings from './Colour';
@ -92,11 +92,7 @@ export default class BackgroundSettings extends PureComponent {

  render() {
    /* const interval = (
-      <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
-        subtitle={variables.getMessage(
-          'modals.main.settings.sections.background.interval.subtitle',
-        )}
+      <Row
        final={
          localStorage.getItem('photo_packs') &&
          this.state.backgroundType !== 'custom' &&
@ -104,6 +100,11 @@ export default class BackgroundSettings extends PureComponent {
          this.state.backgroundType !== 'api'
        }
      >
+      <Content         title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
+        subtitle={variables.getMessage(
+          'modals.main.settings.sections.background.interval.subtitle',
+        )} />
+        <Action>
        <Dropdown
          label={variables.getMessage('modals.main.settings.sections.background.interval.title')}
          name="backgroundchange"
@ -128,16 +129,18 @@ export default class BackgroundSettings extends PureComponent {
            {variables.getMessage('modals.main.settings.sections.background.interval.month')}
          </option>
        </Dropdown>
-      </SettingsItem>
+        </Action>
+      </Row>
    );*/

    const APISettings = (
      <>
-        <SettingsItem
+        <Row final={this.state.backgroundAPI === 'mue'}>
+          <Content
            title={variables.getMessage('modals.main.settings.sections.background.api')}
            subtitle={variables.getMessage('modals.main.settings.sections.background.api_subtitle')}
-          final={this.state.backgroundAPI === 'mue'}
-        >
+          />
+          <Action>
            {this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
              <>
                <Dropdown
@ -172,7 +175,9 @@ export default class BackgroundSettings extends PureComponent {
                )}
              </option>
              <option value="high">
-              {variables.getMessage('modals.main.settings.sections.background.source.quality.high')}
+                {variables.getMessage(
+                  'modals.main.settings.sections.background.source.quality.high',
+                )}
              </option>
              <option value="normal">
                {variables.getMessage(
@ -202,13 +207,17 @@ export default class BackgroundSettings extends PureComponent {
              element="#backgroundImage"
              onChange={(e) => this.updateAPI(e)}
            />
-        </SettingsItem>
+          </Action>
+        </Row>
        {this.state.backgroundAPI === 'unsplash' && (
-          <SettingsItem
-            title={variables.getMessage('modals.main.settings.sections.background.unsplash.title')}
+          <Row final={true}>
+            <Action
+              title={variables.getMessage(
+                'modals.main.settings.sections.background.unsplash.title',
+              )}
              subtitle={variables.getMessage('modals.main.settings.sections.background.subtitle')}
-            final={true}
-          >
+            />
+            <Action>
              <Text
                title={variables.getMessage('modals.main.settings.sections.background.id')}
                subtitle={variables.getMessage(
@ -219,7 +228,8 @@ export default class BackgroundSettings extends PureComponent {
                category="background"
                element="#backgroundImage"
              />
-          </SettingsItem>
+            </Action>
+          </Row>
        )}
      </>
    );
@ -385,13 +395,14 @@ export default class BackgroundSettings extends PureComponent {
        (this.state.backgroundType === 'api' ||
          this.state.backgroundType === 'custom' ||
          this.state.marketplaceEnabled) ? (
-          <SettingsItem
+          <Row final={true}>
+            <Content
              title={variables.getMessage('modals.main.settings.sections.background.display')}
              subtitle={variables.getMessage(
                'modals.main.settings.sections.background.display_subtitle',
              )}
-            final={true}
-          >
+            />
+            <Action>
              <Checkbox
                name="ddgProxy"
                text={variables.getMessage(
@ -419,22 +430,30 @@ export default class BackgroundSettings extends PureComponent {
                element=".other"
                disabled={!usingImage}
              />
-          </SettingsItem>
+            </Action>
+          </Row>
        ) : null}
        {this.state.backgroundSettingsSection && (
          <>
-            <SettingsItem
-              title={variables.getMessage('modals.main.settings.sections.background.source.title')}
-              subtitle={variables.getMessage(
-                'modals.main.settings.sections.background.source.subtitle',
-              )}
+            <Row
              final={
                this.state.backgroundType === 'random_colour' ||
                this.state.backgroundType === 'random_gradient'
              }
            >
+              <Content
+                title={variables.getMessage(
+                  'modals.main.settings.sections.background.source.title',
+                )}
+                subtitle={variables.getMessage(
+                  'modals.main.settings.sections.background.source.subtitle',
+                )}
+              />
+              <Action>
                <Dropdown
-                label={variables.getMessage('modals.main.settings.sections.background.type.title')}
+                  label={variables.getMessage(
+                    'modals.main.settings.sections.background.type.title',
+                  )}
                  name="backgroundType"
                  onChange={(value) => this.setState({ backgroundType: value })}
                  category="background"
@ -468,7 +487,8 @@ export default class BackgroundSettings extends PureComponent {
                    )}
                  </option>
                </Dropdown>
-            </SettingsItem>
+              </Action>
+            </Row>
            {/* // todo: ideally refactor all of this file, but we need interval to appear on marketplace too */}
            {/*{this.state.backgroundType === 'api' ||
            this.state.backgroundType === 'custom' ||
@ -482,15 +502,18 @@ export default class BackgroundSettings extends PureComponent {
          this.state.backgroundType === 'custom' ||
          this.state.marketplaceEnabled) &&
        this.state.effects ? (
-          <SettingsItem
+          <Row final={true}>
+            <Content
              title={variables.getMessage('modals.main.settings.sections.background.effects.title')}
              subtitle={variables.getMessage(
                'modals.main.settings.sections.background.effects.subtitle',
              )}
-            final={true}
-          >
+            />
+            <Action>
              <Slider
-              title={variables.getMessage('modals.main.settings.sections.background.effects.blur')}
+                title={variables.getMessage(
+                  'modals.main.settings.sections.background.effects.blur',
+                )}
                name="blur"
                min="0"
                max="100"
@ -568,7 +591,8 @@ export default class BackgroundSettings extends PureComponent {
                  element="#backgroundImage"
                />
              )}
-          </SettingsItem>
+            </Action>
+          </Row>
        ) : null}
      </>
    );
--- a/src/components/modals/main/settings/sections/background/Colour.jsx
+++ b/src/components/modals/main/settings/sections/background/Colour.jsx
@ -2,7 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { ColorPicker } from '@muetab/react-color-gradient-picker';
 import { toast } from 'react-toastify';
-import SettingsItem from '../../SettingsItem';
+import { Row, Content, Action } from '../../SettingsItem';

 import hexToRgb from 'modules/helpers/background/hexToRgb';
 import rgbToHex from 'modules/helpers/background/rgbToHex';
@ -220,19 +220,21 @@ export default class ColourSettings extends PureComponent {

    return (
      <>
-        <SettingsItem
+        <Row final={true}>
+          <Content
            title={variables.getMessage(
              'modals.main.settings.sections.background.source.custom_colour',
            )}
-          final={true}
-        >
+          />
+          <Action>
            {colourSettings}
            <div className="colourReset">
              <span className="link" onClick={() => this.resetColour()}>
                {variables.getMessage('modals.main.settings.buttons.reset')}
              </span>
            </div>
-        </SettingsItem>
+          </Action>
+        </Row>
      </>
    );
  }