fix: marketplace + more

- Fix clock zoom
- Fix 0th birthday bug
- marketplace search style
- marketplace search not sensitive to case

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

@@ -6,6 +6,10 @@ import {
   MdOutlineArrowForward,
   MdExpandMore,
   MdOutlineOpenInNew,
+  MdOutlinePhoto as Background,
+  MdOutlineFormatQuote as Quote,
+  MdOutlineSettings as Advanced,
+  MdSearch,
 } from 'react-icons/md';
 
 export default function Items({
@@ -18,6 +22,8 @@ export default function Items({
 }) {
   const [count, setCount] = useState(8);
   const [filter, setFilter] = useState('');
+  const [cheese, setCheese] = useState('photo')
+  const [filteredCategory, setFilteredCategory] = useState('');
   const incrementCount = () => {
     if (count !== items.length && count <= items.length) {
       if (count + 8 > items.length) {
@@ -32,9 +38,18 @@ 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 style={{ display: 'flex', flexFlow: 'row', alignItems: 'center', gap: '30px' }}>
+            <form className="marketplaceSearch">
+              <input
+                label="Search"
+                name="filter"
+                id="filter"
+                value={filter}
+                onChange={(event) => setFilter(event.target.value)}
+              />
+            <MdSearch/>
+            </form>
+          </div>
           <div
             className="collection"
             style={
@@ -70,20 +85,29 @@ export default function Items({
           </div>
         </>
       ) : null}
-                <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
+          .filter(
+            (item) =>
+              item.name.toLowerCase().includes(filter.toLowerCase()) ||
+              filter === '' ||
+              item.author.toLowerCase().includes(filter.toLowerCase()) ||
+              item.type.toLowerCase().includes(filter.toLowerCase() || cheese),
+          )
+          .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}>

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -1,4 +1,5 @@
 import variables from 'modules/variables';
+import TextField from '@mui/material/TextField';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 import {
@@ -366,7 +367,7 @@ export default class Marketplace extends PureComponent {
                 <option value="a-z">{variables.getMessage('modals.main.addons.sort.a_z')}</option>
                 <option value="z-a">{variables.getMessage('modals.main.addons.sort.z_a')}</option>
               </Dropdown>
-            </div>
+        </div>
           </>
         )}
         {this.props.type === 'collections' && !this.state.collection ? (

src/components/modals/main/scss/index.scss

@@ -158,6 +158,7 @@ h5 {
   align-items: center;
 }
 
+
 .languageSettings {
   margin-bottom: 15px;
   .MuiFormGroup-root {

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

@@ -461,6 +461,34 @@ a.collectionButton {
   }
 }
 
+.marketplaceSearch {
+  display: flex;
+  align-items: center;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 16px;
+  @include themed() {
+    background: t($modal-sidebarActive);
+    box-shadow: 0 0 0 3px t($modal-sidebarActive);
+      background: t($modal-sidebar);
+  }
+  input {
+    all: unset;
+  }
+  @include themed() {
+
+  &:focus-within {
+    background: t($modal-sidebarActive);
+    box-shadow: 0 0 0 1px t($color);
+  }
+
+  &:disabled {
+    background: t($modal-sidebarActive);
+    cursor: not-allowed;
+  }
+}
+}
+
 .inCollection {
   background-image: linear-gradient(to left, transparent, #000),
     url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
@@ -485,3 +513,4 @@ a.collectionButton {
     font-size: 30px;
   }
 }
+

src/components/modals/main/tabs/backend/Tabs.jsx

@@ -59,7 +59,7 @@ export default class Tabs extends PureComponent {
 
     return (
       <div style={{ display: 'flex', width: '100%' }}>
-        <ul className="sidebar">
+        <ul className="sidebar" style={{ display: marketplaceActive === ' navbar-item-active' || addonsActive === ' navbar-item-active' ? 'none' : 'block'}}>
           {this.props.children.map((tab, index) => (
             <Tab
               currentTab={this.state.currentTab}

src/components/widgets/greeting/Greeting.jsx

@@ -94,7 +94,7 @@ export default class Greeting extends PureComponent {
         const birth = new Date(localStorage.getItem('birthday'));
 
         if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
-          if (localStorage.getItem('birthdayage') === 'true') {
+          if (localStorage.getItem('birthdayage') === 'true' && this.calculateAge(birth) !== 0 ) {
             const text = variables.getMessage('widgets.greeting.birthday').split(' ');
             message = `${text[0]} ${nth(this.calculateAge(birth))} ${text[1]}`;
           } else {

src/components/widgets/time/Clock.jsx

@@ -164,6 +164,7 @@ export default class Clock extends PureComponent {
             <Analog
               className="analogclock clock-container"
               value={this.state.time}
+              size={1.5 * Number((localStorage.getItem('zoomClock') || 100))}
               renderMinuteMarks={enabled('minuteMarks')}
               renderHourMarks={enabled('hourMarks')}
               renderSecondHand={enabled('secondHand')}