From 215b35575d71c5ad27cc006811cf5a4f840ef0d6 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Tue, 9 Apr 2024 23:36:38 -0700
Subject: [PATCH] improve dark mode styling

---
 frontend/src/components/config/util.tsx       |  6 ++--
 .../src/components/resources/build/config.tsx |  4 +--
 .../config/components/extra-args.tsx          |  4 +--
 frontend/src/components/topbar.tsx            |  2 +-
 frontend/src/components/updates/resource.tsx  |  5 ++--
 frontend/src/components/util.tsx              |  2 +-
 frontend/src/globals.css                      | 30 +++++++++++--------
 frontend/src/ui/data-table.tsx                |  2 +-
 8 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/config/util.tsx b/frontend/src/components/config/util.tsx
index b7f2e2992..833fcdad5 100644
--- a/frontend/src/components/config/util.tsx
+++ b/frontend/src/components/config/util.tsx
@@ -135,8 +135,7 @@ export const DoubleInput = <
             onChange={(e) => onRightChange(e.target.value as T[R], i)}
           />
           <Button
-            variant="outline"
-            // intent="warning"
+            variant="secondary"
             onClick={() => onRemove(i)}
           >
             <MinusCircle className="w-4 h-4" />
@@ -144,8 +143,7 @@ export const DoubleInput = <
         </div>
       ))}
       <Button
-        variant="outline"
-        // intent="success"
+        variant="secondary"
         className="flex items-center gap-2 w-[200px] place-self-end"
         onClick={onAdd}
       >
diff --git a/frontend/src/components/resources/build/config.tsx b/frontend/src/components/resources/build/config.tsx
index f93050d6a..e4948195a 100644
--- a/frontend/src/components/resources/build/config.tsx
+++ b/frontend/src/components/resources/build/config.tsx
@@ -190,7 +190,7 @@ const ExtraArgs = ({
               }}
             />
             <Button
-              variant="outline"
+              variant="secondary"
               onClick={() =>
                 set({ extra_args: [...args.filter((_, idx) => idx !== i)] })
               }
@@ -201,7 +201,7 @@ const ExtraArgs = ({
         ))}
 
         <Button
-          variant="outline"
+          variant="secondary"
           className="flex items-center gap-2 w-[200px] place-self-end"
           onClick={() => set({ extra_args: [...args, ""] })}
         >
diff --git a/frontend/src/components/resources/deployment/config/components/extra-args.tsx b/frontend/src/components/resources/deployment/config/components/extra-args.tsx
index 15f48f85d..16a42aa31 100644
--- a/frontend/src/components/resources/deployment/config/components/extra-args.tsx
+++ b/frontend/src/components/resources/deployment/config/components/extra-args.tsx
@@ -25,7 +25,7 @@ export const ExtraArgs = ({
               }}
             />
             <Button
-              variant="outline"
+              variant="secondary"
               onClick={() =>
                 set({ extra_args: [...args.filter((_, idx) => idx !== i)] })
               }
@@ -36,7 +36,7 @@ export const ExtraArgs = ({
         ))}
 
         <Button
-          variant="outline"
+          variant="secondary"
           className="flex items-center gap-2 w-[200px] place-self-end"
           onClick={() => set({ extra_args: [...args, ""] })}
         >
diff --git a/frontend/src/components/topbar.tsx b/frontend/src/components/topbar.tsx
index 0adac773a..cf596118e 100644
--- a/frontend/src/components/topbar.tsx
+++ b/frontend/src/components/topbar.tsx
@@ -43,7 +43,7 @@ import {
 
 export const Topbar = () => {
   return (
-    <div className="sticky top-0 border-b bg-background z-50 w-full">
+    <div className="sticky top-0 border-b z-50 w-full bg-card text-card-foreground shadow">
       <div className="container flex items-center justify-between py-4 gap-8">
         <div className="flex items-center gap-4">
           <Link to={"/"} className="text-2xl tracking-widest">
diff --git a/frontend/src/components/updates/resource.tsx b/frontend/src/components/updates/resource.tsx
index 2c83b33d4..a763de831 100644
--- a/frontend/src/components/updates/resource.tsx
+++ b/frontend/src/components/updates/resource.tsx
@@ -17,6 +17,7 @@ import { UpdateDetails, UpdateUser } from "./details";
 import { UpdateStatus } from "@monitor/client/dist/types";
 import { fmt_date, fmt_version } from "@lib/formatting";
 import { version_is_none } from "@lib/utils";
+import { Card } from "@ui/card";
 
 const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
   const Icon = () => {
@@ -28,7 +29,7 @@ const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
 
   return (
     <UpdateDetails id={update.id}>
-      <div className="p-4 border rounded-md flex justify-between cursor-pointer hover:bg-accent transition-colors text-sm">
+      <Card className="p-4 flex justify-between cursor-pointer hover:bg-accent/50 transition-colors text-sm">
         <div>
           <div className="flex items-center gap-2">
             <Icon />
@@ -49,7 +50,7 @@ const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
             <UpdateUser user_id={update.operator} />
           </div>
         </div>
-      </div>
+      </Card>
     </UpdateDetails>
   );
 };
diff --git a/frontend/src/components/util.tsx b/frontend/src/components/util.tsx
index ddfccd4ff..bab3d16dd 100644
--- a/frontend/src/components/util.tsx
+++ b/frontend/src/components/util.tsx
@@ -83,7 +83,7 @@ export const ActionButton = forwardRef<
   ) => (
     <Button
       size={size}
-      variant={variant || "outline"}
+      variant={variant || "secondary"}
       className={cn("flex items-center justify-between w-[170px]", className)}
       onClick={onClick}
       onBlur={onBlur}
diff --git a/frontend/src/globals.css b/frontend/src/globals.css
index 725b1f4e0..fa25a6985 100644
--- a/frontend/src/globals.css
+++ b/frontend/src/globals.css
@@ -22,17 +22,16 @@
     font-family: Inter;
   }
   pre {
-    @apply bg-accent/50 min-h-full text-xs p-4 whitespace-pre-wrap scroll-m-4 break-all rounded-md;
+    @apply bg-card text-card-foreground border rounded-xl min-h-full text-xs p-4 whitespace-pre-wrap scroll-m-4 break-all;
   }
 }
 
-/*
-  HUE: 0, 220.1
-  SAT: 0.1%, 20.1%, 40.1%, 60.1%, 80.1%
-  LIT: 5.2%, 11.2%, 20.2%, 40.2%, 60.2%, 80.2% 90.2%, 98.2%
-*/
-
 @layer base {
+  /*
+    HUE: 0, 220.1
+    SAT: 0.1%, 20.1%, 40.1%, 60.1%, 80.1%
+    LIT: 5.2%, 11.2%, 20.2%, 40.2%, 60.2%, 80.2% 90.2%, 98.2%
+  */
   :root {
     --background: 220.1 0.1% 98.3%;
     --foreground: 220.1 40.1% 5.2%;
@@ -65,14 +64,19 @@
     --radius: 0.5rem;
   }
 
+    /*
+    HUE: 0, 220.1
+    SAT: 0.1%, 20.1%, 40.1%, 60.1%, 80.1%
+    LIT: 6.2%, 11.2%, 20.2%, 40.2%, 60.2%, 80.2% 90.2%, 98.2%
+  */
   .dark {
-    --background: 220.1 40.1% 5.2%;
+    --background: 220.1 40.1% 6.2%;
     --foreground: 220.1 40.1% 98.2%;
 
-    --card: 220.1 40.1% 5.2%;
+    --card: 220.1 40.1% 8.2%;
     --card-foreground: 220.1 40.1% 98.2%;
 
-    --popover: 220.1 40.1% 5.2%;
+    --popover: 220.1 40.1% 6.2%;
     --popover-foreground: 220.1 40.1% 98.2%;
 
     --primary: 220.1 40.1% 98.2%;
@@ -82,7 +86,7 @@
     --secondary-foreground: 220.1 40.1% 98.2%;
 
     --muted: 220.1 40.1% 20.2%;
-    --muted-foreground: 220.1 20.1% 65.1%;
+    --muted-foreground: 220.1 20.1% 60.2;
 
     --accent: 220.1 40.1% 20.2%;
     --accent-foreground: 220.1 40.1% 98.2%;
@@ -90,8 +94,8 @@
     --destructive: 0 60.1% 30.6%;
     --destructive-foreground: 220.1 40.1% 98.2%;
 
-    --border: 220.1 40.1% 20.2%;
-    --input: 220.1 40.1% 20.2%;
+    --border: 220.1 40.1% 17.2%;
+    --input: 220.1 40.1% 15.2%;
     --ring: 220.1 40.1% 80.2%;
   }
 }
diff --git a/frontend/src/ui/data-table.tsx b/frontend/src/ui/data-table.tsx
index fa48286fb..9d361040b 100644
--- a/frontend/src/ui/data-table.tsx
+++ b/frontend/src/ui/data-table.tsx
@@ -38,7 +38,7 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className="rounded-md border">
+    <div className="rounded-xl border bg-card text-card-foreground shadow">
       <Table className="table-fixed">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (