fix(#92): profile page UI padding too large

polyflix · Jan 13, 2023 · 719a0a7 · 719a0a7
1 parent 383e658
commit 719a0a7
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')