diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
index 45e27e4e..d8c2754b 100644
--- a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
@@ -48,6 +48,8 @@ import {
NameSignWrapper,
HoverFrame,
MobTime,
+ ScoreWrapper,
+ PenaltyScore,
} from './styled'
import { useCardPreview } from '../hooks'
@@ -159,14 +161,32 @@ export const CardFrontsideMobile = ({
{team1InFavorites && }
- {showScore && {score?.team1.score ?? team1.score}}
+ {showScore && (
+
+
+ {score?.team1.score ?? team1.score}
+
+
+ {score?.team1.penalty_score ?? team1.penalty_score}
+
+
+ )}
{team2InFavorites && }
- {showScore && {score?.team2.score ?? team2.score}}
+ {showScore && (
+
+
+ {score?.team2.score ?? team2.score}
+
+
+ {score?.team2.penalty_score ?? team2.penalty_score}
+
+
+ )}
diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
index 7c5f3237..02ca7909 100644
--- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
@@ -199,7 +199,7 @@ export const Info = styled.div`
left: 45%; */
width: 60%;
height: 100%;
- padding: 9px 9px 9px 19px;
+ padding: 9px 11px 9px 19px;
`
: ''};
`
@@ -310,10 +310,18 @@ ${isMobileDevice
? css`
display: flex;
justify-content: center;
- width: 15px;
`
: ''};
-
+`
+
+export const ScoreWrapper = styled.div`
+ display: flex;
+ line-height: 1;
+`
+
+export const PenaltyScore = styled.div`
+ font-weight: 400;
+ font-size: 10px;
`
export const TeamLogos = styled.div`
diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx
index 6eef3cdf..863ab33b 100644
--- a/src/features/MatchCard/CardFrontside/index.tsx
+++ b/src/features/MatchCard/CardFrontside/index.tsx
@@ -40,6 +40,8 @@ import {
FavoriteSign,
NameSignWrapper,
HoverFrame,
+ PenaltyScore,
+ ScoreWrapper,
} from '../styled'
import { useCardPreview } from './hooks'
import { getPrepareTimeFormat } from '../helpers'
@@ -206,7 +208,16 @@ export const CardFrontside = ({
{team1InFavorites && }
- {showScore && {score?.team1.score ?? team1.score}}
+ {showScore && (
+
+
+ {score?.team1.score ?? team1.score}
+
+
+ {score?.team1.penalty_score ?? team1.penalty_score}
+
+
+ )}
@@ -224,7 +235,16 @@ export const CardFrontside = ({
{team2InFavorites && }
- {showScore && {score?.team2.score ?? team2.score}}
+ {showScore && (
+
+
+ {score?.team2.score ?? team2.score}
+
+
+ {score?.team2.penalty_score ?? team2.penalty_score}
+
+
+ )}
{!isMatchPage && (
diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index bf8e50b6..89a5f40c 100644
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@@ -274,8 +274,19 @@ export const TeamName = styled(Name)`
${nameStyles}
`
+export const ScoreWrapper = styled.div`
+ display: flex;
+ line-height: 1;
+`
+
export const Score = styled.div``
+export const PenaltyScore = styled.div`
+ font-weight: 400;
+ font-size: .55rem;
+ margin-left: 1px;
+`
+
export const TeamLogos = styled.div`
display: ${({ isMatchPage }) => (isMatchPage ? 'none' : 'flex')};
align-items: center;
diff --git a/src/features/MatchPage/components/MatchDescription/index.tsx b/src/features/MatchPage/components/MatchDescription/index.tsx
index b55dcb74..49b171d3 100644
--- a/src/features/MatchPage/components/MatchDescription/index.tsx
+++ b/src/features/MatchPage/components/MatchDescription/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { Fragment, useCallback } from 'react'
import { useQuery } from 'react-query'
@@ -41,6 +41,7 @@ import {
Time,
Title,
Views,
+ PenaltyScore,
} from './styled'
export const MatchDescription = () => {
@@ -93,6 +94,7 @@ export const MatchDescription = () => {
parseDate(date),
isChangedTimeFormat ? 'h:mm a' : 'HH:mm',
)
+ const isPenaltyScoreShow = queryScore?.team1.penalty_score || team1.penalty_score
return (
@@ -111,8 +113,26 @@ export const MatchDescription = () => {
{
isScoreHidden || isNil(team1.score) || isNil(team2.score)
? '-'
- : `${queryScore?.team1.score ?? team1.score} - ${queryScore?.team2.score ?? team2.score}`
-
+ : (
+
+ {queryScore?.team1.score ?? team1.score}
+
+ {isPenaltyScoreShow && (
+
+ ({queryScore?.team1.penalty_score ?? team1.penalty_score})
+
+ )}
+
+ {` - ${queryScore?.team2.score ?? team2.score}`}
+
+ {isPenaltyScoreShow && (
+
+ ({queryScore?.team2.penalty_score ?? team2.penalty_score})
+
+ )}
+
+
+ )
}