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

@@ -0,0 +1,52 @@
+import { useState, memo } from 'react';
+import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
+import './tooltip.scss';
+
+function Tooltip({ children, title, style, placement, subtitle }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [reference, setReference] = useState(null);
+
+  const { x, y, refs, strategy } = useFloating({
+    placement: placement || 'bottom',
+    middleware: [flip(), offset(15), shift()],
+    elements: {
+      reference,
+    },
+  });
+
+  return (
+    <>
+      <div
+        className="tooltip"
+        style={style}
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+        onFocus={() => setShowTooltip(true)}
+        onBlur={() => setShowTooltip(false)}
+        ref={setReference}
+      >
+        {children}
+      </div>
+      {showTooltip && (
+        <span
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? '',
+            left: x ?? '',
+            display: 'flex',
+            flexFlow: 'column',
+          }}
+          className="tooltipTitle"
+        >
+          {title}
+          <span style={{ fontSize: '8px' }}>{subtitle}</span>
+        </span>
+      )}
+    </>
+  );
+}
+
+const MemoizedTooltip = memo(Tooltip);
+
+export { MemoizedTooltip as default, MemoizedTooltip as Tooltip };