feat: add work in progress 7.0 code

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/helpers/autocomplete/Autocomplete.jsx

@@ -1,5 +1,7 @@
 import { PureComponent } from 'react';
 
+import { InputBase } from '@mui/material';
+
 import EventBus from 'modules/helpers/eventbus';
 
 import './autocomplete.scss';
@@ -53,7 +55,7 @@ export default class Autocomplete extends PureComponent {
     });
   }
 
-  componentWillUnmount() {
+  componentWillUmount() {
     EventBus.off('refresh');
   }
 
@@ -63,21 +65,21 @@ export default class Autocomplete extends PureComponent {
     // length will only be > 0 if enabled
     if (this.state.filtered.length > 0 && this.state.input.length > 0) {
       autocomplete = (
-        <ul className='suggestions'>
+        <div className='suggestions'>
           {this.state.filtered.map((suggestion) => (
-            <li key={suggestion} onClick={this.onClick}>
+            <div key={suggestion} onClick={this.onClick}>
               {suggestion}
-            </li>
+            </div>
           ))}
-        </ul>
+        </div>
       );
     }
 
     return (
-      <>
-        <input type='text' onChange={this.onChange} value={this.state.input} placeholder={this.props.placeholder || ''} autoComplete='off' id={this.props.id || ''} />
+      <div style={{display: 'flex', flexFlow: 'column'}}>
+        <input type='text' onChange={this.onChange} value={this.state.input} placeholder={this.props.placeholder || ''} autoComplete='off' spellCheck={false} id={this.props.id || ''} />
         {autocomplete}
-      </>
+      </div>
     );
   }
 }

src/components/helpers/autocomplete/autocomplete.scss

@@ -1,23 +1,19 @@
+@use 'scss/variables';
+
 .suggestions {
+  @extend %basic;
   text-align: left;
-  font-size: calc(5px + 1.2vmin);
-  background-color: rgba(255, 255, 255, 0.8);
-  color: black;
   border-top-width: 0;
   list-style: none;
-  margin-top: 40px;
-  max-height: 143px;
   overflow: hidden;
   position: relative;
   display: inline-block;
-  margin-left: 40px;
-  border-radius: 24px;
-  width: 430px;
-  opacity: 0;
+  opacity: 1;
+  margin-top: 5px;
 
-  li {
-    padding: 0.5rem;
-    padding-left: 20px;
+  div {
+    padding: 0.5rem 0.5rem 0.5rem 20px;
+    font-size: 0.6em;
 
     &:hover {
       background-color: rgba(255, 255, 255, 0.8);
@@ -27,24 +23,18 @@
 }
 
 .searchBar {
-  input[type=text]:focus+.suggestions {
+  input[type='text']:focus + .suggestions {
     opacity: 1;
   }
 }
 
-@media screen and (min-width: 1400px) {
-  .suggestions {
-    margin-top: 50px;
-  }
-}
-
 .dark .suggestions {
-  background-color: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.7);
   color: white;
 
   li {
     &:hover {
-      background-color: rgba(0, 0, 0, 0.5);
+      background: rgba(0, 0, 0, 0.7);
     }
   }
 }

src/components/helpers/preview/Preview.jsx

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-
+import { MdArrowForwardIos } from 'react-icons/md';
 import './preview.scss';
 
 export default function Preview(props) {
@@ -7,9 +7,9 @@ export default function Preview(props) {
 
   return (
     <div className='preview-mode'>
-      <h1>{getMessage('modals.main.settings.reminder.title')}</h1>
-      <p>{getMessage('modals.welcome.preview.description')}</p>
-      <button className='pinNote' onClick={() => props.setup()}>{getMessage('modals.welcome.preview.continue')}</button>
+      <span className='title'>{getMessage('modals.main.settings.reminder.title')}</span>
+      <span className='subtitle'>{getMessage('modals.welcome.preview.description')}</span>
+      <button onClick={() => props.setup()}>{getMessage('modals.welcome.preview.continue')}</button>
     </div>
   );
 }

src/components/helpers/preview/preview.scss

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

src/components/helpers/sharemodal/ShareModal.jsx

@@ -0,0 +1,107 @@
+import variables from 'modules/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';
+
+export default function ShareModal({ modalClose, data }) {
+  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+  const url = variables.constants.MARKETPLACE_URL + '/share/' + btoa(data.api_name);
+
+  const copyLink = () => {
+    navigator.clipboard.writeText(url);
+    toast('Link copied!');
+  };
+
+  return (
+    <div className="shareModal">
+      <div className="shareHeader">
+        <span className="title">Share</span>
+        <Tooltip title="Close">
+          <div className="close" onClick={modalClose}>
+            <MdClose />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="buttons">
+        <Tooltip title="Twitter">
+          <button
+            onClick={() =>
+              window
+                .open(
+                  `https://twitter.com/intent/tweet?text=Check out ${data.data.name} on @getmue marketplace: ${url}`,
+                  '_blank',
+                )
+                .focus()
+            }
+          >
+            <FaTwitter />
+          </button>
+        </Tooltip>
+        <Tooltip title="Facebook">
+          <button
+            onClick={() =>
+              window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank').focus()
+            }
+          >
+            <FaFacebookF />
+          </button>
+        </Tooltip>
+        <Tooltip title="Email">
+          <button
+            onClick={() =>
+              window
+                .open(
+                  'mailto:email@example.com?subject=Check%20out%20this%20Mue%20addon!&body=' +
+                    data.data.name +
+                    'on Mue: ' +
+                    url,
+                  '_blank',
+                )
+                .focus()
+            }
+          >
+            <MdEmail />
+          </button>
+        </Tooltip>
+        <Tooltip title="WeChat">
+          <button
+            onClick={() =>
+              window
+                .open(
+                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${url}`,
+                  '_blank',
+                )
+                .focus()
+            }
+          >
+            <AiFillWechat />
+          </button>
+        </Tooltip>
+        <Tooltip title="Tencent QQ">
+          <button
+            onClick={() =>
+              window
+                .open(`http://connect.qq.com/widget/shareqq/index.html?url=${url}`, '_blank')
+                .focus()
+            }
+          >
+            <SiTencentqq />
+          </button>
+        </Tooltip>
+      </div>
+      <div className="copy">
+        <input type="text" value={url} className="left field" readOnly />
+        <Tooltip title="Copy link" placement="top">
+          <button onClick={() => copyLink()}>
+            <MdContentCopy />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}

src/components/helpers/sharemodal/sharemodal.scss

@@ -0,0 +1,59 @@
+@import '../../../scss/variables';
+
+.shareModal {
+    @extend %tabText;
+    display: flex;
+    flex-flow: column;
+    gap: 15px;
+    padding: 15px;
+    @include themed() {
+      background: t($modal-background);
+    }
+    .buttons {
+      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 4px 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/helpers/tooltip/Tooltip.jsx

@@ -1,10 +1,38 @@
-import './tooltip.scss';
+import { useState } from "react";
+import { useFloating, flip, offset, shift } from "@floating-ui/react-dom";
+import "./tooltip.scss";
+
+export default function Tooltip({ children, title, style, placement }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const { x, y, reference, floating, strategy } = useFloating({
+    placement: placement || "bottom",
+    middleware: [flip(), offset(15), shift()],
+  });
 
-export default function Tooltip({ children, title }) {
   return (
-    <div className='tooltip'>
+    <div
+      className="tooltip"
+      style={style}
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+      onFocus={() => setShowTooltip(true)}
+      onBlur={() => setShowTooltip(false)}
+      ref={reference}
+    >
       {children}
-      <span className='tooltipTitle'>{title}</span>
+      {showTooltip && (
+        <span
+          ref={floating}
+          style={{
+            position: strategy,
+            top: y ?? "",
+            left: x ?? "",
+          }}
+          className="tooltipTitle"
+        >
+          {title}
+        </span>
+      )}
     </div>
   );
 }

src/components/helpers/tooltip/infoTooltip.jsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
+import './tooltip.scss';
+
+export default function InfoTooltip({
+  children,
+  title,
+  style,
+  placement,
+  subtitle,
+  linkText,
+  linkURL,
+}) {
+  const [showTooltip, setShowTooltip] = useState(true);
+  const { x, y, reference, floating, strategy } = useFloating({
+    placement: placement || 'bottom-end',
+    middleware: [flip(), offset(15), shift()],
+  });
+
+  return (
+    <div className="tooltip" style={style} ref={reference}>
+      {children}
+      {showTooltip && (
+        <div
+          className="notification"
+          ref={floating}
+          style={{
+            position: strategy,
+            top: y ?? '',
+            left: x ?? '',
+          }}
+        >
+          <span className="title">{title}</span>
+          <span className="subtitle">
+            {subtitle}{' '}
+            <a className="link" href={linkURL}>
+              {linkText}
+            </a>
+          </span>
+          <button onClick={() => setShowTooltip(false)}>Ok, Got it!</button>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/helpers/tooltip/tooltip.scss

@@ -1,37 +1,79 @@
 // todo: possibly add tooltip placement option
+@import 'scss/variables';
+
 .tooltip {
   position: relative;
-  display: inline-block;
+  display: grid;
+}
 
-  .tooltipTitle {
-    min-width: 60px;
-    background-color: rgba(255, 255, 255, 0.89);
-    color: #000;
-    text-align: center;
-    font-size: 0.6rem;
-    border-radius: 6px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-    top: 100%;
-    left: 50%;
-    margin-left: -30px;
-    visibility: hidden;
-    cursor: initial;
-    user-select: none;
+@keyframes floating {
+  0% {
+    transform: translate(0, -5px);
     opacity: 0;
-    transition: 0.2s;
   }
 
-  &:hover {
-    .tooltipTitle {
-      visibility: visible;
-      opacity: 1;
+  100% {
+    transform: translate(0, -0px);
+    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);
     }
   }
 }
 
-.dark .tooltipTitle {
-  background-color: rgba(0, 0, 0, 0.79);
-  color: #fff;
+#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);
 }