fix(ott-2710): mobile test fixes

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

@@ -31,9 +31,8 @@ font-style: normal;
   color: #FFFFFF;
 
   ${isMobileDevice
-    ? css``
-    : css`
-  min-width: 611px;`}
+    ? ''
+    : css`min-width: 611px;`}
 `
 
 export const PopupTitle = styled.div`
@@ -41,6 +40,7 @@ font-weight: 700;
   font-size: 24px;
   line-height: 24px;
   margin-bottom: 45px;
+
   ${isMobileDevice
     ? css`
       font-size: 20px;
@@ -70,12 +70,10 @@ export const ButtonsContainer = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+
   ${isMobileDevice
-    ? css`
-  gap: 15px;`
-    : css`
-  gap: 20px;
-  `}
+    ? css`gap: 15px;`
+    : css`gap: 20px;`}
 `
 
 const Button = styled.button`
@@ -106,6 +104,7 @@ background: #294FC4;
   border: 1px solid #294FC4;
   filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
 `
+
 export const CancelButton = styled(Button)`
   border: 1px solid #FFFFFF;
   background: none;

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

@@ -78,6 +78,7 @@ export const DropDown = ({
               labelLexic='all'
             />
           </SearchWithAllContainer>
+          {!isEmpty(currentActiveFilter) && (
             <ClearButtonContainer
               onClick={clearFilters(filterTitle)}
             >
@@ -86,6 +87,7 @@ export const DropDown = ({
                 t='clear'
               />
             </ClearButtonContainer>
+          )}
         </CommonButtonsBlock>
 
         {map(dropdownList, (filterItem) => {

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

@@ -8,8 +8,7 @@ import { NameStyled } from 'features/Name'
 
 export const DropDownContainer = styled.div`
   ${isMobileDevice
-    ? css`
-    border-top: 1px solid #505050;`
+    ? css` border-top: 1px solid #505050;`
     : css`
       position: absolute;
       top: 57px;
@@ -19,14 +18,23 @@ ${isMobileDevice
       z-index: 10;`}
 `
 export const FiltersList = styled.ul`
-${customScrollbar}
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   max-height: 500px;
+
+  ${isMobileDevice
+    ? css`
+      @media (orientation: landscape){
+        max-height: 300px;
+      }
+    `
+    : ''}
+
+  ${customScrollbar}
 `
-export const FilterItem = styled.li`
 
+export const FilterItem = styled.li`
   ${isMobileDevice
     ? css`
       max-width: 280px;
@@ -37,10 +45,12 @@ ${isMobileDevice
       min-width: 286px;
       white-space: nowrap;
       padding: 15px 26px;`}
+
   :hover {
     background: rgba(255, 255, 255, 0.2);
   }
 `
+
 export const Checkbox = styled(BaseCheckbox)`
   display: block;
   text-transform: uppercase;
@@ -48,15 +58,15 @@ export const Checkbox = styled(BaseCheckbox)`
   ${Label} {
       text-transform: uppercase;
       font-weight: 700;
+
     ${isMobileDevice
     ? css`
       font-size: 10px;
-      line-height: 11px;
-      `
+      line-height: 11px;`
     : css`
       font-size: 18px;
-      line-height: 16px;
-      `}
+      line-height: 16px;`}
+
    ${NameStyled} {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -64,16 +74,14 @@ export const Checkbox = styled(BaseCheckbox)`
    }
 
     ${({ checked }) => (checked
-    ? css``
-    : css`
-      color: rgba(255, 255, 255, 0.6);`
-  )}
+    ? ''
+    : css`color: rgba(255, 255, 255, 0.6);`)}
   }
 
   ${CheckboxSvg} {
     margin-right: 8px;
-    
     flex: 0 0 auto;
+
     ${isMobileDevice
     ? css`
       width: 14px;
@@ -81,10 +89,10 @@ export const Checkbox = styled(BaseCheckbox)`
     `
     : css`
       width: 20px;
-      height: 20px;
-        `}
+      height: 20px;`}
   }
 `
+
 type TCommonButtonsBlock = {
   isArena?: boolean,
 }
@@ -92,6 +100,7 @@ type TCommonButtonsBlock = {
 export const CommonButtonsBlock = styled.div<TCommonButtonsBlock>`
   display: flex;
   justify-content: space-between;
+
   ${({ isArena }) => (isArena
     ? css`
       align-items: flex-start;
@@ -99,10 +108,9 @@ ${({ isArena }) => (isArena
       `
     : css`
       align-items: center;
-    padding:${isMobileDevice ? '8px 25px 10px 13px' : '15px 26px'};
-    `
-  )}
+      padding:${isMobileDevice ? '8px 25px 10px 13px' : '15px 26px'};`)}
   `
+
 export const ClearButtonContainer = styled.div`
   ${isMobileDevice
     ? css`
@@ -112,7 +120,6 @@ ${isMobileDevice
     : ''}
 
   .clear_button {
-  font-style: normal;
     ${isMobileDevice
     ? css`
       font-size: 10px;
@@ -120,14 +127,16 @@ ${isMobileDevice
     : css`
       font-size: 18px;
       line-height: 22px;`}
-  font-weight: 400;
 
+    font-style: normal;
+    font-weight: 400;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.5);
     cursor: pointer;
   }
 `
+
 export const SearchContainer = styled.div`
   padding-right: ${isMobileDevice ? '0px' : '20px'};
   position: relative;
@@ -136,16 +145,21 @@ position: relative;
     content: '';
     background: url(/images/search.svg) no-repeat;
     position: absolute;
+
     ${isMobileDevice
     ? css`
       left: 8px;
-    top: 7px;`
+      top: 7px;
+      width: 11px;
+      height: 11px;
+      `
     : css`
       left: 13px;
-  top: 13px;`}
+      top: 10px;
+      width: 16px;
+      height: 16px;`}
+
     z-index: 2;
-  width: 13px;
-  height: 11px;
   }
 `
 export const SearchInput = styled.input`
@@ -156,8 +170,8 @@ width: 100%;
   background: #292929;
   border-radius: 10px;
   margin-bottom: 15px;
-
   color: #FFFF;
+
   ${isMobileDevice
     ? css`
     height: 24px;
@@ -168,7 +182,6 @@ ${isMobileDevice
     padding-left: 36px;
     height: 36px;`}
 
-::placeholder {
 
   ${isMobileDevice
     ? css`
@@ -178,13 +191,16 @@ ${isMobileDevice
         font-size: 18px;
         line-height: 22px;`}
 
+  ::placeholder {
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
 `
+
 export const SearchWithAllContainer = styled.div`
   flex: 1 1 auto;
 `
+
 export const BackButton = styled.div`
   font-style: normal;
   font-weight: 700;
@@ -199,6 +215,7 @@ position: absolute;
   top: 12px;
   left: 13px;
   padding-left: 24px;
+
   :before {
     content: '';
     display: block;

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

@@ -15,14 +15,18 @@ import {
   Position,
 } from 'features/ProfileHeader/styled'
 
-export const Header = () => {
+type THeader = {
+  disabled: boolean,
+}
+
+export const Header = ({ disabled }: THeader) => {
   const {
     resetFilters,
     updateDate,
   } = useHeaderFiltersStore()
 
   return (
-    <HeaderStyled>
+    <HeaderStyled disabled={disabled}>
       <Position
         top={client.styles.logoTop}
         left={client.styles.logoLeft}

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

@@ -1,14 +1,10 @@
-import { isInSportsClient } from 'config/clients'
+import styled from 'styled-components/macro'
 
+import { isInSportsClient } from 'config/clients'
 import { SelectFilter } from 'components/SelectFilter'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 import { T9n } from 'features/T9n'
 
-import {
-  Modal as BaseModal,
-} from 'features/AuthServiceApp/components/RegisterPopup/styled'
-import styled from 'styled-components/macro'
-import { ModalWindow } from 'features/Modal/styled'
 import {
   ScArrow,
   ScHeaderFilters,
@@ -17,13 +13,6 @@ import {
 import { ClearFiltersPopup } from '../ClearFiltersPopup'
 import { MatchesFilters } from '../MatchesFilters'
 
-export const Modal = styled(BaseModal)`
-  ${ModalWindow} {
-    min-height: 452px;
-    max-width: 280px;
-    padding: 37px 0 39px 0;
-  }
-`
 const ClearButton = styled.span`
   cursor: pointer;
   position: absolute;

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

@@ -11,6 +11,7 @@ import {
   ClearButton,
   CloseButton,
   FilterContainer,
+  FiltersCount,
   Modal,
 } from './styled'
 import { DropDown } from '../Dropdown'
@@ -50,7 +51,7 @@ export const MobileMatchesFilters = () => {
         <>
           <FilterContainer active={filtersSize !== 0} onClick={openFilters}>
             <T9n t='filter' />
-            {filtersSize !== 0 && ` ${filtersSize}`}
+            {filtersSize !== 0 && <FiltersCount>{` ${filtersSize}`}</FiltersCount>}
           </FilterContainer>
           <Modal isOpen={isOpen} withCloseButton={false}>
             {isEmpty(isOpenList)

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

@@ -1,16 +1,21 @@
 import styled, { css } from 'styled-components/macro'
 
+import { OutsideClickWrapper } from 'features/OutsideClick'
 import { ModalWindow } from 'features/Modal/styled'
 import {
   Modal as BaseModal,
 } from 'features/AuthServiceApp/components/RegisterPopup/styled'
 
 export const Modal = styled(BaseModal)`
+  ${OutsideClickWrapper} {
+    height: 100%;
+  }
+
   ${ModalWindow} {
     min-height: auto;
-    max-height: 452px;
     max-width: 293px;
     padding: 35px 0 9px 0;
+    top: 4vh;
   }
 `
 
@@ -32,7 +37,7 @@ export const FilterContainer = styled.div<TFilterProps>`
   font-style: normal;
   font-weight: 700;
   font-size: 10px;
-line-height: 12px;
+  line-height: 14px;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: #FFFFFF;
@@ -47,12 +52,13 @@ position: relative;
     top: 0;
     width:14px;
     height: 14px;
+    background-size: 14px 14px;
+
     ${({ active }) => (active
     ? css`
       background: url(/images/filter-white.svg) no-repeat;`
     : css`
       background: url(/images/filter-gray.svg) no-repeat;`)}
-  background-size: 14px 14px;
   }
 `
 
@@ -68,3 +74,7 @@ letter-spacing: 0.05em;
   text-transform: uppercase;
   color: rgba(255,255,255,0.5);
 `
+
+export const FiltersCount = styled.span`
+  font-weight: 400;
+`

src/features/HomePage/index.tsx

@@ -7,6 +7,7 @@ import { ConfirmPopup } from 'features/AuthServiceApp/components/ConfirmPopup'
 import { Matches } from 'features/Matches'
 import {
   HeaderFiltersStore,
+  useHeaderFiltersStore,
 } from 'features/HeaderFilters'
 
 import {
@@ -30,6 +31,7 @@ const Home = () => {
     isShowConfirmPopup,
     setIsOpenDownload,
   } = useHomePage()
+  const { isOpenList } = useHeaderFiltersStore()
 
   return (
     <PageWrapper>
@@ -39,7 +41,7 @@ const Home = () => {
           setIsOpenDownload={setIsOpenDownload}
         />
       ) : (
-        <Header />
+        <Header disabled={Boolean(isOpenList)} />
       )}
       <Main>
         <UserFavorites />

src/features/OutsideClick/index.tsx

@@ -11,7 +11,7 @@ type Props = {
   onClick: (event?: MouseEvent) => void,
 }
 
-const OutsideClickWrapper = styled.div``
+export const OutsideClickWrapper = styled.div``
 
 export const OutsideClick = ({
   children,

src/features/ProfileHeader/styled.tsx

@@ -44,6 +44,7 @@ export const defaultHeaderStyles = (
 
 type HeaderProps = {
   color?: string,
+  disabled?: boolean,
   headerImage?: string | null,
   height?: number,
   isMatchPage?: boolean,
@@ -63,6 +64,12 @@ export const HeaderStyled = styled.header<HeaderProps>`
     ` : ''
   )}
 
+  ${({ disabled }) => (
+    disabled ? css`
+      pointer-events: none;
+    ` : ''
+  )}
+
   ${({ isMatchPage }) => css`
     ${isMobileDevice
     ? css`
@@ -71,7 +78,6 @@ export const HeaderStyled = styled.header<HeaderProps>`
       `
     : ''}
   `}
-  
 `
 
 type Props = {
@@ -119,8 +125,6 @@ export const HeaderLogo = styled(Logo)`
       }
     ` : ''}
   `)}
-  
-  
 `
 
 type PositionProps = {