From 6c7366bb4ba6d732ddc90be7e90fb3f6da2f27b5 Mon Sep 17 00:00:00 2001 From: Yana-Levchyshyna Date: Sat, 18 Nov 2023 03:00:17 +0200 Subject: [PATCH] commit added new style file for the ProductsFilter Component --- .../ProductsFilters/ProductsFilters.jsx | 223 ++++++------------ .../ProductsFilters/ProductsFilters.styled.js | 24 +- .../ProductsFilters/SelectStyles.js | 121 ++++++++++ src/pages/Products.jsx | 9 +- src/pages/Products/Products.styled.js | 5 + src/pages/Products/index.js | 1 + 6 files changed, 213 insertions(+), 170 deletions(-) create mode 100644 src/components/ProductsFilters/SelectStyles.js create mode 100644 src/pages/Products/Products.styled.js create mode 100644 src/pages/Products/index.js diff --git a/src/components/ProductsFilters/ProductsFilters.jsx b/src/components/ProductsFilters/ProductsFilters.jsx index 680cde48..22588408 100644 --- a/src/components/ProductsFilters/ProductsFilters.jsx +++ b/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 ( <> - -
  • -
    - - - {query && ( - - - - - - )} - - - - - - -
    -
    • -
  • - - ({ - ...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)', - }, - })} + +
    + + - -
    • -     + {query && ( + + + + + + )} + + + + + + + + + + ({ + ...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)', + }, + })} + /> + + ); }; diff --git a/src/components/ProductsFilters/ProductsFilters.styled.js b/src/components/ProductsFilters/ProductsFilters.styled.js index 97b169b2..1a144c54 100644 --- a/src/components/ProductsFilters/ProductsFilters.styled.js +++ b/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,7 +54,7 @@ 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); } @@ -64,11 +62,11 @@ export const InputEl = styled.input` @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; `; diff --git a/src/components/ProductsFilters/SelectStyles.js b/src/components/ProductsFilters/SelectStyles.js new file mode 100644 index 00000000..d6912680 --- /dev/null +++ b/src/components/ProductsFilters/SelectStyles.js @@ -0,0 +1,121 @@ +// import { useMediaQuery } from 'react-responsive'; + +export const customStyles = { + option: (defaultStyles, state) => ({ + ...defaultStyles, + fontSize: '14px', + height: '52px', + 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 32px 14px 14px', + }), + + 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, state) => ({ + ...defaultStyles, + border: `1px solid ${ + state.isFocused ? '#E6533C' : 'rgba(239, 237, 232, 0.3)' + }`, + borderRadius: '12px', + outline: 'none', + }), + menuList: (base) => ({ + ...base, + overflowY: 'auto', // Вмикаємо скрол + marginTop: '14px', + marginRight: '7px', + '&::-webkit-scrollbar': { + width: '8px', // Задаємо ширину скрола + }, + '&::-webkit-scrollbar-thumb': { + background: 'rgba(239, 237, 232, 0.10)', //колір скрола + borderRadius: '12px', //радіус бордера скрола + }, + }), + placeholder: (defaultStyles) => ({ + ...defaultStyles, + fontSize: '14px', + lineHeight: '1.28', + margin: '0', + padding: '0', + }), +}; + +export const firstSelectStyles = { + ...customStyles, + control: (defaultStyles, state) => ({ + ...defaultStyles, + background: 'transparent', + borderRadius: '12px', + border: `${state.isFocused ? '#E6533C' : 'rgba(239, 237, 232, 0.3)'}`, // колір рамки, + '&:hover': { + border: '1px solid #E6533C', //колір рамки при ховері + }, + appearance: 'none', // Removing default appearance + WebkitAppearance: 'none', + MozAppearance: 'none', + + '@media screen and (min-width: 335px)': { + width: '146px', + height: '46px', + fontSize: '14px', + lineHeight: '1.28', + }, + + '@media screen and (min-width: 768px)': { + width: '192px', + height: '52px', + fontSize: '16px', + lineHeight: '1.5', + }, + '@media screen and (max-width: 1439px)': {}, + }), +}; + +export const secondSelectStyles = { + ...customStyles, + control: (defaultStyles, state) => ({ + ...defaultStyles, + background: 'transparent', + borderRadius: '12px', + border: `${state.isFocused ? '#E6533C' : 'rgba(239, 237, 232, 0.3)'}`, // колір рамки, + '&:hover': { + border: '1px solid #E6533C', //колір рамки при ховері + }, + appearance: 'none', // Removing default appearance + WebkitAppearance: 'none', + MozAppearance: 'none', + + width: '173px', + height: '46px', + fontSize: '14px', + lineHeight: '1.28', + '@media screen and (min-width: 768px)': { + width: '204px', + height: '52px', + fontSize: '16px', + lineHeight: '1.5', + }, + '@media screen and (min-width: 1440px)': {}, + }), +}; diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx index 495639fd..22ccd799 100644 --- a/src/pages/Products.jsx +++ b/src/pages/Products.jsx @@ -8,6 +8,7 @@ import { selectProductsIsLoading, selectProductsError, } from '../redux/selectors'; +import { Wrapper } from './Products/Products.styled'; const Products = () => { const isLoading = useSelector(selectProductsIsLoading); @@ -16,9 +17,11 @@ const Products = () => { return ( Products - - {isLoading && !error && } - + + + {isLoading && !error && } + + ); }; diff --git a/src/pages/Products/Products.styled.js b/src/pages/Products/Products.styled.js new file mode 100644 index 00000000..5c732632 --- /dev/null +++ b/src/pages/Products/Products.styled.js @@ -0,0 +1,5 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + position: relative; +`; diff --git a/src/pages/Products/index.js b/src/pages/Products/index.js new file mode 100644 index 00000000..4a40feee --- /dev/null +++ b/src/pages/Products/index.js @@ -0,0 +1 @@ +export { default } from './Products';