feat: add work in progress 7.0 code

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/main/settings/sections/background/Background.jsx

@@ -1,49 +1,58 @@
-import variables from 'modules/variables';
-import { PureComponent } from 'react';
-import { MenuItem } from '@mui/material';
+import variables from "modules/variables";
+import { PureComponent } from "react";
+import { MenuItem } from "@mui/material";
 
-import Header from '../../Header';
-import Checkbox from '../../Checkbox';
-import Dropdown from '../../Dropdown';
-import Slider from '../../Slider';
-import Radio from '../../Radio';
+import Header from "../../Header";
+import Checkbox from "../../Checkbox";
+import Dropdown from "../../Dropdown";
+import Slider from "../../Slider";
+import Radio from "../../Radio";
+import SettingsItem from "../../SettingsItem";
 
-import ColourSettings from './Colour';
-import CustomSettings from './Custom';
+import ColourSettings from "./Colour";
+import CustomSettings from "./Custom";
 
-import { values } from 'modules/helpers/settings/modals';
+import { values } from "modules/helpers/settings/modals";
 
 export default class BackgroundSettings extends PureComponent {
-  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+  getMessage = (text) =>
+    variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
     this.state = {
-      backgroundType: localStorage.getItem('backgroundType') || 'api',
-      backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
-      backgroundCategories: [this.getMessage('modals.main.loading')],
-      backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue',
-      marketplaceEnabled: localStorage.getItem('photo_packs')
+      backgroundType: localStorage.getItem("backgroundType") || "api",
+      backgroundFilter: localStorage.getItem("backgroundFilter") || "none",
+      backgroundCategories: [this.getMessage("modals.main.loading")],
+      backgroundAPI: localStorage.getItem("backgroundAPI") || "mue",
+      marketplaceEnabled: localStorage.getItem("photo_packs"),
     };
     this.controller = new AbortController();
   }
 
   async getBackgroundCategories() {
-    const data = await (await fetch(variables.constants.API_URL + '/images/categories', { signal: this.controller.signal })).json();
+    const data = await (
+      await fetch(variables.constants.API_URL + "/images/categories", {
+        signal: this.controller.signal,
+      })
+    ).json();
 
     if (this.controller.signal.aborted === true) {
       return;
     }
 
     this.setState({
-      backgroundCategories: data
+      backgroundCategories: data,
     });
   }
 
   componentDidMount() {
-    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+    if (
+      navigator.onLine === false ||
+      localStorage.getItem("offlineMode") === "true"
+    ) {
       return this.setState({
-        backgroundCategories: [this.getMessage('modals.update.offline.title')]
+        backgroundCategories: [this.getMessage("modals.update.offline.title")],
       });
     }
 
@@ -62,117 +71,374 @@ export default class BackgroundSettings extends PureComponent {
 
     const apiOptions = [
       {
-        name: 'Mue',
-        value: 'mue'
+        name: "Mue",
+        value: "mue",
       },
       {
-        name: 'Unsplash',
-        value: 'unsplash'
+        name: "Unsplash",
+        value: "unsplash",
       },
       {
-        name: 'Pexels',
-        value: 'pexels'
-      }
+        name: "Pexels",
+        value: "pexels",
+      },
     ];
 
     const interval = (
-      <Dropdown label={getMessage('modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
-        <option value='refresh'>{getMessage('tabname')}</option>
-        <option value='60000'>{getMessage('modals.main.settings.sections.background.interval.minute')}</option>
-        <option value='1800000'>{getMessage('modals.main.settings.sections.background.interval.half_hour')}</option>
-        <option value='3600000'>{getMessage('modals.main.settings.sections.background.interval.hour')}</option>
-        <option value='86400000'>{getMessage('modals.main.settings.sections.background.interval.day')}</option>
-        <option value='604800000'>{getMessage('widgets.date.week')}</option>
-        <option value='2628000000'>{getMessage('modals.main.settings.sections.background.interval.month')}</option>
-      </Dropdown>
+      <SettingsItem>
+        <Dropdown
+          label={getMessage(
+            "modals.main.settings.sections.background.interval.title"
+          )}
+          name="backgroundchange"
+        >
+          <option value="refresh">{getMessage("tabname")}</option>
+          <option value="60000">
+            {getMessage(
+              "modals.main.settings.sections.background.interval.minute"
+            )}
+          </option>
+          <option value="1800000">
+            {getMessage(
+              "modals.main.settings.sections.background.interval.half_hour"
+            )}
+          </option>
+          <option value="3600000">
+            {getMessage(
+              "modals.main.settings.sections.background.interval.hour"
+            )}
+          </option>
+          <option value="86400000">
+            {getMessage(
+              "modals.main.settings.sections.background.interval.day"
+            )}
+          </option>
+          <option value="604800000">{getMessage("widgets.date.week")}</option>
+          <option value="2628000000">
+            {getMessage(
+              "modals.main.settings.sections.background.interval.month"
+            )}
+          </option>
+        </Dropdown>
+      </SettingsItem>
     );
 
     const APISettings = (
       <>
-        <Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage' onChange={(e) => this.setState({ backgroundAPI: e })}/>
-        {this.state.backgroundCategories[0] === getMessage('modals.main.loading') ?
-          <>
-            <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
-              <MenuItem value='loading' key='loading'>{getMessage('modals.main.loading')}</MenuItem>
-              <MenuItem value='loading' key='loading'>{getMessage('modals.main.loading')}</MenuItem>
+        <SettingsItem>
+          <Radio
+            title={getMessage(
+              "modals.main.settings.sections.background.source.api"
+            )}
+            options={apiOptions}
+            name="backgroundAPI"
+            category="background"
+            element="#backgroundImage"
+            onChange={(e) => this.setState({ backgroundAPI: e })}
+          />
+          {this.state.backgroundCategories[0] ===
+          getMessage("modals.main.loading") ? (
+            <>
+              <Dropdown
+                label={getMessage(
+                  "modals.main.settings.sections.background.category"
+                )}
+                name="apiCategory"
+              >
+                <MenuItem value="loading" key="loading">
+                  {getMessage("modals.main.loading")}
+                </MenuItem>
+                <MenuItem value="loading" key="loading">
+                  {getMessage("modals.main.loading")}
+                </MenuItem>
+              </Dropdown>
+            </>
+          ) : (
+            <Dropdown
+              label={getMessage(
+                "modals.main.settings.sections.background.category"
+              )}
+              name="apiCategory"
+            >
+              {this.state.backgroundCategories.map((category) => (
+                <MenuItem value={category} key={category}>
+                  {category.charAt(0).toUpperCase() + category.slice(1)}
+                </MenuItem>
+              ))}
             </Dropdown>
-          </> : 
-          <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory' >
-            {this.state.backgroundCategories.map((category) => (
-              <MenuItem value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</MenuItem>
-            ))}
+          )}
+          <Dropdown
+            label={getMessage(
+              "modals.main.settings.sections.background.source.quality.title"
+            )}
+            name="apiQuality"
+            element=".other"
+          >
+            <option value="original">
+              {getMessage(
+                "modals.main.settings.sections.background.source.quality.original"
+              )}
+            </option>
+            <option value="high">
+              {getMessage(
+                "modals.main.settings.sections.background.source.quality.high"
+              )}
+            </option>
+            <option value="normal">
+              {getMessage(
+                "modals.main.settings.sections.background.source.quality.normal"
+              )}
+            </option>
+            <option value="datasaver">
+              {getMessage(
+                "modals.main.settings.sections.background.source.quality.datasaver"
+              )}
+            </option>
           </Dropdown>
-        }
-        <Dropdown label={getMessage('modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
-          <option value='original'>{getMessage('modals.main.settings.sections.background.source.quality.original')}</option>
-          <option value='high'>{getMessage('modals.main.settings.sections.background.source.quality.high')}</option>
-          <option value='normal'>{getMessage('modals.main.settings.sections.background.source.quality.normal')}</option>
-          <option value='datasaver'>{getMessage('modals.main.settings.sections.background.source.quality.datasaver')}</option>
-        </Dropdown>
+        </SettingsItem>
         {interval}
       </>
     );
 
     switch (this.state.backgroundType) {
-      case 'custom': backgroundSettings = <CustomSettings interval={interval}/>; break;
-      case 'colour': backgroundSettings = <ColourSettings/>; break;
-      case 'random_colour': backgroundSettings = <></>; break;
-      case 'random_gradient': backgroundSettings = <></>; break;
-      default: backgroundSettings = APISettings; break;
+      case "custom":
+        backgroundSettings = <CustomSettings interval={interval} />;
+        break;
+      case "colour":
+        backgroundSettings = <ColourSettings />;
+        break;
+      case "random_colour":
+        backgroundSettings = <></>;
+        break;
+      case "random_gradient":
+        backgroundSettings = <></>;
+        break;
+      default:
+        backgroundSettings = APISettings;
+        break;
     }
 
-    if (localStorage.getItem('photo_packs') && this.state.backgroundType !== 'custom' && this.state.backgroundType !== 'colour' && this.state.backgroundType !== 'api') {
+    if (
+      localStorage.getItem("photo_packs") &&
+      this.state.backgroundType !== "custom" &&
+      this.state.backgroundType !== "colour" &&
+      this.state.backgroundType !== "api"
+    ) {
       backgroundSettings = null;
     }
 
-    const usingImage = this.state.backgroundType !== 'colour' && this.state.backgroundType !== 'random_colour' && this.state.backgroundType !== 'random_gradient';
-  
+    const usingImage =
+      this.state.backgroundType !== "colour" &&
+      this.state.backgroundType !== "random_colour" &&
+      this.state.backgroundType !== "random_gradient";
+
     return (
       <>
-        <Header title={getMessage('modals.main.settings.sections.background.title')} setting='background' category='background' element='#backgroundImage'/>
-        <Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' disabled={!usingImage} />
-        <Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' disabled={!usingImage} />
-        <Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' disabled={this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'} />
-        <Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other' disabled={this.state.backgroundAPI !== 'unsplash'}/>
-
-        <h3>{getMessage('modals.main.settings.sections.background.source.title')}</h3>
-        <Dropdown label={getMessage('modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
-          {this.state.marketplaceEnabled ? <option value='photo_pack'>{this.getMessage('modals.main.navbar.marketplace')}</option> : null}
-          <option value='api'>{getMessage('modals.main.settings.sections.background.type.api')}</option>
-          <option value='custom'>{getMessage('modals.main.settings.sections.background.type.custom_image')}</option>
-          <option value='colour'>{getMessage('modals.main.settings.sections.background.type.custom_colour')}</option>
-          <option value='random_colour'>{getMessage('modals.main.settings.sections.background.type.random_colour')}</option>
-          <option value='random_gradient'>{getMessage('modals.main.settings.sections.background.type.random_gradient')}</option>
-        </Dropdown>
-        
+        <Header
+          title={getMessage("modals.main.settings.sections.background.title")}
+          setting="background"
+          category="background"
+          element="#backgroundImage"
+        />
+        <SettingsItem title="cheese" subtitle="cheese">
+          <Checkbox
+            name="ddgProxy"
+            text={getMessage(
+              "modals.main.settings.sections.background.ddg_image_proxy"
+            )}
+            element=".other"
+            disabled={!usingImage}
+          />
+          <Checkbox
+            name="bgtransition"
+            text={getMessage(
+              "modals.main.settings.sections.background.transition"
+            )}
+            element=".other"
+            disabled={!usingImage}
+          />
+          <Checkbox
+            name="photoInformation"
+            text={getMessage(
+              "modals.main.settings.sections.background.photo_information"
+            )}
+            element=".other"
+            disabled={
+              this.state.backgroundType !== "api" &&
+              this.state.backgroundType !== "marketplace"
+            }
+          />
+          <Checkbox
+            name="photoMap"
+            text={getMessage(
+              "modals.main.settings.sections.background.show_map"
+            )}
+            element=".other"
+            disabled={this.state.backgroundAPI !== "unsplash"}
+          />
+        </SettingsItem>
+        <SettingsItem
+          title={getMessage(
+            "modals.main.settings.sections.background.buttons.title"
+          )}
+          subtitle="cheese"
+        >
+          <Checkbox
+            name="favouriteEnabled"
+            text={getMessage(
+              "modals.main.settings.sections.background.buttons.favourite"
+            )}
+            category="navbar"
+          />
+          {this.state.backgroundType === "api" &&
+          APISettings &&
+          this.state.backgroundAPI === "mue" ? (
+            <Checkbox
+              name="downloadbtn"
+              text={getMessage(
+                "modals.main.settings.sections.background.buttons.download"
+              )}
+              element=".other"
+            />
+          ) : null}
+        </SettingsItem>
+        <SettingsItem
+          title={getMessage(
+            "modals.main.settings.sections.background.source.title"
+          )}
+          subtitle="mucho gracias"
+        >
+          <Dropdown
+            label={getMessage(
+              "modals.main.settings.sections.background.type.title"
+            )}
+            name="backgroundType"
+            onChange={(value) => this.setState({ backgroundType: value })}
+            category="background"
+          >
+            {this.state.marketplaceEnabled ? (
+              <option value="photo_pack">
+                {this.getMessage("modals.main.navbar.marketplace")}
+              </option>
+            ) : null}
+            <option value="api">
+              {getMessage("modals.main.settings.sections.background.type.api")}
+            </option>
+            <option value="custom">
+              {getMessage(
+                "modals.main.settings.sections.background.type.custom_image"
+              )}
+            </option>
+            <option value="colour">
+              {getMessage(
+                "modals.main.settings.sections.background.type.custom_colour"
+              )}
+            </option>
+            <option value="random_colour">
+              {getMessage(
+                "modals.main.settings.sections.background.type.random_colour"
+              )}
+            </option>
+            <option value="random_gradient">
+              {getMessage(
+                "modals.main.settings.sections.background.type.random_gradient"
+              )}
+            </option>
+          </Dropdown>
+        </SettingsItem>
         {backgroundSettings}
-
-        {this.state.backgroundType === 'api' && APISettings && this.state.backgroundAPI === 'mue' ? 
-          <>
-            <h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
-            <Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
-          </>
-        : null}
-  
-        {this.state.backgroundType === 'api' || this.state.backgroundType === 'custom' || this.state.marketplaceEnabled ?
-          <>
-            <h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
-            <Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
-            <Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' marks={values('background')} category='background' element='#backgroundImage' />
-            <br/>
-            <Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' onChange={(value) => this.setState({ backgroundFilter: value })} category='background' element='#backgroundImage'>
-              <option value='none'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
-              <option value='grayscale'>{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}</option>
-              <option value='sepia'>{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}</option>
-              <option value='invert'>{getMessage('modals.main.settings.sections.background.effects.filters.invert')}</option>
-              <option value='saturate'>{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}</option>
-              <option value='contrast'>{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}</option>
+        {this.state.backgroundType === "api" ||
+        this.state.backgroundType === "custom" ||
+        this.state.marketplaceEnabled ? (
+          <SettingsItem
+            title={getMessage(
+              "modals.main.settings.sections.background.effects.title"
+            )}
+            subtitle="cheese"
+          >
+            <Slider
+              title={getMessage(
+                "modals.main.settings.sections.background.effects.blur"
+              )}
+              name="blur"
+              min="0"
+              max="100"
+              default="0"
+              display="%"
+              marks={values("background")}
+              category="background"
+              element="#backgroundImage"
+            />
+            <Slider
+              title={getMessage(
+                "modals.main.settings.sections.background.effects.brightness"
+              )}
+              name="brightness"
+              min="0"
+              max="100"
+              default="90"
+              display="%"
+              marks={values("background")}
+              category="background"
+              element="#backgroundImage"
+            />
+            <Dropdown
+              label={getMessage(
+                "modals.main.settings.sections.background.effects.filters.title"
+              )}
+              name="backgroundFilter"
+              onChange={(value) => this.setState({ backgroundFilter: value })}
+              category="background"
+              element="#backgroundImage"
+            >
+              <option value="none">
+                {getMessage(
+                  "modals.main.settings.sections.appearance.navbar.refresh_options.none"
+                )}
+              </option>
+              <option value="grayscale">
+                {getMessage(
+                  "modals.main.settings.sections.background.effects.filters.grayscale"
+                )}
+              </option>
+              <option value="sepia">
+                {getMessage(
+                  "modals.main.settings.sections.background.effects.filters.sepia"
+                )}
+              </option>
+              <option value="invert">
+                {getMessage(
+                  "modals.main.settings.sections.background.effects.filters.invert"
+                )}
+              </option>
+              <option value="saturate">
+                {getMessage(
+                  "modals.main.settings.sections.background.effects.filters.saturate"
+                )}
+              </option>
+              <option value="contrast">
+                {getMessage(
+                  "modals.main.settings.sections.background.effects.filters.contrast"
+                )}
+              </option>
             </Dropdown>
-            {this.state.backgroundFilter !== 'none' ?
-              <Slider title={getMessage('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
-            : null}
-          </>
-        : null}
+            {this.state.backgroundFilter !== "none" ? (
+              <Slider
+                title={getMessage(
+                  "modals.main.settings.sections.background.effects.filters.amount"
+                )}
+                name="backgroundFilterAmount"
+                min="0"
+                max="100"
+                default="0"
+                display="%"
+                marks={values("background")}
+                category="background"
+                element="#backgroundImage"
+              />
+            ) : null}
+          </SettingsItem>
+        ) : null}
       </>
     );
   }

src/components/modals/main/settings/sections/background/Colour.jsx

@@ -1,37 +1,43 @@
-import variables from 'modules/variables';
-import { PureComponent, Fragment } from 'react';
-import { ColorPicker } from 'react-color-gradient-picker';
-import { toast } from 'react-toastify';
+import variables from "modules/variables";
+import { PureComponent, Fragment } from "react";
+import { ColorPicker } from "react-color-gradient-picker";
+import { toast } from "react-toastify";
+import SettingsItem from "../../SettingsItem";
 
-import hexToRgb from 'modules/helpers/background/hexToRgb';
-import rgbToHex from 'modules/helpers/background/rgbToHex';
+import hexToRgb from "modules/helpers/background/hexToRgb";
+import rgbToHex from "modules/helpers/background/rgbToHex";
 
-import 'react-color-gradient-picker/dist/index.css';
-import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
+import "react-color-gradient-picker/dist/index.css";
+import "../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss";
 
 export default class ColourSettings extends PureComponent {
-  DefaultGradientSettings = { angle: '180', gradient: [{ colour: '#ffb032', stop: 0 }], type: 'linear' };
-  GradientPickerInitalState = undefined;
+  DefaultGradientSettings = {
+    angle: "180",
+    gradient: [{ colour: "#ffb032", stop: 0 }],
+    type: "linear",
+  };
+  GradientPickerInitialState = undefined;
+
+  getMessage = (text) =>
+    variables.language.getMessage(variables.languagecode, text);
 
-  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
-  
   constructor() {
     super();
     this.state = {
-      gradientSettings: this.DefaultGradientSettings
+      gradientSettings: this.DefaultGradientSettings,
     };
   }
 
   resetColour() {
-    localStorage.setItem('customBackgroundColour', '');
+    localStorage.setItem("customBackgroundColour", "");
     this.setState({
-      gradientSettings: this.DefaultGradientSettings
+      gradientSettings: this.DefaultGradientSettings,
     });
-    toast(this.getMessage('toasts.reset'));
+    toast(this.getMessage("toasts.reset"));
   }
 
   initialiseColourPickerState(gradientSettings) {
-    this.GradientPickerInitalState = {
+    this.GradientPickerInitialState = {
       points: gradientSettings.gradient.map((g) => {
         const rgb = hexToRgb(g.colour);
         return {
@@ -39,19 +45,19 @@ export default class ColourSettings extends PureComponent {
           red: rgb.red,
           green: rgb.green,
           blue: rgb.blue,
-          alpha: 1
+          alpha: 1,
         };
       }),
-      degree: + gradientSettings.angle,
-      type: gradientSettings.type
+      degree: +gradientSettings.angle,
+      type: gradientSettings.type,
     };
   }
 
   componentDidMount() {
-    const hex = localStorage.getItem('customBackgroundColour');
+    const hex = localStorage.getItem("customBackgroundColour");
     let gradientSettings = undefined;
 
-    if (hex !== '') {
+    if (hex !== "") {
       try {
         gradientSettings = JSON.parse(hex);
       } catch (e) {
@@ -64,58 +70,91 @@ export default class ColourSettings extends PureComponent {
     }
 
     this.setState({
-      gradientSettings
+      gradientSettings,
     });
   }
 
   componentDidUpdate() {
-    localStorage.setItem('customBackgroundColour', this.currentGradientSettings());
+    localStorage.setItem(
+      "customBackgroundColour",
+      this.currentGradientSettings()
+    );
   }
 
   onGradientChange = (event, index) => {
     const newValue = event.target.value;
     const name = event.target.name;
     this.setState((s) => {
-      const newState = {
+      return (newState = {
         gradientSettings: {
           ...s.gradientSettings,
-          gradient: s.gradientSettings.gradient.map((g, i) => i === index ? { ...g, [name]: newValue } : g)
-        }
-      };
-      return newState;
+          gradient: s.gradientSettings.gradient.map((g, i) =>
+            i === index ? { ...g, [name]: newValue } : g
+          ),
+        },
+      });
     });
 
     this.showReminder();
-  }
+  };
 
   addColour = () => {
     this.setState((s) => {
-      const [lastGradient, ...initGradients] = s.gradientSettings.gradient.reverse();
-      const newState = {
+      const [lastGradient, ...initGradients] =
+        s.gradientSettings.gradient.reverse();
+      return {
         gradientSettings: {
           ...s.gradientSettings,
-          gradient: [...initGradients, lastGradient, { colour: localStorage.getItem('theme') === 'dark' ? '#000000' : '#ffffff', stop: 100 }].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
-        }
+          gradient: [
+            ...initGradients,
+            lastGradient,
+            {
+              colour:
+                localStorage.getItem("theme") === "dark"
+                  ? "#000000"
+                  : "#ffffff",
+              stop: 100,
+            },
+          ].sort((a, b) => (a.stop > b.stop ? 1 : -1)),
+        },
       };
-      return newState;
     });
 
-    variables.stats.postEvent('setting', 'Changed backgroundtype from colour to gradient');
-  }
+    variables.stats.postEvent(
+      "setting",
+      "Changed backgroundType from colour to gradient"
+    );
+  };
 
   currentGradientSettings = () => {
-    if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.getMessage('modals.main.settings.sections.background.source.disabled'))) {
-      const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
+    if (
+      typeof this.state.gradientSettings === "object" &&
+      this.state.gradientSettings.gradient.every(
+        (g) =>
+          g.colour !==
+          this.getMessage(
+            "modals.main.settings.sections.background.source.disabled"
+          )
+      )
+    ) {
+      const clampNumber = (num, a, b) =>
+        Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
       return JSON.stringify({
         ...this.state.gradientSettings,
-        gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
+        gradient: [
+          ...this.state.gradientSettings.gradient.map((g) => {
+            return { ...g, stop: clampNumber(+g.stop, 0, 100) };
+          }),
+        ].sort((a, b) => (a.stop > b.stop ? 1 : -1)),
       });
     }
-    return this.getMessage('modals.main.settings.sections.background.source.disabled');
-  }
+    return this.getMessage(
+      "modals.main.settings.sections.background.source.disabled"
+    );
+  };
 
   onColourPickerChange = (attrs, name) => {
-    if (process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === "development") {
       console.log(attrs, name);
     }
 
@@ -124,49 +163,63 @@ export default class ColourSettings extends PureComponent {
         angle: attrs.degree,
         gradient: attrs.points.map((p) => {
           return {
-            colour: '#' + rgbToHex(p.red, p.green, p.blue),
-            stop: p.left
-          }}),
-        type: attrs.type
-      }
+            colour: "#" + rgbToHex(p.red, p.green, p.blue),
+            stop: p.left,
+          };
+        }),
+        type: attrs.type,
+      },
     });
 
     this.showReminder();
   };
 
   showReminder() {
-    const reminderInfo = document.querySelector('.reminder-info');
-    if (reminderInfo.style.display !== 'block') {
-      reminderInfo.style.display = 'block';
-      localStorage.setItem('showReminder', true);
+    const reminderInfo = document.querySelector(".reminder-info");
+    if (reminderInfo.style.display !== "block") {
+      reminderInfo.style.display = "block";
+      localStorage.setItem("showReminder", true);
     }
   }
 
   render() {
     let colourSettings = null;
-    if (typeof this.state.gradientSettings === 'object') {
-      const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
+    if (typeof this.state.gradientSettings === "object") {
+      const gradientHasMoreThanOneColour =
+        this.state.gradientSettings.gradient.length > 1;
 
       let gradientInputs;
       if (gradientHasMoreThanOneColour) {
-        if (this.GradientPickerInitalState === undefined) {
+        if (this.GradientPickerInitialState === undefined) {
           this.initialiseColourPickerState(this.state.gradientSettings);
         }
 
         gradientInputs = (
           <ColorPicker
-            onStartChange={(colour) => this.onColourPickerChange(colour, 'start')}
-            onChange={(colour) => this.onColourPickerChange(colour, 'change')}
-            onEndChange={(colour) => this.onColourPickerChange(colour, 'end')}
-            gradient={this.GradientPickerInitalState}
-            isGradient/>
+            onStartChange={(colour) =>
+              this.onColourPickerChange(colour, "start")
+            }
+            onChange={(colour) => this.onColourPickerChange(colour, "change")}
+            onEndChange={(colour) => this.onColourPickerChange(colour, "end")}
+            gradient={this.GradientPickerInitialState}
+            isGradient
+          />
         );
       } else {
         gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
           return (
             <Fragment key={i}>
-              <input id={'colour_' + i} type='color' name='colour' className='colour' onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
-              <label htmlFor={'colour_' + i} className='customBackgroundHex'>{g.colour}</label>
+              <input
+                id={"colour_" + i}
+                type="color"
+                name="colour"
+                className="colour"
+                onChange={(event) => this.onGradientChange(event, i)}
+                value={g.colour}
+              ></input>
+              <label htmlFor={"colour_" + i} className="customBackgroundHex">
+                {g.colour}
+              </label>
             </Fragment>
           );
         });
@@ -174,16 +227,32 @@ export default class ColourSettings extends PureComponent {
 
       colourSettings = (
         <>
-          {gradientInputs}
-          {!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{this.getMessage('modals.main.settings.sections.background.source.add_colour')}</button></>) : null}
+          <div className="colourInput">{gradientInputs}</div>
+          {!gradientHasMoreThanOneColour ? (
+            <>
+              <button type="button" className="add" onClick={this.addColour}>
+                {this.getMessage(
+                  "modals.main.settings.sections.background.source.add_colour"
+                )}
+              </button>
+            </>
+          ) : null}
         </>
       );
     }
 
     return (
       <>
-        <p>{this.getMessage('modals.main.settings.sections.background.source.custom_colour')} <span className='modalLink' onClick={() => this.resetColour()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
-        {colourSettings}
+        <SettingsItem
+          title={this.getMessage(
+            "modals.main.settings.sections.background.source.custom_colour"
+          )}
+        >
+          <span className="link" onClick={() => this.resetColour()}>
+            {this.getMessage("modals.main.settings.buttons.reset")}
+          </span>
+          {colourSettings}
+        </SettingsItem>
       </>
     );
   }

src/components/modals/main/settings/sections/background/Custom.jsx

@@ -1,141 +1,228 @@
-import variables from 'modules/variables';
-import { PureComponent } from 'react';
-import { toast } from 'react-toastify';
-import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
-import EventBus from 'modules/helpers/eventbus';
+import variables from "modules/variables";
+import { PureComponent } from "react";
+import { toast } from "react-toastify";
+import {
+  MdCancel,
+  MdAddLink,
+  MdAddPhotoAlternate,
+  MdPersonalVideo,
+} from "react-icons/md";
+import EventBus from "modules/helpers/eventbus";
 
-import Checkbox from '../../Checkbox';
-import FileUpload from '../../FileUpload';
+import Checkbox from "../../Checkbox";
+import FileUpload from "../../FileUpload";
+import SettingsItem from "../../SettingsItem";
 
-import Modal from 'react-modal';
+import Modal from "react-modal";
 
-import CustomURLModal from './CustomURLModal';
+import CustomURLModal from "./CustomURLModal";
 
 export default class CustomSettings extends PureComponent {
-  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+  getMessage = (text) =>
+    variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
     this.state = {
       customBackground: this.getCustom(),
-      customURLModal: false
+      customURLModal: false,
     };
   }
 
   resetCustom = () => {
-    localStorage.setItem('customBackground', '[]');
+    localStorage.setItem("customBackground", "[]");
     this.setState({
-      customBackground: []
+      customBackground: [],
     });
-    toast(this.getMessage('toasts.reset'));
-    EventBus.dispatch('refresh', 'background');
-  }
-    
+    toast(this.getMessage("toasts.reset"));
+    EventBus.dispatch("refresh", "background");
+  };
+
   customBackground(e, text, index) {
-    const result = (text === true) ? e.target.value : e.target.result;
-    
+    const result = text === true ? e.target.value : e.target.result;
+
     const customBackground = this.state.customBackground;
     customBackground[index] = result;
     this.setState({
-      customBackground
+      customBackground,
     });
     this.forceUpdate();
-    
-    localStorage.setItem('customBackground', JSON.stringify(customBackground));
-    document.querySelector('.reminder-info').style.display = 'block';
-    localStorage.setItem('showReminder', true);
+
+    localStorage.setItem("customBackground", JSON.stringify(customBackground));
+    document.querySelector(".reminder-info").style.display = "flex";
+    localStorage.setItem("showReminder", true);
   }
-    
+
   modifyCustomBackground(type, index) {
     const customBackground = this.state.customBackground;
-    if (type === 'add') {
-      customBackground.push('');
+    if (type === "add") {
+      customBackground.push("");
     } else {
       customBackground.splice(index, 1);
     }
-    
+
     this.setState({
-      customBackground
+      customBackground,
     });
     this.forceUpdate();
-    
-    localStorage.setItem('customBackground', JSON.stringify(customBackground));
-    document.querySelector('.reminder-info').style.display = 'block';
-    localStorage.setItem('showReminder', true);
+
+    localStorage.setItem("customBackground", JSON.stringify(customBackground));
+    document.querySelector(".reminder-info").style.display = "flex";
+    localStorage.setItem("showReminder", true);
   }
 
   videoCheck(url) {
-    return url.startsWith('data:video/') || url.endsWith('.mp4') || url.endsWith('.webm') || url.endsWith('.ogg');
+    return (
+      url.startsWith("data:video/") ||
+      url.endsWith(".mp4") ||
+      url.endsWith(".webm") ||
+      url.endsWith(".ogg")
+    );
   }
-    
-  videoCustomSettings = () => {
-    const hasVideo = this.state.customBackground.filter(bg => this.videoCheck(bg));
 
-    if (hasVideo.length > 0) { 
+  videoCustomSettings = () => {
+    const hasVideo = this.state.customBackground.filter((bg) =>
+      this.videoCheck(bg)
+    );
+
+    if (hasVideo.length > 0) {
       return (
         <>
-          <Checkbox name='backgroundVideoLoop' text={this.getMessage('modals.main.settings.sections.background.source.loop_video')}/>
-          <Checkbox name='backgroundVideoMute' text={this.getMessage('modals.main.settings.sections.background.source.mute_video')}/>
+          <Checkbox
+            name="backgroundVideoLoop"
+            text={this.getMessage(
+              "modals.main.settings.sections.background.source.loop_video"
+            )}
+          />
+          <Checkbox
+            name="backgroundVideoMute"
+            text={this.getMessage(
+              "modals.main.settings.sections.background.source.mute_video"
+            )}
+          />
         </>
       );
     } else {
       return null;
     }
-  }
-    
+  };
+
   getCustom() {
     let data;
     try {
-      data = JSON.parse(localStorage.getItem('customBackground'));
+      data = JSON.parse(localStorage.getItem("customBackground"));
     } catch (e) {
-      data = [localStorage.getItem('customBackground')];
+      data = [localStorage.getItem("customBackground")];
     }
-    
+
     return data;
   }
-    
+
   uploadCustomBackground() {
-    document.getElementById('bg-input').setAttribute('index', this.state.customBackground.length);
-    document.getElementById('bg-input').click();
+    document
+      .getElementById("bg-input")
+      .setAttribute("index", this.state.customBackground.length);
+    document.getElementById("bg-input").click();
     // to fix loadFunction
     this.setState({
-      currentBackgroundIndex: this.state.customBackground.length
+      currentBackgroundIndex: this.state.customBackground.length,
     });
   }
 
   addCustomURL(e) {
     this.setState({
       customURLModal: false,
-      currentBackgroundIndex: this.state.customBackground.length
+      currentBackgroundIndex: this.state.customBackground.length,
     });
-    this.customBackground({ target: { value: e }}, true, this.state.customBackground.length);
+    this.customBackground(
+      { target: { value: e } },
+      true,
+      this.state.customBackground.length
+    );
   }
 
   render() {
     return (
-      <ul>
-        <p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
-        <div className='data-buttons-row'>
-          <button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <MdAddPhotoAlternate/></button>
-          <button onClick={() => this.setState({ customURLModal: true })}>{this.getMessage('modals.main.settings.sections.background.source.add_url')} <MdAddLink/></button>
-        </div>
-        <div className='images-row'>
-          {this.state.customBackground.map((url, index) => (
-            <div style={{ backgroundImage: `url(${!this.videoCheck(url) ? this.state.customBackground[index] : ''})` }} key={index}>
-              {this.videoCheck(url) ? <MdPersonalVideo className='customvideoicon'/> : null} 
-              {this.state.customBackground.length > 0 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
-                <MdCancel/>
-              </button> : null}
-            </div>
-          ))}
-        </div>
-        <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
+      <>
         {this.props.interval}
+        <div className="settingsRow" style={{ alignItems: "flex-start" }}>
+          <div className="content">
+            <div className="images-row">
+              {this.state.customBackground.map((url, index) => (
+                <div key={index}>
+                  <img
+                    alt={"Custom background " + (index || 0)}
+                    src={`${
+                      !this.videoCheck(url)
+                        ? this.state.customBackground[index]
+                        : ""
+                    }`}
+                  />
+                  {this.videoCheck(url) ? (
+                    <MdPersonalVideo className="customvideoicon" />
+                  ) : null}
+                  {this.state.customBackground.length > 0 ? (
+                    <button
+                      className="iconButton"
+                      onClick={() =>
+                        this.modifyCustomBackground("remove", index)
+                      }
+                    >
+                      <MdCancel />
+                    </button>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="action">
+            {/*<button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <MdAddPhotoAlternate/></button>*/}
+            <div className="dropzone">
+              <MdAddPhotoAlternate />
+              <span className="title">Drop to upload</span>
+              <span className="subtitle">
+                Available formats, jpeg, png, webp, webm, gif, mp4, webm, ogg
+              </span>
+              <button onClick={() => this.uploadCustomBackground()}>
+                Or Select
+              </button>
+            </div>
+            <button onClick={() => this.setState({ customURLModal: true })}>
+              {this.getMessage(
+                "modals.main.settings.sections.background.source.add_url"
+              )}{" "}
+              <MdAddLink />
+            </button>
+            {/*<span className='subtitle'>
+              {this.getMessage('modals.main.settings.sections.background.source.custom_background')}{' '}
+              <span className="link" onClick={this.resetCustom}>
+                {this.getMessage('modals.main.settings.buttons.reset')}
+              </span>
+                  </span>*/}
+          </div>
+        </div>
+        <FileUpload
+          id="bg-input"
+          accept="image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg"
+          loadFunction={(e) =>
+            this.customBackground(e, false, this.state.currentBackgroundIndex)
+          }
+        />
         {this.videoCustomSettings()}
-        <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ customURLModal: false })} isOpen={this.state.customURLModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
-          <CustomURLModal modalClose={(e) => this.addCustomURL(e)} modalCloseOnly={() => this.setState({ customURLModal: false })} />
+        <Modal
+          closeTimeoutMS={100}
+          onRequestClose={() => this.setState({ customURLModal: false })}
+          isOpen={this.state.customURLModal}
+          className="Modal resetmodal mainModal"
+          overlayClassName="Overlay resetoverlay"
+          ariaHideApp={false}
+        >
+          <CustomURLModal
+            modalClose={(e) => this.addCustomURL(e)}
+            modalCloseOnly={() => this.setState({ customURLModal: false })}
+          />
         </Modal>
-      </ul>
+      </>
     );
   }
 }

src/components/modals/main/settings/sections/background/CustomURLModal.jsx

@@ -1,19 +1,34 @@
-import variables from 'modules/variables';
-import { useState } from 'react';
-import { MdAdd } from 'react-icons/md';
-import { TextField } from '@mui/material'; 
+import variables from "modules/variables";
+import { useState } from "react";
+import { MdAdd } from "react-icons/md";
+import { TextField } from "@mui/material";
 
 export default function CustomURLModal({ modalClose, modalCloseOnly }) {
   const [url, setURL] = useState();
 
   return (
     <>
-      <span className='closeModal' onClick={modalCloseOnly}>&times;</span>
-      <h1>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.background.source.add_url')}</h1>
-      <TextField value={url} onChange={(e) => setURL(e.target.value)} varient='outlined'/>
-      <div className='resetfooter'>
-        <button className='round import' style={{ marginLeft: '5px' }} onClick={() => modalClose(url)}>
-          <MdAdd/>
+      <span className="closeModal" onClick={modalCloseOnly}>
+        &times;
+      </span>
+      <h1>
+        {variables.language.getMessage(
+          variables.languagecode,
+          "modals.main.settings.sections.background.source.add_url"
+        )}
+      </h1>
+      <TextField
+        value={url}
+        onChange={(e) => setURL(e.target.value)}
+        varient="outlined"
+      />
+      <div className="resetFooter">
+        <button
+          className="round import"
+          style={{ marginLeft: "5px" }}
+          onClick={() => modalClose(url)}
+        >
+          <MdAdd />
         </button>
       </div>
     </>