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/Elements/Button/Button.jsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import Tooltip from 'components/Elements/Tooltip/Tooltip';
+
+const Button = forwardRef(
+  (
+    { icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey },
+    ref,
+  ) => {
+    let className;
+
+    switch (type) {
+      case 'settings':
+        className = 'btn-settings';
+        break;
+      case 'icon':
+        className = 'btn-icon';
+        break;
+      case 'navigation':
+        className = 'btn-navigation';
+        break;
+      case 'collection':
+        className = 'btn-collection';
+        break;
+      default:
+        className = 'btn-default';
+    }
+
+    if (iconPlacement === 'right') {
+      className += ' flowReverse';
+    }
+
+    if (active) {
+      className += ` ${className}-active`;
+    }
+
+    const button = (
+      <button className={className} onClick={onClick} ref={ref} disabled={disabled}>
+        {icon}
+        {label}
+      </button>
+    );
+
+    return type === 'icon' ? (
+      <Tooltip title={tooltipTitle} key={tooltipKey}>
+        {button}
+      </Tooltip>
+    ) : (
+      button
+    );
+  },
+);
+
+export { Button as default, Button };