diff --git a/src/components/SportIcon/SportIcon.tsx b/src/components/SportIcon/SportIcon.tsx index 03113004..df09af2b 100644 --- a/src/components/SportIcon/SportIcon.tsx +++ b/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', + }} /> ) diff --git a/src/features/Icon/index.tsx b/src/features/Icon/index.tsx index 3a8e6087..e6ebc5d8 100644 --- a/src/features/Icon/index.tsx +++ b/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 = ({ @@ -17,6 +18,7 @@ export const Icon: React.FC = ({ onClick, refIcon, size, + styles, }) => (
= ({ height: size, transform: `rotate(${direction}deg)`, width: size, + ...styles, }} aria-hidden='true' > diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index 18518766..214aecc7 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -147,7 +147,7 @@ export const CardFrontside = ({ - + {tournament && ( diff --git a/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx b/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx index 0a195a5a..264f1ed6 100644 --- a/src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx +++ b/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 = () => { diff --git a/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx b/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx index a9953b3e..e2ff306e 100644 --- a/src/features/MatchPopup/components/LivePlaylistPage/styled.tsx +++ b/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; diff --git a/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx b/src/features/MatchPopup/components/SimplePlaylistButton/index.tsx index 9f76439b..987b924a 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' || title === 'watch_live_stream') && ( diff --git a/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx b/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx index 97c8fbe2..6ee8f2c3 100644 --- a/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx +++ b/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; ` : ''}; ` diff --git a/src/features/MatchSwitches/components/ScoreSwitch/index.tsx b/src/features/MatchSwitches/components/ScoreSwitch/index.tsx index a87fa70c..371a1a95 100644 --- a/src/features/MatchSwitches/components/ScoreSwitch/index.tsx +++ b/src/features/MatchSwitches/components/ScoreSwitch/index.tsx @@ -18,7 +18,7 @@ export const ScoreSwitch = () => { onClick={toggleScore} aria-checked={!isScoreHidden} > - + <Title t={isMobileDevice ? 'scores' : 'hide_score'} /> <Icon iconName={isMobileDevice ? 'score-switch-mobile' : 'score-switch'} isOn={!isScoreHidden}