address additions

onyx-dot-app · Feb 9, 2025 · bfb8f5e · bfb8f5e
1 parent ced6f05
commit bfb8f5e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/web/src/app/chat/Refinement.tsx b/web/src/app/chat/Refinement.tsx
@@ -338,7 +338,7 @@ export function StatusRefinement({
                 onMouseLeave={() => setToolTipHovered(false)}
                 side="bottom"
                 align="start"
-                className="w-fit p-4 bg-white border-2 border-border dark:border-neutral-800 shadow-lg rounded-md"
+                className="w-fit p-4 bg-[#fff] border-2 border-border dark:border-neutral-800 shadow-lg rounded-md"
               >
                 {/* If not done, show the "Refining" box + a chevron */}
 
@@ -353,8 +353,9 @@ export function StatusRefinement({
                       <div className="w-3 h-3">
                         <StatusIndicator status={ToggleState.Done} />
                       </div>
-                      <span className="text-sm font-medium">
+                      <span className="text-neutral-800 text-sm font-medium">
                         {StreamingPhaseText[phase]}
+                        LLL
                       </span>
                     </div>
                   ))}

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
@@ -655,3 +655,7 @@ ul > li > p {
 .dark strong {
   color: white;
 }
+
+.dark li {
+  color: #e5e5e5;
+}
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
@@ -9,38 +9,35 @@ const badgeVariants = cva(
     variants: {
       variant: {
         outline:
-          "border-neutral-200 bg-neutral-50 text-neutral-600 hover:bg-neutral-75 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50 dark:hover:bg-neutral-850",
+          "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50",
         purple:
-          "border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-75 dark:border-purple-700 dark:bg-purple-900 dark:text-purple-100 dark:hover:bg-purple-800",
+          "border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-700 dark:bg-purple-900 dark:text-purple-100",
         public:
-          "border-green-200 bg-green-50 text-green-700 hover:bg-green-75 dark:border-green-700 dark:bg-green-900 dark:text-green-100 dark:hover:bg-green-800",
+          "border-green-200 bg-green-50 text-green-700 dark:border-green-700 dark:bg-green-900 dark:text-green-100",
         private:
-          "border-yellow-200 bg-yellow-50 text-yellow-700 hover:bg-yellow-75 dark:border-yellow-600 dark:bg-yellow-700 dark:text-yellow-100 dark:hover:bg-yellow-600",
-
+          "border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-600 dark:bg-yellow-700 dark:text-yellow-100",
         "auto-sync":
-          "border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-75 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800",
+          "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-100",
         agent:
-          "border-orange-200 bg-orange-50 text-orange-600 dark:border-orange-800 dark:bg-orange-950/90 dark:text-neutral-200",
+          "border-orange-200 bg-orange-50 text-orange-600 dark:border-orange-800 dark:bg-orange-600/20 dark:text-neutral-200",
         "agent-faded":
           "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50",
         canceled:
-          "border-gray-200 bg-gray-50 text-gray-600 hover:bg-gray-75 dark:border-gray-700 dark:bg-gray-900 dark:text-neutral-50 dark:hover:bg-gray-850",
+          "border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-neutral-50",
         paused:
-          "border-yellow-200 bg-yellow-50 text-yellow-700 hover:bg-yellow-75 dark:border-yellow-600 dark:bg-yellow-700 dark:text-yellow-100 dark:hover:bg-yellow-600",
-
-        // "border-amber-200 bg-amber-50 text-amber-600 hover:bg-amber-75 dark:border-amber-600 dark:bg-amber-800 dark:text-amber-200 dark:hover:bg-amber-700",
+          "border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-600 dark:bg-yellow-700 dark:text-yellow-100",
         in_progress:
-          "border-blue-200 bg-blue-50 text-blue-600 hover:bg-blue-75 dark:border-blue-700 dark:bg-blue-900 dark:text-neutral-50 dark:hover:bg-blue-850",
+          "border-blue-200 bg-blue-50 text-blue-600 dark:border-blue-700 dark:bg-blue-900 dark:text-neutral-50",
         success:
-          "border-green-200 bg-emerald-50 text-green-600 hover:bg-emerald-75 dark:border-green-600 dark:bg-green-900 dark:text-green-50 dark:hover:bg-green-850",
+          "border-green-200 bg-emerald-50 text-green-600 dark:border-green-600 dark:bg-green-900 dark:text-green-50",
         default:
-          "border-neutral-200 bg-neutral-50 text-neutral-600 hover:bg-neutral-75 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50 dark:hover:bg-neutral-850",
+          "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50",
         secondary:
-          "border-neutral-200 bg-neutral-50 text-neutral-600 hover:bg-neutral-75 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50 dark:hover:bg-neutral-850",
+          "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50",
         destructive:
-          "border-red-200 bg-red-50 text-red-600 hover:bg-red-75 dark:border-red-700 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-850",
+          "border-red-200 bg-red-50 text-red-600 dark:border-red-700 dark:bg-red-900 dark:text-neutral-50",
         not_started:
-          "border-neutral-200 bg-neutral-50 text-neutral-600 hover:bg-neutral-75 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700",
+          "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100",
       },
     },
     defaultVariants: {
@@ -74,26 +71,31 @@ function Badge({
 
   return (
     <div
-      className={cn(badgeVariants({ variant }), sizeClasses[size], className)}
+      className={cn(
+        "flex-none inline-flex items-center whitespace-nowrap overflow-hidden",
+        badgeVariants({ variant }),
+        sizeClasses[size],
+        className
+      )}
       {...props}
     >
       {Icon && (
         <Icon
           className={cn(
-            "mr-1",
+            "mr-1 flex-shrink-0",
             size === "sm" ? "h-3 w-3" : size === "xs" ? "h-2 w-2" : "h-4 w-4"
           )}
         />
       )}
       {circle && (
         <div
           className={cn(
-            "mr-2 rounded-full bg-current opacity-80",
+            "mr-2 rounded-full bg-current opacity-80 flex-shrink-0",
             size === "xs" ? "h-2 w-2" : "h-2.5 w-2.5"
           )}
         />
       )}
-      {props.children}
+      <span className="truncate">{props.children}</span>
     </div>
   );
 }