feat: search for marketplace

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

@@ -1,4 +1,5 @@
 import variables from 'modules/variables';
+import TextField from '@mui/material/TextField';
 import React, { useState } from 'react';
 import {
   MdAutoFixHigh,
@@ -16,6 +17,7 @@ export default function Items({
   onCollection,
 }) {
   const [count, setCount] = useState(8);
+  const [filter, setFilter] = useState('');
   const incrementCount = () => {
     if (count !== items.length && count <= items.length) {
       if (count + 8 > items.length) {
@@ -30,6 +32,9 @@ export default function Items({
     <>
       {(type === 'all' && !onCollection) || (type === 'collections' && !onCollection) ? (
         <>
+      <TextField style={{ width: '100%' }}fullWidth label="Search" name="filter" id="filter" value={filter}
+  onChange={event => setFilter(event.target.value)}/>
+
           <div
             className="collection"
             style={
@@ -65,7 +70,21 @@ export default function Items({
           </div>
         </>
       ) : null}
-      <div className="items">
+                <div className="items">
+          {items.filter(item => item.name.includes(filter) || filter === '')
+          .map(item => <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
+          <img
+            alt="icon"
+            draggable="false"
+            src={variables.constants.DDG_IMAGE_PROXY + item.icon_url}
+          />
+          <div className="card-details">
+            <span className="card-title">{item.display_name || item.name}</span>
+            <span className="card-subtitle">{item.author}</span>
+          </div>
+        </div>)}
+          </div>
+      {/*<div className="items">
         {items.slice(0, count).map((item) => (
           <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
             <img
@@ -79,7 +98,7 @@ export default function Items({
             </div>
           </div>
         ))}
-      </div>
+        </div>
       <div className="showMoreItems">
         {count !== items.length && items.length >= 8 ? (
           <span className="link" onClick={incrementCount}>
@@ -97,7 +116,7 @@ export default function Items({
             {items.length}
           </span>
         )}
-      </div>
+      </div>*/}
       <div className="loader"></div>
       {type === 'all' && !onCollection ? (
         <div className="createYourOwn">

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

@@ -84,10 +84,11 @@ export default class QuickLinks extends PureComponent {
 
     variables.stats.postEvent('feature', 'Quicklink add');
 
-    this.toggleAdd();
+    this.setState({
+      showAddLink: false,
+    });
 
-    // make sure image is correct size
-    this.setZoom(this.quicklinksContainer.current);
+    this.toggleAdd();
   };
 
   toggleAdd = () => {
@@ -96,20 +97,6 @@ export default class QuickLinks extends PureComponent {
     });
   };
 
-  // widget zoom
-  setZoom(element) {
-    const zoom = localStorage.getItem('zoomQuicklinks') || 100;
-    if (localStorage.getItem('quicklinksText')) {
-      for (const link of element.getElementsByTagName('a')) {
-        link.style.fontSize = `${1.4 * Number(zoom / 100)}em`;
-      }
-    } else {
-      for (const img of element.getElementsByTagName('img')) {
-        img.style.height = `${1.4 * Number(zoom / 100)}em`;
-      }
-    }
-  }
-
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'quicklinks') {
@@ -118,15 +105,12 @@ export default class QuickLinks extends PureComponent {
         }
 
         this.quicklinksContainer.current.style.display = 'block';
-        this.setZoom(this.quicklinksContainer.current);
 
         this.setState({
           items: JSON.parse(localStorage.getItem('quicklinks')),
         });
       }
     });
-
-    this.setZoom(this.quicklinksContainer.current);
   }
 
   // allows you to add a link by pressing enter

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -95,14 +95,17 @@ export default class QuickLinks extends PureComponent {
   // widget zoom
   setZoom(element) {
     const zoom = localStorage.getItem('zoomQuicklinks') || 100;
-    if (localStorage.getItem('quicklinksText')) {
-      for (const link of element.getElementsByTagName('a')) {
-        link.style.fontSize = `${1.4 * Number(zoom / 100)}em`;
+    if (localStorage.getItem('quickLinksStyle') !== "text") {
+      for (const link of element.getElementsByTagName('span')) {
+        link.style.fontSize = `${14 * Number(zoom / 100)}px`;
       }
-    } else {
       for (const img of element.getElementsByTagName('img')) {
         img.style.height = `${30 * Number(zoom / 100)}px`;
       }
+    } else {
+      for (const link of element.getElementsByTagName('span')) {
+        link.style.fontSize = `${14 * Number(zoom / 100)}px`;
+      }
     }
   }
 

src/components/widgets/quicklinks/quicklinks.scss

@@ -191,7 +191,7 @@ button.quicklinks {
   display: flex;
   flex-flow: column;
   align-items: center;
-  width: 100px;
+  min-width: 100px;
   background-image: linear-gradient(to left, rgb(0, 0, 0), transparent, rgb(0, 0, 0)),
     url('https://media.cntraveller.com/photos/615ee85…/16:9/w_2580,c_limit/Best%20Cities%20in%20the%20World%20-%20Grid.jpg');
     transition: 0.8s;