diff --git a/public/index.html b/public/index.html index d0e09aea..af522551 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@ /> diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx index fea25fb9..e30c535c 100644 --- a/src/features/MatchPage/components/FinishedMatch/index.tsx +++ b/src/features/MatchPage/components/FinishedMatch/index.tsx @@ -60,7 +60,9 @@ export const FinishedMatch = ({ chapters={chapters} onPlayingChange={onPlayingChange} /> - + )} diff --git a/src/features/MatchPage/components/MatchDescription/index.tsx b/src/features/MatchPage/components/MatchDescription/index.tsx index e51e4674..29846b33 100644 --- a/src/features/MatchPage/components/MatchDescription/index.tsx +++ b/src/features/MatchPage/components/MatchDescription/index.tsx @@ -1,32 +1,45 @@ import { format } from 'date-fns' +import includes from 'lodash/includes' + import type { MatchInfo } from 'requests/getMatchInfo' import { Name } from 'features/Name' import { SportIcon } from 'components/SportIcon/SportIcon' import { T9n } from 'features/T9n' +import { useAuthStore } from 'features/AuthStore' +import { useMatchSwitchesStore } from 'features/MatchSwitches' import { parseDate } from 'helpers/parseDate' import { ProfileTypes } from 'config' import { usePageParams } from 'hooks/usePageParams' + import { CountryFlag, Description, + DescriptionInnerBlock, MatchDate, + StyledDash, StyledLink, + Score, Title, Tournament, Views, + Time, } from './styled' type Props = { profile: MatchInfo, } -export const MatchDescription = ({ profile }: Props) => { +export const MatchDescription = ({ + profile, +}: Props) => { const { sportType } = usePageParams() + const { user } = useAuthStore() + const { isScoreHidden } = useMatchSwitchesStore() if (!profile) return @@ -39,46 +52,54 @@ export const MatchDescription = ({ profile }: Props) => { tournament, } = profile - const localDate = format(parseDate(date), live ? 'HH:mm' : 'd.MM.Y') + const isChangedTimeFormat = includes(['US', 'CA'], user?.profile.country_code) + const localDate = format(parseDate(date), + live ? 'HH:mm' : 'MMMM d, y') + const changedTimeFormat = format(parseDate(date), + isChangedTimeFormat ? 'hh:mm aaa' : 'hh:mm') return ( - - <StyledLink - id={team1.id} - profileType={ProfileTypes.TEAMS} - sportType={sportType} - > - <Name nameObj={team1} /> - </StyledLink> -  —  - <StyledLink - id={team2.id} - profileType={ProfileTypes.TEAMS} - sportType={sportType} - > - <Name nameObj={team2} /> - </StyledLink> - {live ? '\u00a0|\u00a0LIVE STREAM' : ''} - - - - - - - - + + + <StyledLink + id={team1.id} + profileType={ProfileTypes.TEAMS} + sportType={sportType} + > + <Name nameObj={team1} /> + </StyledLink> + {!isScoreHidden && <Score>{team1.score}</Score>} + <StyledDash isScoreHidden={isScoreHidden}>-</StyledDash> + {!isScoreHidden && <Score>{team2.score}</Score>} + <StyledLink + id={team2.id} + profileType={ProfileTypes.TEAMS} + sportType={sportType} + > + <Name nameObj={team2} /> + </StyledLink> + {live ? '\u00a0|\u00a0LIVE STREAM' : ''} + + + + + + + + + { live ? - : + : } {localDate} diff --git a/src/features/MatchPage/components/MatchDescription/styled.tsx b/src/features/MatchPage/components/MatchDescription/styled.tsx index e43da144..d29c2153 100644 --- a/src/features/MatchPage/components/MatchDescription/styled.tsx +++ b/src/features/MatchPage/components/MatchDescription/styled.tsx @@ -4,7 +4,10 @@ import { isMobileDevice } from 'config/userAgent' import { ProfileLink } from 'features/ProfileLink' export const Description = styled.div` - margin: 20px 0; + padding: 22px 0 24px; + display: flex; + justify-content: space-between; + color: #fff; ${isMobileDevice ? css` @@ -15,27 +18,48 @@ export const Description = styled.div` : ''}; ` +export const DescriptionInnerBlock = styled.div`` + +export const Score = styled.span` + margin: 0 10px; + color: inherit; +` + export const StyledLink = styled(ProfileLink)` display: flex; align-items: center; - color: rgba(255, 255, 255, 0.7); + color: #fff; &:hover { - color: white; text-decoration: underline; } ` +export const StyledDash = styled.span<{isScoreHidden?: boolean}>` + color: #fff; + margin: ${({ isScoreHidden }) => (isScoreHidden ? '0 10px' : '0')}; +` + export const Title = styled.div` display: flex; flex-direction: row; - color: #ffffff; font-weight: 500; font-size: 20px; line-height: 24px; - margin-bottom: 10px; - > * { - color: #ffffff; + margin-bottom: 1px; + + &:hover > ${StyledLink}:not(:hover) { + opacity: 0.7; + } + + &:hover > ${Score}:not(:hover){ + opacity: 0.7; + pointer-events: none; + } + + &:hover > ${StyledDash}:not(:hover){ + opacity: 0.7; + pointer-events: none; } ` @@ -45,8 +69,13 @@ export const Tournament = styled.span` align-items: center; font-size: 14px; line-height: 16px; - color: rgba(255, 255, 255, 0.7); - margin-bottom: 5px; + margin-bottom: 1px; + opacity: 0.7; + + &:hover { + opacity: 1; + text-decoration: underline; + } ` export const CountryFlag = styled.img` @@ -54,10 +83,20 @@ export const CountryFlag = styled.img` margin: 0 6px; ` -export const Views = styled(Tournament)` - > * { - margin-right: 5px; - } +export const Views = styled.div` + color: #fff; + opacity: 0.7; + font-size: 20px; + line-height: 24px; + align-self: flex-start; ` -export const MatchDate = styled.span`` +export const MatchDate = styled.span` + font-weight: 500; +` + +export const Time = styled.span` + font-weight: 300; + margin-right: 10px; + text-transform: uppercase; +` diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index eafb9594..ce292d54 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/src/features/StreamPlayer/styled.tsx @@ -100,7 +100,6 @@ export const PlayerWrapper = styled.div` width: 100%; position: relative; background-color: #000; - margin-bottom: 5px; min-height: 100%; :fullscreen {