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/features/modals/welcome/components/Elements/ProgressBar/ProgressBar.jsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+
+function ProgressBar({ count, currentTab, switchTab }) {
+  return (
+    <div className="progressbar">
+      {count.map((num) => {
+        let className = 'step';
+
+        const index = count.indexOf(num);
+        if (index === currentTab) {
+          className = 'step active';
+        }
+
+        return (
+          <div className={className} key={index} onClick={() => switchTab(index)}>
+            <span>{index + 1}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const MemoizedProgressBar = memo(ProgressBar);
+
+export default MemoizedProgressBar;
+export { MemoizedProgressBar as ProgressBar };

src/features/modals/welcome/components/Elements/ProgressBar/index.jsx

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

src/features/modals/welcome/components/Elements/index.jsx

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

src/features/modals/welcome/components/Layout/Header.jsx

@@ -0,0 +1,12 @@
+function Header({ title, subtitle }) {
+  return (
+    <>
+      <span className="mainTitle">{title}</span>
+      <span className="subtitle">
+        {subtitle}
+      </span>
+    </>
+  );
+}
+
+export { Header as default, Header };

src/features/modals/welcome/components/Layout/Layout.jsx

@@ -0,0 +1,7 @@
+function Layout() {
+    return (
+        <h1>Cheese</h1>
+    )
+}
+
+export { Layout as default, Layout };

src/features/modals/welcome/components/Layout/Panel.jsx

@@ -0,0 +1,5 @@
+const Panel = ({ children, type }) => (
+  <section> {type === 'content' ? <div className="content">{children}</div> : children}</section>
+);
+
+export { Panel as default, Panel };

src/features/modals/welcome/components/Layout/Wrapper.jsx

@@ -0,0 +1,5 @@
+const Wrapper =  ({ children }) => (
+    <div className="welcomeContent">{children}</div>
+)
+
+export { Wrapper as default, Wrapper };

src/features/modals/welcome/components/Layout/index.jsx

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

src/features/modals/welcome/components/index.jsx

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './Elements';