From 18b3878685166c950ef408b1698ccdf33efead5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Str=C3=B8mseng?= <magnus.stromseng@gmail.com>
Date: Wed, 28 Feb 2024 11:15:51 +0100
Subject: [PATCH] 112 fix tailwind colors on homepage (#113)

* change and fix most colors

* update color usage

* feat(frontend): :sparkles: add ntnu logo component that automaticaly applies darkmode
---
 frontend/public/images/ntnu-black.svg         | 106 ++++++++++++++++++
 frontend/public/images/ntnu-white.svg         | 106 ++++++++++++++++++
 frontend/src/app/globals.css                  |  34 +++---
 frontend/src/app/page.tsx                     |   2 +-
 frontend/src/components/Footer.tsx            |  19 +---
 frontend/src/components/Navbar.tsx            |   4 +-
 frontend/src/components/map/MyGlobe.tsx       |   2 +-
 frontend/src/components/ntnu/NTNULogo.tsx     |   8 ++
 .../src/components/ntnu/NTNULogoImage.tsx     |  26 +++++
 frontend/tailwind.config.ts                   |   6 +-
 10 files changed, 278 insertions(+), 35 deletions(-)
 create mode 100644 frontend/public/images/ntnu-black.svg
 create mode 100644 frontend/public/images/ntnu-white.svg
 create mode 100644 frontend/src/components/ntnu/NTNULogo.tsx
 create mode 100644 frontend/src/components/ntnu/NTNULogoImage.tsx

diff --git a/frontend/public/images/ntnu-black.svg b/frontend/public/images/ntnu-black.svg
new file mode 100644
index 0000000..a95c895
--- /dev/null
+++ b/frontend/public/images/ntnu-black.svg
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="ntnulogo"
+   width="171.20096mm"
+   height="31.569372mm"
+   viewBox="0 0 485.29302 89.487796"
+   sodipodi:docname="phpmuNEsG"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs" />
+  <g
+     transform="matrix(2,0,0,2,0,-6.806602)"
+     id="g">
+    <path
+       d="M 33.081001,17.082001 H 11.024 v 22.062 h 22.057001 z m 0,33.084999 H 11.024 C 4.935,50.167 0,45.23 0,39.144001 v -22.062 C 0,10.998 4.935,6.062 11.024,6.062 h 22.057001 c 6.087998,0 11.022,4.936 11.022,11.020001 v 22.062 c 0,6.085999 -4.934002,11.022999 -11.022,11.022999 z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,0,53.570301)"
+       fill="#000000"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="logo-firkant" />
+    <path
+       d="m 0,0 c -4.997,0 -9.046,-4.054 -9.046,-9.049 0,-4.998 4.049,-9.045999 9.046,-9.045999 4.996,0 9.046,4.047999 9.046,9.045999 C 9.046,-4.054 4.996,0 0,0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,21.978201,16.333)"
+       fill="#000000"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="logo-runding" />
+    <path
+       d="M 0,0 21.479,-31.225 V -7.2 l -0.062,5.714 H 14.962 V 0 H 28.805 V -1.486 H 23.466 L 23.404,-7.2 V -44.386002 L 22.411,-44.696999 -6.394,-2.792 v -33.649002 l 0.061,-5.896 H 0.308 V -43.827 h -14.337 v 1.489998 h 5.71 l 0.061,5.896 V -7.2 l -0.061,5.714 h -5.71 V 0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,74.955803,3.4502)"
+       fill="#000000"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="n1" />
+    <path
+       d="m 0,0 v -14.027 h -1.863 c -0.187,2.172 -0.436,4.901 -2.36,8.131 -2.234,3.786 -5.277,3.974 -8.256,4.098 h -3.478 l -0.06,-5.588 v -28.616998 l 0.06,-6.334004 H -9.25 V -43.827 h -20.361 v 1.489998 h 6.702 l 0.064,6.334004 V -7.386 l -0.064,5.588 h -2.855999 c -3.600001,-0.062 -6.330002,-0.062 -8.938,-4.221 -2.048,-3.292 -2.235001,-5.899 -2.360001,-8.008 h -1.799 V 0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,146.5964,3.4502)"
+       fill="#000000"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="t" />
+    <path
+       d="M 0,0 21.479,-31.225 V -7.2 l -0.061,5.714 H 14.961 V 0 H 28.804001 V -1.486 H 23.465 L 23.402,-7.2 V -44.386002 L 22.409,-44.696999 -6.396,-2.792 v -33.649002 l 0.063,-5.896 H 0.312 V -43.827 h -14.343 v 1.489998 h 5.714 l 0.058,5.896 V -7.2 l -0.058,5.714 h -5.714 V 0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,164.2263,3.4502)"
+       fill="#000000"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="n2" />
+    <path
+       d="m 0,0 v -1.486 h -6.148 l -0.059,-5.28 V -30.48 c 0.059,-6.145999 0.186,-11.979999 11.732,-11.979999 11.67,0 12.415001,5.09 12.6,10.615 V -6.766 l -0.06,5.28 H 11.797 V 0 H 25.511999 V -1.486 H 20.115 l -0.062,-5.28 v -22.598 c -0.065,-8.131998 -0.126,-15.082999 -16.204,-15.082999 -2.294,0 -7.761,0.246998 -11.235,1.675999 -5.525,2.359001 -5.649,7.200001 -5.712,13.160999 V -6.766 l -0.063,5.28 H -18.5 V 0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,217.13451,3.4502)"
+       fill="#000000"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="u" />
+  </g>
+</svg>
diff --git a/frontend/public/images/ntnu-white.svg b/frontend/public/images/ntnu-white.svg
new file mode 100644
index 0000000..a47cae7
--- /dev/null
+++ b/frontend/public/images/ntnu-white.svg
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="ntnulogo"
+   width="171.20096mm"
+   height="31.569372mm"
+   viewBox="0 0 485.29302 89.487796"
+   sodipodi:docname="phpdcIw9v"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs" />
+  <g
+     transform="matrix(2,0,0,2,0,-6.806602)"
+     id="g">
+    <path
+       d="M 33.081001,17.082001 H 11.024 v 22.062 h 22.057001 z m 0,33.084999 H 11.024 C 4.935,50.167 0,45.23 0,39.144001 v -22.062 C 0,10.998 4.935,6.062 11.024,6.062 h 22.057001 c 6.087998,0 11.022,4.936 11.022,11.020001 v 22.062 c 0,6.085999 -4.934002,11.022999 -11.022,11.022999 z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,0,53.570301)"
+       fill="#ffffff"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="logo-firkant" />
+    <path
+       d="m 0,0 c -4.997,0 -9.046,-4.054 -9.046,-9.049 0,-4.998 4.049,-9.045999 9.046,-9.045999 4.996,0 9.046,4.047999 9.046,9.045999 C 9.046,-4.054 4.996,0 0,0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,21.978201,16.333)"
+       fill="#ffffff"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="logo-runding" />
+    <path
+       d="M 0,0 21.479,-31.225 V -7.2 l -0.062,5.714 H 14.962 V 0 H 28.805 V -1.486 H 23.466 L 23.404,-7.2 V -44.386002 L 22.411,-44.696999 -6.394,-2.792 v -33.649002 l 0.061,-5.896 H 0.308 V -43.827 h -14.337 v 1.489998 h 5.71 l 0.061,5.896 V -7.2 l -0.061,5.714 h -5.71 V 0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,74.955803,3.4502)"
+       fill="#ffffff"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="n1" />
+    <path
+       d="m 0,0 v -14.027 h -1.863 c -0.187,2.172 -0.436,4.901 -2.36,8.131 -2.234,3.786 -5.277,3.974 -8.256,4.098 h -3.478 l -0.06,-5.588 v -28.616998 l 0.06,-6.334004 H -9.25 V -43.827 h -20.361 v 1.489998 h 6.702 l 0.064,6.334004 V -7.386 l -0.064,5.588 h -2.855999 c -3.600001,-0.062 -6.330002,-0.062 -8.938,-4.221 -2.048,-3.292 -2.235001,-5.899 -2.360001,-8.008 h -1.799 V 0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,146.5964,3.4502)"
+       fill="#ffffff"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="t" />
+    <path
+       d="M 0,0 21.479,-31.225 V -7.2 l -0.061,5.714 H 14.961 V 0 H 28.804001 V -1.486 H 23.465 L 23.402,-7.2 V -44.386002 L 22.409,-44.696999 -6.396,-2.792 v -33.649002 l 0.063,-5.896 H 0.312 V -43.827 h -14.343 v 1.489998 h 5.714 l 0.058,5.896 V -7.2 l -0.058,5.714 h -5.714 V 0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,164.2263,3.4502)"
+       fill="#ffffff"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="n2" />
+    <path
+       d="m 0,0 v -1.486 h -6.148 l -0.059,-5.28 V -30.48 c 0.059,-6.145999 0.186,-11.979999 11.732,-11.979999 11.67,0 12.415001,5.09 12.6,10.615 V -6.766 l -0.06,5.28 H 11.797 V 0 H 25.511999 V -1.486 H 20.115 l -0.062,-5.28 v -22.598 c -0.065,-8.131998 -0.126,-15.082999 -16.204,-15.082999 -2.294,0 -7.761,0.246998 -11.235,1.675999 -5.525,2.359001 -5.649,7.200001 -5.712,13.160999 V -6.766 l -0.063,5.28 H -18.5 V 0 Z"
+       stroke="none"
+       stroke-width="1"
+       stroke-linecap="butt"
+       stroke-linejoin="miter"
+       stroke-miterlimit="4"
+       stroke-opacity="1"
+       transform="matrix(1,0,0,-1,217.13451,3.4502)"
+       fill="#ffffff"
+       fill-rule="nonzero"
+       fill-opacity="1"
+       id="u" />
+  </g>
+</svg>
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index f0afa48..2427c3e 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -13,7 +13,7 @@
         --secondary: 210 40% 96.1%;
         --secondary-foreground: 222.2 47.4% 11.2%;
 
-        --muted: 210 40% 96.1%;
+        --muted: 0 0% 96.08%;
         --muted-foreground: 215.4 16.3% 46.9%;
 
         --destructive: 0 84.2% 60.2%;
@@ -25,24 +25,26 @@
 
         --radius: 0.5rem;
 
+        --background: 0 0% 100%; /* FFFFFF */
+        --foreground: 0 0% 0%; /* 000000 */
+        --accent: 210 40% 96.1%; /* f1f5f9 */
+
         /* NTNU colors */
-        --background: 150, 7%, 6%; /* 0E100F */
-        --foreground: 0, 0%, 100%; /* FFFFFF */
-        --accent: 182, 41%, 71%; /* 97D2D4 */
-        --primary: 210, 100%, 31%; /* 00509E */
-        --ntnuBlue: 210, 100%, 31%; /* 00509E */
-        --ntnuCyan: 182, 41%, 71%; /* 97D2D4 */
-        --ntnuPurple: 271, 23%, 50%; /* 7F619C */
-        --ntnuOrange: 29, 87%, 68%; /* F4AC67 */
-        --ntnuYellow: 251, 223, 123; /* FBDF7B */
-        --ntnuLightblue: 47, 94%, 73%; /* 9DB7E1 */
-        --ntnuPink: 319, 44%, 61%; /* C871AC */
-        --ntnuBrown: 40, 44%, 78%; /* E0D0AF */
+        --primary: 210 100% 31%; /* 00509E */
+        --ntnuBlue: 210 100% 31%; /* 00509E */
+        --ntnuBlue-foreground: 0 0% 100%; /* FFFFFF */
+        --ntnuCyan: 182 41% 71%; /* 97D2D4 */
+        --ntnuPurple: 271 23% 50%; /* 7F619C */
+        --ntnuOrange: 29 87% 68%; /* F4AC67 */
+        --ntnuYellow: 251 223 123; /* FBDF7B */
+        --ntnuLightblue: 47 94% 73%; /* 9DB7E1 */
+        --ntnuPink: 319 44% 61%; /* C871AC */
+        --ntnuBrown: 40 44% 78%; /* E0D0AF */
     }
 
     .dark {
-        --background: 222.2 84% 4.9%;
-        --foreground: 210 40% 98%;
+        --background: 150 7% 6%; /* 0e100f */
+        --foreground: 54 100% 94%; /* fffce1 */
 
         --card: 222.2 84% 4.9%;
         --card-foreground: 210 40% 98%;
@@ -56,7 +58,7 @@
         --secondary: 217.2 32.6% 17.5%;
         --secondary-foreground: 210 40% 98%;
 
-        --muted: 217.2 32.6% 17.5%;
+        --muted: 0 0% 2%;
         --muted-foreground: 215 20.2% 65.1%;
 
         --accent: 217.2 32.6% 17.5%;
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index dcb69d4..7e2ca27 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -23,7 +23,7 @@ export default function Home() {
                 id="about-us"
                 className="flex flex-col items-center py-12 px-8"
             >
-                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl bg-ntnuBlue">
+                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl">
                     <h1>
                         Empowering Space Exploration One Satellite at a Time
                     </h1>
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 2691891..53975a3 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,18 +1,11 @@
-import Image from "next/image";
+import NTNULogo from "./ntnu/NTNULogo";
 
 export default function Footer() {
     return (
-        <footer className="p-4 bg-slate-700 text-white flex flex-col items-center">
+        <footer className="p-4 bg-background text-foreground flex flex-col items-center">
             <div className="flex flex-row items-center justify-between w-full">
                 <div className="flex-1 flex justify-start">
-                    <Image
-                        src={
-                            "https://www.ntnu.edu/o/ntnu-theme/images/logo_ntnu_tag_english.svg"
-                        }
-                        alt={"NTNU"}
-                        width={200}
-                        height={50}
-                    />
+                    <NTNULogo />
                 </div>
 
                 <div className="flex-1 flex justify-center">
@@ -37,10 +30,8 @@ export default function Footer() {
 
                 <div className="flex-1 flex justify-end">
                     <div className="flex flex-col text-right">
-                        <span className="text-white">
-                            NTNU Small Satellite Lab
-                        </span>
-                        <span className="text-white">Trondheim, Norway</span>
+                        <span className="">NTNU Small Satellite Lab</span>
+                        <span className="">Trondheim, Norway</span>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 8006ae7..db638b8 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -38,7 +38,7 @@ export default function Navbar() {
     };
 
     return (
-        <nav className="flex items-center justify-between p-4 bg-slate-700 text-white w-full">
+        <nav className="flex items-center justify-between p-4 w-full bg-background border-b border-x-neutral-600 text-foreground">
             <div className="flex-1">
                 <Link href="/">
                     <h1 className="text-3xl font-bold flex flex-row">
@@ -48,7 +48,7 @@ export default function Navbar() {
                             height="36"
                             className="mr-2"
                         />
-                        <span className="transition duration-300 underline decoration-transparent hover:decoration-white">
+                        <span className="transition duration-300 underline decoration-transparent hover:decoration-white ">
                             SmallSatLab
                         </span>
                     </h1>
diff --git a/frontend/src/components/map/MyGlobe.tsx b/frontend/src/components/map/MyGlobe.tsx
index 2a6a766..1fe90da 100644
--- a/frontend/src/components/map/MyGlobe.tsx
+++ b/frontend/src/components/map/MyGlobe.tsx
@@ -132,7 +132,7 @@ export default function MyGlobe({
                 <div
                     id="time-log"
                     ref={timeLogger}
-                    className="absolute top-0 bottom-0 z-50"
+                    className="absolute top-0 bottom-0 z-50 text-white text-opacity-75"
                 ></div>
                 <div id="chart" ref={chart}></div>
             </div>
diff --git a/frontend/src/components/ntnu/NTNULogo.tsx b/frontend/src/components/ntnu/NTNULogo.tsx
new file mode 100644
index 0000000..ba04eaf
--- /dev/null
+++ b/frontend/src/components/ntnu/NTNULogo.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { useTheme } from "next-themes";
+import NTNULogoImageHelper from "./NTNULogoImage";
+
+export default function NTNULogo() {
+    const { theme } = useTheme();
+    return <NTNULogoImageHelper darkMode={theme === "dark"} />;
+}
diff --git a/frontend/src/components/ntnu/NTNULogoImage.tsx b/frontend/src/components/ntnu/NTNULogoImage.tsx
new file mode 100644
index 0000000..932ff5f
--- /dev/null
+++ b/frontend/src/components/ntnu/NTNULogoImage.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+interface NTNULogoProps {
+    darkMode?: boolean;
+}
+
+export default function NTNULogoImageHelper({ darkMode }: NTNULogoProps) {
+    if (darkMode) {
+        return (
+            <Image
+                src="/images/ntnu-white.svg"
+                alt="NTNU logo"
+                width={200}
+                height={200}
+            />
+        );
+    }
+
+    return (
+        <Image
+            src="/images/ntnu-black.svg"
+            alt="NTNU logo"
+            width={200}
+            height={200}
+        />
+    );
+}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index ebbf33e..b374168 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -19,6 +19,7 @@ const config = {
         },
         extend: {
             colors: {
+                // These should all be defined in the global CSS file and used with the var(--color) syntax. Preferably using hsl
                 border: "hsl(var(--border))",
                 input: "hsl(var(--input))",
                 ring: "hsl(var(--ring))",
@@ -46,7 +47,10 @@ const config = {
                 // Small Satellite Lab Hypso colors
                 background: "hsl(var(--background))",
                 foreground: "hsl(var(--foreground))",
-                primary: "hsl(var(--ntnuBlue))",
+                primary: {
+                    DEFAULT: "hsl(var(--ntnuBlue))",
+                    foreground: "hsl(var(--ntnuBlue-foreground))",
+                },
                 accent: "hsl(var(--accent))",
                 ntnuBlue: "hsl(var(--ntnuBlue))",
                 ntnuCyan: "hsl(var(--ntnuCyan))",