145 update tailwind color definitions to new design (#156)

* rewrite tailwind config to use hex colors, and update color definitions * fix tailwind config, update to new colors * remove light mode * remove old generated strapi rest api types * remvoe rest api generate types script * rename typegen scripts * update navbar colors, remove old unused code * fix footer responsive design and colors * run prettier * remove old rest api code
NTNU-SmallSatLab · Mar 20, 2024 · bc89d83 · bc89d83
1 parent 2abcd5b
commit bc89d83
Show file tree

Hide file tree

Showing 18 changed files with 96 additions and 3,880 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,8 +9,8 @@
         "lint": "next lint",
         "prettierWrite": "npx prettier . --write",
         "prettierCheck": "npx prettier . --check",
-        "compile": "graphql-codegen",
-        "watch": " graphql-codegen -w"
+        "compileTypes": "graphql-codegen",
+        "watchTypes": " graphql-codegen -w"
     },
     "dependencies": {
         "@apollo/client": "^3.9.0-alpha.5",

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -4,72 +4,52 @@
 
 @layer base {
     :root {
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 84% 4.9%;
+        /* Shadcn Colors */
 
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 84% 4.9%;
+        /* Background color for <Card /> */
+        --card: #000000;
+        --card-foreground: #ffffff;
 
-        --secondary: 210 40% 96.1%;
-        --secondary-foreground: 222.2 47.4% 11.2%;
+        /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
+        --popover: #000000;
+        --popover-foreground: #ffffff;
 
-        --muted: 0 0% 96.08%;
-        --muted-foreground: 215.4 16.3% 46.9%;
+        /* Primary colors for <Button /> */
+        --primary: #2860f1;
+        --primary-foreground: #ffffff;
 
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 210 40% 98%;
+        /* Secondary colors for <Button /> */
+        --secondary: #56876d;
+        --secondary-foreground: #000000;
 
-        --border: 214.3 31.8% 91.4%;
-        --input: 214.3 31.8% 91.4%;
-        --ring: 222.2 84% 4.9%;
+        /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
+        --muted: #000000;
+        --muted-foreground: #ffffff;
 
-        --radius: 0.5rem;
-
-        --background: 0 0% 100%; /* FFFFFF */
-        --foreground: 0 0% 0%; /* 000000 */
-        --accent: 210 40% 96.1%; /* f1f5f9 */
-
-        /* NTNU colors */
-        --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 */
-    }
+        /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
+        --accent: #141414 --accent-foreground: #ffffff;
 
-    .dark {
-        --background: 150 7% 6%; /* 0e100f */
-        --foreground: 54 100% 94%; /* fffce1 */
+        /* Used for destructive actions such as <Button variant="destructive">.*/
+        --destructive: #7f1d1d;
+        --destructive-foreground: #fef2f2;
 
-        --card: 222.2 84% 4.9%;
-        --card-foreground: 210 40% 98%;
+        /* Default border color */
+        --border: #353535;
 
-        --popover: 222.2 84% 4.9%;
-        --popover-foreground: 210 40% 98%;
+        /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
+        --input: #e2e8f0;
+        --ring: #0d45d3;
 
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 11.2%;
-
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
-
-        --muted: 0 0% 2%;
-        --muted-foreground: 215 20.2% 65.1%;
-
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
+        /* Radius */
+        --radius: 0.5rem;
 
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
+        /* Default background color of <body />...etc */
+        --background: #0e100f;
+        --foreground: #fdfffc;
 
-        --border: 217.2 32.6% 17.5%;
-        --input: 217.2 32.6% 17.5%;
-        --ring: 212.7 26.8% 83.9%;
+        /* Project colors */
+        --error: #ef233c;
+        --error-foreground: #ffffff;
     }
 }
 

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -4,7 +4,6 @@ import { cn } from "@/lib/utils";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
-import { ThemeProvider } from "@/components/theme-provider";
 import React from "react";
 import { ApolloWrapper } from "@/components/wrappers/ApolloWrapper";
 
@@ -26,18 +25,11 @@ export default function RootLayout({
         <html lang="en" suppressHydrationWarning>
             <body className={cn("flex min-h-screen flex-col", inter.className)}>
                 <ApolloWrapper>
-                    <ThemeProvider
-                        attribute="class"
-                        defaultTheme="system"
-                        enableSystem
-                        disableTransitionOnChange
-                    >
-                        <Navbar />
-                        <ErrorBoundaryNavigation>
-                            <main className="flex-grow">{children}</main>
-                        </ErrorBoundaryNavigation>
-                        <Footer />
-                    </ThemeProvider>
+                    <Navbar />
+                    <ErrorBoundaryNavigation>
+                        <main className="flex-grow">{children}</main>
+                    </ErrorBoundaryNavigation>
+                    <Footer />
                 </ApolloWrapper>
             </body>
         </html>

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -73,7 +73,7 @@ export default async function Home() {
                 id="about-us"
                 className="flex flex-col items-center px-8 py-12"
             >
-                <div className="prose flex flex-col items-center text-center dark:prose-invert prose-img:rounded-xl">
+                <div className="prose prose-invert flex flex-col items-center text-center prose-img:rounded-xl">
                     <h1>
                         TEST NUMBER 3 Empowering Space Exploration One Satellite
                         at a Time
@@ -107,7 +107,7 @@ export default async function Home() {
                 </div>
             </ColoredSection>
             <div className="flex flex-col items-center px-8 py-12 pt-8 text-center">
-                <div className="prose dark:prose-invert">
+                <div className="prose prose-invert">
                     <h1 className="">Projects</h1>
                     <p className="">
                         The SmallSat Lab team is part of a variety of projects,
@@ -127,7 +127,7 @@ export default async function Home() {
                 </div>
             </div>
             <ColoredSection className="flex flex-col items-center px-8 py-12">
-                <div className="prose flex flex-col items-center text-center dark:prose-invert prose-img:rounded-xl">
+                <div className="prose prose-invert flex flex-col items-center text-center prose-img:rounded-xl">
                     <h1 className="">Most recent picture</h1>
                     <div className="relative h-[300px] w-[300px]">
                         <Image

diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx
@@ -6,10 +6,7 @@ type ExternalLinkProps = {
 
 export function ExternalLink({ href, children }: ExternalLinkProps) {
     return (
-        <a
-            href={href}
-            className="text-blue-600 visited:text-purple-600 dark:text-blue-300 dark:visited:text-purple-300"
-        >
+        <a href={href} className="text-blue-600 visited:text-purple-600">
             <p>{children}</p>
         </a>
     );

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -2,8 +2,8 @@ import NTNULogo from "./ntnu/NTNULogo";
 
 export default function Footer() {
     return (
-        <footer className="flex flex-col items-center bg-background p-4 text-foreground">
-            <div className="flex w-full flex-row items-center justify-between">
+        <footer className="flex flex-col items-center border-t bg-background p-4 text-foreground">
+            <div className="flex w-full flex-col items-center justify-between gap-12 lg:flex-row">
                 <div className="flex flex-1 justify-start">
                     <NTNULogo />
                 </div>
@@ -36,8 +36,6 @@ export default function Footer() {
                 </div>
             </div>
 
-            <hr className="my-4 w-full" />
-
             <div className="text-center">
                 <p>Norwegian University of Science and Technology</p>
             </div>

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -32,22 +32,12 @@ export function IconParkHamburgerButton(props: SVGProps<SVGSVGElement>) {
 }
 
 export default function Navbar() {
-    const dropdownPaths = [
-        "/team",
-        "/partners",
-        "/contact",
-        "/positions",
-        "/infrastructure",
-    ];
-    const isPathInDropdown = () => dropdownPaths.includes(pathname);
-
     const pathname = usePathname();
     const getButtonVariant = (path: string) => {
-        if (path === "/about" && isPathInDropdown()) {
-            return "secondary";
+        if (path === pathname) {
+            return;
         }
-
-        return pathname === path ? "secondary" : "ghost";
+        return "ghost";
     };
 
     return (
@@ -64,7 +54,7 @@ export default function Navbar() {
                 </Link>
             </div>
             <Drawer>
-                <DrawerTrigger className="flex justify-end sm:hidden">
+                <DrawerTrigger className="flex justify-end md:hidden">
                     <IconParkHamburgerButton />
                 </DrawerTrigger>
                 <DrawerContent>
@@ -89,7 +79,7 @@ export default function Navbar() {
                 </DrawerContent>
             </Drawer>
 
-            <div className="hidden flex-1 justify-center sm:flex">
+            <div className="hidden flex-1 justify-center md:flex">
                 <div className="flex items-center gap-8">
                     <Link href="/blog">
                         <Button variant={getButtonVariant("/blog")}>

diff --git a/frontend/src/components/map/MyCustomMap.tsx b/frontend/src/components/map/MyCustomMap.tsx
@@ -58,7 +58,7 @@ const MyCustomMap = () => {
         <>
             <div
                 ref={mapContainer}
-                className="relative aspect-square w-full bg-neutral-600 dark:bg-neutral-700"
+                className="relative aspect-square w-full bg-neutral-600"
             ></div>
         </>
     );

diff --git a/frontend/src/components/ntnu/NTNULogo.tsx b/frontend/src/components/ntnu/NTNULogo.tsx
@@ -1,8 +1,16 @@
-"use client";
-import { useTheme } from "next-themes";
-import NTNULogoImageHelper from "./NTNULogoImage";
+import Image from "next/image";
+interface NTNULogoProps {
+    width?: number;
+    height?: number;
+}
 
-export default function NTNULogo() {
-    const { theme } = useTheme();
-    return <NTNULogoImageHelper darkMode={theme === "dark"} />;
+export default function NTNULogo({ width = 200, height = 200 }: NTNULogoProps) {
+    return (
+        <Image
+            src="/images/ntnu-white.svg"
+            alt="NTNU logo"
+            width={width}
+            height={height}
+        />
+    );
 }
diff --git a/frontend/src/components/ntnu/NTNULogoImage.tsx b/frontend/src/components/ntnu/NTNULogoImage.tsx
diff --git a/frontend/src/components/theme-provider.tsx b/frontend/src/components/theme-provider.tsx
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
     <DropdownMenuPrimitive.Item
         ref={ref}
         className={cn(
-            "focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             inset && "pl-8",
             className,
         )}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     <DropdownMenuPrimitive.CheckboxItem
         ref={ref}
         className={cn(
-            "focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             className,
         )}
         checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
-            "focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             className,
         )}
         {...props}

diff --git a/frontend/src/components/ui/hero.tsx b/frontend/src/components/ui/hero.tsx
@@ -37,7 +37,7 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
                         <h1 className=" text-6xl font-bold tracking-tighter">
                             {title}
                         </h1>
-                        <p className="mx-auto max-w-[700px] text-xl text-gray-500 dark:text-gray-400">
+                        <p className="mx-auto max-w-[700px] text-xl text-gray-500">
                             {description}
                         </p>
                     </div>

diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
     <tfoot
         ref={ref}
         className={cn(
-            "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+            "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
             className,
         )}
         {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
     <tr
         ref={ref}
         className={cn(
-            "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+            "hover:bg-muted/50 border-b transition-colors data-[state=selected]:bg-muted",
             className,
         )}
         {...props}
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,7 @@ const MyCustomMap = () => { @@
             <>
                 <div
                     ref={mapContainer}
-                    className="relative aspect-square w-full bg-neutral-600 dark:bg-neutral-700"
+                    className="relative aspect-square w-full bg-neutral-600"
                 ></div>
             </>
         );
@@ Expand Down @@