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/Switch/Switch.jsx

@@ -0,0 +1,56 @@
+import variables from 'config/variables';
+import { PureComponent } from 'react';
+import { Switch as SwitchUI, FormControlLabel } from '@mui/material';
+
+import EventBus from 'modules/helpers/eventbus';
+
+class Switch extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checked: localStorage.getItem(this.props.name) === 'true',
+    };
+  }
+
+  handleChange = () => {
+    const value = this.state.checked !== true;
+    localStorage.setItem(this.props.name, value);
+
+    this.setState({
+      checked: value,
+    });
+
+    variables.stats.postEvent(
+      'setting',
+      `${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`,
+    );
+
+    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() {
+    return (
+      <FormControlLabel
+        control={
+          <SwitchUI
+            name={this.props.name}
+            color="primary"
+            checked={this.state.checked}
+            onChange={this.handleChange}
+          />
+        }
+        label={this.props.header ? '' : this.props.text}
+        labelPlacement="start"
+      />
+    );
+  }
+}
+
+export { Switch as default, Switch };