Ott 931 sign live (#336)

* feat(ott-931): added live sing

* feat(ott-931): fix line

src/features/MatchCard/CardFrontside/index.tsx

@@ -8,12 +8,15 @@ import type { Match } from 'features/Matches'
 import { SportName } from 'features/Common'
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
 import { useName } from 'features/Name'
+import { T9n } from 'features/T9n'
 
 import { NoAccessMessage } from '../NoAccessMessage'
 import {
   CardWrapper,
   Info,
+  LiveSign,
   MatchDate,
+  MatchTimeInfo,
   Preview,
   PreviewWrapper,
   Score,
@@ -48,6 +51,7 @@ export const CardFrontside = ({
     date,
     formattedDate,
     hasVideo,
+    live,
     preview,
     sportType,
     storage,
@@ -103,12 +107,19 @@ export const CardFrontside = ({
         }
         {!accessibleBySubscription && <BuyMatchBadge />}
         {(accessibleBySubscription && !accessibleInUsersCountry) && <NoAccessMessage />}
-        <MatchDate>
-          {formattedDate}
-          {(isInFuture && (!hasVideo || !storage))
-            ? <Time>{time}</Time>
-            : null}
-        </MatchDate>
+        <MatchTimeInfo>
+          <MatchDate>
+            {formattedDate}
+            {(isInFuture && (!hasVideo || !storage))
+              ? <Time>{time}</Time>
+              : null}
+          </MatchDate>
+          {live && (
+            <LiveSign>
+              <T9n t='live' />
+            </LiveSign>
+          )}
+        </MatchTimeInfo>
       </PreviewWrapper>
       <Info>
         {showSportName && <SportName sport={sportType} />}

src/features/MatchCard/styled.tsx

@@ -57,12 +57,20 @@ export const Preview = styled.img`
   height: 100%;
 
 `
-
-export const MatchDate = styled.div`
+export const MatchTimeInfo = styled.div`
   position: absolute;
   top: 25px;
   left: 24px;
   width: auto;
+  display: inline-flex;
+
+  @media ${devices.tablet} {
+    top: 10px;
+    left: 20px;
+  }
+`
+
+export const MatchDate = styled.div`
   height: 24px;
   border-radius: 2px;
   padding: 8px;
@@ -78,12 +86,13 @@ export const MatchDate = styled.div`
   background-color: #6D6D6D;
 
   @media ${devices.tablet} {
-    top: 10px;
-    left: 20px;
-    width: auto;
     padding: 6px 8px;
   }
 `
+export const LiveSign = styled(MatchDate)`
+  background-color: #CC0000;
+  margin-left: 10px;
+`
 
 export const Time = styled.span`
   margin-left: 10px;