From ad4a33c81241fb6c1bbbc7086fbda719a0865ea8 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Tue, 29 Mar 2022 20:08:21 +0700 Subject: [PATCH] style(#2317): change style for home page in mobile devices --- package-lock.json | 18 ++ package.json | 2 + public/images/score-switch-mobile-off.svg | 25 +- public/images/score-switch-mobile-on.svg | 25 +- src/components/SportIcon/SportIcon.tsx | 66 +++++ src/config/lexics/indexLexics.tsx | 11 + .../components/GroupBlock/index.tsx | 4 +- src/features/FavoritesMobilePopup/styled.tsx | 11 +- .../components/DateFilter/index.tsx | 6 +- .../components/DateFilter/styled.tsx | 39 +-- .../components/DatePicker/styled.tsx | 2 +- .../HeaderFilters/store/hooks/index.tsx | 7 + src/features/HeaderMenu/index.tsx | 18 ++ src/features/HeaderMenu/styled.tsx | 46 ++++ src/features/HeaderMobile/index.tsx | 94 +++++-- src/features/HeaderMobile/styled.tsx | 234 ++++++++++++++++-- src/features/HomePage/hooks.tsx | 4 +- src/features/HomePage/index.tsx | 4 +- src/features/Icon/index.tsx | 38 +++ src/features/Icons/Date/index.tsx | 5 - src/features/ItemsList/index.tsx | 2 +- .../MatchCard/CardFrontside/index.tsx | 86 +++---- src/features/MatchCard/styled.tsx | 179 +++++++++----- .../components/MatchDescription/index.tsx | 2 +- src/features/MatchPage/styled.tsx | 2 +- .../components/LiveMatchPlaylist/index.tsx | 2 +- .../components/LiveMatchPlaylist/styled.tsx | 3 +- .../components/LivePlaylistPage/styled.tsx | 8 +- .../components/SimplePlaylistButton/index.tsx | 2 +- .../SimplePlaylistButton/styled.tsx | 25 +- .../components/ScoreSwitch/index.tsx | 6 +- src/features/MatchSwitches/styled.tsx | 34 ++- .../Matches/components/MatchesList/index.tsx | 10 +- src/features/MatchesGrid/index.tsx | 27 +- src/features/Menu/styled.tsx | 15 +- src/features/Modal/index.tsx | 4 +- src/features/Modal/styled.tsx | 2 +- .../PopupComponents/BaseButton/index.tsx | 6 +- .../PopupComponents/CloseButton/index.tsx | 2 +- .../components/TournamentInfo/index.tsx | 2 +- src/features/ProfileHeader/index.tsx | 2 +- src/features/ProfileHeader/styled.tsx | 6 + src/features/Search/styled.tsx | 7 +- src/features/SportIcon/index.tsx | 27 -- src/features/SportsFilter/index.tsx | 20 ++ src/features/SportsFilter/styled.tsx | 25 ++ .../components/Tournament/index.tsx | 89 +++++++ .../components/Tournament/styled.tsx | 86 +++++++ src/features/TournamentList/hooks.tsx | 55 ++++ src/features/TournamentList/index.tsx | 35 +++ src/features/UserFavorites/index.tsx | 2 +- src/libs/index.d.ts | 3 + src/libs/index.ts | 11 + src/libs/objects/Arrow.tsx | 15 ++ src/libs/objects/Basketball.tsx | 22 ++ src/libs/objects/Calendar.tsx | 24 ++ .../index.tsx => libs/objects/Close.tsx} | 0 src/libs/objects/Date.tsx | 15 ++ src/libs/objects/Dollar.tsx | 12 + src/libs/objects/Football.tsx | 13 + src/libs/objects/Handball.tsx | 13 + src/libs/objects/Hockey.tsx | 11 + src/libs/objects/Star.tsx | 14 ++ src/libs/objects/Volleyball.tsx | 19 ++ src/requests/getMatches/types.tsx | 4 +- src/stores/index.ts | 8 + src/stores/matchesStore.tsx | 21 ++ 67 files changed, 1325 insertions(+), 312 deletions(-) create mode 100644 src/components/SportIcon/SportIcon.tsx create mode 100644 src/features/HeaderMenu/index.tsx create mode 100644 src/features/HeaderMenu/styled.tsx create mode 100644 src/features/Icon/index.tsx delete mode 100644 src/features/Icons/Date/index.tsx delete mode 100644 src/features/SportIcon/index.tsx create mode 100644 src/features/SportsFilter/index.tsx create mode 100644 src/features/SportsFilter/styled.tsx create mode 100644 src/features/TournamentList/components/Tournament/index.tsx create mode 100644 src/features/TournamentList/components/Tournament/styled.tsx create mode 100644 src/features/TournamentList/hooks.tsx create mode 100644 src/features/TournamentList/index.tsx create mode 100644 src/libs/index.d.ts create mode 100644 src/libs/index.ts create mode 100644 src/libs/objects/Arrow.tsx create mode 100644 src/libs/objects/Basketball.tsx create mode 100644 src/libs/objects/Calendar.tsx rename src/{features/Icons/Close/index.tsx => libs/objects/Close.tsx} (100%) create mode 100644 src/libs/objects/Date.tsx create mode 100644 src/libs/objects/Dollar.tsx create mode 100644 src/libs/objects/Football.tsx create mode 100644 src/libs/objects/Handball.tsx create mode 100644 src/libs/objects/Hockey.tsx create mode 100644 src/libs/objects/Star.tsx create mode 100644 src/libs/objects/Volleyball.tsx create mode 100644 src/stores/index.ts create mode 100644 src/stores/matchesStore.tsx diff --git a/package-lock.json b/package-lock.json index 43e9e476..c30b6356 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50748,6 +50748,24 @@ "minimist": "^1.2.5" } }, + "mobx": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.5.0.tgz", + "integrity": "sha512-pHZ/cySF00FVENDWIDzJyoObFahK6Eg4d0papqm6d7yMkxWTZ/S/csqJX1A3PsYy4t5k3z2QnlwuCfMW5lSEwA==" + }, + "mobx-react": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.3.0.tgz", + "integrity": "sha512-RGEcwZokopqyJE5JPwXKB9FWMSqFM9NJVO2QPI+z6laJTJeBHqvPicjnKgY5mvihxTeXB1+72TnooqUePeGV1g==", + "requires": { + "mobx-react-lite": "^3.3.0" + } + }, + "mobx-react-lite": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.3.0.tgz", + "integrity": "sha512-U/kMSFtV/bNVgY01FuiGWpRkaQVHozBq5CEBZltFvPt4FcV111hEWkgwqVg9GPPZSEuEdV438PEz8mk8mKpYlA==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/package.json b/package.json index f4435f03..aac70aca 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ "hls.js": "^0.14.15", "lodash": "^4.17.15", "m3u8-parser": "^4.7.0", + "mobx": "^6.5.0", + "mobx-react": "^7.3.0", "oidc-client": "^1.11.5", "react": "^17.0.2", "react-datepicker": "^3.1.3", diff --git a/public/images/score-switch-mobile-off.svg b/public/images/score-switch-mobile-off.svg index ddd2f89a..4a6aade2 100644 --- a/public/images/score-switch-mobile-off.svg +++ b/public/images/score-switch-mobile-off.svg @@ -1,17 +1,22 @@ - - - - + + + + - + - - - - - + + + + + + + + + + diff --git a/public/images/score-switch-mobile-on.svg b/public/images/score-switch-mobile-on.svg index 86b0dfe9..b88e6302 100644 --- a/public/images/score-switch-mobile-on.svg +++ b/public/images/score-switch-mobile-on.svg @@ -1,17 +1,22 @@ - - - - + + + + - + - - - - - + + + + + + + + + + diff --git a/src/components/SportIcon/SportIcon.tsx b/src/components/SportIcon/SportIcon.tsx new file mode 100644 index 00000000..b752e497 --- /dev/null +++ b/src/components/SportIcon/SportIcon.tsx @@ -0,0 +1,66 @@ +import styled from 'styled-components/macro' + +import { SportTypes } from 'config' +import { getSportLexic } from 'helpers' + +import { Icon } from 'features/Icon' + +const IconWrap = styled.div` + display: flex; + height: 10px; + min-width: 10px; + color: white; + align-items: center; +` + +type Props = { + fill?: string, + size?: number, + sport: SportTypes, +} + +const sportIcons = { + basketball: { + color: '#f1903b', + icon: 'Basketball', + }, + football: { + color: '#5CDD86', + icon: 'Football', + }, + handball: { + color: '#F6BE4F', + icon: 'Handball', + }, + hockey: { + color: '#5eb2ff', + icon: 'Hockey', + }, + streetball: { + color: '#f1903b', + icon: 'Basketball', + }, + volleyball: { + color: '#2D8B8A', + icon: 'Volleyball', + }, +} + +export const SportIcon = ({ + fill, + size, + sport, +}: Props) => { + const sportType = getSportLexic(sport) + const IconSport = sportIcons[sportType].icon + + return ( + + + + ) +} diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 79984947..96d6b091 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -78,18 +78,26 @@ const preferencesPopupLexics = { sport_types: 15088, } +const sportsPopup = { + football_popup: 12980, + hockey_popup: 15217, +} + export const indexLexics = { add_to_favorites: 14967, add_to_favorites_error: 12943, all_matches_shown: 13386, + all_sports: 13824, available_matches_shown: 13385, basketball: 6960, broadcast: 13049, check_connection: 15700, + choose_sport: 17927, cm: 817, features: 13051, football: 6958, full_game: 13028, + futsal: 17670, game_finished: 13026, game_time: 13029, gender_female: 9648, @@ -119,12 +127,14 @@ export const indexLexics = { players_video: 13032, round_highilights: 13050, save: 828, + scores: 14070, search_results: 9014, sport: 12993, team: 14973, to_home: 13376, tournament: 14974, user_account: 12928, + volleyball: 9761, watch_from_beginning: 13021, watch_from_last_pause: 13022, watch_now: 13020, @@ -135,4 +145,5 @@ export const indexLexics = { ...buyMatchPopupLexics, ...publicLexics, ...paymentLexics, + ...sportsPopup, } diff --git a/src/features/FavoritesMobilePopup/components/GroupBlock/index.tsx b/src/features/FavoritesMobilePopup/components/GroupBlock/index.tsx index 8c54bda8..529596fa 100644 --- a/src/features/FavoritesMobilePopup/components/GroupBlock/index.tsx +++ b/src/features/FavoritesMobilePopup/components/GroupBlock/index.tsx @@ -4,7 +4,7 @@ import map from 'lodash/map' import type { UserFavorites } from 'requests/getUserSportFavs' import { T9n } from 'features/T9n' -import { SportIcon } from 'features/SportIcon' +import { SportIcon } from 'components/SportIcon/SportIcon' import { useLexicsStore } from 'features/LexicsStore' import { ProfileLink } from 'features/ProfileLink' import { UserSportFavImgWrapper } from 'features/UserFavorites/styled' @@ -70,7 +70,7 @@ export const GroupBlock = ({ groupBlock }: Props) => { {name} - + {countryOrTeam} diff --git a/src/features/FavoritesMobilePopup/styled.tsx b/src/features/FavoritesMobilePopup/styled.tsx index b52f951c..8d65922a 100644 --- a/src/features/FavoritesMobilePopup/styled.tsx +++ b/src/features/FavoritesMobilePopup/styled.tsx @@ -1,6 +1,8 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' import { devices } from 'config' +import { isMobileDevice } from 'config/userAgent' + import { Logo } from 'features/Logo' import { ModalContainer } from 'features/Modal/styled' import { Icon } from 'features/Menu/styled' @@ -27,6 +29,13 @@ export const Wrapper = styled.div` rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 100% ), rgba(0, 0, 0, 0.9); + + + ${isMobileDevice + ? css` + padding: 5px; + ` + : ''}; ` export const HomeIcon = styled(Icon)` diff --git a/src/features/HeaderFilters/components/DateFilter/index.tsx b/src/features/HeaderFilters/components/DateFilter/index.tsx index 8fca5e27..5fc175ca 100644 --- a/src/features/HeaderFilters/components/DateFilter/index.tsx +++ b/src/features/HeaderFilters/components/DateFilter/index.tsx @@ -3,8 +3,8 @@ import { Fragment } from 'react' import map from 'lodash/map' import { OutsideClick } from 'features/OutsideClick' -import { Date as DateIcon } from 'features/Icons/Date' import { BodyBackdrop } from 'features/PageLayout' +import { Icon } from 'features/Icon' import { useDateFilter } from './hooks' import { DatePicker } from '../DatePicker' @@ -38,11 +38,11 @@ export const DateFilter = () => { return ( - + {date.month} {' '} {date.year} - + diff --git a/src/features/HeaderFilters/components/DateFilter/styled.tsx b/src/features/HeaderFilters/components/DateFilter/styled.tsx index 7f09e2fa..e96f107f 100644 --- a/src/features/HeaderFilters/components/DateFilter/styled.tsx +++ b/src/features/HeaderFilters/components/DateFilter/styled.tsx @@ -13,7 +13,7 @@ export const BaseButton = styled.button` export const Wrapper = styled.div` position: relative; - width: 32.8rem; + /* width: 32.8rem; */ display: flex; flex-direction: column; justify-content: center; @@ -25,8 +25,8 @@ export const Wrapper = styled.div` ${isMobileDevice ? css` - padding-top: 4px; - min-height: 84px; + /* padding-top: 4px; */ + /* min-height: 84px; */ justify-content: space-between; @media (max-width: 450px){ @@ -41,6 +41,7 @@ export const MonthWrapper = styled.div` text-align: center; align-self: center; width: 100%; + cursor: pointer; @media (max-width: 750px) { width: 32.8rem; @@ -59,7 +60,7 @@ export const MonthYear = styled.span` text-transform: uppercase; ${isMobileDevice ? css` - font-size: 13px; + font-size: 10px; line-height: 24px; ` : ''}; @@ -77,10 +78,13 @@ export const DateButton = styled(BaseButton)` height: 1.26rem; color: #fff; opacity: 0.5; + margin-left: 10px; ${isMobileDevice ? css` - top: 4px; + position: static; + width: 9px; + height: 9px; ` : ''}; @@ -96,11 +100,11 @@ export const DateButton = styled(BaseButton)` ${isMobileDevice ? css` - right: 14px; + /* right: 14px; width: 16px; - height: 16px; + height: 16px; */ @media screen and (orientation: landscape){ - right: 20px; + /* right: 20px; */ } ` : ''}; @@ -110,10 +114,10 @@ export const WeekDaysWrapper = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: 0.567rem; + /* margin-top: 0.567rem; */ ${isMobileDevice ? css` - padding: 0 20px; + padding: 0 5px; ` : ''}; ` @@ -151,7 +155,7 @@ export const WeekDay = styled(BaseButton)` )}; @media ${devices.mobile} { - width: 45px; + width: 35px; } ` @@ -186,8 +190,9 @@ export const ArrowButton = styled(BaseButton)` height: 2.28rem; ${isMobileDevice ? css` - width: 15px; - height: 14px; + height: 100%; + padding: 0 5px; + width: 35px; ` : ''}; @@ -201,8 +206,8 @@ export const Arrow = styled.span` width: 0.65rem; height: 0.65rem; position: absolute; - border-left: 0.15rem solid #fff; - border-bottom: 0.15rem solid #fff; + border-left: 0.3rem solid #fff; + border-bottom: 0.3rem solid #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -214,7 +219,9 @@ export const Arrow = styled.span` )} ${isMobileDevice ? css` - border-left: 1px solid #fff; + padding: 5px; + border-left: 0.3rem solid #fff; + border-left: 0.3rem solid #fff; width: 10px; height: 10px; ` diff --git a/src/features/HeaderFilters/components/DatePicker/styled.tsx b/src/features/HeaderFilters/components/DatePicker/styled.tsx index dec6b9be..fa6f1f2b 100644 --- a/src/features/HeaderFilters/components/DatePicker/styled.tsx +++ b/src/features/HeaderFilters/components/DatePicker/styled.tsx @@ -15,7 +15,7 @@ export const Wrapper = styled.div` width: 100%; @media screen and (orientation: landscape){ - right: 15%; + right: -24%; } ` : ''}; diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 47106b00..27479dfb 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -2,6 +2,7 @@ import { useMemo, useEffect, useCallback, + useState, } from 'react' import { useLocation } from 'react-router-dom' import { isToday } from 'date-fns' @@ -21,6 +22,7 @@ export const useFilters = () => { serialize: serializeDate, validator: isValidDate, }) + const [selectedSport, setSelectedSport] = useState('all_sports') const isTodaySelected = isToday(selectedDate) @@ -41,11 +43,16 @@ export const useFilters = () => { const store = useMemo(() => ({ isTodaySelected, selectedDate, + selectedSport, setSelectedDate, + setSelectedSport, }), [ isTodaySelected, selectedDate, + selectedSport, setSelectedDate, + setSelectedSport, + ]) return store diff --git a/src/features/HeaderMenu/index.tsx b/src/features/HeaderMenu/index.tsx new file mode 100644 index 00000000..3a2dc802 --- /dev/null +++ b/src/features/HeaderMenu/index.tsx @@ -0,0 +1,18 @@ +import { Link } from 'react-router-dom' + +import { PAGES } from 'config/pages' + +import { Search } from 'features/Search' +import { Menu } from 'features/Menu' + +import { HeaderGroup, HeaderLogo } from './styled' + +export const HeaderMenu = () => ( + + + + + + + +) diff --git a/src/features/HeaderMenu/styled.tsx b/src/features/HeaderMenu/styled.tsx new file mode 100644 index 00000000..76236a4c --- /dev/null +++ b/src/features/HeaderMenu/styled.tsx @@ -0,0 +1,46 @@ +import styled, { css } from 'styled-components/macro' + +import { client } from 'config/clients' +import { isMobileDevice } from 'config/userAgent' + +import { Logo } from 'features/Logo' + +type Props = { + height?: number, + marginTop?: number, +} + +export const HeaderGroup = styled.div` + 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; + + :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; + margin: 5px 22px; + ` + : ''} +` diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index ae1a2301..130ed368 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -1,28 +1,78 @@ -import { Link } from 'react-router-dom' - -import { PAGES } from 'config' +import { useState } from 'react' import { ScoreSwitch } from 'features/MatchSwitches' -import { Logo } from 'features/Logo' -import { Menu } from 'features/Menu' -import { Search } from 'features/Search' +import { HeaderMenu } from 'features/HeaderMenu' +import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters' +import { SportsFilter } from 'features/SportsFilter' +import { T9n } from 'features/T9n' import { - HeaderMobileWrapper, - HeaderIconsWrapper, - IconFavWrapper, + HeaderStyled, + ScBody, + ScSportsWrapper, + ScModal, + ScHeaderTitle, + ScHeaderGroup, + ScSport, } from './styled' -export const HeaderMobile = () => ( - - - - - - - - - - - -) +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 = () => { + setIsOpen(false) + } + + return ( + + + + + + + + + + + + + + + {sports.map((sport) => ( + onSportClick(sport)} + className={selectedSport === sport ? 'active' : ''} + active={selectedSport === sport} + > + + + ))} + + + + ) +} diff --git a/src/features/HeaderMobile/styled.tsx b/src/features/HeaderMobile/styled.tsx index e71bf4ac..44aa0157 100644 --- a/src/features/HeaderMobile/styled.tsx +++ b/src/features/HeaderMobile/styled.tsx @@ -1,43 +1,223 @@ -import styled from 'styled-components/macro' -import { devices } from 'config/devices' +import styled, { css } from 'styled-components/macro' -export const HeaderMobileWrapper = styled.div` - width: 100%; - height: 40px; - background-color: rgba(255, 255, 255, 0.1); +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( + 187deg, + ${color} -4.49%, + #000000 68.29%), + #000000; + z-index: 10; +` +} + +type HeaderProps = { + color?: string, + headerImage?: string | null, + height?: number, +} + +export const HeaderStyled = styled.header` + position: relative; display: flex; - align-items: center; - justify-content: space-between; - padding: 12px 18px; + 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; + ` + : ''} ` -export const HeaderMobileMidle = styled.div` - width: 100%; +type Props = { + height?: number, + marginTop?: number, +} + +export const HeaderGroup = styled.div` display: flex; + flex-direction: row; align-items: center; - justify-content: center; - padding: 12px 0; - margin-top: 6px; + + ${({ 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` + 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 HeaderIconsWrapper = styled.div` +export const ScSportsWrapper = styled.div` + height: 80px; display: flex; + flex-direction: row; align-items: center; - justify-content: space-around; - min-width: 100px; + position: absolute; - @media ${devices.tablet} { - min-width: auto; - } + ${isMobileDevice + ? css` + top: 110px; + padding: 10px; + justify-content: space-between; + width: 100%; + /* right: -10px; + width: 95vw; + bottom: -90px; */ + ` + : ''}; ` -export const IconFavWrapper = styled.div` - width: 24px; - height: 20px; - background-image: url(/images/star-white.svg); - background-repeat: no-repeat; +export const ScModal = styled(BaseModal)` + background-color: rgba(0, 0, 0, 0.7); + + ${ModalWindow} { + min-width: 280px; + max-height: 250px; + background-color: #333333; + border-radius: 0px; + padding: 0; + ${customScrollbar} - @media ${devices.tablet} { - display: none; + overflow-y: auto; + ${isMobileDevice + ? css` + height: auto; + top: -15vh; + ` + : ''}; } ` +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 15px 15px; +` + +type SportProps = { + active: boolean, +} +export const ScSport = styled.div` + 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; +` diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx index 4f050776..43ba7032 100644 --- a/src/features/HomePage/hooks.tsx +++ b/src/features/HomePage/hooks.tsx @@ -31,5 +31,7 @@ export const useHomePage = () => { }), [selectedDate], ) - return { fetchMatches } + return { + fetchMatches, + } } diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx index 1f04742f..5bc4254b 100644 --- a/src/features/HomePage/index.tsx +++ b/src/features/HomePage/index.tsx @@ -1,4 +1,5 @@ import { PAGES } from 'config' +import { isMobileDevice } from 'config/userAgent' import { usePageLogger } from 'hooks/usePageLogger' @@ -16,13 +17,14 @@ import { UserFavorites } from 'features/UserFavorites' import { useHomePage } from './hooks' import { Header } from './components/Header' +import { HeaderMobile } from '../HeaderMobile' const Home = () => { usePageLogger(PAGES.home) const { fetchMatches } = useHomePage() return ( -
+ {isMobileDevice ? :
}
diff --git a/src/features/Icon/index.tsx b/src/features/Icon/index.tsx new file mode 100644 index 00000000..3a8e6087 --- /dev/null +++ b/src/features/Icon/index.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import * as icons from '../../libs/index' + +export type IconProps = { + className?: string, + color?: string, + direction?: number, + onClick?: () => void, + refIcon: any, + size?: number, +} + +export const Icon: React.FC = ({ + className, + color, + direction, + onClick, + refIcon, + size, +}) => ( + +) diff --git a/src/features/Icons/Date/index.tsx b/src/features/Icons/Date/index.tsx deleted file mode 100644 index a20bea1d..00000000 --- a/src/features/Icons/Date/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -export const Date = () => ( - - - -) diff --git a/src/features/ItemsList/index.tsx b/src/features/ItemsList/index.tsx index 14416b41..61929e26 100644 --- a/src/features/ItemsList/index.tsx +++ b/src/features/ItemsList/index.tsx @@ -7,7 +7,7 @@ import { SportTypes, ProfileTypes } from 'config' import { Gender } from 'requests' import type { ObjectWithName } from 'features/Name' -import { SportIcon } from 'features/SportIcon' +import { SportIcon } from 'components/SportIcon/SportIcon' import { Item, diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index e41ffd26..aaefcd93 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -6,7 +6,6 @@ import getUnixTime from 'date-fns/getUnixTime' import { ProfileTypes, PAGES } from 'config' import type { Match } from 'features/Matches' -import { SportIcon } from 'features/SportIcon' import { useMatchSwitchesStore } from 'features/MatchSwitches' import { useName } from 'features/Name' import { T9n } from 'features/T9n' @@ -28,15 +27,14 @@ import { TeamName, Teams, Time, - TournamentName, TeamLogos, TeamLogo, BuyMatchBadge, - CountryFlag, SecondaryInfo, FavoriteSign, NameSignWrapper, HoverFrame, + ScDollar, } from '../styled' import { useCardPreview } from './hooks' @@ -69,11 +67,7 @@ export const CardFrontside = ({ const { isInFavorites } = useUserFavoritesStore() const { isScoreHidden } = useMatchSwitchesStore() const isInFuture = getUnixTime(date) > getUnixTime(new Date()) - const showScore = !( - isInFuture - || isScoreHidden - ) || (live && !isScoreHidden) - const tournamentInFavorites = isInFavorites(ProfileTypes.TOURNAMENTS, tournament.id) + const showScore = !(isInFuture || isScoreHidden) || (live && !isScoreHidden) const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id) const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id) @@ -83,50 +77,42 @@ export const CardFrontside = ({ }) return ( - + {previewImage && ( - + + )} + {access === MatchAccess.NoCountryAccess ? ( + + ) : ( + + + + )} - {access === MatchAccess.NoCountryAccess - ? - : ( - - - - - )} - {access === MatchAccess.CanBuyMatch && } {isHomePage ? null : formattedDate} - + {live && ( + + + + )} - {live && ( - - - - )} @@ -147,15 +133,11 @@ export const CardFrontside = ({ - - - {tournament && ( - - - {tournamentName} - - {tournamentInFavorites && } - + + {access === MatchAccess.CanBuyMatch && ( + + + )} diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index d57fd222..da1aa8c2 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -4,6 +4,7 @@ import { devices } from 'config/devices' import { isMobileDevice } from 'config/userAgent' import { Name } from 'features/Name' +import { Icon } from 'features/Icon' import { ProfileLogo } from 'features/ProfileLogo' export const CardWrapperOuter = styled.li.attrs({ @@ -13,18 +14,17 @@ export const CardWrapperOuter = styled.li.attrs({ position: relative; ${isMobileDevice ? css` - width: 100%; - padding-top: 0; - height: 90px; - margin-bottom: 10px; - - @media screen and (orientation: landscape){ - width: 49%; - :nth-child(odd){ - margin-right: 10px; - } - } - ` + width: 100%; + padding-top: 0; + margin-top: 6px; + + @media screen and (orientation: landscape) { + width: 100%; + :nth-child(odd) { + margin-right: 10px; + } + } + ` : ''}; ` @@ -41,10 +41,12 @@ export const CardWrapper = styled.div` cursor: pointer; ${isMobileDevice ? css` - width: 100%; - height: 90px; - padding-bottom: 0; - ` + position: static; + display: flex; + width: 100%; + height: 75px; + padding-bottom: 0; + ` : ''}; ` @@ -69,9 +71,9 @@ export const PreviewWrapper = styled.div` height: 60%; ${isMobileDevice ? css` - width: 50%; - height: 100%; - ` + width: 40%; + height: 100%; + ` : ''}; ` @@ -81,6 +83,12 @@ export const Preview = styled.img` height: 100%; object-fit: cover; opacity: 0.4; + + ${isMobileDevice + ? css` + opacity: 0.2; + ` + : ''}; ` export const MatchTimeInfo = styled.div` @@ -118,19 +126,38 @@ export const MatchDate = styled.div` } ${isMobileDevice ? css` - height: 15px; - font-size: 8px; - ` + background-color: transparent; + margin-left: 4px; + height: 15px; + width: 22px; + font-size: 7px; + ` : ''}; ` -export const LiveSign = styled(MatchDate)` - background-color: #CC0000; +type LiveType = { + color?: string, +} + +export const LiveSign = styled(MatchDate)` + background-color: ${({ color }) => color ?? '#CC0000'}; margin-left: auto; + + ${isMobileDevice + ? css` + font-size: 7px; + padding: 3px; + ` + : ''}; ` export const Time = styled.span` margin: 0 0.2rem; + ${isMobileDevice + ? css` + font-size: 10px; + ` + : ''}; ` export const Info = styled.div` @@ -143,19 +170,25 @@ export const Info = styled.div` white-space: nowrap; ${isMobileDevice ? css` - position: absolute; - top: 0; - left: 50%; - width: 50%; - height: 100%; - padding: 13px 12px 13px 10px; - ` + /* position: absolute; + top: 0; + left: 45%; */ + width: 60%; + height: 100%; + padding: 9px; + ` : ''}; ` export const SecondaryInfo = styled.div` display: flex; align-items: center; + + ${isMobileDevice + ? css` + justify-content: space-between; + ` + : ''}; ` export const CountryFlag = styled.img` @@ -163,32 +196,34 @@ export const CountryFlag = styled.img` height: 0.75rem; margin-left: 0.567rem; object-fit: contain; - object-position: bottom; ${isMobileDevice ? css` - width: 12px; - height: 8px; - margin-left: 3.5px; - ` + object-fit: cover; + width: 12px; + height: 100%; + margin-left: 8px; + ` : ''}; ` type FavoriteSignProps = { + color?: string, marginLeft?: number, } export const FavoriteSign = styled.span` display: inline-block; - width: 0.472rem; - height: 0.472rem; margin-top: 0.08rem; margin-left: ${({ marginLeft = 9 }) => marginLeft}px; - background: url('/images/sportFavStar.png') no-repeat center / 100% 100%; + color: ${({ color }) => color}; ${isMobileDevice ? css` - width: 10px; - height: 10px; - ` + display: flex; + justify-content: center; + align-items: center; + width: 8px; + height: 8px; + ` : ''}; ` @@ -206,10 +241,10 @@ export const TournamentName = styled.span` margin-left: 0.567rem; ${isMobileDevice ? css` - font-size: 10px; - line-height: 100%; - max-width: 100%; - ` + font-size: 10px; + line-height: 100%; + max-width: 100%; + ` : ''}; ${nameStyles} @@ -217,11 +252,6 @@ export const TournamentName = styled.span` export const Teams = styled.div` margin-bottom: 0.567rem; - ${isMobileDevice - ? css` - margin-bottom: 15px; - ` - : ''}; ` export const Team = styled.span` @@ -234,9 +264,9 @@ export const Team = styled.span` color: #fff; ${isMobileDevice ? css` - font-size: 14px; - line-height: 20px; - ` + font-size: 14px; + line-height: 20px; + ` : ''}; ` @@ -250,7 +280,17 @@ export const TeamName = styled(Name)` ${nameStyles} ` -export const Score = styled.div`` +export const Score = styled.div` + +${isMobileDevice + ? css` + display: flex; + justify-content: center; + width: 15px; + ` + : ''}; + +` export const TeamLogos = styled.div` display: flex; @@ -266,12 +306,11 @@ export const TeamLogo = styled(ProfileLogo)` :last-child { margin-left: 0.8rem; - } ${isMobileDevice ? css` - width: 30%; - ` + width: 30%; + ` : ''}; ` @@ -283,20 +322,30 @@ export const BuyMatchBadge = styled.span` height: 1.18rem; cursor: pointer; - background-image: url(/images/dollar-sign.svg); + /* background-image: url(/images/dollar-sign.svg); */ + color: rgba(255, 255, 255, 0.7); background-position: center; background-repeat: no-repeat; background-size: 0.472rem 0.71rem; - background-color: #fff; + background-color: rgba(255, 255, 255, 0.19); border-radius: 50%; - border: 0.5px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 0.08rem 0.283rem rgba(0, 0, 0, 0.5); ${isMobileDevice ? css` - width: 19px; - height: 17px; - background-size: 40%; - ` + position: static; + display: flex; + align-items: center; + justify-content: center; + width: 15px; + height: 15px; + /* background-size: 40%; */ + ` : ''}; ` + +export const ScDollar = styled(Icon)` + display: flex; + justify-content: center; + align-items: center; +` diff --git a/src/features/MatchPage/components/MatchDescription/index.tsx b/src/features/MatchPage/components/MatchDescription/index.tsx index 3c84204a..e51e4674 100644 --- a/src/features/MatchPage/components/MatchDescription/index.tsx +++ b/src/features/MatchPage/components/MatchDescription/index.tsx @@ -3,7 +3,7 @@ import { format } from 'date-fns' import type { MatchInfo } from 'requests/getMatchInfo' import { Name } from 'features/Name' -import { SportIcon } from 'features/SportIcon' +import { SportIcon } from 'components/SportIcon/SportIcon' import { T9n } from 'features/T9n' import { parseDate } from 'helpers/parseDate' diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx index ff3d3e6d..8c5bf2a1 100644 --- a/src/features/MatchPage/styled.tsx +++ b/src/features/MatchPage/styled.tsx @@ -18,7 +18,7 @@ export const Wrapper = styled.div` ${isMobileDevice ? css` @media (max-width: 750px) { - padding-top: 50px; + /* padding-top: 50px; */ } @media screen and (orientation: landscape) { padding-top: 55px; diff --git a/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx b/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx index b85357e6..0a195a5a 100644 --- a/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx +++ b/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx @@ -28,7 +28,7 @@ export const LiveMatchPlaylist = () => { diff --git a/src/features/MatchPopup/components/LiveMatchPlaylist/styled.tsx b/src/features/MatchPopup/components/LiveMatchPlaylist/styled.tsx index eae23fe7..9fceec8c 100644 --- a/src/features/MatchPopup/components/LiveMatchPlaylist/styled.tsx +++ b/src/features/MatchPopup/components/LiveMatchPlaylist/styled.tsx @@ -20,8 +20,7 @@ export const Item = styled.li` ${isMobileDevice ? css` - height: 36px; - min-height: 36px; + height: 48px; margin-bottom: 12px; ` : ''}; diff --git a/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx b/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx index a3120271..a9953b3e 100644 --- a/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx +++ b/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx @@ -15,7 +15,7 @@ export const Content = styled.div` margin-top: 30%; background: #333; border-radius: 4px; - padding: 30px 0; + padding: 20px 0 30px 0; @media (orientation: landscape){ margin: 0 auto; @@ -60,10 +60,12 @@ export const HeaderTitle = styled.h2` line-height: 1.982rem; color: #FFFFFF; text-align: center; + text-transform: uppercase; ${isMobileDevice ? css` - font-size: 14px; - line-height: 18px; + font-size: 10px; + font-weight: 700; + line-height: 12px; margin-bottom: 20px; ` : ''}; diff --git a/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx b/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx index f5dbd147..9f76439b 100644 --- a/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx +++ b/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx @@ -37,7 +37,7 @@ export const SimplePlaylistButton = ({ {duration && {secondsToHms(duration)}} { - title === 'watch_live_stream' + title === 'watch' && ( diff --git a/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx b/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx index 4e2426a3..335a8e26 100644 --- a/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx +++ b/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx @@ -12,7 +12,7 @@ export const StyledLink = styled(Link)` border: none; cursor: pointer; display: flex; - flex-direction: column; + flex-direction: row; justify-content: space-between; align-items: center; width: 100%; @@ -25,7 +25,6 @@ export const StyledLink = styled(Link)` ), #3F3F3F; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); - border-radius: 2px; :hover { background-color: #555555; @@ -33,20 +32,20 @@ export const StyledLink = styled(Link)` @media ${devices.mobile} { justify-content: center; - border-radius: 5px; } ` export const Title = styled.span` - font-weight: 500; + font-weight: 700; font-size: 0.95rem; line-height: 2.36rem; letter-spacing: 0.03em; color: #ffffff; + text-transform: uppercase; ${isMobileDevice ? css` - font-size: 14px; - line-height: 36px; + font-size: 10px; + line-height: 12px; ` : ''}; ` @@ -67,21 +66,17 @@ export const LiveSign = styled(MatchDate)` width: 1.511rem; height: 0.71rem; background-color: #CC0000; - position: absolute; - right: 0.8rem; - top: 50%; font-size: 0.32rem; - transform: translateY(-38%); display: flex; align-items: center; ${isMobileDevice ? css` - width: 26px; - height: 12px; - font-size: 8px; - right: 12px; - transform: translateY(-50%); + position: static; + width: 32px; + height: 22px; + font-size: 10px; + /* transform: translateY(-50%); */ ` : ''}; ` diff --git a/src/features/MatchSwitches/components/ScoreSwitch/index.tsx b/src/features/MatchSwitches/components/ScoreSwitch/index.tsx index 715aaf87..a87fa70c 100644 --- a/src/features/MatchSwitches/components/ScoreSwitch/index.tsx +++ b/src/features/MatchSwitches/components/ScoreSwitch/index.tsx @@ -16,12 +16,12 @@ export const ScoreSwitch = () => { - + <Title t='scores' /> <Icon iconName={isMobileDevice ? 'score-switch-mobile' : 'score-switch'} - isOn={isScoreHidden} + isOn={!isScoreHidden} /> </Switch> </Wrapper> diff --git a/src/features/MatchSwitches/styled.tsx b/src/features/MatchSwitches/styled.tsx index 4c25bd3f..4f581d3e 100644 --- a/src/features/MatchSwitches/styled.tsx +++ b/src/features/MatchSwitches/styled.tsx @@ -10,8 +10,10 @@ export const Switch = styled.div` cursor: pointer; ${isMobileDevice ? css` - justify-content: space-between; + justify-content: flex-end; width: 100%; + height: 100%; + text-transform: uppercase; ` : ''}; ` @@ -25,11 +27,11 @@ export const Title = styled(T9n)` color: ${({ theme }) => theme.colors.text100}; ${isMobileDevice ? css` - font-size: 14px; + font-size: 10px; line-height: 22px; letter-spacing: -0.408px; - text-transform: none; - font-weight: 400; + text-transform: uppercase; + font-weight: 700; ` : ''}; ` @@ -61,27 +63,33 @@ export const Icon = styled.div<IconProps>` ${isMobileDevice ? css` - width: 51px; - height: 31px; + width: 36px; + height: 18px; + margin-left: 1.5rem; ` : ''} ` export const Wrapper = styled.div` margin-right: 2.45rem; - height: 100%; display: flex; align-items: center; + ${isMobileDevice ? css` - position: absolute; - bottom: -130px; - right: -10px; + @media screen and (orientation: portrait) { + /* width: 30%; */ + height: 50px; + /* top: 130px; */ + /* position: absolute; */ + /* right: -10px; width: 95vw; - @media (max-width: 450px){ - bottom: -137px; - } + bottom: -90px; */ + } + @media screen and (orientation: landscape) { + display: none + } ` : ''}; ` diff --git a/src/features/Matches/components/MatchesList/index.tsx b/src/features/Matches/components/MatchesList/index.tsx index 93bedb70..e5376b7a 100644 --- a/src/features/Matches/components/MatchesList/index.tsx +++ b/src/features/Matches/components/MatchesList/index.tsx @@ -30,8 +30,14 @@ export const MatchesList = ({ <Fragment> {!isEmpty(matches) && ( <Section> - {title && <Title><T9n t={title} />} - + {title && ( + + <T9n t={title} /> + + )} + )} diff --git a/src/features/MatchesGrid/index.tsx b/src/features/MatchesGrid/index.tsx index a7168924..75527e8a 100644 --- a/src/features/MatchesGrid/index.tsx +++ b/src/features/MatchesGrid/index.tsx @@ -1,7 +1,12 @@ -import map from 'lodash/map' +import { memo } from 'react' +import { useRouteMatch } from 'react-router-dom' + +import { PAGES } from 'config/pages' +import { isMobileDevice } from 'config/userAgent' -import type { Match } from 'features/Matches' import { MatchCard } from 'features/MatchCard' +import { TournamentList } from 'features/TournamentList' +import type { Match } from 'features/Matches' import { Wrapper } from './styled' @@ -9,8 +14,16 @@ type MatchesGridProps = { matches: Array, } -export const MatchesGrid = ({ matches }: MatchesGridProps) => ( - - {map(matches, (match) => )} - -) +export const MatchesGrid = memo(({ matches }: MatchesGridProps) => { + const isHomePage = useRouteMatch(PAGES.home)?.isExact + + return ( + + {isHomePage && isMobileDevice + ? + : (matches.map((match) => ( + + )))} + + ) +}) diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx index e00d75b5..c6b42b57 100644 --- a/src/features/Menu/styled.tsx +++ b/src/features/Menu/styled.tsx @@ -7,10 +7,9 @@ export const MenuList = styled.ul` display: flex; ${isMobileDevice ? css` - margin-top: 8px; + align-items: center; @media screen and (orientation: landscape){ margin-right: 5px; - margin-top: 0; } ` : ''}; @@ -26,6 +25,14 @@ export const MenuItem = styled.li` :hover ${TooltipWrapper} { display: block; } + + ${isMobileDevice + ? css` + height: 100%; + padding: 5px; + ` + : ''}; + ` type IconProps = { @@ -43,8 +50,8 @@ export const Icon = styled.div` opacity: 0.8; ${isMobileDevice ? css` - width: 16px; - height: 16px; + width: 13px; + height: 13px; background-size: contain; /* margin: 0 4px; */ :only-child { diff --git a/src/features/Modal/index.tsx b/src/features/Modal/index.tsx index 77894921..2fe884f0 100644 --- a/src/features/Modal/index.tsx +++ b/src/features/Modal/index.tsx @@ -3,7 +3,7 @@ import { useMemo } from 'react' import ReactDOM from 'react-dom' import { OutsideClick } from 'features/OutsideClick' -import { Close } from 'features/Icons/Close' +import { Close } from '../../libs/objects/Close' import { ModalContainer, @@ -40,7 +40,7 @@ export const Modal = ({ {withCloseButton && ( - + )} {children} diff --git a/src/features/Modal/styled.tsx b/src/features/Modal/styled.tsx index efbe9874..bb373c05 100644 --- a/src/features/Modal/styled.tsx +++ b/src/features/Modal/styled.tsx @@ -46,6 +46,6 @@ export const ModalCloseButton = styled.button.attrs({ outline: none; padding: 16px 19px; cursor: pointer; - color: rgba(255, 255, 255, 0.5); + color: rgba(255, 255, 255, 1); background-color: transparent; ` diff --git a/src/features/PopupComponents/BaseButton/index.tsx b/src/features/PopupComponents/BaseButton/index.tsx index 861d818e..2b53021d 100644 --- a/src/features/PopupComponents/BaseButton/index.tsx +++ b/src/features/PopupComponents/BaseButton/index.tsx @@ -20,10 +20,10 @@ export const BaseButton = styled.button` height: ${({ height = 1.6 }) => height}rem; padding: ${({ padding = 0 }) => padding}px; color: white; - background-color: rgba(255, 255, 255, 0.12); + /* background-color: rgba(255, 255, 255, 0.12); background-position: center; background-repeat: no-repeat; - border-radius: 50%; + border-radius: 50%; */ :hover { background-color: rgba(255, 255, 255, 0.22); @@ -35,7 +35,7 @@ export const BaseButton = styled.button` height: 18px; padding: 4px; position: absolute; - top: -30px; + top: -10px; right: -30px; @media screen and (orientation: landscape){ width: 24px; diff --git a/src/features/PopupComponents/CloseButton/index.tsx b/src/features/PopupComponents/CloseButton/index.tsx index 0e55d8c8..059788d3 100644 --- a/src/features/PopupComponents/CloseButton/index.tsx +++ b/src/features/PopupComponents/CloseButton/index.tsx @@ -1,6 +1,6 @@ import type { MouseEvent } from 'react' -import { Close } from 'features/Icons/Close' +import { Close } from '../../../libs/objects/Close' import { BaseButton } from '../BaseButton' diff --git a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx b/src/features/PreferencesPopup/components/TournamentInfo/index.tsx index 9531ffca..e6fd7881 100644 --- a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx +++ b/src/features/PreferencesPopup/components/TournamentInfo/index.tsx @@ -10,7 +10,7 @@ import { Flag, TeamOrCountry, } from 'features/ItemsList/styled' -import { SportIcon } from 'features/SportIcon' +import { SportIcon } from 'components/SportIcon/SportIcon' const Wrapper = styled.div` width: 100%; diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index b5154731..575a8fc6 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/src/features/ProfileHeader/index.tsx @@ -76,11 +76,11 @@ export const ProfileHeader = ({ - + ) } diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index 26ca49d4..41eacf40 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -6,6 +6,7 @@ import { client } from 'config/clients' import { isMobileDevice } from 'config/userAgent' import { Logo } from 'features/Logo' +import { ScoreSwitch } from 'features/MatchSwitches' export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)' @@ -121,3 +122,8 @@ export const Position = styled.div` ${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)}; ${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)}; ` + +export const ScSwitch = styled(ScoreSwitch)` + position: absolute; + top: 400px; +` diff --git a/src/features/Search/styled.tsx b/src/features/Search/styled.tsx index f26eca4a..7ef8827e 100644 --- a/src/features/Search/styled.tsx +++ b/src/features/Search/styled.tsx @@ -84,7 +84,7 @@ export const Form = styled.form` ` : ''}; ${InputWrapper} { - width: 0; + width: 70px; height: 1.7rem; margin: 0; padding-left: 0.567rem; @@ -132,8 +132,9 @@ export const Form = styled.form` cursor: pointer; ${isMobileDevice ? css` - width: 19px; - top: 1px; + display: flex; + align-items: center; + width: 13px; ` : ''}; } diff --git a/src/features/SportIcon/index.tsx b/src/features/SportIcon/index.tsx deleted file mode 100644 index c89663db..00000000 --- a/src/features/SportIcon/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import styled from 'styled-components/macro' - -import { SportTypes } from 'config' -import { getSportLexic } from 'helpers' - -type IconProps = { - src: string, -} - -const Icon = styled.span` - display: inline-block; - height: 10px; - min-width: 10px; - - background-image: url(/images/${({ src }) => `${src}-icon`}.svg); - background-repeat: no-repeat; - background-position: center; - background-size: 100% 100%; -` - -type Props = { - sport: SportTypes, -} - -export const SportIcon = ({ sport }: Props) => ( - -) diff --git a/src/features/SportsFilter/index.tsx b/src/features/SportsFilter/index.tsx new file mode 100644 index 00000000..903b4fe4 --- /dev/null +++ b/src/features/SportsFilter/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 SportsFilter = ({ + onModalOpen, + open, + sport, +}: SportsFilterProps) => ( + + + + +) diff --git a/src/features/SportsFilter/styled.tsx b/src/features/SportsFilter/styled.tsx new file mode 100644 index 00000000..a184de7a --- /dev/null +++ b/src/features/SportsFilter/styled.tsx @@ -0,0 +1,25 @@ +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' +import { Icon } from 'features/Icon' + +export const ScSportsFilter = styled.div` + display: flex; + color: white; + font-size: 14px; + width: 30%; + text-transform: uppercase; + font-weight: 700; + height: 100%; + align-items: center; + + ${isMobileDevice + ? css` + font-size: 10px; + ` + : ''}; +` + +export const ScArrow = styled(Icon)` + margin-left: 14px; +` diff --git a/src/features/TournamentList/components/Tournament/index.tsx b/src/features/TournamentList/components/Tournament/index.tsx new file mode 100644 index 00000000..0ffd9b15 --- /dev/null +++ b/src/features/TournamentList/components/Tournament/index.tsx @@ -0,0 +1,89 @@ +import { useState } from 'react' + +import { ProfileTypes } from 'config' + +import { SportIcon } from 'components/SportIcon/SportIcon' +import { T9n } from 'features/T9n' +import { Icon } from 'features/Icon' +import type { Match } from 'features/Matches' +import { MatchCard } from 'features/MatchCard' +import { + CountryFlag, + FavoriteSign, + LiveSign, +} from 'features/MatchCard/styled' +import { useUserFavoritesStore } from 'features/UserFavorites/store' + +import type { TournamentType } from 'requests/getMatches/types' + +import { + CardWrapperOuter, + CardWrapper, + CountMatches, + TournamentName, + ScFirstInfo, + ScMatchesWrapper, + ScSecondInfo, +} from './styled' + +export type TournamentProps = { + tournament: TournamentType & { + countryId: number, + live: boolean, + sportType: number, + }, + tournamentMatches: Array, +} + +export const Tournament = ({ + tournament, + tournamentMatches, +}: TournamentProps) => { + const [open, setOpen] = useState(false) + const { + countryId, + live, + sportType, + } = tournament + const { isInFavorites } = useUserFavoritesStore() + + const currentColor = open ? '#ffffff' : 'rgba(255, 255, 255, 0.5)' + + const tournamentInFavorites = isInFavorites( + ProfileTypes.TOURNAMENTS, + tournament.id, + ) + return ( + + setOpen(!open)}> + + + + + {tournamentInFavorites && ( + + + + )} + + + {live && ( + + + + )} + {tournamentMatches.length} + + + + + {open + && tournamentMatches?.map((match: Match) => ( + + ))} + + + ) +} diff --git a/src/features/TournamentList/components/Tournament/styled.tsx b/src/features/TournamentList/components/Tournament/styled.tsx new file mode 100644 index 00000000..4f4185ce --- /dev/null +++ b/src/features/TournamentList/components/Tournament/styled.tsx @@ -0,0 +1,86 @@ +import styled, { css } from 'styled-components/macro' +import { Name } from 'features/Name' +import { Icon } from 'features/Icon' + +import { isMobileDevice } from 'config/userAgent' + +export const CardWrapperOuter = styled.li.attrs({ + tabIndex: 0, +})` + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + ${isMobileDevice + ? css` + width: 100%; + padding-top: 0; + margin-bottom: 5px; + } + ` + : ''}; +` + +export const CardWrapper = styled.div<{ open: boolean }>` + display: flex; + align-items: center; + border-radius: 2px; + + background-color: ${({ open }) => (open ? '#294FC3' : '#3f3f3f')}; + cursor: pointer; + ${isMobileDevice + ? css` + padding: 10px; + width: 100%; + height: 50px; + ` + : ''}; +` + +export const TournamentName = styled(Name)` + font-weight: 700; + font-size: 13px; + line-height: 16px; + color: #ffffff; + overflow: hidden; + text-overflow: ellipsis; + margin-left: 7px; + white-space: nowrap; +` + +export const CountMatches = styled.span<{ color?: string }>` + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: ${({ color }) => color}; + width: 20px; + text-align: center; + margin-left: 20px; +` + +export const ScFirstInfo = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + width: 80%; +` + +export const ScSecondInfo = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + width: 100%; +` + +export const ScMatchesWrapper = styled.ul` + display: flex; + flex-direction: column; +` + +export const ScStar = styled(Icon)` + display: flex; + justify-content: center; + align-items: center; +` diff --git a/src/features/TournamentList/hooks.tsx b/src/features/TournamentList/hooks.tsx new file mode 100644 index 00000000..7f1412f4 --- /dev/null +++ b/src/features/TournamentList/hooks.tsx @@ -0,0 +1,55 @@ +import { getSportLexic } from 'helpers/getSportLexic' + +import { TournamentListProps } from 'features/TournamentList' +import type { Match } from 'features/Matches' +import { useHeaderFiltersStore } from 'features/HeaderFilters' + +export const useTournaments = (matches: Array) => { + const { selectedSport } = useHeaderFiltersStore() + + const compareSport = (match: Match, sportName: string) => { + if (sportName === 'all_sports') { + return true + } + const sport = getSportLexic(match.sportType) + if (sportName.indexOf('_popup') !== -1) { + return sport === sportName.replace('_popup', '') + } + return sport === sportName + } + + const tournaments = matches.reduce((acc: Array | [], match: Match) => { + if (matches.length === 0) return [] + if (!acc[match.tournament.id] && compareSport(match, selectedSport)) { + const tournament = { + ...match.tournament, + countryId: match.countryId, + live: match.live, + matches: [match], + sportType: match.sportType, + } + acc[match.tournament.id] = { + tournament: { + ...tournament, + }, + tournamentMatches: [match], + } + } else if (compareSport(match, selectedSport)) { + acc[match.tournament.id] = { + ...acc[match.tournament.id], + tournament: { + ...acc[match.tournament.id].tournament, + live: acc[match.tournament.id]?.tournament.live + ? acc[match.tournament.id]?.tournament.live + : match.live, + }, + tournamentMatches: [...acc[match.tournament.id].tournamentMatches, match], + } + } + return acc + }, []) + + return { + tournaments, + } +} diff --git a/src/features/TournamentList/index.tsx b/src/features/TournamentList/index.tsx new file mode 100644 index 00000000..9724e255 --- /dev/null +++ b/src/features/TournamentList/index.tsx @@ -0,0 +1,35 @@ +import type { Match } from 'features/Matches' + +import type { TournamentType } from 'requests/getMatches/types' + +import { Tournament } from './components/Tournament' +import { useTournaments } from './hooks' + +type TournamentTypeProps = { + matches: Array, +} + +export type TournamentListProps = { + tournament: TournamentType & { + countryId: number, + live: boolean, + sportType: number, + }, + tournamentMatches: Array, +} + +export const TournamentList = ({ matches }: TournamentTypeProps) => { + const { tournaments } = useTournaments(matches) + + return ( + <> + {tournaments?.map(({ tournament, tournamentMatches }: TournamentListProps) => ( + + ))} + + ) +} diff --git a/src/features/UserFavorites/index.tsx b/src/features/UserFavorites/index.tsx index 7001bad2..b26b558d 100644 --- a/src/features/UserFavorites/index.tsx +++ b/src/features/UserFavorites/index.tsx @@ -7,7 +7,7 @@ import { FavoritesActions } from 'requests' import { Modal } from 'features/Modal' import { ProfileLink } from 'features/ProfileLink' -import { Close } from 'features/Icons/Close' +import { Close } from '../../libs/objects/Close' import { TooltipBlock } from './TooltipBlock' import { useUserFavoritesStore } from './store' diff --git a/src/libs/index.d.ts b/src/libs/index.d.ts new file mode 100644 index 00000000..dd6f9c90 --- /dev/null +++ b/src/libs/index.d.ts @@ -0,0 +1,3 @@ +import * as icons from './index' + +export type iconTypes = keyof typeof icons diff --git a/src/libs/index.ts b/src/libs/index.ts new file mode 100644 index 00000000..98a6efb1 --- /dev/null +++ b/src/libs/index.ts @@ -0,0 +1,11 @@ +export { Arrow } from './objects/Arrow' +export { Date } from './objects/Date' +export { Calendar } from './objects/Calendar' +export { Basketball } from './objects/Basketball' +export { Football } from './objects/Football' +export { Hockey } from './objects/Hockey' +export { Handball } from './objects/Handball' +export { Volleyball } from './objects/Volleyball' +export { Star } from './objects/Star' +export { Dollar } from './objects/Dollar' +export { Close } from './objects/Close' diff --git a/src/libs/objects/Arrow.tsx b/src/libs/objects/Arrow.tsx new file mode 100644 index 00000000..bf69e0e1 --- /dev/null +++ b/src/libs/objects/Arrow.tsx @@ -0,0 +1,15 @@ +export const Arrow = (): JSX.Element => ( + + + +) diff --git a/src/libs/objects/Basketball.tsx b/src/libs/objects/Basketball.tsx new file mode 100644 index 00000000..930edabd --- /dev/null +++ b/src/libs/objects/Basketball.tsx @@ -0,0 +1,22 @@ +export const Basketball = () => ( + + + + + + +) diff --git a/src/libs/objects/Calendar.tsx b/src/libs/objects/Calendar.tsx new file mode 100644 index 00000000..3be87dcc --- /dev/null +++ b/src/libs/objects/Calendar.tsx @@ -0,0 +1,24 @@ +export const Calendar = (): JSX.Element => ( + + + + +) diff --git a/src/features/Icons/Close/index.tsx b/src/libs/objects/Close.tsx similarity index 100% rename from src/features/Icons/Close/index.tsx rename to src/libs/objects/Close.tsx diff --git a/src/libs/objects/Date.tsx b/src/libs/objects/Date.tsx new file mode 100644 index 00000000..73985931 --- /dev/null +++ b/src/libs/objects/Date.tsx @@ -0,0 +1,15 @@ +export const Date = () => ( + + + +) diff --git a/src/libs/objects/Dollar.tsx b/src/libs/objects/Dollar.tsx new file mode 100644 index 00000000..d790d91d --- /dev/null +++ b/src/libs/objects/Dollar.tsx @@ -0,0 +1,12 @@ +export const Dollar = () => ( + + + +) diff --git a/src/libs/objects/Football.tsx b/src/libs/objects/Football.tsx new file mode 100644 index 00000000..9f2dee1a --- /dev/null +++ b/src/libs/objects/Football.tsx @@ -0,0 +1,13 @@ +export const Football = () => ( + + + +) diff --git a/src/libs/objects/Handball.tsx b/src/libs/objects/Handball.tsx new file mode 100644 index 00000000..ccb79d4f --- /dev/null +++ b/src/libs/objects/Handball.tsx @@ -0,0 +1,13 @@ +export const Handball = () => ( + + + +) diff --git a/src/libs/objects/Hockey.tsx b/src/libs/objects/Hockey.tsx new file mode 100644 index 00000000..21bb2f09 --- /dev/null +++ b/src/libs/objects/Hockey.tsx @@ -0,0 +1,11 @@ +export const Hockey = () => ( + + + +) diff --git a/src/libs/objects/Star.tsx b/src/libs/objects/Star.tsx new file mode 100644 index 00000000..de4c2cab --- /dev/null +++ b/src/libs/objects/Star.tsx @@ -0,0 +1,14 @@ +export const Star = () => ( + + + +) diff --git a/src/libs/objects/Volleyball.tsx b/src/libs/objects/Volleyball.tsx new file mode 100644 index 00000000..e0edcaa5 --- /dev/null +++ b/src/libs/objects/Volleyball.tsx @@ -0,0 +1,19 @@ +export const Volleyball = () => ( + + + + + + + + + + + +) diff --git a/src/requests/getMatches/types.tsx b/src/requests/getMatches/types.tsx index 93c2738a..3aee53cb 100644 --- a/src/requests/getMatches/types.tsx +++ b/src/requests/getMatches/types.tsx @@ -1,6 +1,6 @@ import { SportTypes } from 'config' -type Tournament = { +export type TournamentType = { id: number, name_eng: string, name_rus: string, @@ -31,7 +31,7 @@ export type Match = { sub: boolean, team1: Team, team2: Team, - tournament: Tournament, + tournament: TournamentType, } export type Matches = Array diff --git a/src/stores/index.ts b/src/stores/index.ts new file mode 100644 index 00000000..b46a1625 --- /dev/null +++ b/src/stores/index.ts @@ -0,0 +1,8 @@ +import { createContext, useContext } from 'react' +import { MatchesStore } from './matchesStore' + +export const RootStoreContext = createContext({ + matchesStore: new MatchesStore(), +}) + +export const useStores = () => useContext(RootStoreContext) diff --git a/src/stores/matchesStore.tsx b/src/stores/matchesStore.tsx new file mode 100644 index 00000000..bbabe031 --- /dev/null +++ b/src/stores/matchesStore.tsx @@ -0,0 +1,21 @@ +import { makeAutoObservable, observable } from 'mobx' + +import type { Match } from 'features/Matches/hooks' + +export class MatchesStore { + matches: Array = [] + + constructor() { + makeAutoObservable(this, { + matches: observable, + }) + } + + getMatches() { + return this.matches + } + + filterMatches(matches: Array, sport: number) { + this.matches = matches.filter((match) => match.sportType === sport) + } +}