fix(#2317): fix style in desktop version

src/components/SportIcon/SportIcon.tsx

@@ -6,9 +6,7 @@ import { getSportLexic } from 'helpers'
 import { Icon } from 'features/Icon'
 
 const IconWrap = styled.div`
-  display: flex;
   color: white;
-  align-items: center;
 `
 
 type Props = {
@@ -58,6 +56,12 @@ export const SportIcon = ({
         refIcon={IconSport}
         color={fill || sportIcons[sportType].color}
         size={size}
+        styles={{
+          alignItems: 'center',
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+        }}
       />
     </IconWrap>
   )

src/features/Icon/index.tsx

@@ -8,6 +8,7 @@ export type IconProps = {
   onClick?: () => void,
   refIcon: any,
   size?: number,
+  styles?: any,
 }
 
 export const Icon: React.FC<IconProps> = ({
@@ -17,6 +18,7 @@ export const Icon: React.FC<IconProps> = ({
   onClick,
   refIcon,
   size,
+  styles,
 }) => (
   <div
     className={className || 'icon-container'}
@@ -27,6 +29,7 @@ export const Icon: React.FC<IconProps> = ({
       height: size,
       transform: `rotate(${direction}deg)`,
       width: size,
+      ...styles,
     }}
     aria-hidden='true'
   >

src/features/MatchCard/CardFrontside/index.tsx

@@ -147,7 +147,7 @@ export const CardFrontside = ({
             </Team>
           </Teams>
           <SecondaryInfo>
-            <SportIcon sport={sportType} size={10} />
+            <SportIcon sport={sportType} />
             <CountryFlag src={`https://instatscout.com/images/flags/48/${match.countryId}.png`} />
             {tournament && (
               <NameSignWrapper>

src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 
 import { PAGES } from 'config'
+import { isMobileDevice } from 'config/userAgent'
 import { getSportLexic } from 'helpers'
 import { getMatchLastWatchSeconds, LastPlayPosition } from 'requests'
 
@@ -28,7 +29,7 @@ export const LiveMatchPlaylist = () => {
       <Item>
         <SimplePlaylistButton
           to={`/${sport}${PAGES.match}/${match.id}`}
-          title='watch'
+          title={isMobileDevice ? 'watch' : 'watch_live_stream'}
         />
       </Item>
       <Item>

src/features/MatchPopup/components/LivePlaylistPage/styled.tsx

@@ -60,9 +60,9 @@ export const HeaderTitle = styled.h2`
   line-height: 1.982rem;
   color: #FFFFFF;
   text-align: center;
-  text-transform: uppercase;
   ${isMobileDevice
     ? css`
+      text-transform: uppercase;
       font-size: 10px;
       font-weight: 700;
       line-height: 12px;

src/features/MatchPopup/components/SimplePlaylistButton/index.tsx

@@ -37,7 +37,7 @@ export const SimplePlaylistButton = ({
       </Title>
       {duration && <Duration>{secondsToHms(duration)}</Duration>}
       {
-        title === 'watch'
+        (title === 'watch' || title === 'watch_live_stream')
         && (
           <LiveSign>
             <T9n t='live' />

src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx

@@ -12,9 +12,8 @@ export const StyledLink = styled(Link)`
   border: none;
   cursor: pointer;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
-  justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
@@ -26,21 +25,31 @@ export const StyledLink = styled(Link)`
     ),
     #3F3F3F;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
 
   :hover {
     background-color: #555555;
   }
+
+  ${isMobileDevice
+    ? css`
+      flex-direction: row;
+      justify-content: center;
+      border-radius: 0;
+    `
+    : ''};
 `
 
 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`
+      text-transform: uppercase;
+      font-weight: 700;
       font-size: 10px;
       line-height: 12px;
     `
@@ -63,10 +72,12 @@ 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;
-  margin-left: 5px;
 
   ${isMobileDevice
     ? css`
@@ -74,7 +85,9 @@ export const LiveSign = styled(MatchDate)`
       width: 32px;
       height: 22px;
       font-size: 10px;
-      /* transform: translateY(-50%); */
+      align-items: center;
+      margin-left: 5px;
+      transform: none;
     `
     : ''};
 `

src/features/MatchSwitches/components/ScoreSwitch/index.tsx

@@ -18,7 +18,7 @@ export const ScoreSwitch = () => {
         onClick={toggleScore}
         aria-checked={!isScoreHidden}
       >
-        <Title t='scores' />
+        <Title t={isMobileDevice ? 'scores' : 'hide_score'} />
         <Icon
           iconName={isMobileDevice ? 'score-switch-mobile' : 'score-switch'}
           isOn={!isScoreHidden}