From f8d2d624b7803bdb4488d0475b466da0ea701ac2 Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Sun, 24 Apr 2022 21:12:49 +0100
Subject: [PATCH] fix: add link modal, marketplace

- Addons title
- icon for check for updates
- update add link modal
- improve the style of the smaller modals
- Link back to create tab on marketplace
---
 .../helpers/sharemodal/ShareModal.jsx         |  2 +-
 .../helpers/sharemodal/sharemodal.scss        | 37 ++++++++++++++-
 .../modals/main/marketplace/Item.jsx          | 10 +++--
 .../modals/main/marketplace/Items.jsx         | 10 +++++
 .../main/marketplace/sections/Added.jsx       | 32 ++++++-------
 .../modals/main/scss/marketplace/_main.scss   | 33 ++++++++++----
 .../scss/marketplace/modules/_buttons.scss    |  2 +-
 .../scss/settings/modules/_resetmodal.scss    | 33 --------------
 .../modals/main/settings/ResetModal.jsx       | 19 +++++---
 .../sections/background/CustomURLModal.jsx    | 45 ++++++++++---------
 src/components/modals/welcome/welcome.scss    |  2 +-
 11 files changed, 135 insertions(+), 90 deletions(-)

diff --git a/src/components/helpers/sharemodal/ShareModal.jsx b/src/components/helpers/sharemodal/ShareModal.jsx
index a96fb73c..2334f129 100644
--- a/src/components/helpers/sharemodal/ShareModal.jsx
+++ b/src/components/helpers/sharemodal/ShareModal.jsx
@@ -18,7 +18,7 @@ export default function ShareModal({ modalClose, data, type }) {
   };
 
   return (
-    <div className="shareModal">
+    <div className="smallModal">
       <div className="shareHeader">
         <span className="title">Share</span>
         <Tooltip title="Close">
diff --git a/src/components/helpers/sharemodal/sharemodal.scss b/src/components/helpers/sharemodal/sharemodal.scss
index 92f84c49..51830566 100644
--- a/src/components/helpers/sharemodal/sharemodal.scss
+++ b/src/components/helpers/sharemodal/sharemodal.scss
@@ -1,14 +1,37 @@
 @import '../../../scss/variables';
 
-.shareModal {
+.smallModal {
   @extend %tabText;
   display: flex;
   flex-flow: column;
   gap: 15px;
   padding: 15px;
+  width: 320px;
   @include themed() {
     background: t($modal-background);
   }
+  .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);
+    }
+  }
   .buttons {
     justify-content: space-between;
     display: flex;
@@ -23,6 +46,18 @@
     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;
+    }
   }
   input[type='text'] {
     @include themed() {
diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx
index 66514685..5c12e99f 100644
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -217,10 +217,12 @@ export default class Item extends PureComponent {
             {this.props.button}
             <div className="iconButtons">
               <Tooltip title="Share" key="share">
-                <MdIosShare onClick={() => this.setState({ shareModal: true })} />
+                <button onClick={() => this.setState({ shareModal: true })}>
+                  <MdIosShare />
+                </button>
               </Tooltip>
               <Tooltip title="Report" key="report">
-                <MdFlag
+                <button
                   onClick={() =>
                     window.open(
                       variables.constants.REPORT_ITEM +
@@ -228,7 +230,9 @@ export default class Item extends PureComponent {
                       '_blank',
                     )
                   }
-                />
+                >
+                  <MdFlag />
+                </button>
               </Tooltip>
             </div>
             {this.props.data.data.collection ? (
diff --git a/src/components/modals/main/marketplace/Items.jsx b/src/components/modals/main/marketplace/Items.jsx
index 7f2309d7..d28fd520 100644
--- a/src/components/modals/main/marketplace/Items.jsx
+++ b/src/components/modals/main/marketplace/Items.jsx
@@ -1,4 +1,5 @@
 import variables from 'modules/variables';
+import { MdOpenInNew, MdAutoFixHigh } from 'react-icons/md';
 
 export default function Items({
   type,
@@ -40,6 +41,15 @@ export default function Items({
           </div>
         ))}
       </div>
+      {type === 'all' ? (
+        <div className="createYourOwn">
+          <MdAutoFixHigh />
+          <span className="title">Can't find what you're looking for?</span>
+          <span className="subtitle">
+          Visit the <a className='link'>knowledgebase</a> to create your own.
+          </span>
+        </div>
+      ) : null}
     </>
   );
 }
diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index fa64ddcb..480b3d0e 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdLocalMall } from 'react-icons/md';
+import { MdLocalMall, MdUpdate } from 'react-icons/md';
 import { toast } from 'react-toastify';
 
 import Item from '../Item';
@@ -150,20 +150,22 @@ export default class Added extends PureComponent {
 
     return (
       <>
-        <Dropdown
-          label={this.getMessage('modals.main.addons.sort.title')}
-          name="sortAddons"
-          onChange={(value) => this.sortAddons(value)}
-        >
-          <option value="newest">{this.getMessage('modals.main.addons.sort.newest')}</option>
-          <option value="oldest">{this.getMessage('modals.main.addons.sort.oldest')}</option>
-          <option value="a-z">{this.getMessage('modals.main.addons.sort.a_z')}</option>
-          <option value="z-a">{this.getMessage('modals.main.addons.sort.z_a')}</option>
-        </Dropdown>
-        <button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
-          {this.getMessage('modals.main.addons.check_updates')}
-        </button>
-        <br />
+        <span className="mainTitle">{this.getMessage('modals.main.addons.added')}</span>
+        <div className="filter">
+          <Dropdown
+            label={this.getMessage('modals.main.addons.sort.title')}
+            name="sortAddons"
+            onChange={(value) => this.sortAddons(value)}
+          >
+            <option value="newest">{this.getMessage('modals.main.addons.sort.newest')}</option>
+            <option value="oldest">{this.getMessage('modals.main.addons.sort.oldest')}</option>
+            <option value="a-z">{this.getMessage('modals.main.addons.sort.a_z')}</option>
+            <option value="z-a">{this.getMessage('modals.main.addons.sort.z_a')}</option>
+          </Dropdown>
+          <button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
+            <MdUpdate />{this.getMessage('modals.main.addons.check_updates')}
+          </button>
+        </div>
         <Items
           items={this.state.installed}
           toggleFunction={(input) => this.toggle('item', input)}
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index 06d9d0c0..e6e75ff8 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -93,6 +93,8 @@
     flex-flow: column;
     gap: 15px;
     width: 170px;
+    box-sizing: border-box !important;
+
 
     img {
       width: 100%;
@@ -112,12 +114,13 @@
     }
 
     .iconButtons {
-      display: flex;
-      flex-flow: row;
-      justify-content: space-between;
-
-      svg {
-        @include basicIconButton(11px, 1.3rem, modal);
+      display: grid;
+      grid-template-columns: 1fr 1fr; 
+      grid-template-rows: 1fr; 
+      grid-gap: 20px;
+      button {
+        width: 100%;
+        padding: 0;
       }
     }
   }
@@ -283,6 +286,7 @@ p.author {
   padding: 15px;
   gap: 15px;
   justify-content: space-between;
+  align-items: center;
 
   @include themed() {
     background: t($modal-sidebar);
@@ -301,8 +305,10 @@ p.author {
   justify-content: space-between;
   padding: 15px;
   margin-top: 15px;
+  background-size: fill;
+  background-position: center;
   background-image: linear-gradient(to left, transparent, #000),
-    url('https://www.gonefullgeek.com/wp-content/uploads/2017/09/RDR2-Banner.jpg');
+    url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
   align-items: center;
 
   @include themed() {
@@ -357,7 +363,7 @@ p.author {
 
 .inCollection {
   background-image: linear-gradient(to left, transparent, #000),
-    url('https://www.gonefullgeek.com/wp-content/uploads/2017/09/RDR2-Banner.jpg');
+    url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
   display: flex;
   flex-flow: column;
   gap: 15px;
@@ -368,3 +374,14 @@ p.author {
     border-radius: t($borderRadius);
   }
 }
+
+.createYourOwn {
+  display: flex;
+  flex-flow: column;
+  gap: 20px;
+  align-items: center;
+  margin-top: 30px;
+  svg {
+    font-size: 30px; 
+  }
+}
diff --git a/src/components/modals/main/scss/marketplace/modules/_buttons.scss b/src/components/modals/main/scss/marketplace/modules/_buttons.scss
index 8e23a8df..a7908f83 100644
--- a/src/components/modals/main/scss/marketplace/modules/_buttons.scss
+++ b/src/components/modals/main/scss/marketplace/modules/_buttons.scss
@@ -32,5 +32,5 @@
 }
 
 .updateCheck {
-  margin-top: 15px;
+  flex-flow: row !important;
 }
diff --git a/src/components/modals/main/scss/settings/modules/_resetmodal.scss b/src/components/modals/main/scss/settings/modules/_resetmodal.scss
index d5064f36..e69de29b 100644
--- a/src/components/modals/main/scss/settings/modules/_resetmodal.scss
+++ b/src/components/modals/main/scss/settings/modules/_resetmodal.scss
@@ -1,33 +0,0 @@
-@import '../../../../../../scss/variables';
-
-.resetModal {
-  @extend %tabText;
-  display: flex;
-  flex-flow: column;
-  padding: 2rem;
-  justify-content: center;
-  gap: 15px;
-  @include themed() {
-    background: t($modal-background);
-  }
-  button {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-  button:nth-child(1) {
-    @include basicIconButton(11px, 1.3rem, modal-text);
-  }
-  button:nth-child(2) {
-    @include basicIconButton(11px, 1.3rem, modal);
-  }
-}
-.resetFooter {
-  display: flex;
-  flex-flow: row;
-  justify-content: space-around;
-  button {
-    display: flex !important;
-    flex-flow: row;
-  }
-}
diff --git a/src/components/modals/main/settings/ResetModal.jsx b/src/components/modals/main/settings/ResetModal.jsx
index 400bd9fd..c2772a3d 100644
--- a/src/components/modals/main/settings/ResetModal.jsx
+++ b/src/components/modals/main/settings/ResetModal.jsx
@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { MdClose, MdRestartAlt } from 'react-icons/md';
 import { setDefaultSettings } from 'modules/helpers/settings';
+import Tooltip from '../../../helpers/tooltip/Tooltip';
 
 export default function ResetModal({ modalClose }) {
   const reset = () => {
@@ -10,27 +11,33 @@ export default function ResetModal({ modalClose }) {
   };
 
   return (
-    <div className="resetModal">
-      <span className="mainTitle" style={{ textAlign: 'center' }}>
+    <div className="smallModal">
+      <div className="shareHeader">
+        <span className="title">         
         {variables.language.getMessage(
           variables.languagecode,
           'modals.main.settings.sections.advanced.reset_modal.title',
-        )}
-      </span>
+        )}</span>
+        <Tooltip title="Close">
+          <div className="close" onClick={modalClose}>
+            <MdClose />
+          </div>
+        </Tooltip>
+      </div>
       <span className="title">
         {variables.language.getMessage(
           variables.languagecode,
           'modals.main.settings.sections.advanced.reset_modal.question',
         )}
       </span>
-      <span style={{ maxWidth: '450px' }} className="subtitle">
+      <span className="subtitle">
         {variables.language.getMessage(
           variables.languagecode,
           'modals.main.settings.sections.advanced.reset_modal.information',
         )}
       </span>
       <div className="resetFooter">
-        <button onClick={modalClose}>
+        <button className='textButton' onClick={modalClose}>
           <MdClose />
           Close
         </button>
diff --git a/src/components/modals/main/settings/sections/background/CustomURLModal.jsx b/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
index e300b7fa..7bd64cc3 100644
--- a/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
+++ b/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
@@ -1,32 +1,35 @@
 import variables from 'modules/variables';
 import { useState } from 'react';
-import { MdAdd } from 'react-icons/md';
+import { MdAdd, MdClose } from 'react-icons/md';
 import { TextField } from '@mui/material';
+import Tooltip from '../../../../../helpers/tooltip/Tooltip';
 
 export default function CustomURLModal({ modalClose, modalCloseOnly }) {
   const [url, setURL] = useState();
 
   return (
-    <>
-      <span className="closeModal" onClick={modalCloseOnly}>
-        &times;
-      </span>
-      <h1>
-        {variables.language.getMessage(
-          variables.languagecode,
-          'modals.main.settings.sections.background.source.add_url',
-        )}
-      </h1>
-      <TextField value={url} onChange={(e) => setURL(e.target.value)} varient="outlined" />
-      <div className="resetFooter">
-        <button
-          className="round import"
-          style={{ marginLeft: '5px' }}
-          onClick={() => modalClose(url)}
-        >
-          <MdAdd />
-        </button>
+    <div className="smallModal">
+      <div className="shareHeader">
+        <span className="title">
+          {variables.language.getMessage(
+            variables.languagecode,
+            'modals.main.settings.sections.background.source.add_url',
+          )}
+        </span>
+        <Tooltip title="Close">
+          <div className="close" onClick={modalCloseOnly}>
+            <MdClose />
+          </div>
+        </Tooltip>
       </div>
-    </>
+      <div className="copy">
+        <input type='text' value={url} onChange={(e) => setURL(e.target.value)} varient="outlined" />
+        <Tooltip title="Add Link" placement="top">
+          <button onClick={() => modalClose(url)}>
+          <MdAdd />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index ca16021a..3c4b6f2a 100644
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -13,7 +13,7 @@
   bottom: 0;
   left: 0;
   height: 90vh;
-  width: clamp(60vw, 1400px, 90vw);
+  width: clamp(60vw, 1200px, 90vw);
   padding: 0;
   overflow-x: hidden !important;