From 4721a7dd85efb69c37a1dc579f940ce4ce932ff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Ja=C5=82oszy=C5=84ski?=
 <sebastian.jaloszynski@student.put.poznan.pl>
Date: Thu, 5 Dec 2024 12:18:08 +0100
Subject: [PATCH 1/2] 183: Add separate footer for dashboard, adjust size of
 usermenu icon

---
 frontend/src/components/DashboardLayout.tsx   |  4 +-
 .../dashboardFooter/DashboardFooter.tsx       | 80 +++++++++++++++++++
 .../DashboardFooterCentered.module.css        | 23 ++++++
 .../footer/FooterCentered.module.css          |  5 +-
 frontend/src/components/navbar/UserMenu.tsx   |  2 +-
 frontend/src/routes/user/page.tsx             |  3 +-
 6 files changed, 109 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/dashboardFooter/DashboardFooter.tsx
 create mode 100644 frontend/src/components/dashboardFooter/DashboardFooterCentered.module.css

diff --git a/frontend/src/components/DashboardLayout.tsx b/frontend/src/components/DashboardLayout.tsx
index ffa10287..46b47f26 100644
--- a/frontend/src/components/DashboardLayout.tsx
+++ b/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 './dashboardFooter/DashboardFooter.tsx';
 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 />
diff --git a/frontend/src/components/dashboardFooter/DashboardFooter.tsx b/frontend/src/components/dashboardFooter/DashboardFooter.tsx
new file mode 100644
index 00000000..250c661f
--- /dev/null
+++ b/frontend/src/components/dashboardFooter/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 './DashboardFooterCentered.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>
+
+        <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>
+  );
+}
diff --git a/frontend/src/components/dashboardFooter/DashboardFooterCentered.module.css b/frontend/src/components/dashboardFooter/DashboardFooterCentered.module.css
new file mode 100644
index 00000000..c2dc4191
--- /dev/null
+++ b/frontend/src/components/dashboardFooter/DashboardFooterCentered.module.css
@@ -0,0 +1,23 @@
+.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));
+}
+
+.inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--mantine-spacing-md) var(--mantine-spacing-md);
+
+  @media (max-width: 768) {
+    flex-direction: column;
+  }
+}
+
+.links {
+  @media (max-width: 768) {
+    margin-top: var(--mantine-spacing-lg);
+    margin-bottom: var(--mantine-spacing-sm);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/footer/FooterCentered.module.css b/frontend/src/components/footer/FooterCentered.module.css
index 3704363f..c2dc4191 100644
--- a/frontend/src/components/footer/FooterCentered.module.css
+++ b/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);
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/navbar/UserMenu.tsx b/frontend/src/components/navbar/UserMenu.tsx
index dd43ccb9..95352140 100644
--- a/frontend/src/components/navbar/UserMenu.tsx
+++ b/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)
     : '';
diff --git a/frontend/src/routes/user/page.tsx b/frontend/src/routes/user/page.tsx
index c4414c6d..a19b2f7d 100644
--- a/frontend/src/routes/user/page.tsx
+++ b/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' }}>

From 9f270e8bac7e679efbb3408d49fd1857339ef8f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Ja=C5=82oszy=C5=84ski?=
 <sebastian.jaloszynski@student.put.poznan.pl>
Date: Thu, 5 Dec 2024 21:39:03 +0100
Subject: [PATCH 2/2] 183: Dont use separate folder for dashboard footer, PR
 requested change

---
 frontend/src/components/DashboardLayout.tsx   |  2 +-
 .../DashboardFooterCentered.module.css        | 23 -------------------
 .../DashboardFooter.tsx                       |  4 ++--
 3 files changed, 3 insertions(+), 26 deletions(-)
 delete mode 100644 frontend/src/components/dashboardFooter/DashboardFooterCentered.module.css
 rename frontend/src/components/{dashboardFooter => footer}/DashboardFooter.tsx (96%)

diff --git a/frontend/src/components/DashboardLayout.tsx b/frontend/src/components/DashboardLayout.tsx
index 46b47f26..c8bb395b 100644
--- a/frontend/src/components/DashboardLayout.tsx
+++ b/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 DashboardFooter from './dashboardFooter/DashboardFooter.tsx';
+import DashboardFooter from './footer/DashboardFooter';
 import { Box, Flex } from '@mantine/core';
 import { ScrollToTop } from '../components/ScrollToTop';
 
diff --git a/frontend/src/components/dashboardFooter/DashboardFooterCentered.module.css b/frontend/src/components/dashboardFooter/DashboardFooterCentered.module.css
deleted file mode 100644
index c2dc4191..00000000
--- a/frontend/src/components/dashboardFooter/DashboardFooterCentered.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.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));
-}
-
-.inner {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--mantine-spacing-md) var(--mantine-spacing-md);
-
-  @media (max-width: 768) {
-    flex-direction: column;
-  }
-}
-
-.links {
-  @media (max-width: 768) {
-    margin-top: var(--mantine-spacing-lg);
-    margin-bottom: var(--mantine-spacing-sm);
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/components/dashboardFooter/DashboardFooter.tsx b/frontend/src/components/footer/DashboardFooter.tsx
similarity index 96%
rename from frontend/src/components/dashboardFooter/DashboardFooter.tsx
rename to frontend/src/components/footer/DashboardFooter.tsx
index 250c661f..c882191c 100644
--- a/frontend/src/components/dashboardFooter/DashboardFooter.tsx
+++ b/frontend/src/components/footer/DashboardFooter.tsx
@@ -4,7 +4,7 @@ import {
   IconBrandTwitter,
   IconBrandYoutube,
 } from '@tabler/icons-react';
-import classes from './DashboardFooterCentered.module.css';
+import classes from './FooterCentered.module.css';
 import { useNavigate } from 'react-router-dom';
 
 const links = [
@@ -32,7 +32,7 @@ export default function DashboardFooterCentered() {
   return (
     <footer className={classes.footer}>
       <div className={classes.inner}>
-        <Group></Group>
+        <Group />
 
         <Group className={classes.links}>{items}</Group>