From 48443e3bf7d67ec38626a42baf9d03e581e16b8e Mon Sep 17 00:00:00 2001
From: Adem ilter <ademilter@gmail.com>
Date: Tue, 5 Nov 2024 18:29:24 +0300
Subject: [PATCH] style

---
 .../databrowser/components/sidebar/keys-list.tsx | 16 ++++++++--------
 .../components/sidebar/skeleton-buttons.tsx      |  2 +-
 .../databrowser/components/type-tag.tsx          | 14 +++++++-------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/react-databrowser/src/components/databrowser/components/sidebar/keys-list.tsx b/packages/react-databrowser/src/components/databrowser/components/sidebar/keys-list.tsx
index 7ddfdbe..d8d4b40 100644
--- a/packages/react-databrowser/src/components/databrowser/components/sidebar/keys-list.tsx
+++ b/packages/react-databrowser/src/components/databrowser/components/sidebar/keys-list.tsx
@@ -30,16 +30,16 @@ const KeyItem = ({ data }: { data: RedisKey }) => {
       key={dataKey}
       variant={isKeySelected ? "default" : "ghost"}
       className={cn(
-        "relative flex h-10 w-full items-center justify-start gap-3 px-3 py-0 ",
+        "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 ",
         "border border-transparent text-left",
         isKeySelected && "shadow-sm",
-        isKeySelected && dataType === "string" && "border-sky-500 !bg-sky-50",
-        isKeySelected && dataType === "list" && "border-orange-500 !bg-orange-50",
-        isKeySelected && dataType === "hash" && "border-amber-500 !bg-amber-50",
-        isKeySelected && dataType === "set" && "border-indigo-500 !bg-indigo-50",
-        isKeySelected && dataType === "zset" && "border-pink-500  !bg-pink-50",
-        isKeySelected && dataType === "json" && "border-purple-500 !bg-purple-50",
-        isKeySelected && dataType === "stream" && "border-orange-500 !bg-orange-50"
+        isKeySelected && dataType === "string" && "border-sky-400 !bg-sky-50",
+        isKeySelected && dataType === "list" && "border-orange-400 !bg-orange-50",
+        isKeySelected && dataType === "hash" && "border-amber-400 !bg-amber-50",
+        isKeySelected && dataType === "set" && "border-indigo-400 !bg-indigo-50",
+        isKeySelected && dataType === "zset" && "border-pink-400  !bg-pink-50",
+        isKeySelected && dataType === "json" && "border-purple-400 !bg-purple-50",
+        isKeySelected && dataType === "stream" && "border-orange-400 !bg-orange-50"
       )}
       onClick={() => setSelectedKey(dataKey)}
     >
diff --git a/packages/react-databrowser/src/components/databrowser/components/sidebar/skeleton-buttons.tsx b/packages/react-databrowser/src/components/databrowser/components/sidebar/skeleton-buttons.tsx
index 2a27a7d..f1adabc 100644
--- a/packages/react-databrowser/src/components/databrowser/components/sidebar/skeleton-buttons.tsx
+++ b/packages/react-databrowser/src/components/databrowser/components/sidebar/skeleton-buttons.tsx
@@ -7,7 +7,7 @@ export const LoadingSkeleton = () => (
     {Array.from({ length: DEFAULT_SKELETON_COUNT })
       .fill(0)
       .map((_, idx) => (
-        <div className="flex h-10 items-center gap-3 px-3" key={idx}>
+        <div className="flex h-10 items-center gap-2 px-3" key={idx}>
           <Skeleton className="size-5 shrink-0 rounded" />
           <Skeleton className="h-4 grow rounded" />
         </div>
diff --git a/packages/react-databrowser/src/components/databrowser/components/type-tag.tsx b/packages/react-databrowser/src/components/databrowser/components/type-tag.tsx
index 2c2c786..5cad190 100644
--- a/packages/react-databrowser/src/components/databrowser/components/type-tag.tsx
+++ b/packages/react-databrowser/src/components/databrowser/components/type-tag.tsx
@@ -25,13 +25,13 @@ const iconsMap = {
 const tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
     variant: {
-      string: "bg-sky-200 text-sky-800",
-      list: "bg-orange-200 text-orange-800",
-      hash: "bg-amber-200 text-amber-800",
-      set: "bg-indigo-200 text-indigo-800",
-      zset: "bg-pink-200 text-pink-800",
-      json: "bg-purple-200 text-purple-800",
-      stream: "bg-orange-200 text-orange-800",
+      string: "bg-sky-100 text-sky-800",
+      list: "bg-orange-100 text-orange-800",
+      hash: "bg-amber-100 text-amber-800",
+      set: "bg-indigo-100 text-indigo-800",
+      zset: "bg-pink-100 text-pink-800",
+      json: "bg-purple-100 text-purple-800",
+      stream: "bg-orange-100 text-orange-800",
     },
     type: {
       icon: "size-5",