fix(#ott2590): score block and style fixes

public/index.html

@@ -9,7 +9,7 @@
   />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <meta name="description" content=""/>

src/features/MatchPage/components/FinishedMatch/index.tsx

@@ -60,7 +60,9 @@ export const FinishedMatch = ({
               chapters={chapters}
               onPlayingChange={onPlayingChange}
             />
-            <MatchDescription profile={profile} />
+            <MatchDescription
+              profile={profile}
+            />
           </Fragment>
         )}
       </Container>

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 <Description />
 
@@ -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 (
     <Description>
-      <Title>
+      <DescriptionInnerBlock>
-        <StyledLink
+        <Title>
-          id={team1.id}
+          <StyledLink
-          profileType={ProfileTypes.TEAMS}
+            id={team1.id}
-          sportType={sportType}
+            profileType={ProfileTypes.TEAMS}
-        >
+            sportType={sportType}
-          <Name nameObj={team1} />
+          >
-        </StyledLink>
+            <Name nameObj={team1} />
-        &nbsp;—&nbsp;
+          </StyledLink>
-        <StyledLink
+          {!isScoreHidden && <Score>{team1.score}</Score>}
-          id={team2.id}
+          <StyledDash isScoreHidden={isScoreHidden}>-</StyledDash>
-          profileType={ProfileTypes.TEAMS}
+          {!isScoreHidden && <Score>{team2.score}</Score>}
-          sportType={sportType}
+          <StyledLink
-        >
+            id={team2.id}
-          <Name nameObj={team2} />
+            profileType={ProfileTypes.TEAMS}
-        </StyledLink>
+            sportType={sportType}
-        {live ? '\u00a0|\u00a0LIVE STREAM' : ''}
+          >
-      </Title>
+            <Name nameObj={team2} />
-      <Tournament>
+          </StyledLink>
-        <SportIcon sport={sportType} />
+          {live ? '\u00a0|\u00a0LIVE STREAM' : ''}
-        <CountryFlag
+        </Title>
-          src={`https://instatscout.com/images/flags/48/${country_id}.png`}
+        <Tournament>
-        />
+          <SportIcon sport={sportType} />
-        <StyledLink
+          <CountryFlag
-          id={tournament.id}
+            src={`https://instatscout.com/images/flags/48/${country_id}.png`}
-          profileType={ProfileTypes.TOURNAMENTS}
+          />
-          sportType={sportType}
+          <StyledLink
-        >
+            id={tournament.id}
-          <Name nameObj={tournament} />
+            profileType={ProfileTypes.TOURNAMENTS}
-        </StyledLink>
+            sportType={sportType}
-      </Tournament>
+          >
+            <Name nameObj={tournament} />
+          </StyledLink>
+        </Tournament>
+      </DescriptionInnerBlock>
       <Views>
         {
           live
             ? <T9n t='started_streaming_at' />
-            : <T9n t='streamed_live_on' />
+            : <Time>{changedTimeFormat}</Time>
         }
         <MatchDate>{localDate}</MatchDate>
       </Views>

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;
+  margin-bottom: 1px;
-  > * {
+
-    color: #ffffff;
+  &: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: 1px;
-  margin-bottom: 5px;
+  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)`
+export const Views = styled.div`
-  > * {
+  color: #fff;
-    margin-right: 5px;
+  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;
+`

src/features/StreamPlayer/styled.tsx

@@ -100,7 +100,6 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
   width: 100%;
   position: relative;
   background-color: #000;
-  margin-bottom: 5px;
   min-height: 100%;
 
   :fullscreen {