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 };

src/components/Elements/Tooltip/index.jsx

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

src/components/Elements/Tooltip/tooltip.scss

@@ -0,0 +1,98 @@
+@import 'scss/variables';
+
+.tooltip {
+  position: relative;
+  display: grid;
+}
+
+@keyframes floating {
+  0% {
+    transform: translate(0, -5px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(0, -0);
+    opacity: 1;
+  }
+}
+
+.tooltipTitle {
+  @extend %basic;
+
+  text-align: center;
+  font-size: 0.6rem;
+  padding: 5px 10px;
+  position: absolute;
+  z-index: 1;
+
+  /* top: 100%;
+  left: 50%;
+  margin-top: 15px;
+  margin-left: -30px; */
+  cursor: initial;
+  user-select: none;
+  opacity: 1;
+  animation-name: floating;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in;
+}
+
+#modal {
+  .tooltipTitle {
+    @include themed {
+      background: t($modal-sidebar);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
+      color: t($color);
+    }
+  }
+}
+
+#root {
+  .tooltipTitle {
+    @extend %basic;
+  }
+}
+
+.tooltipTitle::before {
+  transform: scale3d(0.2, 0.2, 1);
+  transition: all 0.2s ease-in-out;
+}
+
+.tooltipTitle::after {
+  transform: translate3d(0, 6px, 0);
+  transition: all 0.1s ease-in-out;
+}
+
+.tooltipTitle:hover::before,
+.tooltipTitle:hover::after {
+  opacity: 1;
+  transform: scale3d(1, 1, 1);
+}
+
+.tooltipTitle:hover::after {
+  transition: all 0.2s 0.1s ease-in-out;
+}
+
+#arrow {
+  position: absolute;
+  background: #333;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+}
+
+.infoTooltip {
+  position: relative;
+  display: grid;
+
+  svg {
+    cursor: pointer;
+
+    &:hover {
+      @include themed {
+        color: t($color);
+      }
+    }
+  }
+}