From 719a0a7a0762d1b8a030c5c1bdb18cd272b7e099 Mon Sep 17 00:00:00 2001
From: hugoamalric <hugoamalric@gmail.com>
Date: Thu, 12 Jan 2023 15:16:34 +0100
Subject: [PATCH] fix(#92): profile page UI padding too large

---
 .../src/modules/core/components/Header/Header.component.tsx  | 4 ++++
 .../pages/ProfileAttachments/ProfileAttachments.page.tsx     | 3 ++-
 .../ProfileCertifications/ProfileCertifications.page.tsx     | 3 ++-
 .../pages/ProfileCollections/ProfileCollections.page.tsx     | 3 ++-
 .../users/pages/ProfileCourses/ProfileCourses.page.tsx       | 5 ++++-
 .../users/pages/ProfileQuizzes/ProfileQuizzes.page.tsx       | 3 ++-
 .../modules/users/pages/ProfileVideos/ProfileVideos.page.tsx | 5 ++++-
 7 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/polyflix/src/modules/core/components/Header/Header.component.tsx b/apps/polyflix/src/modules/core/components/Header/Header.component.tsx
index 412895ca..a9570235 100644
--- a/apps/polyflix/src/modules/core/components/Header/Header.component.tsx
+++ b/apps/polyflix/src/modules/core/components/Header/Header.component.tsx
@@ -1,10 +1,12 @@
 import { Stack, Typography } from '@mui/material'
+import { SxProps, Theme } from '@mui/system'
 
 interface Props {
   title?: string
   description?: string
   actionButton?: React.ReactNode
   hideActionButton?: boolean
+  sx?: SxProps<Theme>
 }
 
 // A simple component to display a page header
@@ -13,12 +15,14 @@ export const Header = ({
   title,
   actionButton,
   hideActionButton = false,
+  sx,
 }: Props) => {
   return (
     <Stack
       spacing={1}
       sx={{
         mb: 3,
+        ...sx,
       }}
       direction={{
         xs: 'column',
diff --git a/apps/polyflix/src/modules/users/pages/ProfileAttachments/ProfileAttachments.page.tsx b/apps/polyflix/src/modules/users/pages/ProfileAttachments/ProfileAttachments.page.tsx
index 578450a6..854437cc 100644
--- a/apps/polyflix/src/modules/users/pages/ProfileAttachments/ProfileAttachments.page.tsx
+++ b/apps/polyflix/src/modules/users/pages/ProfileAttachments/ProfileAttachments.page.tsx
@@ -60,7 +60,7 @@ export const ProfileAttachmentsPage = () => {
   return (
     <Page
       disableGutters={true}
-      sx={{ mt: 3 }}
+      sx={{ mt: 3, pt: 0 }}
       title={tUsers('profile.tabs.attachments.content.title')}
     >
       <Stack
@@ -69,6 +69,7 @@ export const ProfileAttachmentsPage = () => {
         sx={{ alignItems: 'center' }}
       >
         <Header
+          sx={{ mb: 0 }}
           title={tUsers('profile.tabs.attachments.content.title')}
           description={tUsers('profile.tabs.attachments.content.description')}
         />
diff --git a/apps/polyflix/src/modules/users/pages/ProfileCertifications/ProfileCertifications.page.tsx b/apps/polyflix/src/modules/users/pages/ProfileCertifications/ProfileCertifications.page.tsx
index a4cad28c..8d3b0521 100644
--- a/apps/polyflix/src/modules/users/pages/ProfileCertifications/ProfileCertifications.page.tsx
+++ b/apps/polyflix/src/modules/users/pages/ProfileCertifications/ProfileCertifications.page.tsx
@@ -41,11 +41,12 @@ export const ProfileCertificationsPage = () => {
   return (
     <Page
       disableGutters={true}
-      sx={{ mt: 3 }}
+      sx={{ mt: 3, pt: 0 }}
       title={t('profile.tabs.certifications.content.title')}
     >
       <Stack justifyContent="space-between" direction="row">
         <Header
+          sx={{ mb: 0 }}
           title={t('profile.tabs.certifications.content.title')}
           description={t('profile.tabs.certifications.content.description')}
         />
diff --git a/apps/polyflix/src/modules/users/pages/ProfileCollections/ProfileCollections.page.tsx b/apps/polyflix/src/modules/users/pages/ProfileCollections/ProfileCollections.page.tsx
index 2f1a09f1..5092d43a 100644
--- a/apps/polyflix/src/modules/users/pages/ProfileCollections/ProfileCollections.page.tsx
+++ b/apps/polyflix/src/modules/users/pages/ProfileCollections/ProfileCollections.page.tsx
@@ -56,9 +56,10 @@ export const ProfileCollectionsPage: React.FC<Props> = ({ user }: Props) => {
               'profile.tabs.collections.contentOther.title'
             )} ${getUsernameToDisplay(user!)}`
       }
-      sx={{ mt: 3 }}
+      sx={{ mt: 3, pt: 0 }}
     >
       <Header
+        sx={{ mb: 0 }}
         title={
           isMe
             ? t('profile.tabs.collections.content.title')
diff --git a/apps/polyflix/src/modules/users/pages/ProfileCourses/ProfileCourses.page.tsx b/apps/polyflix/src/modules/users/pages/ProfileCourses/ProfileCourses.page.tsx
index 3c88ee7d..addced90 100644
--- a/apps/polyflix/src/modules/users/pages/ProfileCourses/ProfileCourses.page.tsx
+++ b/apps/polyflix/src/modules/users/pages/ProfileCourses/ProfileCourses.page.tsx
@@ -56,9 +56,12 @@ export const ProfileCoursesPage: React.FC<Props> = ({ user }: Props) => {
               'profile.tabs.courses.contentOther.title'
             )} ${getUsernameToDisplay(user!)}`
       }
-      sx={{ mt: 3 }}
+      sx={{ mt: 3, pt: 0 }}
     >
       <Header
+        sx={{
+          mb: 0,
+        }}
         title={
           isMe
             ? t('profile.tabs.courses.content.title')
diff --git a/apps/polyflix/src/modules/users/pages/ProfileQuizzes/ProfileQuizzes.page.tsx b/apps/polyflix/src/modules/users/pages/ProfileQuizzes/ProfileQuizzes.page.tsx
index 19ed88ef..1c9c3d94 100644
--- a/apps/polyflix/src/modules/users/pages/ProfileQuizzes/ProfileQuizzes.page.tsx
+++ b/apps/polyflix/src/modules/users/pages/ProfileQuizzes/ProfileQuizzes.page.tsx
@@ -54,7 +54,7 @@ export const ProfileQuizzesPage: React.FC<Props> = ({ user }: Props) => {
   return (
     <Page
       disableGutters={true}
-      sx={{ mt: 3 }}
+      sx={{ mt: 3, pt: 0 }}
       title={
         isMe
           ? t('profile.tabs.quizzes.content.title')
@@ -65,6 +65,7 @@ export const ProfileQuizzesPage: React.FC<Props> = ({ user }: Props) => {
     >
       <Stack justifyContent="space-between" direction="row" alignItems="start">
         <Header
+          sx={{ mb: 0 }}
           title={
             isMe
               ? t('profile.tabs.quizzes.content.title')
diff --git a/apps/polyflix/src/modules/users/pages/ProfileVideos/ProfileVideos.page.tsx b/apps/polyflix/src/modules/users/pages/ProfileVideos/ProfileVideos.page.tsx
index c36edc1a..005199a9 100644
--- a/apps/polyflix/src/modules/users/pages/ProfileVideos/ProfileVideos.page.tsx
+++ b/apps/polyflix/src/modules/users/pages/ProfileVideos/ProfileVideos.page.tsx
@@ -52,7 +52,7 @@ export const ProfileVideosPage: React.FC<Props> = ({ user }: Props) => {
   return (
     <Page
       disableGutters={true}
-      sx={{ mt: 3 }}
+      sx={{ mt: 3, pt: 0 }}
       title={
         isMe
           ? t('profile.tabs.videos.content.title')
@@ -63,6 +63,9 @@ export const ProfileVideosPage: React.FC<Props> = ({ user }: Props) => {
     >
       <Stack justifyContent="space-between" direction="row" alignItems="start">
         <Header
+          sx={{
+            mb: 0,
+          }}
           title={
             isMe
               ? t('profile.tabs.videos.content.title')