feat: theme touch ups to buttons/links

obot-platform · Nov 22, 2024 · 71c7dd8 · 71c7dd8
1 parent 6b017eb
commit 71c7dd8
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 16 deletions.
diff --git a/ui/admin/app/components/chat/Message.tsx b/ui/admin/app/components/chat/Message.tsx
@@ -68,9 +68,9 @@ export const Message = React.memo(({ message }: MessageProps) => {
             >
                 <div
                     className={cn({
-                        "border border-error bg-error-foreground":
+                        "border border-error bg-error-foreground rounded-xl":
                             message.error,
-                        "rounded-2xl max-w-[80%] bg-accent-bold": isUser,
+                        "rounded-2xl max-w-[80%] bg-accent": isUser,
                         "w-full max-w-full": !isUser,
                     })}
                 >
@@ -91,7 +91,7 @@ export const Message = React.memo(({ message }: MessageProps) => {
                                 className={cn(
                                     "flex-auto max-w-full prose overflow-x-auto dark:prose-invert prose-pre:whitespace-pre-wrap prose-pre:break-words prose-thead:text-left prose-img:rounded-xl prose-img:shadow-lg break-words",
                                     {
-                                        "text-accent-bold-foreground prose-invert":
+                                        "text-accent-foreground prose-invert":
                                             isUser,
                                     }
                                 )}

diff --git a/ui/admin/app/components/ui/button.tsx b/ui/admin/app/components/ui/button.tsx
@@ -6,19 +6,20 @@ import * as React from "react";
 import { cn } from "~/lib/utils";
 
 export const ButtonClasses = {
-    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none hover:shadow-inner focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
     variants: {
         variant: {
             default:
-                "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+                "bg-primary text-primary-foreground shadow hover:bg-primary/80",
             destructive:
-                "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
             outline:
-                "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                "border border-input bg-background shadow-sm hover:bg-muted/80",
             secondary:
                 "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline",
+            ghost: "hover:bg-secondary hover:text-secondary-foreground",
+            accent: "bg-accent text-accent-foreground shadow-sm hover:bg-accent/80",
+            link: "text-accent-bold hover:text-accent-bold/70 underline-offset-4 hover:underline shadow-none hover:shadow-none",
         },
         size: {
             default: "h-9 px-4 py-2",
@@ -35,7 +36,7 @@ export const ButtonClasses = {
     defaultVariants: {
         variant: "default",
         size: "default",
-        shape: "default",
+        shape: "pill",
     },
 } as const;
 

diff --git a/ui/admin/app/components/ui/link.tsx b/ui/admin/app/components/ui/link.tsx
@@ -12,7 +12,7 @@ const linkVariants = cva("", {
     variants: {
         as: {
             button: cn(ButtonClasses.base, "flex flex-row items-center gap-2"),
-            default: "text-primary underline-offset-4 underline",
+            default: ButtonClasses.variants.variant.link,
             div: "",
         },
         buttonVariant: ButtonClasses.variants.variant,

diff --git a/ui/admin/app/tailwind.css b/ui/admin/app/tailwind.css
@@ -14,7 +14,7 @@ body {
 @layer base {
     :root {
         --main-surface-primary: 0 0% 98%;
-        --main-surface-secondary: 223 13% 96%;
+        --main-surface-secondary: 223 5% 95%;
 
         --accent-surface-primary: 0 0% 91%;
         --accent-surface-secondary: 223 87% 91%;
@@ -67,6 +67,7 @@ body {
         --accent: var(--accent-surface-secondary);
         --accent-foreground: var(--text-secondary);
 
+        --link: var(--accent-bold);
         --border: var(--border-light);
         --input: var(--border-normal);
         --ring: var(--accent-secondary);
@@ -83,7 +84,7 @@ body {
         --sidebar-primary: var(--accent-primary);
         --sidebar-primary-foreground: var(--text-inverted);
         --sidebar-accent: var(--accent-surface-secondary);
-        --sidebar-accent-foreground: var(--text-secondary);
+        --sidebar-accent-foreground: var(--text-primary);
         --sidebar-border: var(--border-light);
         --sidebar-ring: var(--accent-secondary);
     }
@@ -94,23 +95,26 @@ body {
         --main-surface-secondary: 223 20% 5%;
 
         --accent-surface-primary: 223 5% 15%;
-        --accent-surface-secondary: 223 87% 30%;
+        --accent-surface-secondary: 223 87% 25%;
 
-        --text-primary: 223 5% 92%;
+        --text-primary: 223 5% 85%;
         --text-secondary: 223 5% 75%;
         --text-muted: 223 5% 55%;
         --text-inverted: 0 0% 10%;
 
         --border-light: 223 5% 20%;
         --border-normal: 223 5% 30%;
 
-        --accent-primary: 223 0% 100%;
+        --accent-primary: 223 5% 85%;
         --accent-secondary: 223 87% 63%;
 
         --background: var(--main-surface-primary);
         --background-secondary: var(--main-surface-secondary);
         --foreground: var(--text-primary);
 
+        --error: 0 84% 20%;
+        --error-foreground: 0 100% 7%;
+
         --card: var(--main-surface-secondary);
         --card-foreground: var(--text-primary);
         --popover: var(--main-surface-primary);
@@ -128,15 +132,20 @@ body {
         --accent-bold-foreground: var(--text-inverted);
         --accent: var(--accent-surface-secondary);
         --accent-foreground: var(--text-primary);
+
+        --link: var(--accent-bold);
         --border: var(--border-light);
         --input: var(--border-normal);
         --ring: var(--accent-secondary);
+
         --chart-1: 12 76% 61%;
         --chart-2: 173 58% 39%;
         --chart-3: 197 37% 24%;
         --chart-4: 43 74% 66%;
         --chart-5: 27 87% 67%;
+
         --radius: 0.5rem;
+
         --sidebar-background: var(--main-surface-secondary);
         --sidebar-foreground: var(--text-primary);
         --sidebar-primary: var(--accent-primary);