feat(#2341): separate filter tournaments

src/components/SelectFilter/index.tsx

@@ -0,0 +1,20 @@
+import { T9n } from 'features/T9n'
+
+import { ScSelectFilter, ScArrow } from './styled'
+
+type SportsFilterProps = {
+  onModalOpen: () => void,
+  open: boolean,
+  selectItem: string,
+}
+
+export const SelectFilter = ({
+  onModalOpen,
+  open,
+  selectItem,
+}: SportsFilterProps) => (
+  <ScSelectFilter onClick={onModalOpen}>
+    <T9n t={selectItem} />
+    <ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
+  </ScSelectFilter>
+)

src/components/SelectFilter/styled.tsx

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+import { Icon } from 'features/Icon'
+
+export const ScSelectFilter = styled.div`
+  display: flex;
+  color: white;
+  font-size: 14px;
+  width: 30%;
+  text-transform: uppercase;
+  font-weight: 700;
+  align-items: center;
+  cursor: pointer;
+
+  ${isMobileDevice
+    ? css`
+        letter-spacing: 0.15rem;
+        font-size: 10px;
+      `
+    : ''};
+`
+
+export const ScArrow = styled(Icon)`
+  margin-left: 14px;
+`

src/features/HeaderFilters/store/hooks/index.tsx

@@ -23,6 +23,7 @@ export const useFilters = () => {
     validator: isValidDate,
   })
   const [selectedSport, setSelectedSport] = useState('all_sports')
+  const [selectedLeague, setSelectedLeague] = useState('all_leagues')
 
   const isTodaySelected = isToday(selectedDate)
 

src/features/HeaderMobile/index.tsx

@@ -1,78 +1,17 @@
-import { useState } from 'react'
-
-import { ScoreSwitch } from 'features/MatchSwitches'
 import { HeaderMenu } from 'features/HeaderMenu'
-import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters'
+import { DateFilter } from 'features/HeaderFilters'
+import { ScoreSwitch } from 'features/MatchSwitches'
 import { SportsFilter } from 'features/SportsFilter'
-import { T9n } from 'features/T9n'
-
-import {
-  HeaderStyled,
-  ScBody,
-  ScSportsWrapper,
-  ScModal,
-  ScHeaderTitle,
-  ScHeaderGroup,
-  ScSport,
-} from './styled'
-
-const sports = [
-  'all_sports',
-  'basketball',
-  'football_popup',
-  'handball',
-  'hockey_popup',
-  'volleyball',
-]
-
-export const HeaderMobile = () => {
-  const { selectedSport, setSelectedSport } = useHeaderFiltersStore()
-  const [isOpen, setIsOpen] = useState(false)
-
-  const onSportClick = (sport: string) => {
-    setSelectedSport(sport)
-    setIsOpen(false)
-  }
-
-  const onModalOpen = () => {
-    setIsOpen(true)
-  }
 
-  const onModalClose = () => {
+import { HeaderStyled, ScSportsWrapper } from './styled'
-    setIsOpen(false)
-  }
 
-  return (
+export const HeaderMobile = () => (
   <HeaderStyled>
     <HeaderMenu />
     <DateFilter />
     <ScSportsWrapper>
-        <SportsFilter
+      <SportsFilter />
-          onModalOpen={onModalOpen}
-          open={isOpen}
-          sport={selectedSport}
-        />
       <ScoreSwitch />
     </ScSportsWrapper>
-      <ScModal isOpen={isOpen} withCloseButton close={onModalClose} closeSize={9}>
-        <ScHeaderGroup>
-          <ScHeaderTitle>
-            <T9n t='choose_sport' />
-          </ScHeaderTitle>
-        </ScHeaderGroup>
-        <ScBody>
-          {sports.map((sport) => (
-            <ScSport
-              key={sport}
-              onClick={() => onSportClick(sport)}
-              className={selectedSport === sport ? 'active' : ''}
-              active={selectedSport === sport}
-            >
-              <T9n t={sport} />
-            </ScSport>
-          ))}
-        </ScBody>
-      </ScModal>
   </HeaderStyled>
-  )
+)
-}

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

@@ -0,0 +1,20 @@
+import { SportsFilter } from 'features/SportsFilter'
+import { useHeaderFiltersStore } from 'features/HeaderFilters'
+import { SelectFilter } from 'components/SelectFilter'
+
+import { ScHeaderFilters } from './styled'
+
+export const HeaderFilters = () => {
+  const { selectedSport, setSelectedSport } = useHeaderFiltersStore()
+
+  return (
+    <ScHeaderFilters>
+      <SportsFilter />
+      <SelectFilter
+        onModalOpen={() => console.log(1)}
+        open={false}
+        selectItem='all_sports'
+      />
+    </ScHeaderFilters>
+  )
+}

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components/macro'
+
+export const ScHeaderFilters = styled.div`
+  display: flex;
+  flex-direction: row;
+`

src/features/HomePage/index.tsx

@@ -18,6 +18,7 @@ import { UserFavorites } from 'features/UserFavorites'
 import { useHomePage } from './hooks'
 import { Header } from './components/Header'
 import { HeaderMobile } from '../HeaderMobile'
+import { HeaderFilters } from './components/HeaderFilters'
 
 const Home = () => {
   usePageLogger(PAGES.home)
@@ -28,6 +29,7 @@ const Home = () => {
       <Main>
         <UserFavorites />
         <Content>
+          <HeaderFilters />
           <Matches fetch={fetchMatches} />
         </Content>
       </Main>

src/features/SportsFilter/components/SelectSport/index.tsx

@@ -0,0 +1,20 @@
+import { T9n } from 'features/T9n'
+
+import { ScSportsFilter, ScArrow } from './styled'
+
+type SportsFilterProps = {
+  onModalOpen: () => void,
+  open: boolean,
+  sport: string,
+}
+
+export const SelectSport = ({
+  onModalOpen,
+  open,
+  sport,
+}: SportsFilterProps) => (
+  <ScSportsFilter onClick={onModalOpen}>
+    <T9n t={sport} />
+    <ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
+  </ScSportsFilter>
+)

src/features/SportsFilter/components/SelectSport/styled.tsx

@@ -10,7 +10,7 @@ export const ScSportsFilter = styled.div`
   width: 30%;
   text-transform: uppercase;
   font-weight: 700;
-  height: 100%;
+  cursor: pointer;
   align-items: center;
 
   ${isMobileDevice

src/features/SportsFilter/components/SelectSportPopup/index.tsx

@@ -0,0 +1,53 @@
+import { T9n } from 'features/T9n'
+
+import {
+  ScBody,
+  ScModal,
+  ScHeaderTitle,
+  ScHeaderGroup,
+  ScSport,
+} from './styled'
+
+const sports = [
+  'all_sports',
+  'basketball',
+  'football_popup',
+  'handball',
+  'hockey_popup',
+  'volleyball',
+]
+
+type Props = {
+  isOpen: boolean,
+  onModalClose: () => void,
+  onSportClick: (sport: string) => void,
+  selectedSport: string,
+}
+export const SelectSportPopup = ({
+  isOpen,
+  onModalClose,
+  onSportClick,
+  selectedSport,
+}: Props) => (
+  <>
+    <ScModal isOpen={isOpen} withCloseButton close={onModalClose} closeSize={9}>
+      <ScHeaderGroup>
+        <ScHeaderTitle>
+          <T9n t='choose_sport' />
+        </ScHeaderTitle>
+      </ScHeaderGroup>
+      <ScBody>
+        {sports.map((sport: string) => (
+          <ScSport
+            key={sport}
+            onClick={() => onSportClick(sport)}
+            className={selectedSport === sport ? 'active' : ''}
+            active={selectedSport === sport}
+          >
+            <T9n t={sport} />
+          </ScSport>
+        ))}
+      </ScBody>
+    </ScModal>
+  </>
+)

src/features/SportsFilter/components/SelectSportPopup/styled.tsx

@@ -0,0 +1,226 @@
+import styled, { css } from 'styled-components/macro'
+
+import isUndefined from 'lodash/isUndefined'
+
+import { client } from 'config/clients'
+import { isMobileDevice } from 'config/userAgent'
+
+import { Logo } from 'features/Logo'
+import { ModalWindow } from 'features/Modal/styled'
+import { Modal as BaseModal } from 'features/Modal'
+import { customScrollbar } from 'features/Common'
+
+export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
+
+export const defaultHeaderStyles = (
+  color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
+) => {
+  if (headerImage && client.name !== 'facr') {
+    return css`background: url(${headerImage}.png);
+      background-size: 100% 100%;
+      @media (max-width: 450px){
+        background: url(${headerImage}_mobile.png);
+        background-size: 100% 100%;
+      }
+      `
+  }
+  if (color.includes('linear-gradient')) {
+    return css`
+      background: ${color};
+      z-index: 10;
+`
+  }
+  return client.name === 'facr' ? client.styles.homePageHeader : css`
+  background: linear-gradient(
+    236deg,
+    ${color} -4.49%,
+    #000000 50%),
+    #000000;
+  z-index: 10;
+`
+}
+
+type HeaderProps = {
+  color?: string,
+  headerImage?: string | null,
+  height?: number,
+}
+
+export const HeaderStyled = styled.header<HeaderProps>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: ${({ height = 8.5 }) => height}rem;
+  ${isMobileDevice
+    ? css`
+      height: 124px
+    `
+    : ''};
+
+  ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)}
+
+  ${isMobileDevice
+    ? css`
+      padding: 8px;
+    `
+    : ''}
+`
+
+type Props = {
+  height?: number,
+  marginTop?: number,
+}
+
+export const HeaderGroup = styled.div<Props>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  ${({ height }) => (height ? `height: ${height}rem` : '')};
+  ${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')};
+
+  ${isMobileDevice
+    ? css`
+      position: relative;
+      justify-content: space-between;
+      width: 100%;
+
+      :only-child {
+        flex-basis: 100px;
+      }
+    `
+    : ''};
+`
+
+export const HeaderLogo = styled(Logo)`
+  ${({ isMatchPage }) => (isMatchPage ? css`
+    width: ${client.styles.matchLogoWidth}rem;
+    height: ${client.styles.matchLogoHeight}rem;
+  ` : '')}
+
+  ${isMobileDevice
+    ? css`
+        width: 65px;
+        height: 15px;
+    `
+    : ''}
+`
+
+type PositionProps = {
+  isMatchPage?: boolean,
+  left?: number,
+  right?: number,
+  top?: number,
+}
+
+export const Position = styled.div<PositionProps>`
+  position: absolute;
+
+  top: ${({ isMatchPage, top = 1.14 }) => (
+    isMatchPage
+      ? client.styles.matchLogoTopMargin ?? top
+      : top
+  )}rem;
+
+  ${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)};
+  ${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)};
+`
+
+export const ScSportsWrapper = styled.div`
+  height: 80px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: absolute;
+
+  ${isMobileDevice
+    ? css`
+      top: 110px;
+      padding: 10px;
+      justify-content: space-between;
+      width: 100%;
+     /* right: -10px;
+     width: 95vw;
+     bottom: -90px; */
+    `
+    : ''};
+`
+
+export const ScModal = styled(BaseModal)`
+  background-color: rgba(0, 0, 0, 0.7);
+
+  ${ModalWindow} {
+    min-width: 286px;
+    max-height: 290px;
+    background-color: #333333;
+    border-radius: 0px;
+    padding: 0;
+    overflow-y: auto;
+
+    ${customScrollbar}
+
+    ${isMobileDevice
+    ? css`
+        min-width: 280px;
+        max-height: 250px;
+        height: auto;
+        top: -140px;
+    `
+    : ''};
+  }
+`
+export const ScHeaderTitle = styled.span`
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 24px;
+  color: #FFFFFF;
+  ${isMobileDevice
+    ? css`
+        font-size: 10px;
+        line-height: 20px;
+
+      @media (orientation: landscape) {
+        font-size: 10px;
+      }
+    `
+    : ''};
+`
+
+export const ScHeaderGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 10px;
+  border-bottom: 1px solid #505050;
+  
+  ${isMobileDevice
+    ? css`
+        font-size: 10px;
+        line-height: 20px;
+
+      @media (orientation: landscape) {
+        font-size: 10px;
+      }
+    `
+    : ''};
+`
+export const ScBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 15px 23px 15px;
+`
+
+type SportProps = {
+  active: boolean,
+}
+export const ScSport = styled.div<SportProps>`
+  display: flex;
+  justify-content: center;
+  text-transform: uppercase;
+  font-size: 10px;
+  font-weight: 700;
+  opacity: ${({ active }) => (active ? 1 : 0.5)};
+  margin-top: 18px;
+  cursor: pointer;
+`

src/features/SportsFilter/index.tsx

@@ -1,20 +1,40 @@
-import { T9n } from 'features/T9n'
+import { useState } from 'react'
 
-import { ScSportsFilter, ScArrow } from './styled'
+import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
-type SportsFilterProps = {
+import { SelectSport } from './components/SelectSport'
-  onModalOpen: () => void,
+import { SelectSportPopup } from './components/SelectSportPopup'
-  open: boolean,
+
-  sport: string,
+export const SportsFilter = () => {
-}
+  const { selectedSport, setSelectedSport } = useHeaderFiltersStore()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const onSportClick = (sport: string) => {
+    setSelectedSport(sport)
+    setIsOpen(false)
+  }
 
-export const SportsFilter = ({
+  const onModalOpen = () => {
-  onModalOpen,
+    setIsOpen(true)
-  open,
+  }
-  sport,
+
-}: SportsFilterProps) => (
+  const onModalClose = () => {
-  <ScSportsFilter onClick={onModalOpen}>
+    setIsOpen(false)
-    <T9n t={sport} />
+  }
-    <ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
+
-  </ScSportsFilter>
+  return (
-)
+    <>
+      <SelectSport
+        onModalOpen={onModalOpen}
+        open={isOpen}
+        sport={selectedSport}
+      />
+      <SelectSportPopup
+        onSportClick={onSportClick}
+        isOpen={isOpen}
+        onModalClose={onModalClose}
+        selectedSport={selectedSport}
+      />
+    </>
+  )
+}