From 39deb69c3408ac4d0e41c271f4819dbedbdebb18 Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Thu, 28 Apr 2022 23:22:58 +0100
Subject: [PATCH] feat: info tooltip

---
 .../helpers/tooltip/infoTooltip.jsx           | 42 ++++++------
 src/components/helpers/tooltip/tooltip.scss   | 50 ++++++++++++++
 .../main/marketplace/sections/Create.jsx      | 66 +++++++++++--------
 .../modals/main/settings/Header.jsx           | 15 +++--
 .../modals/main/settings/sections/Navbar.jsx  |  2 +
 5 files changed, 121 insertions(+), 54 deletions(-)

diff --git a/src/components/helpers/tooltip/infoTooltip.jsx b/src/components/helpers/tooltip/infoTooltip.jsx
index d2021c07..979427bc 100644
--- a/src/components/helpers/tooltip/infoTooltip.jsx
+++ b/src/components/helpers/tooltip/infoTooltip.jsx
@@ -1,43 +1,39 @@
 import { useState } from 'react';
 import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
+import { MdClose, MdInfo, MdOpenInNew } from 'react-icons/md';
 import './tooltip.scss';
+import Tooltip from './/Tooltip';
 
-export default function InfoTooltip({
-  children,
-  title,
-  style,
-  placement,
-  subtitle,
-  linkText,
-  linkURL,
-}) {
-  const [showTooltip, setShowTooltip] = useState(true);
+export default function InfoTooltip({ children, title, style, placement, subtitle }) {
+  const [showTooltip, setShowTooltip] = useState(false);
   const { x, y, reference, floating, strategy } = useFloating({
-    placement: placement || 'bottom-end',
-    middleware: [flip(), offset(15), shift()],
+    placement: placement || 'top-start',
+    middleware: [flip(), offset(10), shift()],
   });
 
   return (
-    <div className="tooltip" style={style} ref={reference}>
-      {children}
+    <div className="infoTooltip" style={style} ref={reference}>
+      <MdInfo onClick={() => setShowTooltip(true)} />
       {showTooltip && (
         <div
-          className="notification"
           ref={floating}
           style={{
             position: strategy,
             top: y ?? '',
             left: x ?? '',
           }}
+          className="infoTooltipTitle"
         >
-          <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 className="tooltipHeader">
+            <span className="title">{title}</span>
+            <Tooltip title="Close">
+              <div className="close" onClick={() => setShowTooltip(false)}>
+                <MdClose />
+              </div>
+            </Tooltip>
+          </div>
+          <span className='subtitle'>{subtitle}</span>
+          <span className='link'>Open Knowledgebase <MdOpenInNew /></span>
         </div>
       )}
     </div>
diff --git a/src/components/helpers/tooltip/tooltip.scss b/src/components/helpers/tooltip/tooltip.scss
index 4f67bae3..fd06b321 100644
--- a/src/components/helpers/tooltip/tooltip.scss
+++ b/src/components/helpers/tooltip/tooltip.scss
@@ -77,3 +77,53 @@
   height: 8px;
   transform: rotate(45deg);
 }
+
+.infoTooltip {
+  position: relative;
+  display: grid;
+}
+
+.infoTooltipTitle {
+  min-width: 200px;
+  text-align: center;
+  position: absolute;
+  z-index: 1;
+  cursor: initial;
+  user-select: none;
+  opacity: 1;
+  text-align: left;
+  padding: 25px;
+  display: flex;
+  justify-content: center;
+  flex-flow: column;
+  gap: 10px;
+  @include themed() {
+    background-color: t($modal-background);
+    border-radius: t($borderRadius);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);  
+  }
+  .tooltipHeader {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 25px;
+  }
+  .link {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  .close {
+    font-size: 20px;
+    padding: 15px;
+    place-items: center;
+    display: grid;
+    cursor: pointer;
+    &:hover {
+      @include themed() {
+        background: t($modal-sidebar);
+        border-radius: t($borderRadius);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index 87f1a008..4ff4e512 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -16,6 +16,7 @@ import SettingsItem from '../../../main/settings/SettingsItem';
 
 import { saveFile } from 'modules/helpers/settings/modals';
 import Tooltip from '../../../../helpers/tooltip/Tooltip';
+import InfoTooltip from '../../../../helpers/tooltip/InfoTooltip';
 
 import FileUpload from '../../settings/FileUpload';
 
@@ -48,7 +49,7 @@ export default class Create extends PureComponent {
       return this.setState({
         currentTab: tab,
         addonMetadata: {
-          type
+          type,
         },
       });
     } else {
@@ -128,8 +129,7 @@ export default class Create extends PureComponent {
       {
         name: this.state.addonMetadata.name,
         description: this.state.addonMetadata.description,
-        type:
-          this.state.addonMetadata.type,
+        type: this.state.addonMetadata.type,
         version: this.state.addonMetadata.version,
         author: this.state.addonMetadata.author,
         icon_url: this.state.addonMetadata.icon_url,
@@ -224,14 +224,33 @@ export default class Create extends PureComponent {
             onInput={(e) => setMetadata(e.target.value, 'name')}
           />
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.marketplace.product.version')}>
+        {/*<SettingsItem title={getMessage('modals.main.marketplace.product.version')}>
           <TextField
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.version}
             onInput={(e) => setMetadata(e.target.value, 'version')}
           />
-        </SettingsItem>
+    </SettingsItem>*/}
+        <div className="settingsRow">
+          <div className="content">
+            <span className="title">{getMessage('modals.main.marketplace.product.version')}</span>
+            <span className="subtitle">
+              <InfoTooltip
+                title="Information"
+                subtitle="Running away is easy It's the leaving that's hard Running away is easy It's the leaving that's hard"
+              />
+            </span>
+          </div>
+          <div className="action">
+            <TextField
+              varient="outlined"
+              InputLabelProps={{ shrink: true }}
+              value={this.state.addonMetadata.version}
+              onInput={(e) => setMetadata(e.target.value, 'version')}
+            />
+          </div>
+        </div>
         <SettingsItem title={getMessage('modals.main.marketplace.product.author')}>
           <TextField
             varient="outlined"
@@ -329,28 +348,25 @@ export default class Create extends PureComponent {
 
     // quotes
     const nextQuotesDisabled = !(
-      (this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== '')
+      this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== ''
     );
     const addQuotes = (
       <>
-        <SettingsItem final={true} title={getMessage('modals.main.addons.create.quotes.title')}/>
-          <SettingsItem
-            final={true}
-            title={getMessage('modals.main.addons.create.settings.current')}
-          >
-            <div className="themesToggleArea">
-              <div className="options">
-                <div
-                  onClick={() => this.importQuotes()}
-                  className="toggle lightTheme"
-                  style={{ width: '60%', margin: '10px 0 10px 0' }}
-                >
-                  <ExportIcon />
-                  <span>{getMessage('modals.main.addons.create.settings.current')}</span>
-                </div>
+        <SettingsItem final={true} title={getMessage('modals.main.addons.create.quotes.title')} />
+        <SettingsItem final={true} title={getMessage('modals.main.addons.create.settings.current')}>
+          <div className="themesToggleArea">
+            <div className="options">
+              <div
+                onClick={() => this.importQuotes()}
+                className="toggle lightTheme"
+                style={{ width: '60%', margin: '10px 0 10px 0' }}
+              >
+                <ExportIcon />
+                <span>{getMessage('modals.main.addons.create.settings.current')}</span>
               </div>
             </div>
-          </SettingsItem>
+          </div>
+        </SettingsItem>
         <div className="createButtons">
           <button onClick={() => this.changeTab(2)}>
             {getMessage('modals.welcome.buttons.previous')}
@@ -430,11 +446,7 @@ export default class Create extends PureComponent {
         </SettingsItem>
         <div className="createButtons">
           <button
-            onClick={() =>
-              this.changeTab(
-                this.state.addonMetadata.type,
-              )
-            }
+            onClick={() => this.changeTab(this.state.addonMetadata.type)}
             disabled={nextDescriptionDisabled}
           >
             {getMessage('modals.welcome.buttons.previous')}
diff --git a/src/components/modals/main/settings/Header.jsx b/src/components/modals/main/settings/Header.jsx
index 2b084b66..79df586f 100644
--- a/src/components/modals/main/settings/Header.jsx
+++ b/src/components/modals/main/settings/Header.jsx
@@ -8,6 +8,7 @@ import Switch from './Switch';
 import SettingsItem from './SettingsItem';
 
 import { values } from 'modules/helpers/settings/modals';
+import InfoTooltip from '../../../helpers/tooltip/infoTooltip';
 
 export default class Header extends PureComponent {
   render() {
@@ -17,11 +18,17 @@ export default class Header extends PureComponent {
       <>
         <span className="mainTitle">{this.props.title}</span>
         <div className="headerExtras">
-          <span className="link"  onClick={() =>
+          <span
+            className="link"
+            onClick={() =>
               window.open(
-                variables.constants.KNOWLEDGEBASE + '/' + this.props.setting.toLowerCase().replace('enabled', ''),
+                variables.constants.KNOWLEDGEBASE +
+                  '/' +
+                  this.props.setting.toLowerCase().replace('enabled', ''),
                 '_blank',
-              )}>
+              )
+            }
+          >
             <MdHelpOutline /> More Info
           </span>
           <span
@@ -39,7 +46,7 @@ export default class Header extends PureComponent {
         {this.props.switch ? (
           <SettingsItem
             title={getMessage('modals.main.settings.enabled')}
-            subtitle='Choose whether or not to show this widget'
+            subtitle="Choose whether or not to show this widget"
           >
             <Switch
               name={this.props.setting}
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index 97746065..d5e97a6c 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@@ -8,6 +8,8 @@ import Dropdown from '../Dropdown';
 import SettingsItem from '../SettingsItem';
 import Header from '../Header';
 
+import InfoTooltip from '../../../../helpers/tooltip/infoTooltip';
+
 export default function Navbar() {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
   const [showRefreshOptions, setShowRefreshOptions] = useState(