Merge pull request #93 from VasylievYurii/ProductFilter000

commit

src/components/ProductsFilters/ProductsFilters.jsx

@@ -1,25 +1,23 @@
 import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectCategoriesProducts } from '../../redux/selectors';
-// import { selectProduct } from '../../redux/selectors';
 import Select from 'react-select';
-import { useMediaQuery } from 'react-responsive';
+// import { useMediaQuery } from 'react-responsive';
 import sprite from '../../assets/sprite.svg';
-// import { productReducer } from '../../redux/products/productsSlice';
 import {
   getProductsCategories,
   getProducts,
 } from '../../redux/products/productsOperations';
-
+import { firstSelectStyles, secondSelectStyles } from './SelectStyles';
 import {
-  ProductsFiltersList,
+  ProductsFiltersWrapper,
   LabelEl,
   InputEl,
   SearchBtnSearch,
   SearchSvgSearch,
   SearchBtnClose,
   SearchSvgClose,
-  SelectContainer,
+  SelectWrapper,
 } from './ProductsFilters.styled';
 
 const options = [
@@ -95,154 +93,77 @@ const ProductsFilters = () => {
     setRecommended(e);
   };
 
-  const isMobile = useMediaQuery({ minWidth: 375 });
-  const isTablet = useMediaQuery({ minWidth: 768 });
-  const isDesktop = useMediaQuery({ minWidth: 1440 });
-
-  let height = '';
-
-  isMobile ? (height = '46px') : (height = '52px');
-  isTablet ? (height = '52px') : (height = '46px');
-  isDesktop ? (height = '52px') : (height = '46px');
-
-  const customStyles = {
-    option: (defaultStyles, state) => ({
-      ...defaultStyles,
-
-      fontSize: '14px',
-      height: height,
-      color: state.isSelected ? '#E6533C' : '#EFEDE8',
-      backgroundColor: state.isSelected
-        ? 'rgba(28, 28, 28, 1)'
-        : state.isFocused
-        ? 'rgba(28, 28, 28, 1)'
-        : 'rgba(28, 28, 28, 1)', // Стилізація фона активної опції и ховера
-      padding: '14px',
-    }),
-
-    control: (defaultStyles) => ({
-      ...defaultStyles,
-
-      background: 'transparent',
-      borderRadius: '12px',
-      border: '1px solid rgba(239, 237, 232, 0.3)',
-      height: height,
-      appearance: 'none', // Removing default appearance
-      WebkitAppearance: 'none',
-      MozAppearance: 'none',
-    }),
-    singleValue: (defaultStyles) => ({
-      ...defaultStyles,
-      color: '#EFEDE8',
-    }),
-    menu: (defaultStyles) => ({
-      ...defaultStyles,
-      backgroundColor: 'rgba(28, 28, 28, 1)', //фон списку
-      overflowY: 'auto',
-    }),
-    indicatorSeparator: (defaultStyles) => ({
-      ...defaultStyles,
-      backgroundColor: 'transparent', // колір розділювача
-    }),
-    dropdownIndicator: (defaultStyles) => ({
-      ...defaultStyles,
-      color: '#EFEDE8',
-    }),
-    container: (defaultStyles) => ({
-      ...defaultStyles,
-      border: '1px solid rgba(239, 237, 232, 0.30)',
-      borderRadius: '12px',
-      outline: 'none',
-    }),
-    menuList: (base) => ({
-      ...base,
-      borderRadius: '12px', // Бордер при скроле
-
-      '::-webkit-scrollbar': {
-        display: 'none',
-      },
-      // overflowY: 'scroll',
-    }),
-  };
-
   return (
     <>
-      <ProductsFiltersList>
-        <li>
-          <form onSubmit={handleSubmit}>
-            <LabelEl>
-              <InputEl
-                type="text"
-                name="productsSearch"
-                placeholder="Search"
-                value={query}
-                onChange={handleChange}
-              />
-              {query && (
-                <SearchBtnClose type="button" onClick={resetForm}>
-                  <SearchSvgClose>
-                    <use href={sprite + '#icon-cross'}></use>
-                  </SearchSvgClose>
-                </SearchBtnClose>
-              )}
-              <SearchBtnSearch type="submit">
-                <SearchSvgSearch>
-                  <use href={sprite + '#icon-search'}></use>
-                </SearchSvgSearch>
-              </SearchBtnSearch>
-            </LabelEl>
-          </form>
-        </li>
-        <li>
-          <SelectContainer>
-            <Select
-              styles={customStyles}
-              value={category}
-              onChange={handleCategoriesChange}
-              options={categoriesList}
-              placeholder="Categories"
-              theme={(theme) => ({
-                ...theme,
-
-                colors: {
-                  ...theme.colors,
-                  primary50: 'rgba(255, 255, 255, 0.10)', // Цвет фона при нажатии на селект в меню
-                  primary: 'transparent',
-                  neutral40: '#EFEDE8', // ховер на птичку
-                  neutral20: 'transparent', // дефолтный бордер
-                  neutral30: 'transparent', // дефолтный ховер бордер
-                  neutral50: 'rgba(239, 237, 232, 1)', // цвет плейсхолдера
-                  neutral80: 'rgba(239, 237, 232, 1)',
-                },
-              })}
-            />
-          </SelectContainer>
-        </li>
-        <li>
-          <SelectContainer>
-            <Select
-              styles={customStyles}
-              value={recommended}
-              onChange={handleRecomendedChange}
-              options={options}
-              theme={(theme) => ({
-                ...theme,
-
-                colors: {
-                  ...theme.colors,
-                  primary50: 'rgba(255, 255, 255, 0.10)', // Цвет фона при нажатии на селект в меню
-                  primary: 'transparent',
-                  neutral40: '#EFEDE8', // ховер на птичку
-                  neutral20: 'transparent', // дефолтный бордер
-                  neutral30: 'transparent', // дефолтный ховер бордер
-                  neutral50: 'rgba(239, 237, 232, 1)', // цвет плейсхолдера
-                  neutral80: 'rgba(239, 237, 232, 1)',
-                },
-              })}
+      <ProductsFiltersWrapper>
+        <form onSubmit={handleSubmit}>
+          <LabelEl>
+            <InputEl
+              type="text"
+              name="productsSearch"
+              placeholder="Search"
+              value={query}
+              onChange={handleChange}
             />
-          </SelectContainer>
-        </li>
-      </ProductsFiltersList>
+            {query && (
+              <SearchBtnClose type="button" onClick={resetForm}>
+                <SearchSvgClose>
+                  <use href={sprite + '#icon-cross'}></use>
+                </SearchSvgClose>
+              </SearchBtnClose>
+            )}
+            <SearchBtnSearch type="submit">
+              <SearchSvgSearch>
+                <use href={sprite + '#icon-search'}></use>
+              </SearchSvgSearch>
+            </SearchBtnSearch>
+          </LabelEl>
+        </form>
+
+        <SelectWrapper>
+          <Select
+            styles={firstSelectStyles}
+            value={category}
+            onChange={handleCategoriesChange}
+            options={categoriesList}
+            placeholder="Categories"
+            theme={(theme) => ({
+              ...theme,
+
+              colors: {
+                ...theme.colors,
+                primary50: 'rgba(255, 255, 255, 0.10)', // Цвет фона при нажатии на селект в меню
+                primary: 'transparent',
+                neutral40: '#EFEDE8', // ховер на птичку
+                neutral20: 'transparent', // дефолтный бордер
+                neutral30: 'transparent', // дефолтный ховер бордер
+                neutral50: 'rgba(239, 237, 232, 1)', // цвет плейсхолдера
+                neutral80: 'rgba(239, 237, 232, 1)',
+              },
+            })}
+          />
+
+          <Select
+            styles={secondSelectStyles}
+            value={recommended}
+            onChange={handleRecomendedChange}
+            options={options}
+            theme={(theme) => ({
+              ...theme,
+              colors: {
+                ...theme.colors,
+                primary50: 'rgba(255, 255, 255, 0.10)', // Цвет фона при нажатии на селект в меню
+                primary: 'transparent',
+                neutral40: '#EFEDE8', // ховер на птичку
+                neutral20: 'transparent', // дефолтный бордер
+                neutral30: 'transparent', // дефолтный ховер бордер
+                neutral50: 'rgba(239, 237, 232, 1)', // цвет плейсхолдера
+                neutral80: 'rgba(239, 237, 232, 1)',
+              },
+            })}
+          />
+        </SelectWrapper>
+      </ProductsFiltersWrapper>
     </>
   );
 };

src/components/ProductsFilters/ProductsFilters.styled.js

@@ -4,7 +4,7 @@ export const LabelEl = styled.label`
   position: relative;
 `;
 
-export const ProductsFiltersList = styled.ul`
+export const ProductsFiltersWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
@@ -24,8 +24,6 @@ export const ProductsFiltersList = styled.ul`
   }
 
   @media screen and (min-width: 1440px) {
-    display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: flex-end;
     margin-bottom: 28px;
@@ -56,19 +54,19 @@ export const InputEl = styled.input`
     background-color: transparent;
     color: var(--color-text);
     font-size: 14px;
-    line-height: 18px;
+    line-height: 1.28;
     border-radius: 12px;
     border: 1px solid rgba(239, 237, 232, 0.3);
   }
 
   @media screen and (min-width: 768px) {
     width: 236px;
     height: 52px;
+    font-size: 16px;
+    line-height: 1.5;
   }
 
   @media screen and (min-width: 1440px) {
-    font-size: 16px;
-    line-height: 24px;
   }
 
   &:hover,
@@ -95,6 +93,7 @@ export const SearchBtnSearch = styled.button`
 
 export const SearchSvgSearch = styled.svg`
   stroke: var(--color-text);
+  fill: transparent;
   width: 18px;
   height: 18px;
   transition: stroke 0.3s var(--timing-function);
@@ -122,14 +121,7 @@ export const SearchSvgClose = styled.svg`
   height: 18px;
 `;
 
-export const SelectContainer = styled.div`
-  @media screen and (min-width: 375px) {
-    width: 173px;
-  }
-  @media screen and (min-width: 768px) {
-    width: 204px;
-  }
-  @media screen and (min-width: 1440px) {
-    width: 192px;
-  }
+export const SelectWrapper = styled.div`
+  display: flex;
+  gap: 16px;
 `;