diff --git a/package-lock.json b/package-lock.json index c30b6356..43e9e476 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50748,24 +50748,6 @@ "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 aac70aca..f4435f03 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,6 @@ "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 4a6aade2..ddd2f89a 100644 --- a/public/images/score-switch-mobile-off.svg +++ b/public/images/score-switch-mobile-off.svg @@ -1,22 +1,17 @@ - - - - + + + + - + - - - - - - - - - - + + + + + diff --git a/public/images/score-switch-mobile-on.svg b/public/images/score-switch-mobile-on.svg index b88e6302..86b0dfe9 100644 --- a/public/images/score-switch-mobile-on.svg +++ b/public/images/score-switch-mobile-on.svg @@ -1,22 +1,17 @@ - - - - + + + + - + - - - - - - - - - - + + + + + diff --git a/src/components/SportIcon/SportIcon.tsx b/src/components/SportIcon/SportIcon.tsx deleted file mode 100644 index b752e497..00000000 --- a/src/components/SportIcon/SportIcon.tsx +++ /dev/null @@ -1,66 +0,0 @@ -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 96d6b091..79984947 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -78,26 +78,18 @@ 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, @@ -127,14 +119,12 @@ 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, @@ -145,5 +135,4 @@ 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 529596fa..8c54bda8 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 'components/SportIcon/SportIcon' +import { SportIcon } from 'features/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 8d65922a..b52f951c 100644 --- a/src/features/FavoritesMobilePopup/styled.tsx +++ b/src/features/FavoritesMobilePopup/styled.tsx @@ -1,8 +1,6 @@ -import styled, { css } from 'styled-components/macro' +import styled 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' @@ -29,13 +27,6 @@ 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 5fc175ca..8fca5e27 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 e96f107f..7f09e2fa 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,7 +41,6 @@ export const MonthWrapper = styled.div` text-align: center; align-self: center; width: 100%; - cursor: pointer; @media (max-width: 750px) { width: 32.8rem; @@ -60,7 +59,7 @@ export const MonthYear = styled.span` text-transform: uppercase; ${isMobileDevice ? css` - font-size: 10px; + font-size: 13px; line-height: 24px; ` : ''}; @@ -78,13 +77,10 @@ export const DateButton = styled(BaseButton)` height: 1.26rem; color: #fff; opacity: 0.5; - margin-left: 10px; ${isMobileDevice ? css` - position: static; - width: 9px; - height: 9px; + top: 4px; ` : ''}; @@ -100,11 +96,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; } ` : ''}; @@ -114,10 +110,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 5px; + padding: 0 20px; ` : ''}; ` @@ -155,7 +151,7 @@ export const WeekDay = styled(BaseButton)` )}; @media ${devices.mobile} { - width: 35px; + width: 45px; } ` @@ -190,9 +186,8 @@ export const ArrowButton = styled(BaseButton)` height: 2.28rem; ${isMobileDevice ? css` - height: 100%; - padding: 0 5px; - width: 35px; + width: 15px; + height: 14px; ` : ''}; @@ -206,8 +201,8 @@ export const Arrow = styled.span` width: 0.65rem; height: 0.65rem; position: absolute; - border-left: 0.3rem solid #fff; - border-bottom: 0.3rem solid #fff; + border-left: 0.15rem solid #fff; + border-bottom: 0.15rem solid #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -219,9 +214,7 @@ export const Arrow = styled.span` )} ${isMobileDevice ? css` - padding: 5px; - border-left: 0.3rem solid #fff; - border-left: 0.3rem solid #fff; + border-left: 1px 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 fa6f1f2b..dec6b9be 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: -24%; + right: 15%; } ` : ''}; diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 27479dfb..47106b00 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -2,7 +2,6 @@ import { useMemo, useEffect, useCallback, - useState, } from 'react' import { useLocation } from 'react-router-dom' import { isToday } from 'date-fns' @@ -22,7 +21,6 @@ export const useFilters = () => { serialize: serializeDate, validator: isValidDate, }) - const [selectedSport, setSelectedSport] = useState('all_sports') const isTodaySelected = isToday(selectedDate) @@ -43,16 +41,11 @@ 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 deleted file mode 100644 index 3a2dc802..00000000 --- a/src/features/HeaderMenu/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -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 deleted file mode 100644 index 76236a4c..00000000 --- a/src/features/HeaderMenu/styled.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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 130ed368..ae1a2301 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -1,78 +1,28 @@ -import { useState } from 'react' +import { Link } from 'react-router-dom' + +import { PAGES } from 'config' import { ScoreSwitch } from 'features/MatchSwitches' -import { HeaderMenu } from 'features/HeaderMenu' -import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters' -import { SportsFilter } from 'features/SportsFilter' -import { T9n } from 'features/T9n' +import { Logo } from 'features/Logo' +import { Menu } from 'features/Menu' +import { Search } from 'features/Search' import { - HeaderStyled, - ScBody, - ScSportsWrapper, - ScModal, - ScHeaderTitle, - ScHeaderGroup, - ScSport, + HeaderMobileWrapper, + HeaderIconsWrapper, + IconFavWrapper, } 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 = () => { - setIsOpen(false) - } - - return ( - - - - - - - - - - - - - - - {sports.map((sport) => ( - onSportClick(sport)} - className={selectedSport === sport ? 'active' : ''} - active={selectedSport === sport} - > - - - ))} - - - - ) -} +export const HeaderMobile = () => ( + + + + + + + + + + + +) diff --git a/src/features/HeaderMobile/styled.tsx b/src/features/HeaderMobile/styled.tsx index 44aa0157..e71bf4ac 100644 --- a/src/features/HeaderMobile/styled.tsx +++ b/src/features/HeaderMobile/styled.tsx @@ -1,223 +1,43 @@ -import styled, { css } from 'styled-components/macro' +import styled from 'styled-components/macro' +import { devices } from 'config/devices' -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; +export const HeaderMobileWrapper = styled.div` + width: 100%; + height: 40px; + background-color: rgba(255, 255, 255, 0.1); 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; - ` - : ''} + align-items: center; + justify-content: space-between; + padding: 12px 18px; ` -type Props = { - height?: number, - marginTop?: number, -} - -export const HeaderGroup = styled.div` +export const HeaderMobileMidle = styled.div` + width: 100%; 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` - 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`)}; + justify-content: center; + padding: 12px 0; + margin-top: 6px; ` -export const ScSportsWrapper = styled.div` - height: 80px; +export const HeaderIconsWrapper = styled.div` display: flex; - flex-direction: row; align-items: center; - position: absolute; + justify-content: space-around; + min-width: 100px; - ${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: 280px; - max-height: 250px; - background-color: #333333; - border-radius: 0px; - padding: 0; - ${customScrollbar} - - overflow-y: auto; - ${isMobileDevice - ? css` - height: auto; - top: -15vh; - ` - : ''}; + @media ${devices.tablet} { + min-width: auto; } ` -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 IconFavWrapper = styled.div` + width: 24px; + height: 20px; + background-image: url(/images/star-white.svg); + background-repeat: no-repeat; -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; + @media ${devices.tablet} { + display: none; + } ` diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx index 43ba7032..4f050776 100644 --- a/src/features/HomePage/hooks.tsx +++ b/src/features/HomePage/hooks.tsx @@ -31,7 +31,5 @@ export const useHomePage = () => { }), [selectedDate], ) - return { - fetchMatches, - } + return { fetchMatches } } diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx index 5bc4254b..1f04742f 100644 --- a/src/features/HomePage/index.tsx +++ b/src/features/HomePage/index.tsx @@ -1,5 +1,4 @@ import { PAGES } from 'config' -import { isMobileDevice } from 'config/userAgent' import { usePageLogger } from 'hooks/usePageLogger' @@ -17,14 +16,13 @@ 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 deleted file mode 100644 index 3a8e6087..00000000 --- a/src/features/Icon/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -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/libs/objects/Close.tsx b/src/features/Icons/Close/index.tsx similarity index 100% rename from src/libs/objects/Close.tsx rename to src/features/Icons/Close/index.tsx diff --git a/src/features/Icons/Date/index.tsx b/src/features/Icons/Date/index.tsx new file mode 100644 index 00000000..a20bea1d --- /dev/null +++ b/src/features/Icons/Date/index.tsx @@ -0,0 +1,5 @@ +export const Date = () => ( + + + +) diff --git a/src/features/ItemsList/index.tsx b/src/features/ItemsList/index.tsx index 61929e26..14416b41 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 'components/SportIcon/SportIcon' +import { SportIcon } from 'features/SportIcon' import { Item, diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index aaefcd93..e41ffd26 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -6,6 +6,7 @@ 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' @@ -27,14 +28,15 @@ import { TeamName, Teams, Time, + TournamentName, TeamLogos, TeamLogo, BuyMatchBadge, + CountryFlag, SecondaryInfo, FavoriteSign, NameSignWrapper, HoverFrame, - ScDollar, } from '../styled' import { useCardPreview } from './hooks' @@ -67,7 +69,11 @@ export const CardFrontside = ({ const { isInFavorites } = useUserFavoritesStore() const { isScoreHidden } = useMatchSwitchesStore() const isInFuture = getUnixTime(date) > getUnixTime(new Date()) - const showScore = !(isInFuture || isScoreHidden) || (live && !isScoreHidden) + const showScore = !( + isInFuture + || isScoreHidden + ) || (live && !isScoreHidden) + const tournamentInFavorites = isInFavorites(ProfileTypes.TOURNAMENTS, tournament.id) const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id) const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id) @@ -77,42 +83,50 @@ export const CardFrontside = ({ }) return ( - + {previewImage && ( - - )} - {access === MatchAccess.NoCountryAccess ? ( - - ) : ( - - - - + )} + {access === MatchAccess.NoCountryAccess + ? + : ( + + + + + )} + {access === MatchAccess.CanBuyMatch && } {isHomePage ? null : formattedDate} - {live && ( - - - - )} + + {live && ( + + + + )} @@ -133,11 +147,15 @@ export const CardFrontside = ({ - - {access === MatchAccess.CanBuyMatch && ( - - - + + + {tournament && ( + + + {tournamentName} + + {tournamentInFavorites && } + )} diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index da1aa8c2..d57fd222 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -4,7 +4,6 @@ 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({ @@ -14,17 +13,18 @@ export const CardWrapperOuter = styled.li.attrs({ position: relative; ${isMobileDevice ? css` - width: 100%; - padding-top: 0; - margin-top: 6px; - - @media screen and (orientation: landscape) { - width: 100%; - :nth-child(odd) { - margin-right: 10px; - } - } - ` + width: 100%; + padding-top: 0; + height: 90px; + margin-bottom: 10px; + + @media screen and (orientation: landscape){ + width: 49%; + :nth-child(odd){ + margin-right: 10px; + } + } + ` : ''}; ` @@ -41,12 +41,10 @@ export const CardWrapper = styled.div` cursor: pointer; ${isMobileDevice ? css` - position: static; - display: flex; - width: 100%; - height: 75px; - padding-bottom: 0; - ` + width: 100%; + height: 90px; + padding-bottom: 0; + ` : ''}; ` @@ -71,9 +69,9 @@ export const PreviewWrapper = styled.div` height: 60%; ${isMobileDevice ? css` - width: 40%; - height: 100%; - ` + width: 50%; + height: 100%; + ` : ''}; ` @@ -83,12 +81,6 @@ export const Preview = styled.img` height: 100%; object-fit: cover; opacity: 0.4; - - ${isMobileDevice - ? css` - opacity: 0.2; - ` - : ''}; ` export const MatchTimeInfo = styled.div` @@ -126,38 +118,19 @@ export const MatchDate = styled.div` } ${isMobileDevice ? css` - background-color: transparent; - margin-left: 4px; - height: 15px; - width: 22px; - font-size: 7px; - ` + height: 15px; + font-size: 8px; + ` : ''}; ` -type LiveType = { - color?: string, -} - -export const LiveSign = styled(MatchDate)` - background-color: ${({ color }) => color ?? '#CC0000'}; +export const LiveSign = styled(MatchDate)` + background-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` @@ -170,25 +143,19 @@ export const Info = styled.div` white-space: nowrap; ${isMobileDevice ? css` - /* position: absolute; - top: 0; - left: 45%; */ - width: 60%; - height: 100%; - padding: 9px; - ` + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + padding: 13px 12px 13px 10px; + ` : ''}; ` export const SecondaryInfo = styled.div` display: flex; align-items: center; - - ${isMobileDevice - ? css` - justify-content: space-between; - ` - : ''}; ` export const CountryFlag = styled.img` @@ -196,34 +163,32 @@ export const CountryFlag = styled.img` height: 0.75rem; margin-left: 0.567rem; object-fit: contain; + object-position: bottom; ${isMobileDevice ? css` - object-fit: cover; - width: 12px; - height: 100%; - margin-left: 8px; - ` + width: 12px; + height: 8px; + margin-left: 3.5px; + ` : ''}; ` 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; - color: ${({ color }) => color}; + background: url('/images/sportFavStar.png') no-repeat center / 100% 100%; ${isMobileDevice ? css` - display: flex; - justify-content: center; - align-items: center; - width: 8px; - height: 8px; - ` + width: 10px; + height: 10px; + ` : ''}; ` @@ -241,10 +206,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} @@ -252,6 +217,11 @@ export const TournamentName = styled.span` export const Teams = styled.div` margin-bottom: 0.567rem; + ${isMobileDevice + ? css` + margin-bottom: 15px; + ` + : ''}; ` export const Team = styled.span` @@ -264,9 +234,9 @@ export const Team = styled.span` color: #fff; ${isMobileDevice ? css` - font-size: 14px; - line-height: 20px; - ` + font-size: 14px; + line-height: 20px; + ` : ''}; ` @@ -280,17 +250,7 @@ export const TeamName = styled(Name)` ${nameStyles} ` -export const Score = styled.div` - -${isMobileDevice - ? css` - display: flex; - justify-content: center; - width: 15px; - ` - : ''}; - -` +export const Score = styled.div`` export const TeamLogos = styled.div` display: flex; @@ -306,11 +266,12 @@ export const TeamLogo = styled(ProfileLogo)` :last-child { margin-left: 0.8rem; + } ${isMobileDevice ? css` - width: 30%; - ` + width: 30%; + ` : ''}; ` @@ -322,30 +283,20 @@ export const BuyMatchBadge = styled.span` height: 1.18rem; cursor: pointer; - /* background-image: url(/images/dollar-sign.svg); */ - color: rgba(255, 255, 255, 0.7); + background-image: url(/images/dollar-sign.svg); background-position: center; background-repeat: no-repeat; background-size: 0.472rem 0.71rem; - background-color: rgba(255, 255, 255, 0.19); + background-color: #fff; 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` - position: static; - display: flex; - align-items: center; - justify-content: center; - width: 15px; - height: 15px; - /* background-size: 40%; */ - ` + width: 19px; + height: 17px; + 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 e51e4674..3c84204a 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 'components/SportIcon/SportIcon' +import { SportIcon } from 'features/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 8c5bf2a1..ff3d3e6d 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 0a195a5a..b85357e6 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 9fceec8c..eae23fe7 100644 --- a/src/features/MatchPopup/components/LiveMatchPlaylist/styled.tsx +++ b/src/features/MatchPopup/components/LiveMatchPlaylist/styled.tsx @@ -20,7 +20,8 @@ export const Item = styled.li` ${isMobileDevice ? css` - height: 48px; + height: 36px; + min-height: 36px; margin-bottom: 12px; ` : ''}; diff --git a/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx b/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx index a9953b3e..a3120271 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: 20px 0 30px 0; + padding: 30px 0; @media (orientation: landscape){ margin: 0 auto; @@ -60,12 +60,10 @@ export const HeaderTitle = styled.h2` line-height: 1.982rem; color: #FFFFFF; text-align: center; - text-transform: uppercase; ${isMobileDevice ? css` - font-size: 10px; - font-weight: 700; - line-height: 12px; + font-size: 14px; + line-height: 18px; margin-bottom: 20px; ` : ''}; diff --git a/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx b/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx index 9f76439b..f5dbd147 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' + title === 'watch_live_stream' && ( diff --git a/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx b/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx index 335a8e26..4e2426a3 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: row; + flex-direction: column; justify-content: space-between; align-items: center; width: 100%; @@ -25,6 +25,7 @@ export const StyledLink = styled(Link)` ), #3F3F3F; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); + border-radius: 2px; :hover { background-color: #555555; @@ -32,20 +33,20 @@ export const StyledLink = styled(Link)` @media ${devices.mobile} { justify-content: center; + border-radius: 5px; } ` export const Title = styled.span` - font-weight: 700; + font-weight: 500; font-size: 0.95rem; line-height: 2.36rem; letter-spacing: 0.03em; color: #ffffff; - text-transform: uppercase; ${isMobileDevice ? css` - font-size: 10px; - line-height: 12px; + font-size: 14px; + line-height: 36px; ` : ''}; ` @@ -66,17 +67,21 @@ 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` - position: static; - width: 32px; - height: 22px; - font-size: 10px; - /* transform: translateY(-50%); */ + width: 26px; + height: 12px; + font-size: 8px; + right: 12px; + transform: translateY(-50%); ` : ''}; ` diff --git a/src/features/MatchSwitches/components/ScoreSwitch/index.tsx b/src/features/MatchSwitches/components/ScoreSwitch/index.tsx index a87fa70c..715aaf87 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='hide_score' /> <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 4f581d3e..4c25bd3f 100644 --- a/src/features/MatchSwitches/styled.tsx +++ b/src/features/MatchSwitches/styled.tsx @@ -10,10 +10,8 @@ export const Switch = styled.div` cursor: pointer; ${isMobileDevice ? css` - justify-content: flex-end; + justify-content: space-between; width: 100%; - height: 100%; - text-transform: uppercase; ` : ''}; ` @@ -27,11 +25,11 @@ export const Title = styled(T9n)` color: ${({ theme }) => theme.colors.text100}; ${isMobileDevice ? css` - font-size: 10px; + font-size: 14px; line-height: 22px; letter-spacing: -0.408px; - text-transform: uppercase; - font-weight: 700; + text-transform: none; + font-weight: 400; ` : ''}; ` @@ -63,33 +61,27 @@ export const Icon = styled.div<IconProps>` ${isMobileDevice ? css` - width: 36px; - height: 18px; - margin-left: 1.5rem; + width: 51px; + height: 31px; ` : ''} ` export const Wrapper = styled.div` margin-right: 2.45rem; + height: 100%; display: flex; align-items: center; - ${isMobileDevice ? css` - @media screen and (orientation: portrait) { - /* width: 30%; */ - height: 50px; - /* top: 130px; */ - /* position: absolute; */ - /* right: -10px; + position: absolute; + bottom: -130px; + right: -10px; width: 95vw; - bottom: -90px; */ - } - @media screen and (orientation: landscape) { - display: none - } + @media (max-width: 450px){ + bottom: -137px; + } ` : ''}; ` diff --git a/src/features/Matches/components/MatchesList/index.tsx b/src/features/Matches/components/MatchesList/index.tsx index e5376b7a..93bedb70 100644 --- a/src/features/Matches/components/MatchesList/index.tsx +++ b/src/features/Matches/components/MatchesList/index.tsx @@ -30,14 +30,8 @@ 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 75527e8a..a7168924 100644 --- a/src/features/MatchesGrid/index.tsx +++ b/src/features/MatchesGrid/index.tsx @@ -1,12 +1,7 @@ -import { memo } from 'react' -import { useRouteMatch } from 'react-router-dom' +import map from 'lodash/map' -import { PAGES } from 'config/pages' -import { isMobileDevice } from 'config/userAgent' - -import { MatchCard } from 'features/MatchCard' -import { TournamentList } from 'features/TournamentList' import type { Match } from 'features/Matches' +import { MatchCard } from 'features/MatchCard' import { Wrapper } from './styled' @@ -14,16 +9,8 @@ type MatchesGridProps = { matches: Array, } -export const MatchesGrid = memo(({ matches }: MatchesGridProps) => { - const isHomePage = useRouteMatch(PAGES.home)?.isExact - - return ( - - {isHomePage && isMobileDevice - ? - : (matches.map((match) => ( - - )))} - - ) -}) +export const MatchesGrid = ({ matches }: MatchesGridProps) => ( + + {map(matches, (match) => )} + +) diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx index c6b42b57..e00d75b5 100644 --- a/src/features/Menu/styled.tsx +++ b/src/features/Menu/styled.tsx @@ -7,9 +7,10 @@ export const MenuList = styled.ul` display: flex; ${isMobileDevice ? css` - align-items: center; + margin-top: 8px; @media screen and (orientation: landscape){ margin-right: 5px; + margin-top: 0; } ` : ''}; @@ -25,14 +26,6 @@ export const MenuItem = styled.li` :hover ${TooltipWrapper} { display: block; } - - ${isMobileDevice - ? css` - height: 100%; - padding: 5px; - ` - : ''}; - ` type IconProps = { @@ -50,8 +43,8 @@ export const Icon = styled.div` opacity: 0.8; ${isMobileDevice ? css` - width: 13px; - height: 13px; + width: 16px; + height: 16px; background-size: contain; /* margin: 0 4px; */ :only-child { diff --git a/src/features/Modal/index.tsx b/src/features/Modal/index.tsx index 2fe884f0..77894921 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 '../../libs/objects/Close' +import { Close } from 'features/Icons/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 bb373c05..efbe9874 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, 1); + color: rgba(255, 255, 255, 0.5); background-color: transparent; ` diff --git a/src/features/PopupComponents/BaseButton/index.tsx b/src/features/PopupComponents/BaseButton/index.tsx index 2b53021d..861d818e 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: -10px; + top: -30px; 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 059788d3..0e55d8c8 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 '../../../libs/objects/Close' +import { Close } from 'features/Icons/Close' import { BaseButton } from '../BaseButton' diff --git a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx b/src/features/PreferencesPopup/components/TournamentInfo/index.tsx index e6fd7881..9531ffca 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 'components/SportIcon/SportIcon' +import { SportIcon } from 'features/SportIcon' const Wrapper = styled.div` width: 100%; diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index 4ec20da9..b5154731 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/src/features/ProfileHeader/index.tsx @@ -9,7 +9,6 @@ import { } from 'config' import { client } from 'config/clients' -import { isMobileDevice } from 'config/userAgent' import { Menu } from 'features/Menu' import { Search } from 'features/Search' @@ -77,12 +76,11 @@ export const ProfileHeader = ({ - {!isMobileDevice ? : null} + - {isMobileDevice ? : null} ) } diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index 41eacf40..26ca49d4 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -6,7 +6,6 @@ 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)' @@ -122,8 +121,3 @@ 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 7ef8827e..f26eca4a 100644 --- a/src/features/Search/styled.tsx +++ b/src/features/Search/styled.tsx @@ -84,7 +84,7 @@ export const Form = styled.form` ` : ''}; ${InputWrapper} { - width: 70px; + width: 0; height: 1.7rem; margin: 0; padding-left: 0.567rem; @@ -132,9 +132,8 @@ export const Form = styled.form` cursor: pointer; ${isMobileDevice ? css` - display: flex; - align-items: center; - width: 13px; + width: 19px; + top: 1px; ` : ''}; } diff --git a/src/features/SportIcon/index.tsx b/src/features/SportIcon/index.tsx new file mode 100644 index 00000000..c89663db --- /dev/null +++ b/src/features/SportIcon/index.tsx @@ -0,0 +1,27 @@ +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 deleted file mode 100644 index 903b4fe4..00000000 --- a/src/features/SportsFilter/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -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 deleted file mode 100644 index a184de7a..00000000 --- a/src/features/SportsFilter/styled.tsx +++ /dev/null @@ -1,25 +0,0 @@ -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 deleted file mode 100644 index 0ffd9b15..00000000 --- a/src/features/TournamentList/components/Tournament/index.tsx +++ /dev/null @@ -1,89 +0,0 @@ -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 deleted file mode 100644 index 4f4185ce..00000000 --- a/src/features/TournamentList/components/Tournament/styled.tsx +++ /dev/null @@ -1,86 +0,0 @@ -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 deleted file mode 100644 index 7f1412f4..00000000 --- a/src/features/TournamentList/hooks.tsx +++ /dev/null @@ -1,55 +0,0 @@ -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 deleted file mode 100644 index 9724e255..00000000 --- a/src/features/TournamentList/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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 b26b558d..7001bad2 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 '../../libs/objects/Close' +import { Close } from 'features/Icons/Close' import { TooltipBlock } from './TooltipBlock' import { useUserFavoritesStore } from './store' diff --git a/src/libs/index.d.ts b/src/libs/index.d.ts deleted file mode 100644 index dd6f9c90..00000000 --- a/src/libs/index.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import * as icons from './index' - -export type iconTypes = keyof typeof icons diff --git a/src/libs/index.ts b/src/libs/index.ts deleted file mode 100644 index 98a6efb1..00000000 --- a/src/libs/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -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 deleted file mode 100644 index bf69e0e1..00000000 --- a/src/libs/objects/Arrow.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export const Arrow = (): JSX.Element => ( - - - -) diff --git a/src/libs/objects/Basketball.tsx b/src/libs/objects/Basketball.tsx deleted file mode 100644 index 930edabd..00000000 --- a/src/libs/objects/Basketball.tsx +++ /dev/null @@ -1,22 +0,0 @@ -export const Basketball = () => ( - - - - - - -) diff --git a/src/libs/objects/Calendar.tsx b/src/libs/objects/Calendar.tsx deleted file mode 100644 index 3be87dcc..00000000 --- a/src/libs/objects/Calendar.tsx +++ /dev/null @@ -1,24 +0,0 @@ -export const Calendar = (): JSX.Element => ( - - - - -) diff --git a/src/libs/objects/Date.tsx b/src/libs/objects/Date.tsx deleted file mode 100644 index 73985931..00000000 --- a/src/libs/objects/Date.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export const Date = () => ( - - - -) diff --git a/src/libs/objects/Dollar.tsx b/src/libs/objects/Dollar.tsx deleted file mode 100644 index d790d91d..00000000 --- a/src/libs/objects/Dollar.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export const Dollar = () => ( - - - -) diff --git a/src/libs/objects/Football.tsx b/src/libs/objects/Football.tsx deleted file mode 100644 index 9f2dee1a..00000000 --- a/src/libs/objects/Football.tsx +++ /dev/null @@ -1,13 +0,0 @@ -export const Football = () => ( - - - -) diff --git a/src/libs/objects/Handball.tsx b/src/libs/objects/Handball.tsx deleted file mode 100644 index ccb79d4f..00000000 --- a/src/libs/objects/Handball.tsx +++ /dev/null @@ -1,13 +0,0 @@ -export const Handball = () => ( - - - -) diff --git a/src/libs/objects/Hockey.tsx b/src/libs/objects/Hockey.tsx deleted file mode 100644 index 21bb2f09..00000000 --- a/src/libs/objects/Hockey.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export const Hockey = () => ( - - - -) diff --git a/src/libs/objects/Star.tsx b/src/libs/objects/Star.tsx deleted file mode 100644 index de4c2cab..00000000 --- a/src/libs/objects/Star.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export const Star = () => ( - - - -) diff --git a/src/libs/objects/Volleyball.tsx b/src/libs/objects/Volleyball.tsx deleted file mode 100644 index e0edcaa5..00000000 --- a/src/libs/objects/Volleyball.tsx +++ /dev/null @@ -1,19 +0,0 @@ -export const Volleyball = () => ( - - - - - - - - - - - -) diff --git a/src/requests/getMatches/types.tsx b/src/requests/getMatches/types.tsx index 3aee53cb..93c2738a 100644 --- a/src/requests/getMatches/types.tsx +++ b/src/requests/getMatches/types.tsx @@ -1,6 +1,6 @@ import { SportTypes } from 'config' -export type TournamentType = { +type Tournament = { id: number, name_eng: string, name_rus: string, @@ -31,7 +31,7 @@ export type Match = { sub: boolean, team1: Team, team2: Team, - tournament: TournamentType, + tournament: Tournament, } export type Matches = Array