Darkmode lightmode rewrite (#64)

* moved the used css variables to their own file * Removed theme switch button * Removed the change theme button and related functionality * Changed colors * changed colors for navbarlinks * removed mobile navmenu double borders * bös commit * removed unused import * Changed to use npm instead of yarn and fixed linting --------- Co-authored-by: Simon Westlin Green <[email protected]>
cthit · Sep 26, 2024 · 9aa7e78 · 9aa7e78
1 parent 6bf2dcf
commit 9aa7e78
Show file tree

Hide file tree

Showing 16 changed files with 5,123 additions and 2,878 deletions.
diff --git a/frontend/Dockerfile b/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"]
diff --git a/frontend/components/elements/DarkModeSwitch.module.scss b/frontend/components/elements/DarkModeSwitch.module.scss
diff --git a/frontend/components/elements/DarkModeSwitch.tsx b/frontend/components/elements/DarkModeSwitch.tsx
diff --git a/frontend/components/elements/Header.tsx b/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={() => {

diff --git a/frontend/components/views/NavBar.module.scss b/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);

diff --git a/frontend/components/views/NavBar.tsx b/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>
   );
 }

diff --git a/frontend/components/views/ServiceCard.module.scss b/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);

diff --git a/frontend/components/views/ServiceCard.tsx b/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`}