From 0a46e3c92b242d62753a6e306f5e9d981559581f Mon Sep 17 00:00:00 2001
From: AI Christianson <ai.christianson@christianson.ai>
Date: Fri, 14 Mar 2025 10:11:42 -0400
Subject: [PATCH] FAB color

---
 frontend/common/dist/styles/global.css        | 28 +++++++++++++------
 .../src/components/DefaultAgentScreen.tsx     |  2 +-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/common/dist/styles/global.css b/frontend/common/dist/styles/global.css
index d68f322..908bb9f 100644
--- a/frontend/common/dist/styles/global.css
+++ b/frontend/common/dist/styles/global.css
@@ -942,6 +942,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
+.border-zinc-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
+}
 .border-l-transparent {
   border-left-color: transparent;
 }
@@ -992,10 +996,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
 }
-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
-}
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
@@ -1006,6 +1006,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
 }
+.bg-zinc-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
+}
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1155,6 +1159,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.text-zinc-100 {
+  --tw-text-opacity: 1;
+  color: rgb(244 244 245 / var(--tw-text-opacity, 1));
+}
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -1299,13 +1307,13 @@ video {
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
-.hover\:bg-red-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
-}
 .hover\:bg-secondary\/80:hover {
   background-color: hsl(var(--secondary) / 0.8);
 }
+.hover\:bg-zinc-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
+}
 .hover\:text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }
@@ -1479,6 +1487,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
 }
+.dark\:border-zinc-600:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(82 82 91 / var(--tw-border-opacity, 1));
+}
 @media (min-width: 640px) {
 
   .sm\:max-w-md {
diff --git a/frontend/common/src/components/DefaultAgentScreen.tsx b/frontend/common/src/components/DefaultAgentScreen.tsx
index 916fe5b..8537e1b 100644
--- a/frontend/common/src/components/DefaultAgentScreen.tsx
+++ b/frontend/common/src/components/DefaultAgentScreen.tsx
@@ -174,7 +174,7 @@ export const DefaultAgentScreen: React.FC = () => {
       size="icon"
       onClick={() => setIsDrawerOpen(true)}
       aria-label="Toggle sessions panel"
-      className="h-14 w-14 rounded-full shadow-xl bg-red-600 hover:bg-red-700 text-white flex items-center justify-center border-2 border-white dark:border-gray-800"
+      className="h-14 w-14 rounded-full shadow-xl bg-zinc-800 hover:bg-zinc-700 text-zinc-100 flex items-center justify-center border-2 border-zinc-700 dark:border-zinc-600"
     >
       <PanelLeft className="h-6 w-6" />
     </Button>