From 20a2204e42c12569d6c3106703a600d359f9b895 Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Wed, 20 Mar 2024 14:26:31 +0100
Subject: [PATCH 1/8] fix: logo doesn't resize weirdly anymore

---
 frontend/src/assets/styles/mainpage.css       | 19 +++++++++++++++----
 .../src/assets/styles/students_components.css |  2 +-
 frontend/src/components/Header.tsx            |  8 +++++---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css
index d300ddd7..71c4c751 100644
--- a/frontend/src/assets/styles/mainpage.css
+++ b/frontend/src/assets/styles/mainpage.css
@@ -1,26 +1,37 @@
+:root {
+    --sidebar-width: 8vh;
+}
+
 .main-header {
     width: 100vw;
     height: 8vh;
     background-color: #9c9afd;
+    overflow: hidden;
 }
 
 .main-nav {
     height: 100%;
+}
+
+.logo-div {
+    background-color: #3f63c8;
+    height: 100%;
+    width: var(--sidebar-width);
 
     img {
-        background-color: #5f63c8;
-        width: 4vw;
+        display: block;
+        width: 100%;
         height: 100%;
     }
 }
 
 .main-content {
     width: 100vw;
-    height: 92vh;
+    height: calc(100vh - var(--sidebar-width));
 }
 
 .side-bar {
-    width: 4vw;
+    width: var(--sidebar-width);
     background-color: #6a74ce;
 
     li {
diff --git a/frontend/src/assets/styles/students_components.css b/frontend/src/assets/styles/students_components.css
index 9473459e..34edf564 100644
--- a/frontend/src/assets/styles/students_components.css
+++ b/frontend/src/assets/styles/students_components.css
@@ -1,5 +1,5 @@
 .student-main {
-    width: 96vw;
+    width: calc(100vw - var(--sidebar-width));
 }
 
 .student-left {
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index ed1cad2e..ae303106 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -6,9 +6,11 @@ export function Header(): JSX.Element {
     return (
         <nav
             className={"main-nav is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center"}>
-            <Link to={"/"} className={"main-nav"}>
-                <img src={"/logo.png"} alt={"image"}/>
-            </Link>
+            <div className={"logo-div is-flex is-align-items-center"}>
+                <Link to={"/"}>
+                    <img src={"/logo.png"} alt={"image"}/>
+                </Link>
+            </div>
             <p className={"is-align-self-center"}><p>Home</p></p>
             <button className={"button mx-2 is-transparent"}>
                 <div className={"icon-text"}>

From 3e81aa0cab2472c0072fd3fd31338dbfdaa2d326 Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Wed, 20 Mar 2024 14:59:00 +0100
Subject: [PATCH 2/8] fix: better way to size icons

---
 frontend/src/assets/styles/mainpage.css | 1 +
 frontend/src/components/Sidebar.tsx     | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css
index 71c4c751..439381ed 100644
--- a/frontend/src/assets/styles/mainpage.css
+++ b/frontend/src/assets/styles/mainpage.css
@@ -40,6 +40,7 @@
         justify-content: center;
         align-items: center;
         padding: 5%;
+        transform: scale(1.5);
     }
 }
 
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 85222472..615ef870 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -14,11 +14,11 @@ export function Sidebar(): JSX.Element {
         <>
             <aside className={"menu is-flex is-flex-direction-column is-justify-content-space-between"}>
                 <ul className={"menu-list"}>
-                    <li><a><PiProjectorScreen size={30}/></a></li>
-                    <li><a><PiFolder size={30}/></a></li>
+                    <li><a><PiProjectorScreen/></a></li>
+                    <li><a><PiFolder/></a></li>
                 </ul>
                 <ul className={"menu-list"}>
-                    <li><a className={"is-transparent"} onClick={handleSettings}><IoMdSettings size={30}/></a>
+                    <li><a className={"is-transparent"} onClick={handleSettings}><IoMdSettings/></a>
                     </li>
                 </ul>
             </aside>

From 487eb6b9e006a53f7c7725f8129d3bb9f21ca4b5 Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Wed, 20 Mar 2024 15:10:34 +0100
Subject: [PATCH 3/8] feat: make vars for primary colours

---
 frontend/src/assets/styles/mainpage.css            | 6 ++++--
 frontend/src/assets/styles/students_components.css | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css
index 439381ed..a05efb21 100644
--- a/frontend/src/assets/styles/mainpage.css
+++ b/frontend/src/assets/styles/mainpage.css
@@ -1,11 +1,13 @@
 :root {
     --sidebar-width: 8vh;
+    --primary-dark: #6a74ce;
+    --primary-light: #9c9afd;
 }
 
 .main-header {
     width: 100vw;
     height: 8vh;
-    background-color: #9c9afd;
+    background-color: var(--primary-light);
     overflow: hidden;
 }
 
@@ -32,7 +34,7 @@
 
 .side-bar {
     width: var(--sidebar-width);
-    background-color: #6a74ce;
+    background-color: var(--primary-dark);
 
     li {
         height: 10vh;
diff --git a/frontend/src/assets/styles/students_components.css b/frontend/src/assets/styles/students_components.css
index 34edf564..82b6718d 100644
--- a/frontend/src/assets/styles/students_components.css
+++ b/frontend/src/assets/styles/students_components.css
@@ -9,7 +9,7 @@
 }
 
 .project-card {
-    background-color: #9c9afd !important;
+    background-color: var(--primary-light) !important;
     width: 25vw;
     height: 25vh;
 }
@@ -34,7 +34,7 @@
 }
 
 .deadline-head {
-    background-color: #5f63c8;
+    background-color: var(--primary-dark);
     border-radius: 0.50rem 0.50rem 0 0;
 }
 
@@ -45,6 +45,6 @@
 }
 
 .deadline-card {
-    background-color: #9c9afd;
+    background-color: var(--primary-light);
     border-bottom: thin solid;
 }
\ No newline at end of file

From cd68a9e785e4e924b3d3f6d8eea43a3313068ac8 Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Wed, 20 Mar 2024 15:26:58 +0100
Subject: [PATCH 4/8] fix: li out of page makes scroll

---
 frontend/src/assets/styles/mainpage.css |  5 ++++-
 frontend/src/components/Sidebar.tsx     | 11 ++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css
index a05efb21..dd66d477 100644
--- a/frontend/src/assets/styles/mainpage.css
+++ b/frontend/src/assets/styles/mainpage.css
@@ -42,7 +42,10 @@
         justify-content: center;
         align-items: center;
         padding: 5%;
-        transform: scale(1.5);
+
+        a {
+            transform: scale(1.5);
+        }
     }
 }
 
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 615ef870..001035cd 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -14,11 +14,16 @@ export function Sidebar(): JSX.Element {
         <>
             <aside className={"menu is-flex is-flex-direction-column is-justify-content-space-between"}>
                 <ul className={"menu-list"}>
-                    <li><a><PiProjectorScreen/></a></li>
-                    <li><a><PiFolder/></a></li>
+                    <li>
+                        <a><PiProjectorScreen/></a>
+                    </li>
+                    <li>
+                        <a><PiFolder/></a>
+                    </li>
                 </ul>
                 <ul className={"menu-list"}>
-                    <li><a className={"is-transparent"} onClick={handleSettings}><IoMdSettings/></a>
+                    <li>
+                        <a className={"is-transparent"} onClick={handleSettings}><IoMdSettings/></a>
                     </li>
                 </ul>
             </aside>

From f60ae1245cf7f4791b264bb5df081b25d45675b9 Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Wed, 20 Mar 2024 15:40:08 +0100
Subject: [PATCH 5/8] fix: better styling for text, media keyword for later

---
 frontend/src/assets/styles/students_components.css | 4 ++++
 frontend/src/pages/student/ProjectCardStudent.tsx  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/assets/styles/students_components.css b/frontend/src/assets/styles/students_components.css
index 82b6718d..b996f1c2 100644
--- a/frontend/src/assets/styles/students_components.css
+++ b/frontend/src/assets/styles/students_components.css
@@ -14,6 +14,10 @@
     height: 25vh;
 }
 
+.card-text {
+    width: 80%;
+}
+
 .p-negative {
     color: red;
 }
diff --git a/frontend/src/pages/student/ProjectCardStudent.tsx b/frontend/src/pages/student/ProjectCardStudent.tsx
index b38aad19..30be7e2d 100644
--- a/frontend/src/pages/student/ProjectCardStudent.tsx
+++ b/frontend/src/pages/student/ProjectCardStudent.tsx
@@ -15,7 +15,7 @@ export default function ProjectCardStudent(): JSX.Element {
         <div
             className={"card project-card px-5 py-5 my-5 is-flex is-flex-direction-column is-justify-content-space-between"}>
             <p className={"title is-5"}>Markov Decision Diagram</p>
-            <div className={"is-flex is-flex-direction-row"}>
+            <div className={"card-text is-flex is-flex-direction-row"}>
                 <p className={"pr-2"}>vak: </p>
                 <p>Computationele Biologie</p>
             </div>

From ec96d7c01ff9bb69cbc06a9ecca4a296f92ab875 Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Wed, 20 Mar 2024 21:29:35 +0100
Subject: [PATCH 6/8] fix: color background logo, size icons until certain size

---
 frontend/src/assets/styles/mainpage.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css
index dd66d477..ac018e5c 100644
--- a/frontend/src/assets/styles/mainpage.css
+++ b/frontend/src/assets/styles/mainpage.css
@@ -16,7 +16,7 @@
 }
 
 .logo-div {
-    background-color: #3f63c8;
+    background-color: #5f63c8;
     height: 100%;
     width: var(--sidebar-width);
 
@@ -45,6 +45,7 @@
 
         a {
             transform: scale(1.5);
+            font-size: 1em;
         }
     }
 }

From ebbda02efa64c2c873d17f102cdc2d88a467ef12 Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Fri, 22 Mar 2024 11:11:05 +0100
Subject: [PATCH 7/8] fix: header fixed height

---
 frontend/src/assets/styles/mainpage.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css
index ac018e5c..3f637f8b 100644
--- a/frontend/src/assets/styles/mainpage.css
+++ b/frontend/src/assets/styles/mainpage.css
@@ -1,12 +1,12 @@
 :root {
-    --sidebar-width: 8vh;
+    --sidebar-width: 80px;
     --primary-dark: #6a74ce;
     --primary-light: #9c9afd;
 }
 
 .main-header {
     width: 100vw;
-    height: 8vh;
+    height: var(--sidebar-width);
     background-color: var(--primary-light);
     overflow: hidden;
 }

From 29c0ee755d33a868e2d1edf0444fc0f5f5c7eb3d Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Fri, 22 Mar 2024 11:23:42 +0100
Subject: [PATCH 8/8] fix: position icons

---
 frontend/src/assets/styles/mainpage.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css
index 3f637f8b..15b8c6d3 100644
--- a/frontend/src/assets/styles/mainpage.css
+++ b/frontend/src/assets/styles/mainpage.css
@@ -37,11 +37,11 @@
     background-color: var(--primary-dark);
 
     li {
-        height: 10vh;
+        height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: 5%;
+        /*padding: 5%;*/
 
         a {
             transform: scale(1.5);