style

Author: ademilter

packages/react-databrowser/src/components/databrowser/components/add-key-modal.tsx

@@ -64,7 +64,7 @@ export function AddKeyModal() {
     >
       <DialogTrigger asChild>
         <Button variant="primary" size="icon-sm">
-          <PlusIcon className="h-4 w-4" />
+          <PlusIcon className="size-4" />
         </Button>
       </DialogTrigger>
 

packages/react-databrowser/src/components/databrowser/components/display/display-header.tsx

@@ -40,7 +40,7 @@ export const DisplayHeader = ({
   return (
     <div className="rounded-lg bg-zinc-100 px-3 py-2">
       <div className="flex min-h-10 items-center justify-between gap-4">
-        <h2 className="grow truncate">
+        <h2 className="grow truncate text-base">
           {dataKey.trim() === "" ? (
             <span className="ml-1 text-zinc-500">(Empty Key)</span>
           ) : (
@@ -51,7 +51,7 @@ export const DisplayHeader = ({
         <div className="flex items-center gap-1">
           {type !== "string" && type !== "json" && (
             <Button onClick={handleAddItem} size="icon-sm">
-              <IconPlus className="size-5 text-zinc-500" />
+              <IconPlus className="size-4 text-zinc-500" />
             </Button>
           )}
 

packages/react-databrowser/src/components/databrowser/components/display/key-actions.tsx

@@ -17,7 +17,7 @@ export function KeyActions({ dataKey, content }: { dataKey: string; content?: st
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button size="icon-sm">
-          <IconDotsVertical className="size-5 text-zinc-500" />
+          <IconDotsVertical className="size-4 text-zinc-500" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="" align="end">

packages/react-databrowser/src/components/databrowser/components/display/ttl-popover.tsx

@@ -7,7 +7,6 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import {
   Select,
   SelectContent,
-  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -76,11 +75,13 @@ export function TTLPopover({
       <PopoverTrigger asChild>
         <button>{children}</button>
       </PopoverTrigger>
-      <PopoverContent className="w-[300px]">
+
+      <PopoverContent className="w-[300px]" align="end">
         <form className="space-y-4" onSubmit={onSubmit}>
           <h4 className="font-medium leading-none">Expiration</h4>
+
           <div>
-            <div className="flex">
+            <div className="flex items-center">
               <Controller
                 rules={{
                   required: "Please enter an expiration time",
@@ -89,37 +90,40 @@ export function TTLPopover({
                 control={control}
                 name="value"
                 render={({ field }) => (
-                  <Input min="-1" {...field} className="h-8 grow rounded-r-none" />
+                  <Input min="-1" {...field} className="grow rounded-r-none" />
                 )}
               />
+
               <Controller
                 control={control}
                 name="type"
                 render={({ field }) => (
                   <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger className="h-8 rounded-l-none border-l-0 pl-2 pr-8">
+                    <SelectTrigger className="w-auto rounded-l-none border-l-0 pr-8">
                       <SelectValue />
                     </SelectTrigger>
+
                     <SelectContent>
-                      <SelectGroup>
-                        {timeUnits.map((unit) => (
-                          <SelectItem key={unit.label} value={unit.label}>
-                            {unit.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
+                      {timeUnits.map((unit) => (
+                        <SelectItem key={unit.label} value={unit.label}>
+                          {unit.label}
+                        </SelectItem>
+                      ))}
                     </SelectContent>
                   </Select>
                 )}
               />
             </div>
+
             {formState.errors.value && (
-              <div className="my-1 text-xs text-red-500">{formState.errors.value.message}</div>
+              <p className="mt-2 text-xs text-red-500">{formState.errors.value.message}</p>
             )}
+
+            <p className="mt-2 text-xs text-zinc-500">
+              TTL sets a timer to automatically delete keys after a defined period.
+            </p>
           </div>
-          <div className="text-xs text-zinc-500">
-            TTL sets a timer to automatically delete keys after a defined period.
-          </div>
+
           <div className="flex justify-between">
             <Button
               disabled={ttl === PERSISTED_KEY}

packages/react-databrowser/src/components/databrowser/components/sidebar/reload-button.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { ReloadIcon } from "@radix-ui/react-icons"
 
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
 export const ReloadButton = ({
@@ -29,7 +30,7 @@ export const ReloadButton = ({
         onClick={handleClick}
         disabled={isLoading || isLoadingProp}
       >
-        <ReloadIcon className={isLoading || isLoadingProp ? "animate-spin" : ""} />
+        <ReloadIcon className={cn("size-4", isLoading || isLoadingProp ? "animate-spin" : "")} />
       </Button>
     </div>
   )

packages/react-databrowser/src/components/databrowser/copy-button.tsx

@@ -30,7 +30,7 @@ export function CopyButton({
   return (
     <Button size={sizeVariant} variant={variant} onClick={handleCopy} className={className}>
       {copied ? (
-        <CheckIcon />
+        <CheckIcon className="size-4" />
       ) : (
         <svg
           width={svgSize?.w ?? 15}

packages/react-databrowser/src/components/ui/dropdown-menu.tsx

@@ -32,7 +32,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
@@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -126,7 +126,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotFilledIcon className="size-4 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

packages/react-databrowser/src/components/ui/popover.tsx

@@ -17,7 +17,16 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "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 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+        "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 " +
+          "z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 " +
+          "text-zinc-950 shadow-md outline-none dark:border-zinc-800 " +
+          "mt-0.5 dark:bg-zinc-950 dark:text-zinc-50",
         className
       )}
       {...props}

packages/react-databrowser/src/components/ui/toast.tsx

@@ -80,7 +80,7 @@ const ToastClose = React.forwardRef<
     toast-close=""
     {...props}
   >
-    <Cross2Icon className="h-4 w-4" />
+    <Cross2Icon className="size-4" />
   </ToastPrimitives.Close>
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName