feat: Added Footer to Profile Page

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
 

app/login/components/profile-content-tabs.tsx

@@ -13,6 +13,8 @@ import useEvent from "@/utils/use-event";
 
 const useStyles = makeStyles<Theme>((theme) => ({
   section: {
+    borderBottom: 1,
+    borderColor: "divider",
     marginTop: theme.spacing(6),
   },
   tabList: {
@@ -49,6 +51,7 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
   const handleChange = useEvent((_: React.SyntheticEvent, v: string) => {
     setValue(v);
   });
+
   const rootClasses = useRootStyles();
   const classes = useStyles();
 
@@ -66,9 +69,9 @@ 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 className={classes.section}>
             <TabList className={classes.tabList} onChange={handleChange}>
               <Tab
                 className={classes.tab}

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%",

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>
   );