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/Layout/Settings/Header/Header.jsx

@@ -0,0 +1,91 @@
+import variables from 'config/variables';
+import { useState, useEffect } from 'react';
+import {
+  MdFlag,
+  MdOutlineVisibilityOff,
+  MdOutlineVisibility,
+  MdOutlineKeyboardArrowRight,
+} from 'react-icons/md';
+import EventBus from 'modules/helpers/eventbus';
+import { Button } from 'components/Elements';
+
+export const CustomActions = ({ children }) => {
+  return children;
+};
+
+function Header(props) {
+  const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true');
+
+  useEffect(() => {
+    setSetting(localStorage.getItem(props.setting) === 'true');
+  }, [props.setting]);
+
+  const changeSetting = () => {
+    const toggle = localStorage.getItem(props.setting) === 'true';
+    localStorage.setItem(props.setting, !toggle);
+    setSetting(!toggle);
+
+    variables.stats.postEvent(
+      'setting',
+      `${props.name} ${setting === true ? 'enabled' : 'disabled'}`,
+    );
+
+    EventBus.emit('toggle', props.setting);
+
+    if (props.element) {
+      if (!document.querySelector(props.element)) {
+        document.querySelector('.reminder-info').style.display = 'flex';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.emit('refresh', props.category);
+  };
+
+  const VisibilityToggle = () => (
+    <Button
+      type="settings"
+      onClick={changeSetting}
+      icon={setting ? <MdOutlineVisibilityOff /> : <MdOutlineVisibility />}
+      label={setting ? 'Hide' : 'Show'}
+    />
+  );
+
+  const ReportButton = () => {
+    return (
+      <Button
+        type="settings"
+        onClick={() =>
+          window.open(variables.constants.BUG_REPORT + props.title.split(' ').join('+'), '_blank')
+        }
+        icon={<MdFlag />}
+        label={variables.getMessage('modals.main.settings.sections.header.report_issue')}
+      />
+    );
+  };
+
+  return (
+    <>
+      <div className="modalHeader">
+        <span className="mainTitle">
+          {props.secondaryTitle && (
+            <>
+              <span className="backTitle" onClick={props.goBack}>
+                {props.title}
+              </span>
+              <MdOutlineKeyboardArrowRight />
+            </>
+          )}
+          {props.secondaryTitle || props.title}
+        </span>
+        <div className="headerActions">
+          {props.visibilityToggle && <VisibilityToggle />}
+          {props.report !== false && <ReportButton />}
+          {props.children}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export { Header as default, Header };

src/components/Layout/Settings/Header/index.jsx

@@ -0,0 +1 @@
+export * from './Header';

src/components/Layout/Settings/Item/SettingsItem.jsx

@@ -0,0 +1,19 @@
+function Row(props) {
+  const classes = `${props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'} ${props.inactive ? 'preferencesInactive' : ''}`;
+  return <div className={classes}>{props.children}</div>;
+}
+
+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 };

src/components/Layout/Settings/Item/index.jsx

@@ -0,0 +1 @@
+export * from './SettingsItem';

src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Row, Content, Action } from '../Item/SettingsItem';
+import variables from 'config/variables';
+import Slider from '../../../Form/Settings/Slider/Slider';
+
+import { values } from 'modules/helpers/settings/modals';
+import EventBus from 'modules/helpers/eventbus';
+
+const PreferencesWrapper = ({ children, ...props }) => {
+  const [shown, setShown] = useState(localStorage.getItem(props.setting) === 'true');
+
+  EventBus.on('toggle', (setting) => {
+    if (setting === props.setting) {
+      setShown(!shown);
+    }
+  });
+
+  return (
+    <div className={shown ? 'preferences' : 'preferencesInactive'}>
+      {props.zoomSetting && (
+        <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"
+              max="400"
+              default="100"
+              display="%"
+              marks={values('zoom')}
+              category={props.zoomCategory || props.category}
+            />
+          </Action>
+        </Row>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export { PreferencesWrapper as default, PreferencesWrapper };

src/components/Layout/Settings/PreferencesWrapper/index.jsx

@@ -0,0 +1 @@
+export * from './PreferencesWrapper';

src/components/Layout/Settings/Section/Section.jsx

@@ -0,0 +1,21 @@
+import { MdOutlineKeyboardArrowRight } from 'react-icons/md';
+import React from 'react';
+
+function Section({ title, subtitle, icon, onClick, children }) {
+  return (
+    <div className="moreSettings" onClick={onClick}>
+      <div className="left">
+        {icon}
+        <div className="content">
+          <span className="title">{title}</span>
+          <span className="subtitle">{subtitle}</span>
+        </div>
+      </div>
+      <div className="action">
+        {React.Children.count(children) === 0 ? <MdOutlineKeyboardArrowRight /> : children}
+      </div>
+    </div>
+  );
+}
+
+export { Section as default, Section };

src/components/Layout/Settings/Section/index.jsx

@@ -0,0 +1 @@
+export * from './Section';

src/components/Layout/Settings/index.jsx

@@ -0,0 +1,4 @@
+export * from './Header';
+export * from './Item';
+export * from './PreferencesWrapper';
+export * from './Section';

src/components/Layout/WidgetsLayout/WidgetsLayout.jsx

@@ -0,0 +1,5 @@
+const WidgetsLayout = ({ children }) => {
+  return <div id="widgets">{children}</div>;
+};
+
+export { WidgetsLayout as default, WidgetsLayout };

src/components/Layout/WidgetsLayout/index.jsx

@@ -0,0 +1 @@
+export * from './WidgetsLayout';

src/components/Layout/index.jsx

@@ -0,0 +1,2 @@
+export * from './Settings';
+export * from './WidgetsLayout';