Darkmode lightmode rewrite

frontend/Dockerfile

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

frontend/components/elements/Header.tsx

@@ -1,31 +1,18 @@
+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,
-  darkMode,
-  setDarkMode
-}: HeaderProps) => (
+const Header = ({ categories, show, setShow }: HeaderProps) => (
   <nav className={`${styles.headerStyle}`}>
-    <NavBar
-      categories={categories}
-      show={show}
-      setShow={setShow}
-      darkMode={darkMode}
-      setDarkMode={setDarkMode}
-    />
+    <NavBar categories={categories} show={show} setShow={setShow} />
     <h1 className={`${styles.titleStyle}`}>findIT</h1>
     <div className={styles.catList}>
       {categories.map((category) => (
@@ -37,10 +24,8 @@ const Header = ({
         </a>
       ))}
     </div>
-    <div className={styles.darkModeSwitchInHeaderStyle}>
-      <DarkModeSwitch darkMode={darkMode} setDarkMode={setDarkMode} />
-    </div>
-    <img
+    <Image
+      alt="show navigation"
       className={styles.showNav}
       src="images/Hamburger_icon.png"
       onClick={() => {

frontend/components/views/NavBar.module.scss

@@ -63,10 +63,11 @@
 	display: flex;
 	flex-direction: column;
 		height: $space-giant;
-			border: 1px solid black;
+			border-bottom: 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,22 +1,13 @@
 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,
-  darkMode,
-  setDarkMode
-}: NavBarProps) {
+function NavBar({ categories, show, setShow }: NavBarProps) {
   return (
     <div
       className={`${styles.navStyle} ${show ? styles.shown : styles.hidden}`}>
@@ -30,7 +21,6 @@ function NavBar({
           </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,10 +36,6 @@
 	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>
-        <img
+        <Image
           src={src}
           className={`${styles.iconClass} marginTop marginLeft marginRight`}
           alt={`${service.title}'s icon`}