From 3f6ee2082cd5b8eb79466d6ddaf565000a80519e Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Tue, 7 Jan 2025 10:49:15 +0100
Subject: [PATCH 1/3] feat: Added Footer to Profile Page

---
 app/login/components/profile-content-tabs.tsx | 16 ++++++++++------
 app/login/utils.ts                            | 11 +++++++++--
 app/pages/profile.tsx                         |  6 +++++-
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/app/login/components/profile-content-tabs.tsx b/app/login/components/profile-content-tabs.tsx
index b8f80e37f..dd9a82318 100644
--- a/app/login/components/profile-content-tabs.tsx
+++ b/app/login/components/profile-content-tabs.tsx
@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Tab, Theme } from "@mui/material";
+import { Box, Tab, Theme, useTheme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
 import groupBy from "lodash/groupBy";
@@ -12,9 +12,6 @@ import { useRootStyles } from "@/login/utils";
 import useEvent from "@/utils/use-event";
 
 const useStyles = makeStyles<Theme>((theme) => ({
-  section: {
-    marginTop: theme.spacing(6),
-  },
   tabList: {
     minHeight: "fit-content",
 
@@ -49,6 +46,7 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
   const handleChange = useEvent((_: React.SyntheticEvent, v: string) => {
     setValue(v);
   });
+  const theme = useTheme();
   const rootClasses = useRootStyles();
   const classes = useStyles();
 
@@ -66,9 +64,15 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
 
   return (
     <TabContext value={value}>
-      <Box className={clsx(rootClasses.section, classes.section)}>
+      <Box className={clsx(rootClasses.section)}>
         <Box className={rootClasses.sectionContent}>
-          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <Box
+            sx={{
+              borderBottom: 1,
+              borderColor: "divider",
+              marginTop: theme.spacing(6),
+            }}
+          >
             <TabList className={classes.tabList} onChange={handleChange}>
               <Tab
                 className={classes.tab}
diff --git a/app/login/utils.ts b/app/login/utils.ts
index c5123cb70..2d732e66d 100644
--- a/app/login/utils.ts
+++ b/app/login/utils.ts
@@ -7,12 +7,20 @@ import { HEADER_HEIGHT } from "@/components/header-constants";
 export const useRootStyles = makeStyles<Theme>((theme) => ({
   root: {
     marginTop: `${HEADER_HEIGHT}px`,
-    backgroundColor: theme.palette.muted.main,
+    minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
+    display: "flex",
+    flexDirection: "column",
+  },
+  content: {
+    flexGrow: 1,
+    display: "flex",
+    flexDirection: "column",
   },
   section: {
     display: "flex",
     flexDirection: "column",
     padding: `0 ${theme.spacing(6)}`,
+    backgroundColor: theme.palette.muted.main,
   },
   sectionContent: {
     width: "100%",
@@ -20,7 +28,6 @@ export const useRootStyles = makeStyles<Theme>((theme) => ({
     margin: "0 auto",
   },
   noTooltip: {
-    // Disable native tooltip in Safari
     "&::after": {
       content: "''",
       display: "block",
diff --git a/app/pages/profile.tsx b/app/pages/profile.tsx
index 96f02658c..2161b2a7f 100644
--- a/app/pages/profile.tsx
+++ b/app/pages/profile.tsx
@@ -3,6 +3,7 @@ import { User } from "@prisma/client";
 import { GetServerSideProps } from "next";
 import { getServerSession } from "next-auth";
 
+import { Footer } from "@/components/footer";
 import { AppLayout } from "@/components/layout";
 import { getUserConfigs, ParsedConfig } from "@/db/config";
 import { deserializeProps, Serialized, serializeProps } from "@/db/serialize";
@@ -57,7 +58,10 @@ const ProfilePage = (props: Serialized<PageProps>) => {
     <AppLayout>
       <Box className={rootClasses.root}>
         <ProfileHeader user={user} />
-        <ProfileContentTabs userId={user.id} />
+        <Box sx={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
+          <ProfileContentTabs userId={user.id} />
+        </Box>
+        <Footer />
       </Box>
     </AppLayout>
   );

From 56c34aefcf6d0c4d9c47adda80199083eb0bd620 Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Tue, 7 Jan 2025 12:29:15 +0100
Subject: [PATCH 2/3] fix: improved readability

---
 app/login/components/profile-content-tabs.tsx | 17 ++++++++---------
 app/login/utils.ts                            |  1 +
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/login/components/profile-content-tabs.tsx b/app/login/components/profile-content-tabs.tsx
index dd9a82318..2073408f8 100644
--- a/app/login/components/profile-content-tabs.tsx
+++ b/app/login/components/profile-content-tabs.tsx
@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Tab, Theme, useTheme } from "@mui/material";
+import { Box, Tab, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
 import groupBy from "lodash/groupBy";
@@ -12,6 +12,11 @@ import { useRootStyles } from "@/login/utils";
 import useEvent from "@/utils/use-event";
 
 const useStyles = makeStyles<Theme>((theme) => ({
+  section: {
+    borderBottom: 1,
+    borderColor: "divider",
+    marginTop: theme.spacing(6),
+  },
   tabList: {
     minHeight: "fit-content",
 
@@ -46,7 +51,7 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
   const handleChange = useEvent((_: React.SyntheticEvent, v: string) => {
     setValue(v);
   });
-  const theme = useTheme();
+
   const rootClasses = useRootStyles();
   const classes = useStyles();
 
@@ -66,13 +71,7 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
     <TabContext value={value}>
       <Box className={clsx(rootClasses.section)}>
         <Box className={rootClasses.sectionContent}>
-          <Box
-            sx={{
-              borderBottom: 1,
-              borderColor: "divider",
-              marginTop: theme.spacing(6),
-            }}
-          >
+          <Box className={classes.section}>
             <TabList className={classes.tabList} onChange={handleChange}>
               <Tab
                 className={classes.tab}
diff --git a/app/login/utils.ts b/app/login/utils.ts
index 2d732e66d..a1071bfb3 100644
--- a/app/login/utils.ts
+++ b/app/login/utils.ts
@@ -28,6 +28,7 @@ export const useRootStyles = makeStyles<Theme>((theme) => ({
     margin: "0 auto",
   },
   noTooltip: {
+    // Disable native tooltip in Safari
     "&::after": {
       content: "''",
       display: "block",

From 6af81d61873e282efb466e62725d66e1014c302f Mon Sep 17 00:00:00 2001
From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com>
Date: Wed, 8 Jan 2025 09:12:36 +0100
Subject: [PATCH 3/3] chore: Updated CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc19681be..ac3c9b70d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ You can also check the
   - Fixed preview via API (iframe)
   - Fixed cut table scroll-bars and unnecessary scroll of bar charts when
     switching between chart types
+  - Added Footer to the Profile Page
 
 # [5.0.2] - 2024-11-28