From b2e8584d0b2a818d165a34f53fc8c12a136b74e2 Mon Sep 17 00:00:00 2001
From: Julia Dai <125892682+juliadai8@users.noreply.github.com>
Date: Fri, 11 Oct 2024 11:17:58 +0200
Subject: [PATCH] =?UTF-8?q?Vf=20138=20legge=20til=20darkmode=20p=C3=A5=20s?=
 =?UTF-8?q?iden=20(#315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* VF-138 Apply darkmode styling on assistent page

* VF-138 Apply dark mode on contact page

* VF-138 Add darkmode to Utlegg table

* VF-138 fix header darkmode

* VF-138 minor darkmode fixes in mainpage and header

---------

Co-authored-by: Filip Skaug <filis@stud.ntnu.no>
---
 src/components/Header/AppHeader.tsx           |  9 ++----
 src/components/Header/MobileMenu.tsx          |  4 +--
 src/components/Header/UserAvatar.tsx          |  2 +-
 .../Assistenter/components/ApplyReg.tsx       | 11 ++++---
 .../Assistenter/components/Assistenter.tsx    | 32 +++++++++----------
 .../components/AssistenterCard.tsx            |  2 +-
 .../components/CityCard/Citycard.tsx          |  8 ++---
 .../public/Kontakt/components/Division.tsx    | 24 +++++++-------
 .../public/Kontakt/components/KontaktOss.tsx  |  8 ++---
 src/pages/public/User/components/Utlegg.tsx   | 32 +++++++++----------
 src/pages/public/mainPage.tsx                 |  8 ++---
 11 files changed, 68 insertions(+), 72 deletions(-)

diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx
index 6efe3201..aeb7239a 100644
--- a/src/components/Header/AppHeader.tsx
+++ b/src/components/Header/AppHeader.tsx
@@ -28,19 +28,14 @@ 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="/">
             <img
               src="/images/vektor-logo.svg"
               alt="vektorprogrammet logo"
-              className="h-16 lg:h-20 dark:hidden"
-            />
-            <img
-              src="/images/vektor-logo-darkmode.png"
-              alt="vektorprogrammet logo"
-              className="h-16 lg:h-20 hidden dark:block"
+              className="h-16 lg:h-20"
             />
           </Link>
         </div>
diff --git a/src/components/Header/MobileMenu.tsx b/src/components/Header/MobileMenu.tsx
index 9f2311b9..0f1438b2 100644
--- a/src/components/Header/MobileMenu.tsx
+++ b/src/components/Header/MobileMenu.tsx
@@ -27,7 +27,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}
@@ -47,7 +47,7 @@ const MobileMenu = (props: Props): JSX.Element => {
           />
         </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 1d3e7758..b967b421 100644
--- a/src/components/Header/UserAvatar.tsx
+++ b/src/components/Header/UserAvatar.tsx
@@ -8,7 +8,7 @@ const UserAvatar = () => {
           <img src="/images/team/IT-Tor.png" alt="profile avatar" />
         </div>
       </div>
-      <ul className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-[#EDF8FC] text-[#313131] rounded-box w-52">
+      <ul className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-[#EDF8FC] text-[#313131] rounded-box w-52 dark:bg-neutral-700 dark:text-white">
         <li>
           <Link reloadDocument to="/kontrollpanel">
             Kontrollpanel
diff --git a/src/pages/public/Assistenter/components/ApplyReg.tsx b/src/pages/public/Assistenter/components/ApplyReg.tsx
index 708d06dc..fa427b7a 100644
--- a/src/pages/public/Assistenter/components/ApplyReg.tsx
+++ b/src/pages/public/Assistenter/components/ApplyReg.tsx
@@ -1,14 +1,15 @@
 export const ApplyCard = (props: any) => {
   const { cities } = props;
   return (
-    <form>
-      <h1 className="text-xl my-8 text-vektor-darblue font-bold text-center">
+    <form className="dark:bg-neutral-800">
+
+      <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
             type="fornavn"
@@ -81,7 +82,7 @@ export const ApplyCard = (props: any) => {
           Søk nå!
         </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 8e974e8b..fb9bf4e5 100644
--- a/src/pages/public/Assistenter/components/Assistenter.tsx
+++ b/src/pages/public/Assistenter/components/Assistenter.tsx
@@ -14,15 +14,15 @@ const Assistenter = (): JSX.Element => {
     });
 
   return (
-    <div className="leading-relaxed font-sans flex flex-col justify-center items-center mt-10">
-        <h1 className="font-sans max-w-2xl mt-10 text-vektor-darblue text-4xl text-center font-bold mx-3">
+    <div className="leading-relaxed font-sans flex flex-col justify-center items-center dark:text-gray-300 mt-10">
+        <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-8 mb-20 text-xl w-3/5">
         {ingress}
         </div>
-      <div className="space-y-20 p-10 w-full text-center mb-14 border-secondary">
-        <div className="conte mx-8 bg-center font-sans font-bold text-secondary">
+      <div className="space-y-20 p-10 w-full text-center mb-14 border-secondary dark:bg-neutral-800">
+        <div className="conte mx-8 bg-center font-sans font-bold text-secondary dark:text-gray-300">
           Disse avdelingene har opptak nå:
         </div>
         <button
@@ -49,11 +49,11 @@ const Assistenter = (): JSX.Element => {
           ))}
         </div>
       </div>
-      <div className="mb-16 flex flex-col items-center" id="tc">
-        <div className="my-2 mb-2 font-bold text-2xl text-secondary w-fit">
+      <div className="mb-16 flex flex-col items-center dark:text-gray-300" id="tc">
+        <div className="my-2 mb-2 font-bold text-2xl text-secondary w-fit dark:text-gray-300">
           Lærerassistent i matematikk
         </div>
-        <div className="mb-4 w-3/5">
+        <div className="mb-4 w-3/5 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
@@ -68,7 +68,7 @@ const Assistenter = (): JSX.Element => {
           className="h-80 mt-6 rounded-lg mx-auto"
           alt="vektorbilde"
         />
-        <div className="mt-4 w-3/5">
+        <div className="mt-4 w-3/5 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 å
@@ -78,8 +78,8 @@ const Assistenter = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="mb-16 flex flex-col items-center">
-        <div className="font-bold text-2xl my-2 mb-3 text-vektor-darblue text-center">
+      <div className="mb-16 flex flex-col items-center 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>
 
@@ -94,13 +94,13 @@ const Assistenter = (): JSX.Element => {
           blir satt stor pris på av både barn og lærere!
         </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 e3a5d475..6916123e 100644
--- a/src/pages/public/Assistenter/components/AssistenterCard.tsx
+++ b/src/pages/public/Assistenter/components/AssistenterCard.tsx
@@ -34,7 +34,7 @@ const TextPictureCard = ({ title, text, imgPath, alt }: Props): JSX.Element => {
         <div className="font-sans font-bold text-xl text-primary text-center p-1">
           {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 4f68c829..acddf14a 100644
--- a/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
+++ b/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
@@ -11,11 +11,11 @@ const Tab = ({
   city: City;
   open: boolean;
 }): JSX.Element => {
-  const chosenStyle = open ? `tab-active` : `text-vektor-darblue`;
+  const chosenStyle = open ? `tab-active dark:text-vektor-darblue` : `text-vektor-darblue dark:text-gray-300`;
   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"
@@ -30,7 +30,7 @@ const Tabs = (): JSX.Element => {
   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"
+        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) => (
@@ -42,7 +42,7 @@ const Tabs = (): JSX.Element => {
           />
         ))}
       </div>
-      <div className="relative flex flex-col min-w-0 break-words 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 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>
diff --git a/src/pages/public/Kontakt/components/Division.tsx b/src/pages/public/Kontakt/components/Division.tsx
index e4668367..a568d625 100644
--- a/src/pages/public/Kontakt/components/Division.tsx
+++ b/src/pages/public/Kontakt/components/Division.tsx
@@ -28,10 +28,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
@@ -50,7 +50,7 @@ const Division = ({
               <polyline points="3 7 12 13 21 7" />
             </svg>
             <a
-              className="truncate block max-w-[200px] text-sm hover:underline"
+              className="truncate block max-w-[200px] text-sm hover:underline dark:text-vektor-darblue"
               href={`mailto:${mail}`}
             >
               {mail}
@@ -113,10 +113,10 @@ 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"
+                  className="text-sm hover:underline dark:text-vektor-darblue"
                   href={`mailto:${contactInfos[id].mail}`}
                 >
                   {contactInfos[id].mail}
@@ -127,13 +127,13 @@ 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"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Ditt navn
                 <input
@@ -145,7 +145,7 @@ const Division = ({
               </label>
               <label
                 htmlFor="email"
-                className="block mb-2 text-sm font-medium text-gray-900"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Din e-post
                 <input
@@ -159,7 +159,7 @@ const Division = ({
             <div className="mb-6">
               <label
                 htmlFor="topic"
-                className="block mb-2 text-sm font-medium text-gray-900"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Emne
                 <input
@@ -173,7 +173,7 @@ const Division = ({
             <div className="mb-6">
               <label
                 htmlFor="message"
-                className="block mb-2 text-sm font-medium text-gray-900"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Melding
                 <textarea
diff --git a/src/pages/public/Kontakt/components/KontaktOss.tsx b/src/pages/public/Kontakt/components/KontaktOss.tsx
index ab8193e8..51ed4db3 100644
--- a/src/pages/public/Kontakt/components/KontaktOss.tsx
+++ b/src/pages/public/Kontakt/components/KontaktOss.tsx
@@ -164,8 +164,8 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => {
         {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";
+              ? "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]"
@@ -173,7 +173,7 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => {
             >
               <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);
@@ -187,7 +187,7 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => {
           );
         })}
       </div>
-      <div className="relative flex flex-col min-w-0 break-words 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 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} />
diff --git a/src/pages/public/User/components/Utlegg.tsx b/src/pages/public/User/components/Utlegg.tsx
index 14ea438f..c641b6f9 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,14 +41,14 @@ 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 <FontAwesomeIcon icon={faPencil} />
             </>
           )}
         </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 <FontAwesomeIcon icon={faTrashCan} />
@@ -93,8 +93,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">
@@ -103,7 +103,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">
@@ -118,7 +118,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>
@@ -155,24 +155,24 @@ 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-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"
+                  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"
+                  className="w-1/12 py-3 px-4 bg-table-grey dark:bg-neutral-700"
                   aria-label="Empty Cell"
                 />
               </tr>
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">