183: Add separate footer for dashboard, adjust size of usermenu icon

frontend/src/components/DashboardLayout.tsx

@@ -1,7 +1,7 @@
 import Sidebar from './sidebar/Sidebar.tsx';
 import { Outlet } from 'react-router-dom';
 import Navbar from './navbar/Navbar.tsx';
-import Footer from './footer/Footer.tsx';
+import DashboardFooter from './footer/DashboardFooter';
 import { Box, Flex } from '@mantine/core';
 import { ScrollToTop } from '../components/ScrollToTop';
 
@@ -32,7 +32,7 @@ const DashboardLayout = () => {
           <Box style={dashboardContainer}>
             <Outlet />
           </Box>
-          <Footer />
+          <DashboardFooter />
         </Flex>
       </Flex>
       <ScrollToTop />

frontend/src/components/footer/DashboardFooter.tsx

@@ -0,0 +1,80 @@
+import { Anchor, Group, ActionIcon, rem } from '@mantine/core';
+import {
+  IconBrandGithub,
+  IconBrandTwitter,
+  IconBrandYoutube,
+} from '@tabler/icons-react';
+import classes from './FooterCentered.module.css';
+import { useNavigate } from 'react-router-dom';
+
+const links = [
+  { link: '/about', label: 'About' },
+  { link: '/dashboard', label: 'Dashboard' },
+];
+
+export default function DashboardFooterCentered() {
+  const navigate = useNavigate();
+  const items = links.map((link) => (
+    <Anchor
+      c="dimmed"
+      key={link.label}
+      lh={1}
+      onClick={(event) => {
+        event.preventDefault();
+        navigate(link.link);
+      }}
+      size="sm"
+    >
+      {link.label}
+    </Anchor>
+  ));
+
+  return (
+    <footer className={classes.footer}>
+      <div className={classes.inner}>
+        <Group />
+
+        <Group className={classes.links}>{items}</Group>
+
+        <Group gap="xs" justify="flex-end" wrap="nowrap">
+          <Anchor
+            href="https://github.com/RMoodsTeam/RMoods"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <ActionIcon size="lg" variant="default" radius="xl">
+              <IconBrandGithub
+                style={{ width: rem(18), height: rem(18) }}
+                stroke={1.5}
+              />
+            </ActionIcon>
+          </Anchor>
+          <Anchor
+            href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <ActionIcon size="lg" variant="default" radius="xl">
+              <IconBrandTwitter
+                style={{ width: rem(18), height: rem(18) }}
+                stroke={1.5}
+              />
+            </ActionIcon>
+          </Anchor>
+          <Anchor
+            href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <ActionIcon size="lg" variant="default" radius="xl">
+              <IconBrandYoutube
+                style={{ width: rem(18), height: rem(18) }}
+                stroke={1.5}
+              />
+            </ActionIcon>
+          </Anchor>
+        </Group>
+      </div>
+    </footer>
+  );
+}

frontend/src/components/footer/FooterCentered.module.css

@@ -1,8 +1,7 @@
 .footer {
   margin-top: auto;
   /* This should be set to auto to keep footer at the bottom of the page*/
-  border-top: rem(1px) solid
-    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
 }
 
 .inner {
@@ -21,4 +20,4 @@
     margin-top: var(--mantine-spacing-lg);
     margin-bottom: var(--mantine-spacing-sm);
   }
-}
+}

frontend/src/components/navbar/UserMenu.tsx

@@ -61,7 +61,7 @@ const UserMenu = () => {
     navigate('/login');
   };
 
-  const size = 55;
+  const size = 45;
   const resizedPicture = user
     ? changeDefaultGoogleProfilePictureSize(user.picture, size)
     : '';

frontend/src/routes/user/page.tsx

@@ -69,8 +69,7 @@ const UserPage = () => {
       style={{
         display: 'flex',
         justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        margin: '50px 200px 0 200px',
+        alignItems: 'flex-start'
       }}
     >
       <Box style={{ flex: '0 0 350px', marginRight: '20px' }}>