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 (
-
-
-
-
- —
-
-
-
- {live ? '\u00a0|\u00a0LIVE STREAM' : ''}
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {!isScoreHidden && {team1.score}}
+ -
+ {!isScoreHidden && {team2.score}}
+
+
+
+ {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 {