fix: implement new color scheme (#277)

studio/package.json

@@ -81,10 +81,10 @@
     "react-move-hook": "^0.1.2",
     "reactflow": "^11.9.2",
     "recharts": "^2.7.2",
-    "tailwind-merge": "^1.13.2",
-    "tailwind-scrollbar": "^3.0.4",
-    "tailwindcss": "3.3.2",
-    "tailwindcss-animate": "^1.0.6",
+    "tailwind-merge": "^2.0.0",
+    "tailwind-scrollbar": "^3.0.5",
+    "tailwindcss": "^3.3.5",
+    "tailwindcss-animate": "^1.0.7",
     "use-deep-compare-effect": "^1.8.1",
     "zod": "^3.22.3"
   },

studio/src/components/info-tooltip.tsx

@@ -1,6 +1,10 @@
 import { FiInfo } from "react-icons/fi";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
-import { TooltipArrow } from "@radix-ui/react-tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipArrow,
+} from "./ui/tooltip";
 
 export interface InfoTooltipProps {
   children: React.ReactNode;

studio/src/components/operations-overview.tsx

@@ -64,6 +64,8 @@ const RequestChart = ({
   const color1 = useId();
   const color2 = useId();
 
+  const requestsColor = "hsl(var(--chart-primary))";
+
   return (
     <div className="flex h-full w-full flex-col gap-y-8 rounded-md border p-4 lg:w-3/5 lg:gap-y-4">
       <div className="flex flex-col gap-x-6 gap-y-2 md:flex-row md:items-center">
@@ -73,7 +75,7 @@ const RequestChart = ({
           <span className="text-xs text-muted-foreground">1 Week</span>
         </h2>
         <div className="flex items-center gap-x-2 text-sm md:ml-auto">
-          <div className="h-3 w-3 rounded-full bg-primary" />
+          <div className="h-3 w-3 rounded-full bg-sky-500" />
           Total
           <Badge variant="secondary">{formatMetric(count)}</Badge>
         </div>
@@ -97,11 +99,11 @@ const RequestChart = ({
         >
           <defs>
             <linearGradient id={color1} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="#0da2e7" stopOpacity={0.8} />
-              <stop offset="95%" stopColor="#0da2e7" stopOpacity={0} />
+              <stop offset="5%" stopColor="#0ea5e9" stopOpacity={0.4} />
+              <stop offset="95%" stopColor="#0ea5e9" stopOpacity={0} />
             </linearGradient>
             <linearGradient id={color2} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="#ef4444" stopOpacity={0.8} />
+              <stop offset="5%" stopColor="#ef4444" stopOpacity={0.4} />
               <stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
             </linearGradient>
           </defs>
@@ -123,29 +125,13 @@ const RequestChart = ({
           />
           <CartesianGrid strokeDasharray="3 3" className="stroke-secondary" />
 
-          <ChartTooltip
-            content={(props) => {
-              return (
-                <div className={cn(props.wrapperClassName, "space-y-2")}>
-                  <p>{dateFormatter(props.label, false)}</p>
-                  <p className="text-success">
-                    Success:{" "}
-                    {props.payload?.[0]?.payload?.totalRequests
-                      ? props.payload?.[0]?.payload?.totalRequests -
-                          props.payload?.[0]?.payload?.erroredRequests ?? 0
-                      : 0}
-                  </p>
-                  <p className="text-destructive">
-                    Errors: {props.payload?.[0]?.payload?.erroredRequests ?? 0}
-                  </p>
-                </div>
-              );
-            }}
-          />
+          <ChartTooltip formatter={valueFormatter} />
+
           <Area
             name="Total requests"
             type="monotone"
             dataKey="totalRequests"
+            stroke={requestsColor}
             fill={`url(#${color1})`}
           />
           <Area
@@ -189,6 +175,7 @@ const MostRequested = ({ data }: { data: OperationRequestCount[] }) => {
         <span className="text-xs text-muted-foreground">1 Week</span>
       </h2>
       <BarList
+        rowClassName="bg-purple-400/20"
         data={operations.map((op) => ({
           ...op,
           name: (

studio/src/components/ui/badge.tsx

@@ -25,7 +25,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 export interface BadgeProps

studio/src/components/ui/select.tsx

@@ -17,8 +17,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-popover px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-      className
+      "hover:border-input-active flex h-9 w-full items-center justify-between rounded-md border border-input px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className,
     )}
     {...props}
   >
@@ -41,7 +41,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -50,7 +50,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -80,7 +80,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent",
-      className
+      className,
     )}
     {...props}
   >

studio/src/components/ui/table.tsx

@@ -55,7 +55,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50",
+      "border-b transition-colors data-[state=selected]:bg-muted",
       className,
     )}
     {...props}

studio/src/components/ui/tabs.tsx

@@ -12,8 +12,8 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-accent/60 p-1 text-muted-foreground",
-      className
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
     )}
     {...props}
   />
@@ -27,8 +27,8 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-accent data-[state=active]:text-foreground data-[state=active]:shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      className
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-white data-[state=active]:text-foreground data-[state=active]:shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:data-[state=active]:bg-gray-800",
+      className,
     )}
     {...props}
   />
@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />

studio/src/components/ui/tooltip.tsx

@@ -1,13 +1,13 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -17,12 +17,30 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      "bg-tooltip text-tooltip-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+const TooltipArrow = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
+>(({ className, ...props }, ref) => (
+  <TooltipPrimitive.Arrow
+    ref={ref}
+    className={cn("fill-tooltip", className)}
+    {...props}
+  />
+));
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+};