isfit navbar

frontend/src/Components/IsfitOutlet/IsfitNavbar/IsfitNavbar.module.scss

@@ -0,0 +1,25 @@
+@import '/src/_constants.scss';
+
+@import '/src/styles/_colors.scss';
+
+@import '/src/styles/_z-indexes.scss';
+
+@import '/src/styles/_spacing.scss';
+
+.container {
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: $isfit-navbar-height;
+  background-color: $isfit-primary;
+  padding: $spacing-sm $spacing-md;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: $navbar-z-index;
+}
+
+.logo {
+  height: 100%;
+}

frontend/src/Components/IsfitOutlet/IsfitNavbar/IsfitNavbar.tsx

@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+import { ROUTES } from '~/routes';
+import { IsfitLogo } from '../../Logo/components';
+import styles from './IsfitNavbar.module.scss';
+
+export function IsfitNavbar() {
+  return (
+    <div className={styles.container}>
+      {/* TODO: This link should probably take you to a better place */}
+      <Link to={ROUTES.frontend.recruitment}>
+        <IsfitLogo color="light" size="xsmall" />
+      </Link>
+    </div>
+  );
+}

frontend/src/Components/IsfitOutlet/IsfitOutlet.module.scss

@@ -1,3 +1,5 @@
-.deleteme {
-  color: red;
+@import '/src/constants.scss';
+
+.navbar_outlet {
+  padding-top: $isfit-navbar-height;
 }

frontend/src/Components/IsfitOutlet/IsfitOutlet.tsx

@@ -1,5 +1,5 @@
 import { Outlet } from 'react-router-dom';
-import { IsfitNavbar } from './IsfitNavbar';
+import { IsfitNavbar } from './IsfitNavbar/IsfitNavbar';
 import styles from './IsfitOutlet.module.scss';
 
 export function IsfitOutlet() {

frontend/src/_constants.scss

@@ -45,9 +45,9 @@ $sulten-orange: #fbb042;
 // Recruitment colors
 $rejected: #f9cccd;
 $accepted: #ccf9cd;
-$withdrawn:#bbbbbb;
+$withdrawn: #bbbbbb;
 
-$pending: #FFF5BC;
+$pending: #fff5bc;
 $topwanted: #32ff32;
 $topreserve: #afffaf;
 $lessreserve: #ffb343;
@@ -89,6 +89,7 @@ $content-padding: calc((100vw - 1200px) / 2);
 // Navbar size
 $navbar-height: 60px;
 $sulten-navbar-height: 100px;
+$isfit-navbar-height: 80px;
 
 // Content size
 $primary-content-wide-padding: 2.5rem;

frontend/src/styles/_colors.scss

@@ -0,0 +1,7 @@
+// TODO: Move all color related constants to this file
+
+// ---------------- //
+//   isfit colors   //
+// ---------------- //
+$isfit-primary: rgb(201 31 50);
+$isfit-secondary: #0000ff;

frontend/src/styles/_spacing.scss

@@ -0,0 +1,5 @@
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;

frontend/src/styles/_z-indexes.scss

@@ -0,0 +1,24 @@
+// This file is used to define z-indexes for the application.
+// It is used to keep track of the z-indexes used in the application and to avoid conflicts between them.
+// To add a new z-index, find out where it should belong, and add it to the corresponding section.
+// When adding a new index do this by adding a new variable and incrementing the previous one by 1.
+//
+// Before adding "button" z-index:
+//
+// background-z-index: $base-z-index + 1
+// modal: $background-z-index + 1
+//
+// After adding "button" z-index:
+//
+// background-z-index: $base-z-index + 1
+// button: $background-z-index + 1
+// modal: $button + 1
+//
+
+$base-z-index: 0;
+$tooltip-z-index: $base-z-index + 1;
+$feedback-z-index: $tooltip-z-index + 1;
+$navbar-z-index: $feedback-z-index + 1;
+$modal-z-index: $navbar-z-index + 1;
+// For instance snowflakes, confetti, sprut, etc.
+$decoration-overlay-z-index: $modal-z-index + 1;