fix search params, table view in 320px res

src/components/ProductCardHorizontal/ProductCardHorizontal.scss

@@ -15,6 +15,7 @@
   &__top-wrapper {
     display: flex;
     justify-content: space-between;
+    gap: 3px;
   }
 
   &__link {
@@ -35,8 +36,7 @@
     }
 
     @include on-mobile {
-      width: 80px;
-      height: 110px;
+      width: 65px;
     }
   }
 
@@ -48,17 +48,16 @@
   }
 
   &__title {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 600;
     padding-top: 8px;
     color: var(--color-primary);
-    height: 40px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   &__prices {
-    font-size: 18px;
+    font-size: 16px;
     position: relative;
     margin-top: 8px;
 
@@ -99,7 +98,7 @@
   }
 
   &__param {
-    font-size: 12px;
+    font-size: 10px;
     color: var(--color-secondary);
     line-height: 15px;
     font-weight: 600;
@@ -116,5 +115,18 @@
     width: 100%;
     display: flex;
     gap: 8px;
+
+    @include on-mobile {
+      & > .add-to-cart {
+        font-size: 10px;
+      }
+
+      & > .add-to-cart {
+        width: 45px;
+      }
+      & > .add-to-fav {
+        width: 25px;
+      }
+    }
   }
 }

src/components/ProductCardHorizontal/ProductCardHorizontal.tsx

@@ -64,10 +64,6 @@ export const ProductCardHorizontal: FC<Props> = ({ product }) => {
             <p className="productCardHorizontal__value">{ram}</p>
           </div>
         </div>
-        {/* <div className="productCardHorizontal__buttons">
-          <AddToCartButton product={product} />
-          <AddToFavButton product={product} />
-        </div> */}
       </div>
     </article>
   );

src/contexts/ThemeContext.tsx

@@ -30,14 +30,14 @@ interface ThemeProviderProps {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   const [theme, setTheme] = useState<Theme>(() => {
-    const savedTheme = localStorage.getItem('theme');
+    const savedTheme = localStorage.getItem('data-theme');
     return savedTheme ? (savedTheme as Theme) : 'light';
   });
 
   useEffect(() => {
     const html = document.querySelector('html') as HTMLHtmlElement;
-    html.setAttribute('theme', theme);
-    localStorage.setItem('theme', theme);
+    html.setAttribute('data-theme', theme);
+    localStorage.setItem('data-theme', theme);
   }, [theme]);
 
   const toggleTheme = () => {

src/pages/ProductsPage/ProductsPage.tsx

@@ -94,7 +94,14 @@ export const ProductsPage: FC<Props> = ({ category }) => {
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const params = new URLSearchParams(searchParams);
-    params.set('search', event.target.value.trimStart());
+    const query = event.target.value.trimStart();
+
+    if (query) {
+      params.set('search', query);
+    } else {
+      params.delete('search');
+    }
+
     params.set('page', String(1));
     setSearchParams(params);
   };

src/styles/utils/_theme-set.scss

@@ -1,5 +1,5 @@
 :root,
-[theme='light'] {
+[data-theme='light'] {
   // design color
   --page-bg-color: #fff;
   --color-primary: #313237;
@@ -57,7 +57,7 @@
   --pagin-button-border: var(--color-icons);
 }
 
-[theme='dark'] {
+[data-theme='dark'] {
   //design color
   --page-bg-color: #0f1121;
   --color-primary: #f1f2f9;