Merge pull request #117 from SELab-2/fix-css

Fix css
SELab-2 · Mar 22, 2024 · f59362a · f59362a
2 parents 5dcac17 + 29c0ee7
commit f59362a
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 20 deletions.
diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css
@@ -1,34 +1,52 @@
+:root {
+    --sidebar-width: 80px;
+    --primary-dark: #6a74ce;
+    --primary-light: #9c9afd;
+}
+
 .main-header {
     width: 100vw;
-    height: 8vh;
-    background-color: #9c9afd;
+    height: var(--sidebar-width);
+    background-color: var(--primary-light);
+    overflow: hidden;
 }
 
 .main-nav {
     height: 100%;
+}
+
+.logo-div {
+    background-color: #5f63c8;
+    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;
-    background-color: #6a74ce;
+    width: var(--sidebar-width);
+    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);
+            font-size: 1em;
+        }
     }
 }
 

diff --git 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 {
@@ -9,11 +9,15 @@
 }
 
 .project-card {
-    background-color: #9c9afd !important;
+    background-color: var(--primary-light) !important;
     width: 25vw;
     height: 25vh;
 }
 
+.card-text {
+    width: 80%;
+}
+
 .p-negative {
     color: red;
 }
@@ -34,7 +38,7 @@
 }
 
 .deadline-head {
-    background-color: #5f63c8;
+    background-color: var(--primary-dark);
     border-radius: 0.50rem 0.50rem 0 0;
 }
 
@@ -45,6 +49,6 @@
 }
 
 .deadline-card {
-    background-color: #9c9afd;
+    background-color: var(--primary-light);
     border-bottom: thin solid;
 }
diff --git 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"}>

diff --git 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 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>

diff --git 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>