style

upstash · Nov 5, 2024 · 0640885 · 0640885
1 parent 3a857bd
commit 0640885
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 38 deletions.
diff --git a/packages/react-databrowser/src/components/databrowser/components/add-key-modal.tsx b/packages/react-databrowser/src/components/databrowser/components/add-key-modal.tsx
@@ -124,7 +124,7 @@ export function AddKeyModal() {
             >
               Cancel
             </Button>
-            <Button variant={"primary"} type="submit">
+            <Button variant="primary" type="submit">
               <Spinner isLoading={isPending} isLoadingText={"Creating"}>
                 Create
               </Spinner>

diff --git a/packages/react-databrowser/src/components/databrowser/components/display/display-header.tsx b/packages/react-databrowser/src/components/databrowser/components/display/display-header.tsx
@@ -20,7 +20,7 @@ import { TTLPopover } from "./ttl-popover"
 export const DisplayHeader = ({
   dataKey,
   type,
-  hideBadges,
+  // hideBadges,
   content,
 }: {
   content?: string
@@ -59,15 +59,15 @@ export const DisplayHeader = ({
         </div>
       </div>
 
-      {!hideBadges && (
-        <div className="flex h-10 flex-wrap items-center gap-1">
-          <TypeTag variant={type} type="badge" />
-          <SizeBadge dataKey={dataKey} />
-          <LengthBadge dataKey={dataKey} type={type} content={content} />
-          {length && <Badge label="Length:">{size}</Badge>}
-          <TTLBadge dataKey={dataKey} />
-        </div>
-      )}
+      {/*{!hideBadges && (*/}
+      <div className="flex h-10 flex-wrap items-center gap-1">
+        <TypeTag variant={type} type="badge" />
+        <SizeBadge dataKey={dataKey} />
+        <LengthBadge dataKey={dataKey} type={type} content={content} />
+        {length && <Badge label="Length:">{size}</Badge>}
+        <TTLBadge dataKey={dataKey} />
+      </div>
+      {/*)}*/}
     </div>
   )
 }

diff --git a/...ges/react-databrowser/src/components/databrowser/components/display/display-list-edit.tsx b/...ges/react-databrowser/src/components/databrowser/components/display/display-list-edit.tsx
@@ -67,27 +67,26 @@ const ListEditForm = ({
       <form onSubmit={onSubmit} className="flex flex-col gap-2">
         <div className="flex grow flex-col gap-2">
           {type !== "list" && <FormItem name="key" label={keyLabel} />}
+
           {type === "zset" ? (
             <NumberFormItem name="value" label={valueLabel} />
           ) : (
             type !== "set" && <FormItem name="value" label={valueLabel} />
           )}
         </div>
 
-        <div className="flex justify-end gap-1">
+        <div className="flex justify-end gap-2">
           <Button
-            type="button"
             onClick={() => {
               setSelectedListItem(undefined)
             }}
-            className="h-6 rounded-md border bg-white px-3 font-normal text-zinc-700 hover:bg-zinc-100"
           >
             Cancel
           </Button>
           <SimpleTooltip content={type === "stream" ? "Streams are not mutable" : undefined}>
             <Button
+              variant="primary"
               type="submit"
-              className="h-6 rounded-md bg-emerald-500 px-3 font-normal text-white hover:bg-emerald-600 disabled:opacity-50"
               disabled={!form.formState.isValid || !form.formState.isDirty || type === "stream"}
             >
               <Spinner isLoading={isPending} isLoadingText={"Saving"}>

diff --git a/packages/react-databrowser/src/components/databrowser/components/display/display-simple.tsx b/packages/react-databrowser/src/components/databrowser/components/display/display-simple.tsx
@@ -2,7 +2,6 @@ import { useEffect } from "react"
 import type { SimpleDataType } from "@/types"
 import { useForm } from "react-hook-form"
 
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Spinner } from "@/components/ui/spinner"
 
@@ -17,6 +16,7 @@ export const EditorDisplay = ({ dataKey, type }: { dataKey: string; type: Simple
   return (
     <div className="flex h-full w-full flex-col gap-2 overflow-y-scroll">
       <DisplayHeader dataKey={dataKey} type={type} content={data ?? undefined} />
+
       {data === undefined ? (
         <div className="flex h-full items-center justify-center">
           <Spinner isLoadingText={""} isLoading={true} />
@@ -63,25 +63,17 @@ const EditorDisplayForm = ({
   return (
     <>
       <div className="grow rounded-md border border-zinc-300 bg-white p-1">{editor}</div>
-      <div className="flex flex-shrink-0 justify-between px-3 pb-2 pt-1">
+
+      <div className="flex shrink-0 items-center justify-between gap-2 px-3 pb-2 pt-1">
         {type === "json" ? <div /> : selector}
 
-        <div className="flex gap-1">
-          {form.formState.isDirty && (
-            <Button
-              onClick={handleCancel}
-              className="h-6 rounded-md border bg-white px-3 font-normal text-zinc-700 hover:bg-zinc-100"
-            >
-              Cancel
-            </Button>
-          )}
+        <div className="flex gap-2">
+          {form.formState.isDirty && <Button onClick={handleCancel}>Cancel</Button>}
           <Button
             onClick={form.handleSubmit(async ({ value }) => {
               await setKey(value)
             })}
-            className={cn(
-              "h-6 rounded-md bg-emerald-500 px-3 font-normal text-white hover:bg-emerald-600 disabled:opacity-50"
-            )}
+            variant="primary"
             disabled={!form.formState.isValid || !form.formState.isDirty}
           >
             <Spinner isLoading={isSettingKey} isLoadingText={"Saving"}>

diff --git a/...t-databrowser/src/components/databrowser/components/display/input/content-type-select.tsx b/...t-databrowser/src/components/databrowser/components/display/input/content-type-select.tsx
@@ -27,7 +27,7 @@ export const ContentTypeSelect = ({
 
   return (
     <Select value={value} onValueChange={onChange}>
-      <SelectTrigger className="h-6 w-auto border-none bg-transparent pl-0 pr-7 text-xs text-zinc-500">
+      <SelectTrigger className="h-6 w-auto border-none bg-transparent pl-0 pr-6 text-xs text-zinc-500">
         <SelectValue placeholder="Expires" />
       </SelectTrigger>
       <SelectContent>

diff --git a/packages/react-databrowser/src/components/databrowser/components/display/ttl-popover.tsx b/packages/react-databrowser/src/components/databrowser/components/display/ttl-popover.tsx
@@ -135,10 +135,10 @@ export function TTLPopover({
               Persist
             </Button>
             <div className="flex gap-2">
-              <Button size={"sm"} variant={"outline"} onClick={() => setOpen(false)} type="button">
+              <Button variant="outline" onClick={() => setOpen(false)} type="button">
                 Cancel
               </Button>
-              <Button size={"sm"} variant={"primary"} type="submit">
+              <Button variant="primary" type="submit">
                 <Spinner isLoading={isPending} isLoadingText="Saving">
                   Save
                 </Spinner>

diff --git a/packages/react-databrowser/src/components/ui/button.tsx b/packages/react-databrowser/src/components/ui/button.tsx
@@ -5,20 +5,30 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
+  "inline-flex items-center justify-center rounded-md text-sm " +
+    "ring-offset-white transition-colors " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 " +
+    "disabled:pointer-events-none disabled:opacity-50 " +
+    "dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
   {
     variants: {
       variant: {
         default:
-          "bg-white text-black border shadow-sm border-zinc-300 hover:bg-[#FFFFFF]/70 dark:bg-black" +
+          "bg-white text-black border shadow-sm border-zinc-300 " +
+          "hover:bg-[#FFFFFF]/70 dark:bg-black" +
           " dark:text-[#FFFFFF]" +
           " dark:hover:bg-black/10",
         destructive:
-          "bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+          "bg-red-500 text-zinc-50 hover:bg-red-500/90 " +
+          "dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
         outline:
-          "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-neutral-50",
+          "border border-zinc-200 bg-white " +
+          "hover:bg-zinc-100 hover:text-zinc-900 " +
+          "dark:border-zinc-800 dark:bg-zinc-950 " +
+          "dark:hover:bg-zinc-800 dark:hover:text-neutral-50",
         primary:
-          "bg-emerald-500 text-white shadow-sm hover:bg-emerald-600 dark:bg-emerald-500 dark:text-white" +
+          "bg-emerald-500 text-white shadow-sm " +
+          "hover:bg-emerald-600 dark:bg-emerald-500 dark:text-white" +
           " dark:hover:bg-emerald-600",
         secondary:
           "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
@@ -36,7 +46,7 @@ const buttonVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "sm",
     },
   }
 )