Reverted breaking changes

frontend/Dockerfile

@@ -3,9 +3,9 @@ FROM node:lts-alpine
 COPY . /app
 
 workdir /app
-run npm install
+run yarn install
 
 
-run npm run build
+run yarn build
 expose 3000
-cmd ["npm", "run", "start"]
+cmd ["yarn", "start"]

frontend/components/elements/DarkModeSwitch.module.scss

@@ -0,0 +1,71 @@
+@import "../../resources/styles/vars.scss";
+
+.darkModeSwitchStyle {
+	color: black;
+	height: $space-big;
+		width: $space-big;
+	position: absolute;
+	/*left: 0.1*$space-big;
+				top: 0.1*$space-big;*/
+
+	@media only screen and (min-width:$breakpoint-mobile) {}
+
+	@media only screen and (max-width:$breakpoint-mobile) {}
+}
+
+.slider_in {
+	height: $space-big;
+	width: $space-big;
+	position: relative;
+	left: 0;
+	background-color: #00a6a6;
+	border-radius: $space-big/2;
+	animation-name: out;
+	animation-duration: 0.4s;
+
+}
+
+
+.slider_out {
+	height: $space-big;
+	width: $space-big;
+	position: relative;
+	left: 1.05*$space-big;
+	background-color: #00a6a6;
+	border-radius: $space-big/2;
+	animation-name: in;
+	animation-duration: 0.4s;
+}
+
+.darkModeHolder {
+	height: 1.2$space-big;
+	width: 2.2*$space-big;
+	background-color: black;
+	border: (0.1*$space-big) solid white;
+	border-radius: 1.1*$space-big/2;
+}
+
+.blackColor {
+	background-color: white;
+}
+
+@keyframes in {
+	0% {
+		left: 0;
+	}
+
+	100% {
+		left: 1.1*$space-big;
+	}
+
+}
+
+@keyframes out {
+	0% {
+		left: 1.1*$space-big;
+	}
+
+	100% {
+		left: 0;
+	}
+}

frontend/components/elements/DarkModeSwitch.tsx

@@ -0,0 +1,19 @@
+import styles from "./DarkModeSwitch.module.scss";
+
+export interface DarkModeProps {
+  darkMode: boolean;
+  setDarkMode: any;
+}
+const DarkModeSwitch = ({ darkMode, setDarkMode }: DarkModeProps) => (
+  <div
+    className={`${styles.darkModeHolder} ${
+      darkMode ? null : styles.blackColor
+    }`}
+    onClick={() => {
+      setDarkMode(!darkMode);
+    }}>
+    <div className={darkMode ? styles.slider_out : styles.slider_in} />
+  </div>
+);
+
+export default DarkModeSwitch;

frontend/components/elements/Header.tsx

@@ -1,18 +1,31 @@
-import Image from "next/image";
-
 import { Category } from "../../data/category";
 import NavBar from "../views/NavBar";
 
+import DarkModeSwitch from "./DarkModeSwitch";
 import styles from "./Header.module.scss";
 
 export interface HeaderProps {
   categories: Category[];
   show: boolean;
   setShow: any;
+  darkMode: boolean;
+  setDarkMode: any;
 }
-const Header = ({ categories, show, setShow }: HeaderProps) => (
+const Header = ({
+  categories,
+  show,
+  setShow,
+  darkMode,
+  setDarkMode
+}: HeaderProps) => (
   <nav className={`${styles.headerStyle}`}>
-    <NavBar categories={categories} show={show} setShow={setShow} />
+    <NavBar
+      categories={categories}
+      show={show}
+      setShow={setShow}
+      darkMode={darkMode}
+      setDarkMode={setDarkMode}
+    />
     <h1 className={`${styles.titleStyle}`}>findIT</h1>
     <div className={styles.catList}>
       {categories.map((category) => (
@@ -24,8 +37,10 @@ const Header = ({ categories, show, setShow }: HeaderProps) => (
         </a>
       ))}
     </div>
-    <Image
-      alt="show navigation"
+    <div className={styles.darkModeSwitchInHeaderStyle}>
+      <DarkModeSwitch darkMode={darkMode} setDarkMode={setDarkMode} />
+    </div>
+    <img
       className={styles.showNav}
       src="images/Hamburger_icon.png"
       onClick={() => {

frontend/components/views/NavBar.module.scss

@@ -63,11 +63,10 @@
 	display: flex;
 	flex-direction: column;
 		height: $space-giant;
-			border-bottom: 1px solid black;
+			border: 1px solid black;
 			text-align: center;
 			align-items: center;
 			justify-content: center;
-
 	&:hover {
 		background-color: var(--highlight1);
 			color: var(--text);

frontend/components/views/NavBar.tsx

@@ -1,13 +1,22 @@
 import { Category } from "../../data/category";
+import DarkModeSwitch from "../elements/DarkModeSwitch";
 
 import styles from "./NavBar.module.scss";
 
 export interface NavBarProps {
   categories: Category[];
   show: boolean;
   setShow: any;
+  darkMode: boolean;
+  setDarkMode: any;
 }
-function NavBar({ categories, show, setShow }: NavBarProps) {
+function NavBar({
+  categories,
+  show,
+  setShow,
+  darkMode,
+  setDarkMode
+}: NavBarProps) {
   return (
     <div
       className={`${styles.navStyle} ${show ? styles.shown : styles.hidden}`}>
@@ -21,6 +30,7 @@ function NavBar({ categories, show, setShow }: NavBarProps) {
           </a>
         </p>
       ))}
+      <DarkModeSwitch darkMode={darkMode} setDarkMode={setDarkMode} />
     </div>
   );
 }

frontend/components/views/ServiceCard.module.scss

@@ -7,8 +7,8 @@
 	:hover{
 		cursor:pointer;
 	}
-}
 
+}
 .aClass{
 	position:absolute;
 	color: var(--text);
@@ -36,6 +36,10 @@
 	font-size: $font-size-large;
 	color: var(--text);
 }
+/*.darkCard {
+	background-color: var(--background);
+		color: var(--text);
+}*/
 .cardClass {
 	background-color: var(--background);
 	color: var(--text);

frontend/components/views/ServiceCard.tsx

@@ -20,7 +20,7 @@ function ServiceCard({ service }: ServiceCardProps) {
   return (
     <div className={`${styles.cardClass} card`}>
       <p>
-        <Image
+        <img
           src={src}
           className={`${styles.iconClass} marginTop marginLeft marginRight`}
           alt={`${service.title}'s icon`}