112 fix tailwind colors on homepage (#113)

* change and fix most colors * update color usage * feat(frontend): ✨ add ntnu logo component that automaticaly applies darkmode
NTNU-SmallSatLab · Feb 28, 2024 · 18b3878 · 18b3878
1 parent 540a76a
commit 18b3878
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 35 deletions.
diff --git a/frontend/public/images/ntnu-black.svg b/frontend/public/images/ntnu-black.svg
diff --git a/frontend/public/images/ntnu-white.svg b/frontend/public/images/ntnu-white.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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))",