Merge branch '7.0' of https://github.com/mue/mue into 7.0

src/components/modals/main/marketplace/Item.jsx

@@ -103,7 +103,7 @@ export default class Item extends PureComponent {
           onRequestClose={() => this.setState({ shareModal: false })}
         >
           <ShareModal
-            data={this.props.data}
+            data={variables.constants.MARKETPLACE_URL + '/share/' + btoa(this.props.data.api_name)}
             modalClose={() => this.setState({ shareModal: false })}
           />
         </Modal>

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;

src/components/modals/welcome/Welcome.jsx

@@ -120,15 +120,6 @@ export default class WelcomeModal extends PureComponent {
             />
           </div>
           <div className="buttons">
-            {this.state.currentTab === 0 ? (
-              <button
-                className="close"
-                style={{ marginRight: '20px' }}
-                onClick={() => this.props.modalSkip()}
-              >
-                {this.getMessage('modals.welcome.buttons.preview')}
-              </button>
-            ) : null}
             {this.state.currentTab !== 0 ? (
               <button
                 className="close"
@@ -137,7 +128,15 @@ export default class WelcomeModal extends PureComponent {
               >
                 {this.getMessage('modals.welcome.buttons.previous')}
               </button>
-            ) : null}
+            ) : (
+              <button
+                className="close"
+                style={{ marginRight: '20px' }}
+                onClick={() => this.props.modalSkip()}
+              >
+                {this.getMessage('modals.welcome.buttons.preview')}
+              </button>
+            )}
             <button className="close" onClick={() => this.changeTab()}>
               {this.state.buttonText}
             </button>

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;