fix: marketplace css, reset modal transitions, add WIP lightbox to item page

src/components/modals/Modals.jsx

@@ -51,7 +51,7 @@ export default class Modals extends React.PureComponent {
           <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}>
             <Welcome modalClose={() => this.closeWelcome()}/>
           </Modal>
-          <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
+          <Modal closeTimeoutMS={300} onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
             <Feedback modalClose={() => this.setState({ feedbackModal: false })}/>
           </Modal>
         </React.Suspense>

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

@@ -1,59 +1,75 @@
 import React from 'react';
 
+import Modal from 'react-modal';
+
+import Lightbox from './Lightbox';
+
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-export default function Item(props) {
-  const language = window.language.modals.main.marketplace.product;
-
-  let warningHTML;
-  // For some reason it breaks sometimes so we use try/catch
-  try {
-    if (props.content.content.data.quote_api) {
-      warningHTML = (
-        <div className='productInformation'>
-          <ul>
-            <li className='header'>{language.quote_warning.title}</li>
-            <li id='updated'>{language.quote_warning.description}</li>
-          </ul>
-        </div>
-      );
-    }
-  } catch (e) {
-    // ignore
+export default class Item extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      showLightbox: false
+    };
   }
 
-  // prevent console error
-  let iconsrc = window.constants.DDG_PROXY + props.data.icon;
-  if (!props.data.icon) {
-    iconsrc = null;
-  }
+  render() {
+    const language = window.language.modals.main.marketplace.product;
 
-  return (
-    <div id='item' style={{ 'display': props.display }}>
-      <br/>
-      <span><ArrowBackIcon className='backArrow' onClick={props.toggleFunction}/></span>
-      <br/>
-      <h1>{props.data.display_name}</h1>
-      {props.button}
-      <br/>
-      <img alt='product' draggable='false' src={iconsrc}/>
-      <div className='informationContainer'>
-        <h1>{language.overview}</h1>
-        <p className='description' dangerouslySetInnerHTML={{ __html: props.data.description }}></p>
+    let warningHTML;
+    // For some reason it breaks sometimes so we use try/catch
+    try {
+      if (this.props.content.content.data.quote_api) {
+        warningHTML = (
           <div className='productInformation'>
             <ul>
-              {/* <li className='header'>{language.last_updated}</li>
-              <li>{props.data.updated}</li>
-              <br/>*/}
-              <li className='header'>{language.version}</li>
-              <li>{props.data.version}</li>
-              <br/>
-              <li className='header'>{language.author}</li>
-             <li>{props.data.author}</li>
-           </ul>
+              <li className='header'>{language.quote_warning.title}</li>
+              <li id='updated'>{language.quote_warning.description}</li>
+            </ul>
           </div>
-          {warningHTML} 
+        );
+      }
+    } catch (e) {
+      // ignore
+    }
+  
+    // prevent console error
+    let iconsrc = window.constants.DDG_PROXY + this.props.data.icon;
+    if (!this.props.data.icon) {
+      iconsrc = null;
+    }
+  
+    return (
+      <div id='item' style={{ 'display': this.props.display }}>
+        <br/>
+        <span><ArrowBackIcon className='backArrow' onClick={this.props.toggleFunction}/></span>
+        <br/>
+        <h1>{this.props.data.display_name}</h1>
+        {this.props.button}
+        <br/>
+        <img alt='product' draggable='false' src={iconsrc} onClick={() => this.setState({ showLightbox: true })}/>
+        <div className='informationContainer'>
+          <h1>{language.overview}</h1>
+          <p className='description' dangerouslySetInnerHTML={{ __html: this.props.data.description }}></p>
+            <div className='productInformation'>
+              <ul>
+                {/* <li className='header'>{language.last_updated}</li>
+                <li>{this.props.data.updated}</li>
+                <br/>*/}
+                <li className='header'>{language.version}</li>
+                <li>{this.props.data.version}</li>
+                <br/>
+                <li className='header'>{language.author}</li>
+               <li>{this.props.data.author}</li>
+             </ul>
+            </div>
+            {warningHTML} 
+        </div>
+        <Modal onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
+          <Lightbox modalClose={() => this.setState({ showLightbox: false })} img={iconsrc}/>
+        </Modal>
       </div>
-    </div>
-  );
+    );
+  }
 }

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Lightbox(props) {
+  return (
+    <>
+      <span className='closeModal' onClick={props.modalClose}>&times;</span>
+      <img src={props.img} className='lightboximg' draggable={false} alt='Item'/>
+    </>
+  );
+}

src/components/modals/main/scss/marketplace/_main.scss

@@ -16,7 +16,7 @@
 
 .items {
   display: inline-grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(6, 1fr);
   margin-top: 15px;
 
   .item {
@@ -24,7 +24,7 @@
     border-radius: 12px;
     height: 80px;
     width: 260px;
-    background: map-get($marketplace, 'item-background');
+    background: var(--sidebar);
     transition: 0.5s;
     cursor: pointer;
     margin-right: 20px;
@@ -57,6 +57,7 @@
       img {
         margin-left: 10px;
         height: 15px;
+        cursor: pointer;
       }
     }
 
@@ -71,8 +72,22 @@
   }
 }
 
-.dark .items .item {
-  background: #2d3436;
+@media only screen and (max-width: 2100px) {
+  .items {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media only screen and (max-width: 1870px) {
+  .items {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media only screen and (min-width: 1079px), (max-width: 1869px) {
+  .items {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 p.author {
@@ -80,8 +95,6 @@ p.author {
 }
 
 #item {
-  display: none;
-
   h1 {
     font-size: 40px;
     line-height: 20px;
@@ -129,7 +142,7 @@ p.description {
 
 .productInformation {
   padding: 10px;
-  background: map-get($marketplace, 'product-information-backgroud');
+  background: var(--sidebar);
   width: 350px;
   border-radius: 12px;
 
@@ -151,10 +164,6 @@ p.description {
   }
 }
 
-.dark .productInformation {
-  background: #2d3436;
-}
-
 #item>img, .updateimage, .updatechangelog>p>img {
   border-radius: 24px;
   height: 200px;
@@ -167,7 +176,7 @@ p.description {
   padding: 50px;
   color: #fff;
   box-shadow: 0 0 10px rgb(0 0 0 / 30%);
-  width: 100%;
+  width: 85%;
 
   button {
     float: left;
@@ -185,3 +194,7 @@ p.description {
     margin-top: -20px;
   }
 }
+
+.lightboxmodal {
+  margin: auto;
+}

src/components/modals/main/settings/sections/Advanced.jsx

@@ -53,7 +53,7 @@ export default class AdvancedSettings extends React.PureComponent {
         <p style={{ 'maxWidth': '75%'}}>{advanced.experimental_warning}</p>
         <Switch name='experimental' text={this.language.enabled} element='.other'/>
 
-        <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
+        <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
           <ResetModal modalClose={() => this.setState({ resetModal: false })} />
         </Modal>
       </>