unkeyed · chronark · Mar 4, 2025 · Mar 3, 2025 · Mar 4, 2025 · Mar 4, 2025
@@ -2,6 +2,7 @@
 import { StatsCard } from "@/components/stats-card";
 import { StatsTimeseriesBarChart } from "@/components/stats-card/components/chart/stats-chart";
 import { MetricStats } from "@/components/stats-card/components/metric-stats";
+import { formatNumber } from "@/lib/fmt";
 import type { ApiOverview } from "@/lib/trpc/routers/api/query-overview/schemas";
 import { Key, ProgressBar } from "@unkey/icons";
 import { useFetchVerificationTimeseries } from "./hooks/use-query-timeseries";
@@ -50,7 +51,7 @@ export const ApiListCard = ({ api }: Props) => {
           <div className="flex items-center gap-2 min-w-0 max-w-[40%]">
             <Key className="text-accent-11 flex-shrink-0" />
             <div className="text-xs text-accent-9 truncate">
-              {keyCount > 0 ? `${keyCount} ${keyCount === 1 ? "Key" : "Keys"}` : "No data"}
+              {`${formatNumber(keyCount)} ${keyCount === 1 ? "Key" : "Keys"}`}
             </div>
           </div>
         </>

@@ -33,7 +33,7 @@ export const ApiListClient = ({
           </Empty.Description>
           <Empty.Actions className="mt-4 ">
             <a href="/settings/billing" target="_blank" rel="noopener noreferrer">
-              <Button>
+              <Button size="md">
                 <BookBookmark />
                 Subscribe
               </Button>
@@ -70,7 +70,7 @@ export const ApiListClient = ({
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <Button>
+                <Button size="md">
                   <BookBookmark />
                   Documentation
                 </Button>

@@ -69,8 +69,9 @@ export const LogsDateTime = () => {
       <div className="group">
         <Button
           variant="ghost"
+          size="md"
           className={cn(
-            "group-data-[state=open]:bg-gray-4 px-2",
+            "group-data-[state=open]:bg-gray-4 px-2 rounded-lg",
             !title ? "opacity-50" : "",
             title !== "Last 12 hours" ? "bg-gray-4" : "",
           )}

@@ -1,15 +1,7 @@
 "use client";
 
 import { revalidate } from "@/app/actions";
-import { Loading } from "@/components/dashboard/loading";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import { DialogContainer } from "@/components/dialog-container";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -33,7 +25,7 @@ export const CreateApiButton = ({
   defaultOpen,
   ...rest
 }: React.ButtonHTMLAttributes<HTMLButtonElement> & Props) => {
-  const [open, setOpen] = useState(defaultOpen ?? false);
+  const [isOpen, setIsOpen] = useState(defaultOpen ?? false);
   const router = useRouter();
 
   const {
@@ -42,13 +34,15 @@ export const CreateApiButton = ({
     formState: { errors, isValid, isSubmitting },
   } = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
+    mode: "onChange",
   });
 
   const create = trpc.api.create.useMutation({
     async onSuccess(res) {
       toast.success("Your API has been created");
       await revalidate("/apis");
       router.push(`/apis/${res.id}`);
+      setIsOpen(false);
     },
     onError(err) {
       console.error(err);
@@ -62,55 +56,44 @@ export const CreateApiButton = ({
 
   return (
     <>
-      <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
-        <DialogTrigger asChild>
-          <Button variant="primary" {...rest}>
-            <Plus />
-            Create New API
-          </Button>
-        </DialogTrigger>
-        <DialogContent
-          className="bg-gray-1 dark:bg-black drop-shadow-2xl border-gray-4 rounded-lg p-0 gap-0"
-          onOpenAutoFocus={(e) => {
-            // Prevent auto-focus behavior
-            e.preventDefault();
-          }}
-        >
-          <DialogHeader className="border-b border-gray-4">
-            <DialogTitle className="px-6 py-4 text-gray-12 font-medium text-base">
-              Create New API
-            </DialogTitle>
-          </DialogHeader>
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="flex flex-col gap-4 p-5 pt-4 bg-accent-2">
-              <FormInput
-                label="Name"
-                description="This is just a human readable name for you and not visible to anyone else"
-                error={errors.name?.message}
-                {...register("name")}
-                placeholder="my-api"
-              />
-            </div>
+      <Button variant="primary" {...rest} color="default" onClick={() => setIsOpen(true)}>
+        <Plus />
+        Create New API
+      </Button>
 
-            <DialogFooter className="p-6 border-t border-gray-4">
-              <div className="w-full flex flex-col gap-2 items-center justify-center">
-                <Button
-                  type="submit"
-                  variant="primary"
-                  disabled={create.isLoading || isSubmitting || !isValid}
-                  loading={create.isLoading || isSubmitting}
-                  className="h-10 w-full rounded-lg"
-                >
-                  {create.isLoading ? <Loading /> : "Create API"}
-                </Button>
-                <div className="text-gray-9 text-xs">
-                  You'll be redirected to your new API dashboard after creation
-                </div>
-              </div>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
+      <DialogContainer
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        title="Create New API"
+        footer={
+          <div className="w-full flex flex-col gap-2 items-center justify-center">
+            <Button
+              type="submit"
+              form="create-api-form"
+              variant="primary"
+              size="xlg"
+              disabled={create.isLoading || isSubmitting || !isValid}
+              loading={create.isLoading || isSubmitting}
+              className="w-full rounded-lg"
+            >
+              Create API
+            </Button>
+            <div className="text-gray-9 text-xs">
+              You'll be redirected to your new API dashboard after creation
+            </div>
+          </div>
+        }
+      >
+        <form id="create-api-form" onSubmit={handleSubmit(onSubmit)}>
+          <FormInput
+            label="Name"
+            description="This is just a human readable name for you and not visible to anyone else"
+            error={errors.name?.message}
+            {...register("name")}
+            placeholder="my-api"
+          />
+        </form>
+      </DialogContainer>
     </>
   );
 };
@@ -69,8 +69,9 @@ export const LogsDateTime = () => {
       <div className="group">
         <Button
           variant="ghost"
+          size="md"
           className={cn(
-            "group-data-[state=open]:bg-gray-4 px-2",
+            "group-data-[state=open]:bg-gray-4 px-2 rounded-lg",
             !title ? "opacity-50" : "",
             title !== "Last 12 hours" ? "bg-gray-4" : "",
           )}

@@ -69,8 +69,9 @@ export const LogsDateTime = () => {
       <div className="group">
         <Button
           variant="ghost"
+          size="md"
           className={cn(
-            "group-data-[state=open]:bg-gray-4 px-2",
+            "group-data-[state=open]:bg-gray-4 px-2 rounded-lg",
             !title ? "opacity-50" : "",
             title !== "Last 12 hours" ? "bg-gray-4" : "",
           )}

@@ -9,7 +9,8 @@ export const LogsDisplay = () => {
       <div className="group">
         <Button
           variant="ghost"
-          className={cn("group-data-[state=open]:bg-gray-4 px-2")}
+          size="md"
+          className={cn("group-data-[state=open]:bg-gray-4 px-2 rounded-lg")}
           aria-label="Filter logs"
           aria-haspopup="true"
           title="Press 'F' to toggle filters"

@@ -35,8 +35,9 @@ export const LogsFilters = () => {
       <div className="group">
         <Button
           variant="ghost"
+          size="md"
           className={cn(
-            "group-data-[state=open]:bg-gray-4 px-2",
+            "group-data-[state=open]:bg-gray-4 px-2 rounded-lg",
             filters.length > 0 ? "bg-gray-4" : "",
           )}
           aria-label="Filter logs"

@@ -259,7 +259,7 @@ export const LogsTable = () => {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <Button>
+                <Button size="md">
                   <BookBookmark />
                   Documentation
                 </Button>

@@ -1,17 +1,10 @@
 "use client";
 
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
+import { DialogContainer } from "@/components/dialog-container";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "@unkey/ui";
+import { Button, Input } from "@unkey/ui";
 import type { PropsWithChildren } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -75,58 +68,45 @@ export const DeleteDialog = ({ isModalOpen, onOpenChange, overrideId, identifier
   };
 
   return (
-    <Dialog open={isModalOpen} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="bg-gray-1 dark:bg-black drop-shadow-2xl border-gray-4 rounded-2xl p-0 gap-0"
-        onOpenAutoFocus={(e) => {
-          e.preventDefault();
-        }}
-      >
-        <DialogHeader className="border-b border-gray-4">
-          <DialogTitle className="px-6 py-4 text-gray-12 font-medium text-base">
+    <DialogContainer
+      isOpen={isModalOpen}
+      onOpenChange={onOpenChange}
+      title="Delete Override"
+      footer={
+        <div className="w-full flex flex-col gap-2 items-center justify-center">
+          <Button
+            type="submit"
+            form="delete-override-form"
+            variant="primary"
+            color="danger"
+            size="xlg"
+            disabled={!isValid || deleteOverride.isLoading || isSubmitting}
+            loading={deleteOverride.isLoading || isSubmitting}
+            className="w-full rounded-lg"
+          >
             Delete Override
-          </DialogTitle>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="flex flex-col gap-4 py-4 px-6 bg-accent-2">
-            <p className="text-gray-11 text-[13px]">
-              <span className="font-medium">Warning: </span>
-              Are you sure you want to delete this override? The identifier associated with this
-              override will now use the default limits.
-            </p>
-
-            <div className="space-y-1">
-              <p className="text-gray-11 text-[13px]">
-                Type <span className="text-gray-12 font-medium">{identifier}</span> to confirm
-              </p>
-
-              <Input
-                {...register("identifier")}
-                placeholder={`Enter "${identifier}" to confirm`}
-                className="border border-gray-5 focus:border focus:border-gray-4 px-3 py-1 hover:bg-gray-4 hover:border-gray-8 focus:bg-gray-4 rounded-md placeholder:text-gray-8 h-9"
-              />
-            </div>
+          </Button>
+          <div className="text-gray-9 text-xs">
+            This action cannot be undone – proceed with caution
           </div>
+        </div>
+      }
+    >
+      <p className="text-gray-11 text-[13px]">
+        <span className="font-medium">Warning: </span>
+        Are you sure you want to delete this override? The identifier associated with this override
+        will now use the default limits.
+      </p>
+
+      <form id="delete-override-form" onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-1">
+          <p className="text-gray-11 text-[13px]">
+            Type <span className="text-gray-12 font-medium">{identifier}</span> to confirm
+          </p>
 
-          <DialogFooter className="p-6 border-t border-gray-4">
-            <div className="w-full flex flex-col gap-2 items-center justify-center">
-              <Button
-                type="submit"
-                variant="destructive"
-                disabled={!isValid || deleteOverride.isLoading || isSubmitting}
-                loading={deleteOverride.isLoading || isSubmitting}
-                className="h-10 w-full rounded-lg"
-              >
-                Delete Override
-              </Button>
-              <div className="text-gray-9 text-xs">
-                This action cannot be undone – proceed with caution
-              </div>
-            </div>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+          <Input {...register("identifier")} placeholder={`Enter "${identifier}" to confirm`} />
+        </div>
+      </form>
+    </DialogContainer>
   );
 };