From f511e574e5e6920974f656786e6dae11bbe133ab Mon Sep 17 00:00:00 2001
From: Julia Dai <juliada@stud.ntnu.no>
Date: Wed, 24 Apr 2024 17:45:45 +0200
Subject: [PATCH 1/5] VF-138 Apply darkmode styling on assistent page

---
 .../Assistenter/components/ApplyReg.tsx       | 10 +++---
 .../Assistenter/components/Assistenter.tsx    | 32 +++++++++----------
 .../components/AssistenterCard.tsx            |  2 +-
 .../components/CityCard/Citycard.tsx          |  6 ++--
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/pages/public/Assistenter/components/ApplyReg.tsx b/src/pages/public/Assistenter/components/ApplyReg.tsx
index 6cebe77c..989659ee 100644
--- a/src/pages/public/Assistenter/components/ApplyReg.tsx
+++ b/src/pages/public/Assistenter/components/ApplyReg.tsx
@@ -3,15 +3,15 @@ import React from "react";
 export const ApplyCard = (props: any) => {
   const { cities } = props;
   return (
-    <form>
+    <form className="dark:bg-neutral-800">
 
-      <h1 className="text-xl my-8 text-vektor-darblue font-bold text-center">
+      <h1 className="text-xl my-8 text-vektor-darblue font-bold text-center dark:text-gray-200">
         {cities}
       </h1>
 
-      <div className="mt-1 mb-8 text-center">Søknadsfrist: </div>
+      <div className="mt-1 mb-8 text-center dark:text-gray-300">Søknadsfrist: </div>
 
-      <div className="grid justify-items-center">
+      <div className="grid justify-items-center dark:text-gray-800">
         <div className="flex flex-wrap w-full my-4 space-x-8 justify-center">
 
           <input
@@ -81,7 +81,7 @@ export const ApplyCard = (props: any) => {
         </button>
 
       </div>
-      <div className="items-center mx-16 mb-10 text-center">
+      <div className="items-center mx-16 mb-10 text-center dark:text-gray-300">
         Har du vært assistent tidligere? Da kan du søke på nytt her (krever
         innlogging)
       </div>
diff --git a/src/pages/public/Assistenter/components/Assistenter.tsx b/src/pages/public/Assistenter/components/Assistenter.tsx
index e9d7c158..9178cfc8 100644
--- a/src/pages/public/Assistenter/components/Assistenter.tsx
+++ b/src/pages/public/Assistenter/components/Assistenter.tsx
@@ -13,15 +13,15 @@ const Assistenter = (): JSX.Element => {
   });
 
   return (
-    <div className="leading-relaxed font-sans max-w-md mx-auto md:max-w-2xl flex flex-col justify-center items-center ">
+    <div className="leading-relaxed font-sans max-w-md mx-auto md:max-w-2xl flex flex-col justify-center items-center dark:text-gray-300">
       <div className="bg-vektor-bg" />
-      <h1 className="font-sans max-w-2xl mt-10 text-vektor-darblue text-4xl text-center font-bold mx-3">
+      <h1 className="font-sans max-w-2xl mt-10 text-vektor-darblue text-4xl text-center font-bold mx-3 dark:text-gray-200">
         {title}
       </h1>
       <div className="mt-4 mb-20 text-xl ">{ingress}</div>
 
-      <div className="border-solid border-2 border-vektor-darblue bg-white space-y-16 p-4 w-full text-center mb-14">
-        <div className="conte mx-8 bg-center font-sans font-bold text-vektor-darblue">
+      <div className="border-solid border-2 border-vektor-darblue bg-white space-y-16 p-4 w-full text-center mb-14 dark:bg-neutral-800">
+        <div className="conte mx-8 bg-center font-sans font-bold text-vektor-darblue dark:text-gray-300">
           Disse avdelingene har opptak nå:
         </div>
 
@@ -46,12 +46,12 @@ const Assistenter = (): JSX.Element => {
         ))}
       </div>
 
-      <div className="mb-16" id="tc">
-        <div className="my-2 mb-2 font-bold text-2xl text-center text-vektor-darblue">
+      <div className="mb-16 dark:text-gray-300" id="tc">
+        <div className="my-2 mb-2 font-bold text-2xl text-center text-vektor-darblue dark:text-gray-300">
           Lærerassistent i matematikk
         </div>
 
-        <div className="mb-4">
+        <div className="mb-4 dark:text-gray-300">
           Vektorprogrammet er en studentorganisasjon som sender realfagssterke
           studenter til grunnskolen for å hjelpe elevene med matematikk i
           skoletiden. Vi ser etter deg som lengter etter en mulighet til å lære
@@ -66,7 +66,7 @@ const Assistenter = (): JSX.Element => {
           className="h-80 mt-6 rounded-lg mx-auto"
           alt="vektorbilde"
         />
-        <div className="mt-4">
+        <div className="mt-4 dark:text-gray-300">
           I tillegg vil du få muligheten til å delta på mange sosiale
           arrangementer, alt fra fest og grilling til go-kart, laser tag og
           spillkvelder. Samtidig arrangerer vi populærforedrag som er til for å
@@ -76,8 +76,8 @@ const Assistenter = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="mb-16">
-        <div className="font-bold text-2xl my-2 mb-3 text-vektor-darblue text-center">
+      <div className="mb-16 dark:text-gray-300">
+        <div className="font-bold text-2xl my-2 mb-3 text-vektor-darblue text-center dark:text-gray-300">
           Arbeidsoppgaver
         </div>
 
@@ -93,13 +93,13 @@ const Assistenter = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="text-vektor-darblue font-bold my-8 text-2xl text-center">
+      <div className="text-vektor-darblue font-bold my-8 text-2xl text-center dark:text-gray-300">
         Hvordan blir jeg Vektorassistent?
       </div>
-      <div className="flex flex-row space-x-16">
+      <div className="flex flex-row space-x-16 dark:text-gray-300">
         <div className="flex-1 ...">
-          <ul className="leading-loose whitespace-normal md:whitespace-pre list-disc">
-            <div className="text-vektor-darblue font-bold my-3 text-lg">
+          <ul className="leading-loose whitespace-normal md:whitespace-pre list-disc ">
+            <div className="text-vektor-darblue font-bold my-3 text-lg dark:text-gray-300">
               Opptakskrav
             </div>
 
@@ -114,7 +114,7 @@ const Assistenter = (): JSX.Element => {
         </div>
 
         <div className="flex-2 ...">
-          <div className="font-bold text-vektor-darblue my-3 text-lg">
+          <div className="font-bold text-vektor-darblue my-3 text-lg dark:text-gray-300">
             Opptaksprosessen
           </div>
           <ol className="whitespace-normal md:whitespace-pre list-decimal leading-loose ">
@@ -135,7 +135,7 @@ const Assistenter = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="font-bold text-vektor-darblue text-3xl mt-16 mb-8">
+      <div className="font-bold text-vektor-darblue text-3xl mt-16 mb-8 dark:text-gray-200">
         Søk nå!
       </div>
 
diff --git a/src/pages/public/Assistenter/components/AssistenterCard.tsx b/src/pages/public/Assistenter/components/AssistenterCard.tsx
index 5fcfa47e..d33cfa25 100644
--- a/src/pages/public/Assistenter/components/AssistenterCard.tsx
+++ b/src/pages/public/Assistenter/components/AssistenterCard.tsx
@@ -36,7 +36,7 @@ const TextPictureCard = ({
           className="h-24 mt-6 rounded-lg mx-auto mb-2"
         />
         <div className="font-sans font-bold text-xl text-vektor-darblue text-center p-1 dark:text-blue-300">{title}</div>
-        <div className="font-sans text-center my-1">{text}</div>
+        <div className="font-sans text-center my-1 dark:text-gray-300">{text}</div>
       </div>
 
     </div>
diff --git a/src/pages/public/Assistenter/components/CityCard/Citycard.tsx b/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
index 0b5a47f8..cd335ae1 100644
--- a/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
+++ b/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
@@ -11,7 +11,7 @@ const Tab = (
     city: City,
     open: boolean },
 ): JSX.Element => {
-  const chosenStyle = open ? `tab-active` : `text-vektor-darblue`;
+  const chosenStyle = open ? `tab-active` : `text-vektor-darblue dark:text-gray-300`;
   return (
     <button
       type="button"
@@ -29,7 +29,7 @@ const Tabs = (): JSX.Element => {
   const [openTab, setOpenTab] = React.useState(City.TRONDHEIM);
   return (
     <div className="w-full">
-      <div className="tabs w-full flex text-sm font-medium text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400" role="tablist">
+      <div className="tabs w-full flex text-sm font-medium text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-900" role="tablist">
         {Object.values(City).map((value) => (
           <Tab
             city={value}
@@ -39,7 +39,7 @@ const Tabs = (): JSX.Element => {
           />
         ))}
       </div>
-      <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 border-b-[1px] border-r-[1px] border-l-[1px] px-4 py-5 flex-auto tab-content tab-space">
+      <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 border-b-[1px] border-r-[1px] border-l-[1px] px-4 py-5 flex-auto tab-content tab-space dark:bg-neutral-800">
         <ApplyReg cities={openTab} />
       </div>
     </div>

From 43a13450c1808464109b68027cfbc4493c33e8b2 Mon Sep 17 00:00:00 2001
From: Julia Dai <juliada@stud.ntnu.no>
Date: Tue, 27 Aug 2024 10:47:07 +0200
Subject: [PATCH 2/5] VF-138 Apply dark mode on contact page

---
 .../components/CityCard/Citycard.tsx          |  2 +-
 .../public/Kontakt/components/Division.tsx    | 24 +++++++++----------
 .../public/Kontakt/components/KontaktOss.tsx  |  6 ++---
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/pages/public/Assistenter/components/CityCard/Citycard.tsx b/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
index cd335ae1..ac3df43e 100644
--- a/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
+++ b/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
@@ -15,7 +15,7 @@ const Tab = (
   return (
     <button
       type="button"
-      className={`tab tab-lifted w-1/3 text-base font-bold border-white ${chosenStyle}`}
+      className={`tab tab-lifted w-1/3 text-base font-bold border-white dark:hover:bg-neutral-700 ${chosenStyle}`}
       onClick={onTabClick}
       data-toggle="tab"
       role="tablist"
diff --git a/src/pages/public/Kontakt/components/Division.tsx b/src/pages/public/Kontakt/components/Division.tsx
index cc99d56b..b369de79 100644
--- a/src/pages/public/Kontakt/components/Division.tsx
+++ b/src/pages/public/Kontakt/components/Division.tsx
@@ -22,10 +22,10 @@ const Division = ({
 }:DivisionProps): JSX.Element => {
   return (
     <>
-      <div className="grid grid-cols-2 gap-10">
+      <div className="grid grid-cols-2 gap-10 dark:bg-neutral-800 dark:text-neutral-300">
         <div>
-          <div className="font-bold text-2xl text-blue-800">{name}</div>
-          {subtitle && <div className="text-base">{subtitle}</div>}
+          <div className="font-bold text-2xl text-blue-800 dark:text-neutral-200">{name}</div>
+          {subtitle && <div className="text-base dark:text-neutral-200">{subtitle}</div>}
           {description && <div className="text-base">{description}</div>}
           <div className="flex space-x-1 mt-8">
             <svg className="h-4 w-4 text-balck" width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
@@ -33,7 +33,7 @@ const Division = ({
               <rect x="3" y="5" width="18" height="14" rx="2" />
               <polyline points="3 7 12 13 21 7" />
             </svg>
-            <a className="truncate block max-w-[200px] text-sm hover:underline" href={`mailto:${mail}`}>{mail}</a>
+            <a className="truncate block max-w-[200px] text-sm hover:underline dark:text-vektor-darblue" href={`mailto:${mail}`}>{mail}</a>
           </div>
           {address && (
           <div className="flex space-x-1">
@@ -65,9 +65,9 @@ const Division = ({
           {contactInfos.map((data, id) => {
             return (
               <div className="py-2 mt-5" key={data.name}>
-                <div className="text-blue-800">{contactInfos[id].name}</div>
+                <div className="text-blue-800 dark:text-gray-200">{contactInfos[id].name}</div>
                 {contactInfos[id].title && <div>{contactInfos[id].title}</div>}
-                <a className="text-sm hover:underline" href={`mailto:${contactInfos[id].mail}`}>{contactInfos[id].mail}</a>
+                <a className="text-sm hover:underline dark:text-vektor-darblue" href={`mailto:${contactInfos[id].mail}`}>{contactInfos[id].mail}</a>
               </div>
             );
           })}
@@ -75,27 +75,27 @@ const Division = ({
         </div>
       </div>
       {contact && (
-      <div>
-        <div className="font-bold text-2xl text-blue-800 text-center pt-10">{`Kontakt styret i ${name}`}</div>
+      <div className="dark:bg-neutral-800">
+        <div className="font-bold text-2xl text-blue-800 text-center pt-10 dark:text-gray-200">{`Kontakt styret i ${name}`}</div>
         <form>
           <div className="mb-6 mt-7 grid xl:grid-cols-2 xl:gap-6">
-            <label htmlFor="name" className="block mb-2 text-sm font-medium text-gray-900">
+            <label htmlFor="name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
               Ditt navn
               <input type="name" id="name" className="border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 focus:ring-blue-500 focus:border-blue-500" required />
             </label>
-            <label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-900">
+            <label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
               Din e-post
               <input type="email" id="email" className="border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5" required />
             </label>
           </div>
           <div className="mb-6">
-            <label htmlFor="topic" className="block mb-2 text-sm font-medium text-gray-900">
+            <label htmlFor="topic" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
               Emne
               <input type="topic" id="topic" className="border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5" required />
             </label>
           </div>
           <div className="mb-6">
-            <label htmlFor="message" className="block mb-2 text-sm font-medium text-gray-900">
+            <label htmlFor="message" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
               Melding
               <textarea id="message" rows={6} className="block p-2.5 w-full text-sm text-gray-900 rounded-lg border border-gray-300" />
             </label>
diff --git a/src/pages/public/Kontakt/components/KontaktOss.tsx b/src/pages/public/Kontakt/components/KontaktOss.tsx
index 5faa57cc..e737ef1d 100644
--- a/src/pages/public/Kontakt/components/KontaktOss.tsx
+++ b/src/pages/public/Kontakt/components/KontaktOss.tsx
@@ -103,12 +103,12 @@ const Tabs = ({
     <div className="w-full">
       <div className="flex font-medium text-center border-b" role="tablist">
         {divisions.map((data) => {
-          const chosenStyle = openTab === data.number ? `border-t-gray-200 border-l-gray-200 border-r-gray-200 border-b-white text-vektor-darblue z-50` : `text-vektor-darblue z-50`;
+          const chosenStyle = openTab === data.number ? `border-t-gray-200 border-l-gray-200 border-r-gray-200 border-b-white text-vektor-darblue z-50 dark:bg-neutral-800 dark:text-neutral-200 dark:border-t-white dark:border-l-white dark:border-r-white` : `text-vektor-darblue z-50 dark:hover:bg-neutral-700 dark:border-b-white`;
           return (
             <div className="flex-auto text-center border-gray-200 border-b-2 -mb-[2px]" key={data.name}>
               <button
                 type="button"
-                className={`rounded-t-lg -mb-[2px] z-50 text-base w-full font-bold py-3 border-b-gray-200 hover:border-2 hover:border-gray-200 hover:text-vektor-blue border-2 border-b-2 border-white ${chosenStyle}`}
+                className={`rounded-t-lg -mb-[2px] z-50 text-base w-full font-bold py-3 border-b-gray-200 hover:border-2 hover:border-t-gray-200 hover:text-vektor-blue border-2 border-b-2 border-white dark:border-transparent ${chosenStyle}`}
                 onClick={(e) => {
                   e.preventDefault();
                   setOpenTab(data.number);
@@ -122,7 +122,7 @@ const Tabs = ({
           );
         })}
       </div>
-      <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 border-b-2 border-r-2 border-l-2 px-4 py-5">
+      <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 border-b-2 border-r-2 border-l-2 px-4 py-5 dark:bg-neutral-800">
         <TrondheimTab open={openTab === 1} />
         <AasTab open={openTab === 2} />
         <BergenTab open={openTab === 3} />

From be37e7c25767592e02462486b15f04f05c5a85ab Mon Sep 17 00:00:00 2001
From: Julia Dai <juliada@stud.ntnu.no>
Date: Fri, 30 Aug 2024 09:42:23 +0200
Subject: [PATCH 3/5] VF-138 Add darkmode to Utlegg table

---
 src/pages/public/User/components/Utlegg.tsx | 32 ++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/pages/public/User/components/Utlegg.tsx b/src/pages/public/User/components/Utlegg.tsx
index ecf6c1bd..65179136 100644
--- a/src/pages/public/User/components/Utlegg.tsx
+++ b/src/pages/public/User/components/Utlegg.tsx
@@ -26,12 +26,12 @@ const Utlegg: React.FC = () => {
 
   const mapToTable = (utlegg: Utlegg[]) => {
     return utlegg.map((u, index) => (
-      <tr key={index.valueOf()} className="bg-white">
+      <tr key={index.valueOf()} className="bg-white dark:bg-neutral-600">
         <td className="py-3 px-6 sm:px-3">{u.Id}</td>
         <td className="py-3 px-4 sm:px-2">{u.utleggsdato}</td>
         <td className="py-3 px-20 sm:px-10">{u.beskrivelse}</td>
         <td className="py-3 px-10 sm:px-5">{u.sum}</td>
-        <td className="py-3 px-6 sm:px-3 text-blue-600 hover:font-semibold">
+        <td className="py-3 px-6 sm:px-3 text-blue-600 hover:underline">
           {u.kvittering}
         </td>
         <td
@@ -41,7 +41,7 @@ const Utlegg: React.FC = () => {
         >
           {u.status}
         </td>
-        <td className="py-3 px-4 text-blue-600 hover:font-semibold">
+        <td className="py-3 px-4 text-blue-600 hover:underline">
           {u.status === "Til behandling" && (
             <>
               Rediger
@@ -50,7 +50,7 @@ const Utlegg: React.FC = () => {
             </>
           )}
         </td>
-        <td className="py-3 px-4 text-rose-600 hover:font-semibold">
+        <td className="py-3 px-4 text-rose-600 hover:underline">
           {u.status === "Til behandling" && (
             <>
               Slett
@@ -97,8 +97,8 @@ const Utlegg: React.FC = () => {
   return (
     <div>
       {showConfirmation && <Bekreftelse />}
-      <div className="leading-relaxed font-sans max-w-md mx-auto md:max-w-2xl flex flex-col justify-center items-center ">
-        <h1 className="font-sans max-w-2xl mt-16 text-vektor-darblue text-4xl text-center font-bold mx-3">
+      <div className="leading-relaxed font-sans max-w-md mx-auto md:max-w-2xl flex flex-col justify-center items-center dark:text-gray-300">
+        <h1 className="font-sans max-w-2xl mt-16 text-vektor-darblue text-4xl text-center font-bold mx-3 dark:text-gray-300">
           Utlegg
         </h1>
         <div className="mt-4 mb-10 text-xl">
@@ -107,7 +107,7 @@ const Utlegg: React.FC = () => {
           som bekrefter utlegget ditt.
         </div>
 
-        <h1 className="font-sans max-w-2xl mt-2 text-vektor-darblue text-2xl text-center font-bold mx-3">
+        <h1 className="font-sans max-w-2xl mt-2 text-vektor-darblue text-2xl text-center font-bold mx-3 dark:text-gray-300">
           Hva kan jeg få refundert?
         </h1>
         <div className="mt-4 mb-20 text-lg">
@@ -122,7 +122,7 @@ const Utlegg: React.FC = () => {
           </a>
         </div>
 
-        <h1 className="font-sans max-w-2xl mb-4 text-vektor-darblue text-2xl text-center font-bold mx-3">
+        <h1 className="font-sans max-w-2xl mb-4 text-vektor-darblue text-2xl text-center font-bold mx-3 dark:text-gray-300">
           Mine utlegg
         </h1>
       </div>
@@ -161,20 +161,20 @@ const Utlegg: React.FC = () => {
           <table className="table-fixed text-left divide-y divide-gray-300 text-base block overflow-x-auto border-t-2 border-b-2 dark:text-gray-300 mx-10">
             <thead>
               <tr>
-                <th className="w-1/12 py-3 px-6 sm:px-3 bg-table-grey">Id</th>
-                <th className="w-1/12 py-3 px-4 sm:px-2 bg-table-grey">
+                <th className="w-1/12 py-3 px-6 sm:px-3 bg-table-grey dark:bg-neutral-700">Id</th>
+                <th className="w-1/12 py-3 px-4 sm:px-2 bg-table-grey dark:bg-neutral-700">
                   Utleggsdato
                 </th>
-                <th className="w-3/12 py-3 px-20 sm:px-10 bg-table-grey">
+                <th className="w-3/12 py-3 px-20 sm:px-10 bg-table-grey dark:bg-neutral-700">
                   Beskrivelse
                 </th>
-                <th className="w-2/12 py-3 px-10 sm:px-5 bg-table-grey">Sum</th>
-                <th className="w-3/12 py-3 px-6 sm:px-3 bg-table-grey">
+                <th className="w-2/12 py-3 px-10 sm:px-5 bg-table-grey dark:bg-neutral-700">Sum</th>
+                <th className="w-3/12 py-3 px-6 sm:px-3 bg-table-grey dark:bg-neutral-700">
                   Kvittering
                 </th>
-                <th className="w-3/12 py-3 px-6 bg-table-grey">Status</th>
-                <th className="w-1/12 py-3 px-4 bg-table-grey" aria-label="Empty Cell" />
-                <th className="w-1/12 py-3 px-4 bg-table-grey" aria-label="Empty Cell" />
+                <th className="w-3/12 py-3 px-6 bg-table-grey dark:bg-neutral-700">Status</th>
+                <th className="w-1/12 py-3 px-4 bg-table-grey dark:bg-neutral-700" aria-label="Empty Cell" />
+                <th className="w-1/12 py-3 px-4 bg-table-grey dark:bg-neutral-700" aria-label="Empty Cell" />
               </tr>
             </thead>
             <tbody>{mapToTable(MineUtlegg)}</tbody>

From 800b96d775a8575fb85d52e0c7e769639041762a Mon Sep 17 00:00:00 2001
From: Julia Dai <juliada@stud.ntnu.no>
Date: Fri, 30 Aug 2024 10:34:09 +0200
Subject: [PATCH 4/5] VF-138 fix header darkmode

---
 src/components/Header/MobileMenu.tsx | 4 ++--
 src/components/Header/UserAvatar.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Header/MobileMenu.tsx b/src/components/Header/MobileMenu.tsx
index 7c51c007..80b13ed7 100644
--- a/src/components/Header/MobileMenu.tsx
+++ b/src/components/Header/MobileMenu.tsx
@@ -22,7 +22,7 @@ const MobileMenu = (props: Props): JSX.Element => {
   } = props;
   return (
     <div className="fixed vektor-font">
-      <div className="relative md:hidden z-10 flex shadow-md w-screen text-3xl bg-white">
+      <div className="relative md:hidden z-10 flex shadow-md w-screen text-3xl bg-white dark:bg-neutral-700">
         <div
           role="button"
           tabIndex={0}
@@ -36,7 +36,7 @@ const MobileMenu = (props: Props): JSX.Element => {
           <span className={`hamburger-span mt-6 ${menuOpen ? "bottom-bun" : ""}`} />
         </div>
         <Link
-          className="relative font-bold vektor-dark-blue text-2xl flex my-3 m-auto"
+          className="relative font-bold vektor-dark-blue text-2xl flex my-3 m-auto dark:text-white"
           onClick={() => {
             if (menuOpen) { setMenuOpen(!menuOpen); }
           }}
diff --git a/src/components/Header/UserAvatar.tsx b/src/components/Header/UserAvatar.tsx
index 721acd3f..ab79deac 100644
--- a/src/components/Header/UserAvatar.tsx
+++ b/src/components/Header/UserAvatar.tsx
@@ -9,7 +9,7 @@ const UserAvatar = () => {
           <img src="https://placekitten.com/80/80" alt="profile avatar" />
         </div>
       </div>
-      <ul className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
+      <ul className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52 dark:bg-neutral-700 dark:text-white">
         <li>
           <Link reloadDocument to="/kontrollpanel">
             Kontrollpanel

From b141156793da6fd83d3f9a370fea2f82990e9213 Mon Sep 17 00:00:00 2001
From: Julia Dai <juliada@stud.ntnu.no>
Date: Tue, 3 Sep 2024 09:44:31 +0200
Subject: [PATCH 5/5] VF-138 minor darkmode fixes in mainpage and header

---
 src/components/Header/AppHeader.tsx                       | 2 +-
 .../public/Assistenter/components/CityCard/Citycard.tsx   | 2 +-
 src/pages/public/mainPage.tsx                             | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx
index 6efe3201..cce1e7f4 100644
--- a/src/components/Header/AppHeader.tsx
+++ b/src/components/Header/AppHeader.tsx
@@ -28,7 +28,7 @@ const AppHeader = (): JSX.Element => {
   ));
 
   return (
-    <nav className="md:sticky top-0  z-50 bg-[rgba(226,244,250,0.9)] backdrop-blur-sm">
+    <nav className="md:sticky top-0  z-50 bg-[rgba(226,244,250,0.9)] backdrop-blur-sm dark:bg-[#2a2a2a]">
       <div className="hidden md:flex p-1 justify-between lg:px-8 w-full">
         <div className="w-fit justify-center flex">
           <Link to="/">
diff --git a/src/pages/public/Assistenter/components/CityCard/Citycard.tsx b/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
index e983cfee..acddf14a 100644
--- a/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
+++ b/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
@@ -11,7 +11,7 @@ const Tab = ({
   city: City;
   open: boolean;
 }): JSX.Element => {
-  const chosenStyle = open ? `tab-active` : `text-vektor-darblue dark:text-gray-300`;
+  const chosenStyle = open ? `tab-active dark:text-vektor-darblue` : `text-vektor-darblue dark:text-gray-300`;
   return (
     <button
       type="button"
diff --git a/src/pages/public/mainPage.tsx b/src/pages/public/mainPage.tsx
index e7ee457e..e0401919 100644
--- a/src/pages/public/mainPage.tsx
+++ b/src/pages/public/mainPage.tsx
@@ -67,11 +67,11 @@ const mainPage = (): JSX.Element => {
           />
         </div>
         <div className="mt-16 w-full md:w-1/2 p-10 md:mr-auto md:mt-24 md:text-left text-center">
-          <h1 className="hidden md:block text-4xl font-bold mb-4">
+          <h1 className="hidden md:block text-4xl font-bold mb-4 dark:text-white">
             Vektorprogrammet
           </h1>
           <div className="mt-6 mb-4 flex md:block justify-center">
-            <p className="text-xl text-left w-4/5">
+            <p className="text-xl text-left w-4/5 dark:text-white">
               - sender studenter til ungdomsskoler for å hjelpe til som
               lærerens assistent i matematikkundervisningen
             </p>
@@ -111,7 +111,7 @@ const mainPage = (): JSX.Element => {
       </div>
       {/*Middle end*/}
       <div className="mt-32 mb-32">
-        <div className="text-center font-bold">
+        <div className="text-center font-bold dark:text-gray-200">
           <h1 className="text-4xl">Hovedsponsorer</h1>
         </div>
         <div className="flex mx-96 mt-12">
@@ -128,7 +128,7 @@ const mainPage = (): JSX.Element => {
             />
           </div>
         </div>
-        <div className="text-center mt-32 font-bold">
+        <div className="text-center mt-32 font-bold dark:text-gray-200">
           <h1 className="text-4xl">Sponsorer og samarbeidspartnere</h1>
         </div>
         <div className="flex mx-96 mt-12">