enhance: switch primary accent color to "Otto8" blue (#692)

Signed-off-by: Ryan Hopper-Lowe <[email protected]>
otto8-ai · Nov 27, 2024 · 9c205b6 · 9c205b6
1 parent a8c7918
commit 9c205b6
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 23 deletions.
diff --git a/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx b/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx
@@ -37,7 +37,7 @@ export function OAuthAppTile({
     return (
         <Card
             className={cn("w-full flex flex-col", {
-                "border-2 border-accent-bold": info.appOverride,
+                "border-2 border-primary": info.appOverride,
             })}
         >
             <CardHeader className="flex flex-row justify-between items-start pb-2 space-y-0">
@@ -49,7 +49,7 @@ export function OAuthAppTile({
                     {info.appOverride ? (
                         <Tooltip>
                             <TooltipTrigger>
-                                <Badge variant="bold">Custom</Badge>
+                                <Badge>Custom</Badge>
                             </TooltipTrigger>
 
                             <TooltipContent>

diff --git a/ui/admin/app/components/tools/toolGrid/ToolCard.tsx b/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
@@ -34,7 +34,7 @@ export function ToolCard({ tool, onDelete }: ToolCardProps) {
     return (
         <Card
             className={cn("flex flex-col h-full", {
-                "border-2 border-accent-bold": tool.metadata?.bundle,
+                "border-2 border-primary": tool.metadata?.bundle,
                 "border-2 border-error": tool.error,
             })}
         >
@@ -59,10 +59,7 @@ export function ToolCard({ tool, onDelete }: ToolCardProps) {
                         </Tooltip>
                     )}
                     {tool.metadata?.bundle && (
-                        <Badge
-                            variant="bold"
-                            className="ml-2 pointer-events-none"
-                        >
+                        <Badge className="ml-2 pointer-events-none">
                             Bundle
                         </Badge>
                     )}

diff --git a/ui/admin/app/components/ui/badge.tsx b/ui/admin/app/components/ui/badge.tsx
@@ -10,7 +10,6 @@ const badgeVariants = cva(
             variant: {
                 default:
                     "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-                bold: "bg-accent-bold text-accent-bold-foreground shadow hover:bg-accent-bold/80",
                 secondary:
                     "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 destructive:

diff --git a/ui/admin/app/components/ui/button.tsx b/ui/admin/app/components/ui/button.tsx
@@ -19,7 +19,7 @@ export const ButtonClasses = {
                 "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
             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",
+            link: "text-primary hover:text-primary/70 underline-offset-4 hover:underline shadow-none hover:shadow-none",
         },
         size: {
             default: "h-9 px-4 py-2",

diff --git a/ui/admin/app/tailwind.css b/ui/admin/app/tailwind.css
@@ -29,8 +29,7 @@ body {
         --border-light: 223 5% 85%;
         --border-normal: 223 5% 75%;
 
-        --accent-primary: 223 5% 10%;
-        --accent-secondary: 223 87% 63%;
+        --accent-primary: 223 87% 63%;
 
         /* Start colors provided to Tailwind */
 
@@ -66,15 +65,13 @@ body {
         --secondary-foreground: var(--text-primary);
         --muted: var(--accent-surface-primary);
         --muted-foreground: var(--text-muted);
-        --accent-bold: var(--accent-secondary);
-        --accent-bold-foreground: var(--text-inverted);
         --accent: var(--accent-surface-secondary);
         --accent-foreground: var(--text-secondary);
 
-        --link: var(--accent-bold);
+        --link: var(--accent-primary);
         --border: var(--border-light);
         --input: var(--border-normal);
-        --ring: var(--accent-secondary);
+        --ring: var(--accent-primary);
 
         --chart-1: 12 76% 61%;
         --chart-2: 173 58% 39%;
@@ -90,7 +87,7 @@ body {
         --sidebar-accent: var(--accent-surface-secondary);
         --sidebar-accent-foreground: var(--text-primary);
         --sidebar-border: var(--border-light);
-        --sidebar-ring: var(--accent-secondary);
+        --sidebar-ring: var(--accent-primary);
     }
     .dark {
         color-scheme: dark;
@@ -111,8 +108,7 @@ body {
         --border-light: 223 5% 20%;
         --border-normal: 223 5% 30%;
 
-        --accent-primary: 223 5% 85%;
-        --accent-secondary: 223 87% 63%;
+        --accent-primary: 223 87% 63%;
 
         --background: var(--main-surface-primary);
         --background-secondary: var(--main-surface-secondary);
@@ -136,15 +132,13 @@ body {
         --secondary-foreground: var(--text-primary);
         --muted: var(--accent-surface-primary);
         --muted-foreground: var(--text-muted);
-        --accent-bold: var(--accent-secondary);
-        --accent-bold-foreground: var(--text-inverted);
         --accent: var(--accent-surface-secondary);
         --accent-foreground: var(--text-primary);
 
-        --link: var(--accent-bold);
+        --link: var(--accent-primary);
         --border: var(--border-light);
         --input: var(--border-normal);
-        --ring: var(--accent-secondary);
+        --ring: var(--accent-primary);
 
         --chart-1: 12 76% 61%;
         --chart-2: 173 58% 39%;
@@ -161,7 +155,7 @@ body {
         --sidebar-accent: var(--accent-surface-secondary);
         --sidebar-accent-foreground: var(--text-primary);
         --sidebar-border: var(--border-light);
-        --sidebar-ring: var(--accent-secondary);
+        --sidebar-ring: var(--accent-primary);
     }
 }