7.x Structural Changes (#637)

* refactor(files): Initial commit on experimental file structure

* refactor(structure): New components system

* refactor(structure): Tidy settings' components

* Refactor(structure): Component exports and imports

* refactor(settings): Use new component imports

* feat: unified background.js script

* fix(build): Partially, distributions still not ready

* feat: critical error on noscript, light theme support for it

* fix(background): Critical issue of code making every background #000

* refactor(welcome): Partition into different files + shared components
- This took too long and destroyed my sanity

---------

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

src/components/Form/Settings/Dropdown/Dropdown.jsx

@@ -0,0 +1,76 @@
+import variables from 'config/variables';
+import { PureComponent, createRef } from 'react';
+import { InputLabel, MenuItem, FormControl, Select } from '@mui/material';
+
+import EventBus from 'modules/helpers/eventbus';
+
+class Dropdown extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: localStorage.getItem(this.props.name) || this.props.items[0].value,
+      title: '',
+    };
+    this.dropdown = createRef();
+  }
+
+  onChange = (e) => {
+    const { value } = e.target;
+
+    if (value === variables.getMessage('modals.main.loading')) {
+      return;
+    }
+
+    variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
+
+    this.setState({
+      value,
+    });
+
+    if (!this.props.noSetting) {
+      localStorage.setItem(this.props.name, value);
+      localStorage.setItem(this.props.name2, this.props.value2);
+    }
+
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'flex';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.emit('refresh', this.props.category);
+  };
+
+  render() {
+    const id = 'dropdown' + this.props.name;
+    const label = this.props.label || '';
+
+    return (
+      <FormControl fullWidth className={id}>
+        <InputLabel id={id}>{label}</InputLabel>
+        <Select
+          labelId={id}
+          id={this.props.name}
+          value={this.state.value}
+          label={label}
+          onChange={this.onChange}
+          ref={this.dropdown}
+          key={id}
+        >
+          {this.props.items.map(({ value, text }) => (
+            <MenuItem key={id + value} value={value}>
+              {text}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  }
+}
+
+export { Dropdown as default, Dropdown };