Fix WrapperDiv, Foot, and Navbar (#564)

Fixed bugs associated with WrapperDiv, Footer, and Navbar components

components/Navbar.tsx

@@ -60,11 +60,22 @@ export default function Navbar() {
           </Box>
           <Box sx={{ display: { xs: "none", md: "block" } }}>
             <Grid container spacing={1}>
-              <Grid item sx={{ display: "flex" }}>
+              <Grid item sx={{ 
+                display: "flex",
+                flexShrink: 0,
+                alignItems: "center",
+                marginRight: "1rem", 
+                }}
+                >
                 <CategoryDropDownMenu />
               </Grid>
               {isAuth && user && (user.role === "admin" || user.role === "creator") && (
-                <Grid item>
+                <Grid item sx={{
+                  flexShrink: 0,
+                  alignItems: "center",
+                  marginLeft: "1rem",
+                }}
+                >
                   <Link href="/dashboard" passHref>
                     <Button sx={{ color: "primary.contrastText" }}>
                       Dashboard

components/WrapperDiv.tsx

@@ -1,21 +1,22 @@
 import React from "react";
 import { Box, BoxProps } from "@mui/material";
 
-const styles = {
-  borderRadius: "0.5rem",
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  gap: "1rem",
-  textAlign: "center",
-  paddingBottom: 5
-};
-
-const CustomCardContent: React.FC<BoxProps> = ({ children }) => {
-  return <Box sx={styles}>{children}</Box>;
+const CustomCardContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <Box
+      sx={{
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        width: "100%",
+        padding: "1rem",
+      }}
+    >
+      {children}
+    </Box>
+  );
 };
 
 export default CustomCardContent;