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/helpers/preview/Preview.jsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import variables from 'config/variables';
+import './preview.scss';
+
+function Preview(props) {
+  return (
+    <div className="preview-mode">
+      <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
+      <span className="subtitle">{variables.getMessage('modals.welcome.preview.description')}</span>
+      <button onClick={() => props.setup()}>
+        {variables.getMessage('modals.welcome.preview.continue')}
+      </button>
+    </div>
+  );
+}
+
+export default memo(Preview);

src/features/helpers/preview/preview.scss

@@ -0,0 +1,24 @@
+@import 'scss/variables';
+
+.preview-mode {
+  @extend %basic;
+
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  padding: 15px;
+  max-width: 250px;
+  border-radius: 12px;
+  z-index: 999;
+  text-align: left;
+  cursor: default;
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+
+  button {
+    @include basicIconButton(10px, 14px, ui);
+
+    gap: 20px;
+  }
+}