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 && ()}
)}
{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,
@@ -83,8 +84,7 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => {
key={filterTitle}
onClick={toggleDropdownList(filterTitle)}
>
- {/* */}
- {filterTitle}
+
{map(shrinkedActiveFilters, (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`
-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)``