updated color palette

Author: darkoatanasovski

app/app/globals.css

@@ -22,13 +22,15 @@
   --color-input: hsl(240 5.9% 90%);
   --color-ring: hsl(346.8 77.2% 49.8%);
   --radius: 0.65rem;
+  --color-menu: #eee;
 }
 
 @layer base {
   .dark {
-    --color-background: hsl(20 14.3% 4.1%);
-    --color-foreground: hsl(0 0% 95%);
-    --color-popover: hsl(0 0% 9%);
+    --color-menu: #1b1b1f;
+    --color-background: #16161a;
+    --color-foreground: #94a1b2;
+    --color-popover: #16161ad6;
     --color-popover-foreground: hsl(0 0% 95%);
     --color-card: hsl(24 9.8% 10%);
     --color-card-foreground: hsl(0 0% 95%);

app/app/page.tsx

@@ -106,9 +106,9 @@ export default function Home() {
         {selectedItem ? (
           <KeyDetailsContent selectedItem={selectedItem} view={view} />
         ) : (
-          <div className="flex flex-col items-center justify-center gap-2 h-screen opacity-70">
+          <div className="flex flex-col items-center justify-center gap-2 h-screen opacity-50">
             <MousePointerClickIcon size={130} className="opacity-50" />
-            <div>Select a key to view details</div>
+            <div className="text-sm">Select a key to view details</div>
           </div>
         )}
         <Cluster

app/components/key/list.tsx

@@ -67,7 +67,9 @@ export function KeyList({
                     onClick={() => setSelectedItem(item)}
                     className={cn(
                       "p-2 rounded hover:bg-primary/30 cursor-pointer text-sm font-mono w-[280px] rounded-md",
-                      selectedItem?.key === item.key ? "bg-primary" : ""
+                      selectedItem?.key === item.key
+                        ? "bg-primary text-white"
+                        : ""
                     )}
                   >
                     <div className="flex items-center gap-2">
@@ -83,6 +85,7 @@ export function KeyList({
                   <Button
                     variant="secondary"
                     className="w-full"
+                    size="lg"
                     onClick={() => {
                       const last = keys[keys.length - 1];
                       if (last) {

app/components/sidebar.tsx

@@ -36,7 +36,7 @@ export default function Sidebar({
   };
   return (
     <>
-      <div className="p-4 border-r border-border flex flex-col justify-between items-center">
+      <div className="p-4 flex flex-col justify-between items-center bg-menu">
         <a href="">
           <Image src={TiKV.src} alt="Logo" width={32} height={32} />
         </a>

app/tailwind.config.js

@@ -9,6 +9,7 @@ module.exports = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        menu: "var(--color-menu)",
         card: {
           DEFAULT: "var(--card)",
           foreground: "var(--card-foreground)",