From 33bf0912dd344940183b0d28edc9512e42b64135 Mon Sep 17 00:00:00 2001 From: boyvanov Date: Mon, 24 Oct 2022 12:23:06 +0300 Subject: [PATCH] fix(ott-2710): fix filters lexics --- .../components/ClearFiltersPopup/index.tsx | 3 +- .../HomePage/components/Dropdown/index.tsx | 4 +- .../components/MatchesFilters/index.tsx | 4 +- .../components/MatchesFilters/styled.tsx | 260 +++++++++--------- 4 files changed, 137 insertions(+), 134 deletions(-) diff --git a/src/features/HomePage/components/ClearFiltersPopup/index.tsx b/src/features/HomePage/components/ClearFiltersPopup/index.tsx index 53eaa51e..1c1ac54d 100644 --- a/src/features/HomePage/components/ClearFiltersPopup/index.tsx +++ b/src/features/HomePage/components/ClearFiltersPopup/index.tsx @@ -25,8 +25,7 @@ export const ClearFiltersPopup = () => { - {/* */} - Do you want to clear all filter selections? + diff --git a/src/features/HomePage/components/Dropdown/index.tsx b/src/features/HomePage/components/Dropdown/index.tsx index 51d04db3..6116d5b0 100644 --- a/src/features/HomePage/components/Dropdown/index.tsx +++ b/src/features/HomePage/components/Dropdown/index.tsx @@ -29,6 +29,7 @@ import { SearchInput, BackButton, } from './styled' +import { Title } from '../MatchesFilters/styled' const Label = ({ item }: TFilterItem) => ( isNumber(item) ? <>U{item} : @@ -55,11 +56,10 @@ export const DropDown = ({ - {/* {isMobileDevice && ()} */} {isMobileDevice && closeDropdownList && ( - {filterTitle} + {isMobileDevice && ()} </BackButton> )} {filterTitle === 'arena' && ( diff --git a/src/features/HomePage/components/MatchesFilters/index.tsx b/src/features/HomePage/components/MatchesFilters/index.tsx index c25991bb..4a822d1f 100644 --- a/src/features/HomePage/components/MatchesFilters/index.tsx +++ b/src/features/HomePage/components/MatchesFilters/index.tsx @@ -21,6 +21,7 @@ import { import { DropDown } from '../Dropdown' import { TItem } from '../Dropdown/types' import { checkSize, truncateString } from './helpers' +import { Title } from '../MatchesFilters/styled' type TProps = { dropdownList: Array<TItem | number>, @@ -83,8 +84,7 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => { key={filterTitle} onClick={toggleDropdownList(filterTitle)} > - {/* <T9n className='filter_title' t={filterTitle} /> */} - <span className='filter_title'>{filterTitle}</span> + <Title t={filterTitle} /> <ActiveFilters> {map(shrinkedActiveFilters, (item) => ( <ActiveFilter key={item}> diff --git a/src/features/HomePage/components/MatchesFilters/styled.tsx b/src/features/HomePage/components/MatchesFilters/styled.tsx index 1cdd75fe..62c0aa72 100644 --- a/src/features/HomePage/components/MatchesFilters/styled.tsx +++ b/src/features/HomePage/components/MatchesFilters/styled.tsx @@ -1,25 +1,25 @@ -import { isMobileDevice } from 'config/userAgent' import styled, { css } from 'styled-components/macro' +import { isMobileDevice } from 'config/userAgent' +import { T9n } from 'features/T9n' + export const MatchFiltersContainer = styled.div` -display: flex; -flex-wrap: no-wrap; -justify-content: flex-end; -width: 100%; + display: flex; + flex-wrap: no-wrap; + justify-content: flex-end; + width: 100%; -${isMobileDevice + ${isMobileDevice ? css` - flex-direction: column; - padding-right: 16px; - border-top: 1px solid #505050; - padding-top: 19px; - gap: 22px; - ` - : css` - gap: 30px; - flex-direction: row; - padding-right: 10px; - `} + flex-direction: column; + padding-right: 16px; + border-top: 1px solid #505050; + padding-top: 19px; + gap: 22px; + ` : css` + gap: 30px; + flex-direction: row; + padding-right: 10px;`} ` type TFilterContainer = { @@ -27,141 +27,145 @@ type TFilterContainer = { } export const FilterContainer = styled.div<TFilterContainer>` -font-style: normal; -font-weight: 700; -letter-spacing: 0.05em; -text-transform: uppercase; -position: relative; -display: flex; - -${isMobileDevice - ? css` - color:#8b8b8b; - font-size: 10px; - line-height: 14px; - padding-left: 19px; - flex-direction: row; - align-items: center; -` - : css` - font-size: 18px; - line-height: 34px; - height: 34px; - color: #FFFFFF; - padding-left: 32px; - flex-direction: column;`} - -.filter_title { - cursor: pointer; - ${isMobileDevice && 'margin-right: 6px;'} -} -${({ active }) => active && !isMobileDevice && css` -:after { - content: ''; - display: block; - position: fixed; - background: #000000; - opacity: 0.7; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - z-index: 9; - cursor: auto; -}`} - - -:before { - display: block; - position: absolute; - top: 0; - content: ''; - height: 100%; - cursor: pointer; + font-style: normal; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + position: relative; + display: flex; - ${({ active }) => (active + ${isMobileDevice ? css` - z-index: 12; + color:#8b8b8b; + font-size: 10px; + line-height: 14px; + padding-left: 19px; + flex-direction: row; + align-items: center; ` : css` - transform: rotate(180deg); - `)} + font-size: 18px; + line-height: 34px; + height: 34px; + color: #FFFFFF; + padding-left: 32px; + flex-direction: column;`} + + ${({ active }) => active && !isMobileDevice && css` + :after { + content: ''; + display: block; + position: fixed; + background: #000000; + opacity: 0.7; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 9; + cursor: auto; + }`} - ${isMobileDevice + :before { + display: block; + position: absolute; + top: 0; + content: ''; + height: 100%; + cursor: pointer; + + ${({ active }) => (active ? css` - background: url(/images/arrowUpWhite.svg) center no-repeat; - transform: rotate(90deg); - right: 0; - width: 10px; + z-index: 12; ` : css` - background: url(/images/arrowUpWhite.svg) center no-repeat; - background-size: 20px 12px; - left: 0; - width: 20px; - `} -} - span { - ${({ active }) => (active && css` - z-index: 12; - position: relative; + transform: rotate(180deg); `)} + + ${isMobileDevice + ? css` + background: url(/images/arrowUpWhite.svg) center no-repeat; + transform: rotate(90deg); + right: 0; + width: 10px; + ` + : css` + background: url(/images/arrowUpWhite.svg) center no-repeat; + background-size: 20px 12px; + left: 0; + width: 20px; + `} } + span { + ${({ active }) => (active && css` + z-index: 12; + position: relative; + `)} + } ` export const ActiveFilters = styled.div` -display: flex; -flex-direction: row; -${isMobileDevice + display: flex; + flex-direction: row; + + ${isMobileDevice ? css` - gap: 5px;` + gap: 5px;` : css` - gap: 10px;`} + gap: 10px;`} ` + export const CloseButton = styled.div` -background: url(/images/closeWhite.svg) no-repeat; + background: url(/images/closeWhite.svg) no-repeat; -${isMobileDevice + ${isMobileDevice ? css` - width: 7px; - height: 7px; - background-size: 7px;` + width: 7px; + height: 7px; + background-size: 7px;` : css` - height: 9px; - width: 9px; - background-size: 10px;`} - + height: 9px; + width: 9px; + background-size: 10px;`} ` + export const ActiveFilter = styled.span` -font-style: normal; -font-weight: 600; -display: flex; -align-items: center; -letter-spacing: 0.05em; -text-transform: uppercase; -color: #FFFFFF; -border: 1px solid #FFFFFF; -border-radius: 16px; -gap: 5px; -cursor: pointer; -${isMobileDevice + font-style: normal; + font-weight: 600; + display: flex; + align-items: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #FFFFFF; + border: 1px solid #FFFFFF; + border-radius: 16px; + gap: 5px; + cursor: pointer; + + ${isMobileDevice ? css` - padding: 0 5px; - font-size: 10px; - line-height: 12px;` + padding: 0 5px; + font-size: 10px; + line-height: 12px;` : css` - padding: 0 10px; - font-size: 14px; - height: 17px; - :hover { - background: #ffff; - color: #000000; - - ${CloseButton} { - background: url(/images/closeBlack.svg) no-repeat; - } - }`} + padding: 0 10px; + font-size: 14px; + height: 17px; + + :hover { + background: #ffff; + color: #000000; + + ${CloseButton} { + background: url(/images/closeBlack.svg) no-repeat; + } + }`} +` + +export const FiltersCount = styled(ActiveFilter)`` +export const Title = styled(T9n)` + cursor: pointer; + ${isMobileDevice ? css`margin-right: 6px;` : ''} ` -export const FiltersCount = styled(ActiveFilter)``