fix(ott-2710): mobile test fixes

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

@@ -23,25 +23,25 @@ export const Modal = styled(BaseModal)`
 `
 
 export const PopupContainer = styled.div`
-display: flex;
-flex-direction: column;
-align-items: center;
-justify-content: center;
-font-style: normal;
-color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-style: normal;
+  color: #FFFFFF;
 
-${isMobileDevice
-    ? css``
-    : css`
-  min-width: 611px;`}
+  ${isMobileDevice
+    ? ''
+    : css`min-width: 611px;`}
 `
 
 export const PopupTitle = styled.div`
-font-weight: 700;
-font-size: 24px;
-line-height: 24px;
-margin-bottom: 45px;
-${isMobileDevice
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 24px;
+  margin-bottom: 45px;
+
+  ${isMobileDevice
     ? css`
       font-size: 20px;
       line-height: 24px;
@@ -53,13 +53,13 @@ ${isMobileDevice
 `
 
 export const PopupText = styled.div`
-font-weight: 400;
+  font-weight: 400;
 
-${isMobileDevice
+  ${isMobileDevice
     ? css`
       font-size: 16px;
       line-height: 22px;
-margin-bottom: 33px;`
+      margin-bottom: 33px;`
     : css`
       font-size: 20px;
       line-height: 28px;
@@ -67,32 +67,30 @@ margin-bottom: 33px;`
 `
 
 export const ButtonsContainer = styled.div`
-display: flex;
-flex-direction: row;
-align-items: center;
-${isMobileDevice
-    ? css`
-  gap: 15px;`
-    : css`
-  gap: 20px;
-  `}
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  ${isMobileDevice
+    ? css`gap: 15px;`
+    : css`gap: 20px;`}
 `
 
 const Button = styled.button`
-display: flex;
-flex-direction: row;
-justify-content: center;
-align-items: center;
-border-radius: 5px;
-color: #FFFF;
-font-weight: 600;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  color: #FFFF;
+  font-weight: 600;
 
-${isMobileDevice
+  ${isMobileDevice
     ? css`
       font-size: 16px;
-line-height: 16px;
-width: 149px;
-height: 38px;`
+      line-height: 16px;
+      width: 149px;
+      height: 38px;`
     : css`
       font-size: 20px;
       line-height: 50px;
@@ -102,12 +100,13 @@ height: 38px;`
 `
 
 export const ConfirmButton = styled(Button)`
-background: #294FC4;
-border: 1px solid #294FC4;
-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
+  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;
-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
+  border: 1px solid #FFFFFF;
+  background: none;
+  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
 `

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

@@ -7,9 +7,8 @@ import { isMobileDevice } from 'config/userAgent'
 import { NameStyled } from 'features/Name'
 
 export const DropDownContainer = styled.div`
-${isMobileDevice
-    ? css`
-    border-top: 1px solid #505050;`
+  ${isMobileDevice
+    ? css` border-top: 1px solid #505050;`
     : css`
       position: absolute;
       top: 57px;
@@ -19,15 +18,24 @@ ${isMobileDevice
       z-index: 10;`}
 `
 export const FiltersList = styled.ul`
-${customScrollbar}
-overflow-y: auto;
-display: flex;
-flex-direction: column;
-max-height: 500px;
+  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`
 
-${isMobileDevice
+export const FilterItem = styled.li`
+  ${isMobileDevice
     ? css`
       max-width: 280px;
       white-space: nowrap;
@@ -37,10 +45,12 @@ ${isMobileDevice
       min-width: 286px;
       white-space: nowrap;
       padding: 15px 26px;`}
-:hover {
+
+  :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,38 +89,37 @@ export const Checkbox = styled(BaseCheckbox)`
     `
     : css`
       width: 20px;
-      height: 20px;
-        `}
+      height: 20px;`}
   }
 `
+
 type TCommonButtonsBlock = {
   isArena?: boolean,
 }
 
 export const CommonButtonsBlock = styled.div<TCommonButtonsBlock>`
-display: flex;
-justify-content: space-between;
-${({ isArena }) => (isArena
+  display: flex;
+  justify-content: space-between;
+
+  ${({ isArena }) => (isArena
     ? css`
       align-items: flex-start;
       padding: ${isMobileDevice ? '8px 25px 10px 13px' : '24px 26px 15px 26px'};
       `
     : 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
+  ${isMobileDevice
     ? css`
       position: absolute;
       top: 14px;
       right: 36px;`
     : ''}
 
-.clear_button {
-  font-style: normal;
+  .clear_button {
     ${isMobileDevice
     ? css`
       font-size: 10px;
@@ -120,45 +127,52 @@ ${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;
+  padding-right: ${isMobileDevice ? '0px' : '20px'};
+  position: relative;
 
-:before {
+  :before {
     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`
-border: none;
-background: transparent;
-outline: none;
-width: 100%;
-background: #292929;
-border-radius: 10px;
-margin-bottom: 15px;
-
-color: #FFFF;
-${isMobileDevice
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  background: #292929;
+  border-radius: 10px;
+  margin-bottom: 15px;
+  color: #FFFF;
+
+  ${isMobileDevice
     ? css`
     height: 24px;
     min-width: 242px;
@@ -168,9 +182,8 @@ ${isMobileDevice
     padding-left: 36px;
     height: 36px;`}
 
-::placeholder {
 
-${isMobileDevice
+  ${isMobileDevice
     ? css`
         font-size: 10px;
         line-height: 15px;`
@@ -178,28 +191,32 @@ ${isMobileDevice
         font-size: 18px;
         line-height: 22px;`}
 
+  ::placeholder {
     text-transform: uppercase;
     letter-spacing: 0.05em;
-}
+  }
 `
+
 export const SearchWithAllContainer = styled.div`
-flex: 1 1 auto;
+  flex: 1 1 auto;
 `
+
 export const BackButton = styled.div`
-font-style: normal;
-font-weight: 700;
-font-size: 10px;
-line-height: 12px;
-align-items: center;
-letter-spacing: 0.05em;
-text-transform: uppercase;
-color: #FFFFFF;
-cursor: pointer;
-position: absolute;
-top: 12px;
-left: 13px;
-padding-left: 24px;
-:before {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 12px;
+  align-items: center;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #FFFFFF;
+  cursor: pointer;
+  position: absolute;
+  top: 12px;
+  left: 13px;
+  padding-left: 24px;
+
+  :before {
     content: '';
     display: block;
     background: url(/images/arrowUpWhite.svg) center no-repeat;
@@ -211,5 +228,5 @@ padding-left: 24px;
     position: absolute;
     top: 0;
     left: 0;
-}
+  }
 `

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,27 +1,32 @@
 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;
   }
 `
 
 export const CloseButton = styled.div`
-position: absolute;
-width: 13px;
-height: 13px;
-background:url(/images/closeWhite.svg) no-repeat;
-background-size: 13px;
-top: 13px;
-right: 13px;
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  background:url(/images/closeWhite.svg) no-repeat;
+  background-size: 13px;
+  top: 13px;
+  right: 13px;
 `
 
 type TFilterProps = {
@@ -29,17 +34,17 @@ type TFilterProps = {
 }
 
 export const FilterContainer = styled.div<TFilterProps>`
-font-style: normal;
-font-weight: 700;
-font-size: 10px;
-line-height: 12px;
-letter-spacing: 0.05em;
-text-transform: uppercase;
-color: #FFFFFF;
-padding-left: 22px;
-position: relative;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 14px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #FFFFFF;
+  padding-left: 22px;
+  position: relative;
 
-:before{
+  :before{
     content: '';
     display: block;
     position: absolute;
@@ -47,24 +52,29 @@ 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;
-}
+  }
 `
 
 export const ClearButton = styled.div`
-font-style: normal;
-position: absolute;
-top: 14px;
-right: 36px;
-font-size: 10px;
-line-height: 12px;
-font-weight: 400;
-letter-spacing: 0.05em;
-text-transform: uppercase;
-color: rgba(255,255,255,0.5);
+  font-style: normal;
+  position: absolute;
+  top: 14px;
+  right: 36px;
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 400;
+  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 = {