some more tweaks

marhaupe · Sep 6, 2024 · 35bdf2a · 35bdf2a
1 parent eb488ba
commit 35bdf2a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -98,7 +98,7 @@ export function App() {
         <Card className="mb-4 relative">
           <CardContent className="p-2">
             <Button
-              variant="ghost"
+              variant="secondary"
               className="p-2 absolute top-2 right-2 z-40"
               onClick={() => setIsPaused((prev) => !prev)}
             >

diff --git a/packages/frontend/src/Histogram.tsx b/packages/frontend/src/Histogram.tsx
@@ -21,6 +21,12 @@ type Bucket = {
 
 const bucketCount = 100;
 
+const chartConfig: ChartConfig = {
+  count: {
+    color: "hsl(var(--primary))",
+  },
+};
+
 export function Histogram({ logs, onTimeframeSelect }: HistogramProps) {
   const [buckets, setBuckets] = useState<Bucket[]>([]);
 
@@ -31,14 +37,14 @@ export function Histogram({ logs, onTimeframeSelect }: HistogramProps) {
           logs.map((log) => ({
             startTime: new Date(log.timestamp),
             count: 1,
-          })),
+          }))
         );
         return;
       }
       // should set a different unit depending on the timeframe
       const startDate = new Date(logs[0].timestamp).setMilliseconds(0);
       const endDate = new Date(logs[logs.length - 1].timestamp).setMilliseconds(
-        0,
+        0
       );
       const timeDiff = endDate - startDate;
       // Maybe we can set the interval to either 100 or logs.length
@@ -60,18 +66,18 @@ export function Histogram({ logs, onTimeframeSelect }: HistogramProps) {
       }
       setBuckets(buckets);
     }, 2500),
-    [setBuckets],
+    [setBuckets]
   );
 
   useEffect(() => throttledSetBuckets(logs), [logs, throttledSetBuckets]);
 
-  const chartConfig = {} satisfies ChartConfig;
   const maxBucketCount = Math.max(...buckets.map((b) => b.count));
 
   return (
     <div className="flex flex-row justify-center">
       <ChartContainer
         className="aspect-auto h-[125px] w-full"
+        color="red"
         config={chartConfig}
       >
         <BarChart
@@ -96,18 +102,22 @@ export function Histogram({ logs, onTimeframeSelect }: HistogramProps) {
               maxBucketCount > 500
                 ? 500
                 : maxBucketCount > 250
-                  ? 250
-                  : maxBucketCount > 100
-                    ? 100
-                    : 50,
+                ? 250
+                : maxBucketCount > 100
+                ? 100
+                : 50,
             ]}
           />
 
           <ChartTooltip
             labelFormatter={(time) => format(new Date(time), "HH:mm:ss:SS")}
             formatter={(value) => [`${value}`, "Count"]}
           />
-          <Bar isAnimationActive={false} dataKey="count" />
+          <Bar
+            isAnimationActive={false}
+            dataKey="count"
+            fill="hsl(var(--primary))"
+          />
         </BarChart>
       </ChartContainer>
     </div>

diff --git a/packages/frontend/src/LogEntry.tsx b/packages/frontend/src/LogEntry.tsx
@@ -113,7 +113,7 @@ export function LogEntry({
       className={cn(
         "flex w-full group relative h-full items-center",
         (isHovered || isSelected) && "bg-stone-100",
-        isSelected && "border-l-4 border-primary pl-1"
+        isSelected && "border-l-4 border-primary pl-2"
       )}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}

diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
@@ -12,7 +12,7 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 221.2 83.2% 53.3%;
     --primary-foreground: 210 40% 98%;
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
@@ -24,7 +24,7 @@
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 221.2 83.2% 53.3%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -40,7 +40,7 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
@@ -52,20 +52,11 @@
     --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --ring: 224.3 76.3% 48%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
 }
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}