style remove button

upstash · Nov 7, 2024 · bd4c42a · bd4c42a
1 parent 43e3837
commit bd4c42a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/...s/react-databrowser/src/components/databrowser/components/display/delete-alert-dialog.tsx b/...s/react-databrowser/src/components/databrowser/components/display/delete-alert-dialog.tsx
@@ -19,6 +19,7 @@ export function DeleteAlertDialog({
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Irreversible Action!</AlertDialogTitle>

diff --git a/packages/react-databrowser/src/components/databrowser/components/display/display-list.tsx b/packages/react-databrowser/src/components/databrowser/components/display/display-list.tsx
@@ -77,28 +77,23 @@ export const ListItems = ({
           onClick={() => {
             setSelectedListItem({ key, value })
           }}
-          className="h-10 border-b border-b-zinc-100 "
+          className="h-10 border-b border-b-zinc-100 hover:bg-zinc-50"
         >
           <td
             className={cn(
-              "cursor-pointer truncate px-3 py-2 hover:bg-zinc-50",
-              type === "list" || type === "stream" ? "w-10 text-center" : "max-w-0"
+              "cursor-pointer truncate px-3",
+              type === "list" || type === "stream" ? "w-24" : ""
             )}
           >
             {key}
           </td>
           {value !== undefined && (
-            <td
-              className={cn(
-                "max-w-0 cursor-pointer truncate px-3 py-2 hover:bg-zinc-50",
-                type === "zset" ? "w-10 text-center" : "max-w-0"
-              )}
-            >
+            <td className={cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "")}>
               {value}
             </td>
           )}
           {type !== "stream" && (
-            <td width={20}>
+            <td width={20} className="px-3">
               <DeleteAlertDialog
                 onDeleteConfirm={(e) => {
                   e.stopPropagation()
@@ -111,8 +106,8 @@ export const ListItems = ({
                   })
                 }}
               >
-                <Button onClick={(e) => e.stopPropagation()}>
-                  <IconTrash size={16} />
+                <Button size="icon-sm" variant="secondary" onClick={(e) => e.stopPropagation()}>
+                  <IconTrash className="size-4 text-zinc-500" />
                 </Button>
               </DeleteAlertDialog>
             </td>