feat: 🎸 ott-2697-mobileMatches

src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx

@@ -16,6 +16,8 @@ import { getCardColor } from 'helpers/getCardColor'
 
 import { NoAccessMessage } from '../../NoAccessMessage'
 import { getPrepareTimeFormat } from '../../helpers'
+import { getPrepareDateFormat } from '../../helpers/getPrepareDateFormat'
+
 import {
   CardWrapperOuter,
   CardWrapper,
@@ -38,11 +40,13 @@ import {
   NameSignWrapper,
   HoverFrame,
   ScDollar,
+  MobTime,
 } from './styled'
 import { useCardPreview } from '../hooks'
 
 type Props = {
   isNeedFormatTimeChanged: boolean,
+  isOwnedMatches: boolean,
   match: Match,
   onClick: () => void,
   onKeyPress: (e: KeyboardEvent<HTMLLIElement>) => void,
@@ -50,6 +54,7 @@ type Props = {
 
 export const CardFrontsideMobile = ({
   isNeedFormatTimeChanged,
+  isOwnedMatches,
   match,
   onClick,
   onKeyPress,
@@ -58,7 +63,6 @@ export const CardFrontsideMobile = ({
   const {
     access,
     date,
-    formattedDate,
     live,
     preview,
     previewURL,
@@ -89,6 +93,11 @@ export const CardFrontsideMobile = ({
     time,
   })
 
+  const prepareDate = getPrepareDateFormat({
+    date,
+    isNeedFormatTimeChanged,
+  })
+
   return (
     <CardWrapperOuter onClick={onClick} onKeyPress={onKeyPress}>
       <CardWrapper>
@@ -117,15 +126,19 @@ export const CardFrontsideMobile = ({
               />
             </TeamLogos>
           )}
-          <MatchTimeInfo>
-            <MatchDate isHomePage={isHomePage}>
-              {isHomePage || isMatchPage ? null : formattedDate}
-              {live && (
-                <LiveSign>
-                  <T9n t='live' />
-                </LiveSign>
-              )}
+          <MatchTimeInfo isOwnedMatches={isOwnedMatches}>
+            <MatchDate
+              isHomePage={isHomePage}
+              isOwnedMatches={isOwnedMatches}
+            >
+              {isHomePage || isMatchPage ? null : prepareDate}
+              {isOwnedMatches && <MobTime>{prepareTime}</MobTime> }
             </MatchDate>
+            {live && (
+              <LiveSign>
+                <T9n t='live' />
+              </LiveSign>
+            )}
           </MatchTimeInfo>
         </PreviewWrapper>
         <Info>
@@ -146,7 +159,7 @@ export const CardFrontsideMobile = ({
             </Team>
           </Teams>
           <SecondaryInfo>
-            <Time>{prepareTime}</Time>
+            {isHomePage || isMatchPage ? <Time>{prepareTime}</Time> : null}
             {access === MatchAccess.CanBuyMatch && (
               <BuyMatchBadge>
                 <ScDollar refIcon='Dollar' />

src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx

@@ -99,17 +99,21 @@ export const Preview = styled.img`
     : ''};
 `
 
-export const MatchTimeInfo = styled.div`
+type MatchTimeInfoProps = {
+  isOwnedMatches?: boolean,
+}
+
+export const MatchTimeInfo = styled.div<MatchTimeInfoProps>`
   width: 100%;
   position: absolute;
-  top: 0.519rem;
-  padding: 0 0.519rem;
+  padding: ${({ isOwnedMatches }) => (isOwnedMatches ? '0.9rem' : '0.519rem')};
   display: flex;
   flex-direction: row;
 `
 
 type MatchDateProps = {
   isHomePage?: boolean,
+  isOwnedMatches?: boolean,
 }
 
 export const MatchDate = styled.div<MatchDateProps>`
@@ -117,7 +121,7 @@ export const MatchDate = styled.div<MatchDateProps>`
   height: 0.9rem;
   border-radius: 2px;
   padding: ${({ isHomePage }) => (!isHomePage ? '0 0.27rem' : '')};
-  font-weight: bold;
+  font-weight: ${({ isOwnedMatches }) => (isOwnedMatches ? '500' : 'bold')};
   font-size: 0.472rem;
   line-height: 0.567rem;
   letter-spacing: 0.05em;
@@ -141,13 +145,22 @@ export const MatchDate = styled.div<MatchDateProps>`
         font-size: 7px;
       `
     : ''};
+
+  ${({ isOwnedMatches }) => (isOwnedMatches
+    ? css`
+      background-color: #6D6D6D;
+      width: fit-content;
+      margin-left: 0;
+      `
+    : '')}
+    
 `
 
 type LiveType = {
   color?: string,
 }
 
-export const LiveSign = styled(MatchDate) <LiveType>`
+export const LiveSign = styled(MatchDate)<LiveType>`
   background-color: ${({ color }) => color ?? '#CC0000'};
   margin-left: auto;
   
@@ -167,6 +180,10 @@ export const Time = styled.span`
       `
     : ''};
 `
+export const MobTime = styled.span`
+  margin-left: 0.8rem;
+  font-weight: bold;
+`
 
 export const Info = styled.div`
   display: flex;

src/features/MatchCard/CardFrontside/index.tsx

@@ -39,6 +39,7 @@ import {
 } from '../styled'
 import { useCardPreview } from './hooks'
 import { getPrepareTimeFormat } from '../helpers'
+import { getPrepareDateFormat } from '../helpers/getPrepareDateFormat'
 
 type Props = {
   isNeedFormatTimeChanged: boolean,
@@ -58,7 +59,6 @@ export const CardFrontside = ({
     access,
     countryId,
     date,
-    formattedDate,
     live,
     preview,
     previewURL,
@@ -92,6 +92,11 @@ export const CardFrontside = ({
     time,
   })
 
+  const prepareDate = getPrepareDateFormat({
+    date,
+    isNeedFormatTimeChanged,
+  })
+
   return (
     <CardWrapperOuter
       onClick={onClick}
@@ -130,7 +135,7 @@ export const CardFrontside = ({
           {access === MatchAccess.CanBuyMatch && <BuyMatchBadge />}
           <MatchTimeInfo>
             <MatchDate isHomePage={isHomePage}>
-              {isHomePage || isMatchPage ? null : formattedDate}
+              {isHomePage || isMatchPage ? null : prepareDate}
               <Time>{prepareTime}</Time>
             </MatchDate>
             {live && (

src/features/MatchCard/helpers/getPrepareDateFormat.tsx

@@ -0,0 +1,15 @@
+import format from 'date-fns/format'
+
+type prepareTimeFormat = {
+  date: Date,
+  isNeedFormatTimeChanged: boolean,
+}
+
+export const getPrepareDateFormat = ({
+  date,
+  isNeedFormatTimeChanged,
+}: prepareTimeFormat) => (
+  isNeedFormatTimeChanged
+    ? format(date, 'MM.dd.yy')
+    : format(date, 'dd.MM.yy')
+)

src/features/MatchCard/hooks.tsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom'
 
 import includes from 'lodash/includes'
 
-import { ProfileTypes } from 'config'
+import { PAGES, ProfileTypes } from 'config'
 
 import type { Match } from 'features/Matches'
 import { useMatchPopupStore } from 'features/MatchPopup'
@@ -12,6 +12,7 @@ import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
 import { useAuthStore } from 'features/AuthStore'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
 import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
+import { checkPage } from 'helpers/checkPage'
 
 export const useCard = (match: Match) => {
   const { openMatchPopup } = useMatchPopupStore()
@@ -62,8 +63,15 @@ export const useCard = (match: Match) => {
 
   const isNeedFormatTimeChanged = includes(['US', 'CA'], user?.profile.country_code)
 
+  const isPlayerPage = checkPage(PAGES.player)
+  const isTeamPage = checkPage(PAGES.team)
+  const isTournamentPage = checkPage(PAGES.tournament)
+
+  const isOwnedMatches = isPlayerPage || isTeamPage || isTournamentPage
+
   return {
     isNeedFormatTimeChanged,
+    isOwnedMatches,
     onKeyPress,
     onMatchClick,
   }

src/features/MatchCard/index.tsx

@@ -13,6 +13,7 @@ type Props = {
 export const MatchCard = ({ match }: Props) => {
   const {
     isNeedFormatTimeChanged,
+    isOwnedMatches,
     onKeyPress,
     onMatchClick,
   } = useCard(match)
@@ -25,6 +26,7 @@ export const MatchCard = ({ match }: Props) => {
       onClick={onMatchClick}
       onKeyPress={onKeyPress}
       isNeedFormatTimeChanged={isNeedFormatTimeChanged}
+      isOwnedMatches={isOwnedMatches}
     />
   )
 }

src/features/MatchSidePlaylists/index.tsx

@@ -64,8 +64,8 @@ export const MatchSidePlaylists = ({
         ? (screenLandscape === 90 || screenLandscape === -90)
         : (screenLandscape === 'landscape-primary' || screenLandscape === 'landscape-secondary')
 
-      if (yOffset && yOffset > 10 && !isScreenLandscape) hideProfileCard()
-      if (yOffset && yOffset < 10) showProfileCard()
+      if (Number(yOffset) < 10) showProfileCard()
+      if (Number(yOffset) > 10 && !isScreenLandscape) hideProfileCard()
     },
     event: 'scroll',
     target: containerRef,