fix(ott-2710): fix filters lexics

src/features/HomePage/components/ClearFiltersPopup/index.tsx

@@ -25,8 +25,7 @@ export const ClearFiltersPopup = () => {
           <T9n t='clear_filters' />
         </PopupTitle>
         <PopupText>
-          {/* <T9n t='clear_popup_message' /> */}
+          <T9n t='clear_popup_message' />
-          <span>Do you want to clear all filter selections?</span>
         </PopupText>
         <ButtonsContainer>
           <ConfirmButton onClick={confirmClear}>

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}</> : <Name nameObj={item} />
@@ -55,11 +56,10 @@ export const DropDown = ({
       <FiltersList>
         <CommonButtonsBlock isArena={filterTitle === 'arena'}>
           <SearchWithAllContainer>
-            {/* {isMobileDevice && (<T9n className='filter_title' t={filterTitle} />)} */}
             {isMobileDevice && closeDropdownList
               && (
                 <BackButton onClick={closeDropdownList} className='back_button'>
-                  {filterTitle}
+                  {isMobileDevice && (<Title t={filterTitle} />)}
                 </BackButton>
               )}
             {filterTitle === 'arena' && (

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} /> */}
+            <Title t={filterTitle} />
-            <span className='filter_title'>{filterTitle}</span>
             <ActiveFilters>
               {map(shrinkedActiveFilters, (item) => (
                 <ActiveFilter key={item}>

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;
+  display: flex;
-flex-wrap: no-wrap;
+  flex-wrap: no-wrap;
-justify-content: flex-end;
+  justify-content: flex-end;
-width: 100%;
+  width: 100%;
 
-${isMobileDevice
+  ${isMobileDevice
     ? css`
-  flex-direction: column;
+    flex-direction: column;
-  padding-right: 16px;
+    padding-right: 16px;
-  border-top: 1px solid #505050;
+    border-top: 1px solid #505050;
-  padding-top: 19px;
+    padding-top: 19px;
-  gap: 22px;
+    gap: 22px;
-  `
+    ` : css`
-    : css`
+    gap: 30px;
-  gap: 30px;
+    flex-direction: row;
-  flex-direction: row;
+    padding-right: 10px;`}
-  padding-right: 10px;
-    `}
 `
 
 type TFilterContainer = {
@@ -27,141 +27,145 @@ type TFilterContainer = {
 }
 
 export const FilterContainer = styled.div<TFilterContainer>`
-font-style: normal;
+  font-style: normal;
-font-weight: 700;
+  font-weight: 700;
-letter-spacing: 0.05em;
+  letter-spacing: 0.05em;
-text-transform: uppercase;
+  text-transform: uppercase;
-position: relative;
+  position: relative;
-display: flex;
+  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;
 
-  ${({ 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;
+      z-index: 12;
-    transform: rotate(90deg);
-    right: 0;
-    width: 10px;
     `
     : css`
-      background: url(/images/arrowUpWhite.svg) center no-repeat;
+      transform: rotate(180deg);
-      background-size: 20px 12px;
-      left: 0;
-      width: 20px;
-    `}
-}
-  span {
-    ${({ active }) => (active && css`
-    z-index: 12;
-    position: relative;
     `)}
+
+    ${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;
+  display: flex;
-flex-direction: row;
+  flex-direction: row;
-${isMobileDevice
+
+  ${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;
+      width: 7px;
-    height: 7px;
+      height: 7px;
-    background-size: 7px;`
+      background-size: 7px;`
     : css`
-    height: 9px;
+      height: 9px;
-    width: 9px;
+      width: 9px;
-    background-size: 10px;`}
+      background-size: 10px;`}
-
 `
+
 export const ActiveFilter = styled.span`
-font-style: normal;
+  font-style: normal;
-font-weight: 600;
+  font-weight: 600;
-display: flex;
+  display: flex;
-align-items: center;
+  align-items: center;
-letter-spacing: 0.05em;
+  letter-spacing: 0.05em;
-text-transform: uppercase;
+  text-transform: uppercase;
-color: #FFFFFF;
+  color: #FFFFFF;
-border: 1px solid #FFFFFF;
+  border: 1px solid #FFFFFF;
-border-radius: 16px;
+  border-radius: 16px;
-gap: 5px;
+  gap: 5px;
-cursor: pointer;
+  cursor: pointer;
-${isMobileDevice
+
+  ${isMobileDevice
     ? css`
-  padding: 0 5px;
+    padding: 0 5px;
-  font-size: 10px;
+    font-size: 10px;
-  line-height: 12px;`
+    line-height: 12px;`
     : css`
-  padding: 0 10px;
+    padding: 0 10px;
-  font-size: 14px;
+    font-size: 14px;
-  height: 17px;
+    height: 17px;
-  :hover {
+
-    background: #ffff;
+    :hover {
-    color: #000000;
+      background: #ffff;
-
+      color: #000000;
-    ${CloseButton} {
+
-    background: url(/images/closeBlack.svg) no-repeat;
+      ${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)``