From 86cd8d55b2fb2f86f76d1f6fa3125a887be4ebb3 Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Sat, 23 Apr 2022 10:34:52 +0100
Subject: [PATCH] fix: fix markeplace item grid

---
 .../modals/main/scss/marketplace/_main.scss   | 32 ++--------
 src/components/modals/welcome/welcome.scss    | 64 +++----------------
 src/components/widgets/quote/Quote.jsx        | 16 ++++-
 3 files changed, 27 insertions(+), 85 deletions(-)

diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index 71df23e8..06d9d0c0 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -6,17 +6,16 @@
 @import 'scss/variables';
 
 .items {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 15px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 1rem;
   margin-top: 15px;
 
   .item {
     position: relative;
     border-radius: 12px;
     height: 70px;
-    width: 260px;
+    width: auto;
     padding: 10px;
     cursor: pointer;
     display: flex;
@@ -181,24 +180,6 @@
   }
 }
 
-@media (max-width: 1920px) {
-  .items {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (max-width: 1680px) and (min-width: 1500px) {
-  .items {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 1440px) {
-  .items {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
-
 .emptyItems {
   width: 100%;
   height: 100%;
@@ -246,11 +227,6 @@ p.author {
   overflow-x: hidden;
 }
 
-@media (max-height: 1080px) {
-  .dropdownsortAddons {
-    margin-top: 40px !important;
-  }
-}
 
 .returnButton {
   display: grid;
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index 4c49a68e..ca16021a 100644
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -1,6 +1,10 @@
 @import '../main/scss/index.scss';
 @import 'scss/variables';
 
+.welcomeContent {
+  height: 100%;
+}
+
 .welcomemodal {
   position: absolute;
   margin: auto;
@@ -8,14 +12,15 @@
   right: 0;
   bottom: 0;
   left: 0;
-  height: 80%;
-  width: 60%;
+  height: 90vh;
+  width: clamp(60vw, 1400px, 90vw);
   padding: 0;
+  overflow-x: hidden !important;
 
   section {
     width: 50%;
     display: inline;
-    height: 80vh;
+    height: 100%;
   }
 
   section:nth-child(1) {
@@ -200,7 +205,7 @@ a.privacy {
   align-items: center;
 
   img {
-    width: 30rem !important;
+    width: clamp(20rem, 300px, 40rem);
     height: auto !important;
     display: block;
     margin: 30px;
@@ -208,58 +213,7 @@ a.privacy {
   }
 }
 
-@media (max-width: 1820px) and (min-width: 1200px) {
-  .welcomemodal {
-    width: 85%;
-    height: 90%;
-  }
 
-  section {
-    height: 90vh !important;
-  }
-}
-
-@media (max-width: 1300px) {
-  .welcomemodal {
-    overflow-x: hidden !important;
-  }
-
-  .examples img {
-    width: 20rem !important;
-  }
-
-  .buttons {
-    position: relative !important;
-    bottom: 1rem !important;
-    right: -1rem !important;
-  }
-
-  section {
-    height: 100vh !important;
-  }
-}
-
-@media (max-width: 1190px) {
-  .welcomemodal {
-    width: 90%;
-    height: 90%;
-  }
-}
-
-@media (max-width: 800px) {
-  .welcomemodal {
-    width: 100%;
-    height: 100%;
-  }
-
-  .examples img {
-    width: 15rem !important;
-  }
-
-  section {
-    height: 140vh !important;
-  }
-}
 
 .createButtons {
   display: flex;
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 8557a7e3..87cf3bcf 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -13,6 +13,7 @@ import { toast } from 'react-toastify';
 //import Hotkeys from 'react-hot-keys';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
+import Modal from 'react-modal';
 import ShareModal from '../../helpers/sharemodal/ShareModal';
 
 import offline_quotes from './offline_quotes.json';
@@ -21,12 +22,13 @@ import Interval from 'modules/helpers/interval';
 import EventBus from 'modules/helpers/eventbus';
 
 import './quote.scss';
+import { getInitColorSchemeScript } from '@mui/material';
 
 export default class Quote extends PureComponent {
   buttons = {
     share: (
       <Tooltip title="Share">
-        <button onClick={() => this.shareQuote()}>
+        <button onClick={() => this.setState({ shareModal: true })}>
           <MdIosShare className="copyButton" />
         </button>
       </Tooltip>
@@ -90,7 +92,7 @@ export default class Quote extends PureComponent {
       quote: '"' + quote.quote + '"',
       author: quote.author,
       authorlink: this.getAuthorLink(quote.author),
-      authorimg: ''
+      authorimg: '',
     });
   }
 
@@ -398,6 +400,16 @@ export default class Quote extends PureComponent {
   render() {
     return (
       <div className="quotediv" ref={this.quotediv}>
+        <Modal
+          closeTimeoutMS={300}
+          isOpen={this.state.shareModal}
+          className="Modal mainModal"
+          overlayClassName="Overlay"
+          ariaHideApp={false}
+          onRequestClose={() => this.setState({ shareModal: false })}
+        >
+          <ShareModal data={`${this.state.quote} - ${this.state.author}`} modalClose={() => this.setState({ shareModal: false })} />
+        </Modal>
         <span className="quote" ref={this.quote}>
           {this.state.quote}
         </span>