fix(#2399): redesign match page for mobile

package-lock.json

@@ -10866,6 +10866,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -11765,6 +11766,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
       "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "devOptional": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -18750,6 +18752,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "devOptional": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -27128,6 +27131,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "devOptional": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -41695,7 +41699,8 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "devOptional": true
     },
     "bindings": {
       "version": "1.5.0",
@@ -42409,6 +42414,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
       "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "devOptional": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -47861,6 +47867,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "devOptional": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -54355,6 +54362,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "devOptional": true,
       "requires": {
         "picomatch": "^2.2.1"
       }

src/features/MatchPage/components/FinishedMatch/index.tsx

@@ -64,12 +64,11 @@ export const FinishedMatch = ({
               onPlayingChange={onPlayingChange}
               profile={profile}
             />
-            <MatchDescription
-              profile={profile}
-            />
+            {isMobileDevice
+              ? <MatchProfileCardMobile profile={profile} /> : (
+                <MatchDescription profile={profile} />)}
           </Fragment>
         )}
-        {isMobileDevice ? <MatchProfileCardMobile profile={profile} /> : null}
       </Container>
 
       <MatchSidePlaylists

src/features/MatchPage/components/MatchProfileCardMobile/components/MatchDate/index.tsx

@@ -16,7 +16,7 @@ export const MatchDate = ({ profile }: Props) => {
   } = { ...profile! }
 
   const month = useMemo(() => (
-    format(parseISO(date), 'MMM MM,')
+    format(parseISO(date), 'MMM dd,')
   ), [date])
 
   const hour = useMemo(() => (

src/features/MatchSidePlaylists/components/TabVideo/styled.tsx

@@ -5,7 +5,7 @@ export const MatchesWrapper = styled.div`
   overflow-y: scroll;
   max-height: calc(100vh - 170px);
   
-  > :not(:last-child) {
+  > * {
     margin-bottom: 15px;
   }
 

src/features/ProfileHeader/index.tsx

@@ -59,6 +59,7 @@ export const ProfileHeader = ({
         headerImage={imageHeader}
         color={headerColor || color}
         height={height}
+        isMatchPage={isMatchPage()}
       >
         <Position
           isMatchPage={isMatchPage()}

src/features/ProfileHeader/styled.tsx

@@ -46,6 +46,7 @@ type HeaderProps = {
   color?: string,
   headerImage?: string | null,
   height?: number,
+  isMatchPage?: boolean,
 }
 
 export const HeaderStyled = styled.header<HeaderProps>`
@@ -62,12 +63,15 @@ export const HeaderStyled = styled.header<HeaderProps>`
     ` : ''
   )}
 
-  ${isMobileDevice
+  ${({ isMatchPage }) => css`
+    ${isMobileDevice
     ? css`
-      height: 40px;
-      padding: 8px;
-    `
+        height: ${(isMatchPage ? '40px' : '124px')};
+        padding: 8px;
+      `
     : ''}
+  `}
+  
 `
 
 type Props = {

src/features/StreamPlayer/styled.tsx

@@ -14,7 +14,7 @@ export const ControlsGradient = styled.div<{ isVisible?: boolean }>`
     ? css`
       height: 100%;
       background: ${(isVisible
-      ? 'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(0,0,0,0.7) 100%)'
+      ? 'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.7) 100%)'
       : 'initial')}
     ` : '')}
 `