feat(ott-273): removed match date from cards on home page (#352)

src/features/MatchCard/CardFrontside/index.tsx

@@ -1,8 +1,9 @@
 import type { KeyboardEvent } from 'react'
+import { useRouteMatch } from 'react-router'
 
 import getUnixTime from 'date-fns/getUnixTime'
 
-import { ProfileTypes } from 'config'
+import { ProfileTypes, PAGES } from 'config'
 
 import type { Match } from 'features/Matches'
 import { SportName } from 'features/Common'
@@ -36,14 +37,12 @@ type Props = {
   match: Match,
   onClick: () => void,
   onKeyPress: (e: KeyboardEvent<HTMLLIElement>) => void,
-  showSportName?: boolean,
 }
 
 export const CardFrontside = ({
   match,
   onClick,
   onKeyPress,
-  showSportName,
 }: Props) => {
   const {
     access,
@@ -60,6 +59,7 @@ export const CardFrontside = ({
     time,
     tournament,
   } = match
+  const isHomePage = useRouteMatch(PAGES.home)?.isExact
   const tournamentName = useName(tournament)
   const { isScoreHidden } = useMatchSwitchesStore()
   const { selectedMatchStatus } = useHeaderFiltersStore()
@@ -108,8 +108,9 @@ export const CardFrontside = ({
         {access === MatchAccess.NoCountryAccess && <NoAccessMessage />}
         {access === MatchAccess.CanBuyMatch && <BuyMatchBadge />}
         <MatchTimeInfo>
-          <MatchDate>
-            {formattedDate}
+          <MatchDate isHomePage={isHomePage}>
+            {!isHomePage ? formattedDate : ''}
+
             {(isInFuture && (!hasVideo || !storage))
               ? <Time>{time}</Time>
               : null}
@@ -122,7 +123,7 @@ export const CardFrontside = ({
         </MatchTimeInfo>
       </PreviewWrapper>
       <Info>
-        {showSportName && <SportName sport={sportType} />}
+        {isHomePage && <SportName sport={sportType} />}
         {tournament && (
           <TournamentName title={tournamentName}>
             {tournamentName}

src/features/MatchCard/index.tsx

@@ -1,7 +1,3 @@
-import { useRouteMatch } from 'react-router'
-
-import { PAGES } from 'config'
-
 import type { Match } from 'features/Matches'
 
 import { CardFrontside } from './CardFrontside'
@@ -12,7 +8,6 @@ type Props = {
 }
 
 export const MatchCard = ({ match }: Props) => {
-  const isHomePage = useRouteMatch(PAGES.home)?.isExact
   const {
     onKeyPress,
     onMatchClick,
@@ -21,7 +16,6 @@ export const MatchCard = ({ match }: Props) => {
   return (
     <CardFrontside
       match={match}
-      showSportName={isHomePage}
       onClick={onMatchClick}
       onKeyPress={onKeyPress}
     />

src/features/MatchCard/styled.tsx

@@ -55,7 +55,6 @@ export const PreviewWrapper = styled.div`
 export const Preview = styled.img`
   width: 100%;
   height: 100%;
-
 `
 export const MatchTimeInfo = styled.div`
   position: absolute;
@@ -70,10 +69,13 @@ export const MatchTimeInfo = styled.div`
   }
 `
 
-export const MatchDate = styled.div`
+type TMatchDate = {
+  isHomePage?: boolean,
+}
+export const MatchDate = styled.div<TMatchDate>`
   height: 24px;
   border-radius: 2px;
-  padding: 8px;
+  padding: ${({ isHomePage }) => (!isHomePage ? '8px' : '')};
   font-size: 11px;
   font-weight: bold;
   text-transform: uppercase;
@@ -86,16 +88,15 @@ export const MatchDate = styled.div`
   background-color: #6D6D6D;
 
   @media ${devices.tablet} {
-    padding: 6px 8px;
+    padding: ${({ isHomePage }) => (!isHomePage ? '6px 8px' : '')};
   }
 `
 export const LiveSign = styled(MatchDate)`
   background-color: #CC0000;
-  margin-left: 10px;
 `
 
 export const Time = styled.span`
-  margin-left: 10px;
+  margin: 0 8px;
 `
 
 export const Info = styled.div`