diff --git a/ui/admin/app/components/chat/Message.tsx b/ui/admin/app/components/chat/Message.tsx index 334b65cae..ea3a75c50 100644 --- 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) => { >
@@ -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 index b1c3cf5b5..cbee230ad 100644 --- 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 index 2708100a0..e5f4dc396 100644 --- 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 index 7e0571a8b..8317234a8 100644 --- 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,9 +95,9 @@ 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%; @@ -104,13 +105,16 @@ body { --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);