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

src/components/Elements/Button/index.jsx

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

src/components/Elements/ShareModal/ShareModal.jsx

@@ -0,0 +1,128 @@
+import { memo } from 'react';
+import variables from 'config/variables';
+import { MdClose, MdEmail, MdContentCopy } from 'react-icons/md';
+import { FaTwitter, FaFacebookF } from 'react-icons/fa';
+import { AiFillWechat } from 'react-icons/ai';
+import { SiTencentqq } from 'react-icons/si';
+import Tooltip from '../Tooltip/Tooltip';
+import { toast } from 'react-toastify';
+
+import './sharemodal.scss';
+
+function ShareModal({ modalClose, data }) {
+  if (data.startsWith('https://cdn.')) {
+    data = {
+      url: data,
+      name: 'this image',
+    };
+  } else if (data.startsWith('"')) {
+    data = {
+      url: data,
+      name: 'this quote',
+    };
+  } else {
+    data = {
+      url: data,
+      name: 'this marketplace item',
+    };
+  }
+
+  const copyLink = () => {
+    navigator.clipboard.writeText(data.url);
+    toast(variables.getMessage('modals.share.copy_link'));
+  };
+
+  return (
+    <div className="smallModal">
+      <div className="shareHeader">
+        <span className="title">{variables.getMessage('widgets.quote.share')}</span>
+        <Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
+          <div className="close" onClick={modalClose}>
+            <MdClose />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="shareButtons">
+        <Tooltip title="Twitter">
+          <button
+            onClick={() =>
+              window
+                .open(
+                  `https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
+                  '_blank',
+                )
+                .focus()
+            }
+          >
+            <FaTwitter />
+          </button>
+        </Tooltip>
+        <Tooltip title="Facebook">
+          <button
+            onClick={() =>
+              window
+                .open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
+                .focus()
+            }
+          >
+            <FaFacebookF />
+          </button>
+        </Tooltip>
+        <Tooltip title="Email">
+          <button
+            onClick={() =>
+              window
+                .open(
+                  'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
+                    data.data.name +
+                    'on Mue: ' +
+                    data,
+                  '_blank',
+                )
+                .focus()
+            }
+          >
+            <MdEmail />
+          </button>
+        </Tooltip>
+        <Tooltip title="WeChat">
+          <button
+            onClick={() =>
+              window
+                .open(
+                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
+                  '_blank',
+                )
+                .focus()
+            }
+          >
+            <AiFillWechat />
+          </button>
+        </Tooltip>
+        <Tooltip title="Tencent QQ">
+          <button
+            onClick={() =>
+              window
+                .open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
+                .focus()
+            }
+          >
+            <SiTencentqq />
+          </button>
+        </Tooltip>
+      </div>
+      <div className="copy">
+        <input type="text" value={data.url} className="left field" readOnly />
+        <Tooltip title={variables.getMessage('modals.share.copy_link')} placement="top">
+          <button onClick={() => copyLink()}>
+            <MdContentCopy />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
+
+const MemoizedSharemodal = memo(ShareModal);
+
+export { MemoizedSharemodal as default, MemoizedSharemodal as ShareModal };

src/components/Elements/ShareModal/index.jsx

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

src/components/Elements/ShareModal/sharemodal.scss

@@ -0,0 +1,110 @@
+@import 'scss/variables';
+
+.smallModal {
+  @extend %tabText;
+
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+  padding: 15px;
+  width: 320px;
+
+  @include themed {
+    background: t($modal-secondaryColour);
+  }
+
+  .resetFooter {
+    display: flex;
+    flex-flow: row;
+    justify-content: flex-end;
+    gap: 20px;
+
+    button {
+      gap: 20px;
+      display: flex;
+      flex-flow: row;
+    }
+  }
+
+  .textButton {
+    @include basicIconButton(11px, 1.3rem, modal-text);
+
+    border: none !important;
+  }
+
+  .tooltipTitle {
+    @include themed {
+      background: t($modal-sidebar);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
+      color: t($color);
+    }
+  }
+
+  .shareButtons {
+    justify-content: space-between;
+    display: flex;
+    gap: 15px;
+  }
+
+  button {
+    place-items: center;
+    display: grid;
+
+    @include basicIconButton(11px, 1.3rem, modal);
+  }
+
+  .copy {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+
+    input[type='text'] {
+      @include themed {
+        background: t($modal-sidebar);
+        border-radius: t($borderRadius);
+        box-shadow: 0 0 0 1px t($modal-sidebarActive);
+        padding: 11px;
+        flex: 1;
+        color: t($color);
+      }
+
+      border: none;
+      outline: none;
+    }
+  }
+
+  input[type='text'] {
+    @include themed {
+      background: t($modal-sidebar);
+      border-radius: t($borderRadius);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
+      padding: 11px;
+      flex: 1;
+      color: t($color);
+    }
+
+    border: none;
+    outline: none;
+  }
+
+  .close {
+    padding: 15px;
+    place-items: center;
+    display: grid;
+    cursor: pointer;
+
+    &:hover {
+      @include themed {
+        background: t($modal-sidebar);
+        border-radius: t($borderRadius);
+      }
+    }
+  }
+}
+
+.shareHeader {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+}

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

src/components/Elements/index.jsx

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