fix: brand cleanup (#47)

Made some more brand fixes and general UX cleanup.

Relates to #31 and #37

**Before**

![CleanShot 2025-06-03 at 09 45
54](https://github.com/user-attachments/assets/5d897864-cda4-4e76-8519-c15204ac199f)

![CleanShot 2025-06-03 at 09 51
41](https://github.com/user-attachments/assets/2d102b39-cc53-4b94-94bc-f5a5c9895d84)

**After**

![CleanShot 2025-06-03 at 09 48
53](https://github.com/user-attachments/assets/f292c777-4e9a-4d9e-b3c8-81d70f686c86)

![CleanShot 2025-06-03 at 09 49
40](https://github.com/user-attachments/assets/99d43627-3065-4465-aa6e-c8f4d7c6f09c)

![CleanShot 2025-06-03 at 09 49
40](https://github.com/user-attachments/assets/78ea2967-9727-4a71-a22a-89cca805b511)

Author: nickytonline

src/components/ChatMessage.tsx

@@ -28,7 +28,7 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
       {!isUserMessage && (
         <div
           className={cn(
-            'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300',
+            'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
             isLoading && 'animate-[pulse_1.5s_ease-in-out_infinite] opacity-80',
           )}
         >
@@ -45,10 +45,7 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
       >
         <div
           className={cn(
-            'rounded-2xl px-4 py-2 text-sm w-full',
-            isUserMessage
-              ? 'bg-indigo-600 text-white dark:bg-indigo-500'
-              : 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
+            'rounded-2xl px-4 py-2 text-sm w-full bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
           )}
         >
           <div className="prose prose-sm dark:prose-invert max-w-none break-words break-all whitespace-pre-wrap">
@@ -91,7 +88,7 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
       </div>
 
       {isUserMessage && (
-        <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300">
+        <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100">
           <User className="h-5 w-5" />
         </div>
       )}

src/components/Header.tsx

@@ -66,7 +66,7 @@ const Header: React.FC = () => {
           <img
             src={isDark ? '/pomerium-icon.svg' : '/pomerium-icon.png'}
             alt="Pomerium Logo"
-            className="w-8 hover:-translate-y-0.5 transition-all"
+            className="w-8 transition-all"
           />
         </a>
         <Link to="/">

src/components/ModelSelect.tsx

@@ -20,13 +20,18 @@ export function ModelSelect({ value, onValueChange }: ModelSelectProps) {
   const { data: models, isLoading } = useModels()
 
   if (isLoading) {
-    return <div>Loading models...</div>
+    return (
+      <div className="text-sm text-primary-foreground">Loading models...</div>
+    )
   }
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" className="w-fit max-w-[100px] md:max-w-[240px] justify-between">
+        <Button
+          variant="outline"
+          className="w-fit max-w-[100px] md:max-w-[240px] justify-between"
+        >
           <span className="truncate block max-w-[160px] overflow-hidden whitespace-nowrap">
             {value || 'Select a model'}
           </span>

src/components/ThemeToggle.tsx

@@ -51,7 +51,7 @@ export function ThemeToggle() {
       {isDarkMode ? (
         <Sun className="size-5 text-amber-400" />
       ) : (
-        <Moon className="size-5 text-blue-500" />
+        <Moon className="size-5 text-primary" />
       )}
     </Button>
   )