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' /> */}
-          <span>Do you want to clear all filter selections?</span>
+          <T9n t='clear_popup_message' />
         </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} /> */}
-            <span className='filter_title'>{filterTitle}</span>
+            <Title t={filterTitle} />
             <ActiveFilters>
               {map(shrinkedActiveFilters, (item) => (
                 <ActiveFilter key={item}>

src/features/HomePage/components/MatchesFilters/styled.tsx

@@ -1,6 +1,8 @@
-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;
@@ -14,12 +16,10 @@ ${isMobileDevice
     border-top: 1px solid #505050;
     padding-top: 19px;
     gap: 22px;
-  `
-    : css`
+    ` : css`
     gap: 30px;
     flex-direction: row;
-  padding-right: 10px;
-    `}
+    padding-right: 10px;`}
 `
 
 type TFilterContainer = {
@@ -51,10 +51,6 @@ ${isMobileDevice
     padding-left: 32px;
     flex-direction: column;`}
 
-.filter_title {
-  cursor: pointer;
-  ${isMobileDevice && 'margin-right: 6px;'}
-}
   ${({ active }) => active && !isMobileDevice && css`
   :after {
     content: '';
@@ -70,7 +66,6 @@ ${({ active }) => active && !isMobileDevice && css`
     cursor: auto;
   }`}
 
-
   :before {
     display: block;
     position: absolute;
@@ -112,12 +107,14 @@ ${({ active }) => active && !isMobileDevice && css`
 export const ActiveFilters = styled.div`
   display: flex;
   flex-direction: row;
+
   ${isMobileDevice
     ? css`
       gap: 5px;`
     : css`
       gap: 10px;`}
 `
+
 export const CloseButton = styled.div`
   background: url(/images/closeWhite.svg) no-repeat;
 
@@ -130,8 +127,8 @@ ${isMobileDevice
       height: 9px;
       width: 9px;
       background-size: 10px;`}
-
 `
+
 export const ActiveFilter = styled.span`
   font-style: normal;
   font-weight: 600;
@@ -144,6 +141,7 @@ border: 1px solid #FFFFFF;
   border-radius: 16px;
   gap: 5px;
   cursor: pointer;
+
   ${isMobileDevice
     ? css`
     padding: 0 5px;
@@ -153,6 +151,7 @@ ${isMobileDevice
     padding: 0 10px;
     font-size: 14px;
     height: 17px;
+
     :hover {
       background: #ffff;
       color: #000000;
@@ -161,7 +160,12 @@ ${isMobileDevice
       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)``