feat: workspace settings page

apps/dashboard/app/(app)/apis/[apiId]/settings/components/copy-api-id.tsx

@@ -1,43 +1,38 @@
 import { toast } from "@/components/ui/toaster";
 import { Clone } from "@unkey/icons";
-import { SettingCard } from "@unkey/ui";
-import { Input } from "@unkey/ui";
+import { Input, SettingCard } from "@unkey/ui";
 
 export const CopyApiId = ({ apiId }: { apiId: string }) => {
   return (
     <SettingCard
-      title={
-        <div className="flex items-center justify-start gap-2.5">
-          <span className="text-sm font-medium text-accent-12">API ID</span>
-        </div>
-      }
+      title={"API ID"}
       description={
-        <div className="font-normal text-[13px] max-w-[380px]">
-          An identifier for the API, used in some API calls.
-        </div>
+        <div className="max-w-[380px]">An identifier for the API, used in some API calls.</div>
       }
       border="bottom"
-      contentWidth="w-full lg:w-[320px]"
+      contentWidth="w-full lg:w-[320px] justify-end items-end"
     >
-      <Input
-        className="w-full lg:w-[320px] focus:ring-0 focus:ring-offset-0"
-        readOnly
-        defaultValue={apiId}
-        placeholder="API ID"
-        rightIcon={
-          <button
-            type="button"
-            onClick={() => {
-              navigator.clipboard.writeText(apiId);
-              toast.success("Copied to clipboard", {
-                description: apiId,
-              });
-            }}
-          >
-            <Clone size="md-regular" className="text-accent-8" />
-          </button>
-        }
-      />
+      <div className="flex flex-row justify-end items-center gap-x-2 mt-1">
+        <Input
+          className="min-w-[315px] focus:ring-0 focus:ring-offset-0"
+          readOnly
+          defaultValue={apiId}
+          placeholder="API ID"
+          rightIcon={
+            <button
+              type="button"
+              onClick={() => {
+                navigator.clipboard.writeText(apiId);
+                toast.success("Copied to clipboard", {
+                  description: apiId,
+                });
+              }}
+            >
+              <Clone size="md-regular" />
+            </button>
+          }
+        />
+      </div>
     </SettingCard>
   );
 };

apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-bytes.tsx

@@ -1,11 +1,9 @@
 "use client";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { SettingCard } from "@unkey/ui";
-import { Button } from "@unkey/ui";
+import { Button, Input, SettingCard } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -64,20 +62,17 @@ export const DefaultBytes: React.FC<Props> = ({ keyAuth }) => {
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <SettingCard
-          title={
-            <div className="flex items-center justify-start gap-2.5">
-              <span className="text-sm font-medium text-accent-12">Default Bytes</span>
-            </div>
-          }
+          title={"Default Bytes"}
           description={
-            <div className="font-normal text-[13px] max-w-[380px]">
+            <div className="max-w-[380px]">
               Sets the default byte size for keys under this API. Must be between 8 and 255.
             </div>
           }
           border="top"
-          contentWidth="w-full lg:w-[320px]"
+          className="border-b-1"
+          contentWidth="w-full lg:w-[320px] h-full"
         >
-          <div className="flex flex-row justify-items-stretch items-center w-full gap-x-2">
+          <div className="flex flex-row justify-end items-center w-full gap-x-2 mt-2">
             <input type="hidden" name="keyAuthId" value={keyAuth.id} />
             <label htmlFor="defaultBytes" className="hidden sr-only">
               Default Bytes
@@ -90,7 +85,7 @@ export const DefaultBytes: React.FC<Props> = ({ keyAuth }) => {
                   <FormControl>
                     <Input
                       id="defaultBytes"
-                      className="w-[20rem] lg:w-[16rem] h-9"
+                      className="w-[16rem]"
                       {...field}
                       autoComplete="off"
                       onChange={(e) => field.onChange(Number(e.target.value.replace(/\D/g, "")))}

apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-prefix.tsx

@@ -1,11 +1,9 @@
 "use client";
 import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { SettingCard } from "@unkey/ui";
-import { Button } from "@unkey/ui";
+import { Button, Input, SettingCard } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -64,20 +62,17 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <SettingCard
-          title={
-            <div className="flex items-center justify-start gap-2.5">
-              <span className="text-sm font-medium text-accent-12">Default Prefix</span>
-            </div>
-          }
+          title={"Default Prefix"}
           description={
-            <div className="font-normal text-[13px] max-w-[380px]">
+            <div className="max-w-[380px]">
               Sets the default prefix for keys under this API. A trailing underscore is added
               automatically.
             </div>
           }
           border="bottom"
+          contentWidth="w-full lg:w-[320px] h-full"
         >
-          <div className="flex flex-row justify-items-stretch items-center w-full gap-x-2">
+          <div className="flex flex-row justify-end items-center w-full gap-x-2 mt-2">
             <input type="hidden" name="keyAuthId" value={keyAuth.id} />
             <label htmlFor="defaultPrefix" className="hidden sr-only">
               Default Prefix
@@ -90,7 +85,7 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
                   <FormControl>
                     <Input
                       id="defaultPrefix"
-                      className="w-[20rem] lg:w-[16rem] h-9"
+                      className="w-[16rem]"
                       {...field}
                       autoComplete="off"
                       onBlur={(e) => {
@@ -104,7 +99,6 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
               )}
             />
             <Button
-              className="items-end"
               variant="primary"
               size="lg"
               disabled={

apps/dashboard/app/(app)/apis/[apiId]/settings/components/delete-api.tsx

@@ -1,13 +1,11 @@
 "use client";
 import { DialogContainer } from "@/components/dialog-container";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { formatNumber } from "@/lib/fmt";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Lock } from "@unkey/icons";
-import { SettingCard } from "@unkey/ui";
-import { Button } from "@unkey/ui";
+import { Button, Input, SettingCard } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import type React from "react";
 import { useState } from "react";
@@ -78,8 +76,8 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
     <div>
       <SettingCard
         title={
-          <div className=" flex items-center justify-start gap-2.5">
-            <span className="text-sm font-medium text-accent-12">Delete API</span>
+          <div className="inline-flex gap-2">
+            <span>Delete API </span>
             {api.deleteProtection && (
               <StatusBadge variant={"locked"} text={"Locked"} icon={<Lock size="sm-thin" />} />
             )}
@@ -105,9 +103,8 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
         border="bottom"
         contentWidth="w-full lg:w-[320px]"
       >
-        <div className="w-full flex justify-end">
+        <div className="w-full flex justify-end lg:mt-4">
           <Button
-            className="w-fit rounded-lg"
             variant="outline"
             color="danger"
             size="lg"

apps/dashboard/app/(app)/apis/[apiId]/settings/components/delete-protection.tsx

@@ -1,11 +1,10 @@
 "use client";
 import { DialogContainer } from "@/components/dialog-container";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowUpRight, TriangleWarning2 } from "@unkey/icons";
-import { InlineLink, SettingCard } from "@unkey/ui";
+import { InlineLink, Input, SettingCard } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import type React from "react";
@@ -78,8 +77,8 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
   return (
     <SettingCard
       title={
-        <div className="flex items-center justify-start gap-2.5">
-          <span className="text-sm font-medium text-accent-12">Delete Protection</span>{" "}
+        <div className="inline-flex gap-2">
+          <span>Delete Protection</span>{" "}
           <StatusBadge
             variant={api.deleteProtection ? "enabled" : "disabled"}
             text={api.deleteProtection ? "Enabled" : "Disabled"}
@@ -89,26 +88,22 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
       }
       description={
         api.deleteProtection ? (
-          <div className="font-normal text-[13px] max-w-[380px]">
-            Disabling this allows the API, along with all keys and data, to be deleted.
-          </div>
+          <div>Disabling this allows the API, along with all keys and data, to be deleted.</div>
         ) : (
-          <div className="font-normal text-[13px] max-w-[380px]">
-            Enabling this prevents the API from being deleted.
-          </div>
+          <div>Enabling this prevents the API from being deleted.</div>
         )
       }
       border="top"
+      className="border-b-1"
       contentWidth="w-full lg:w-[320px]"
     >
-      <div className="flex w-full gap-2 lg:items-center lg:justify-end">
+      <div className="flex w-full gap-2 lg:items-center justify-end lg:mt-1">
         {api.deleteProtection ? (
           <Button
             type="button"
             variant="outline"
             color="warning"
             size="xlg"
-            className="w-[24rem] lg:w-[12rem]"
             onClick={() => setOpen(true)}
           >
             Disable Delete Protection
@@ -119,7 +114,6 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
             variant="outline"
             color="success"
             size="xlg"
-            className="w-[24rem] lg:w-[12rem]"
             onClick={() => setOpen(true)}
           >
             Enable Delete Protection

apps/dashboard/app/(app)/apis/[apiId]/settings/components/settings-client.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { Separator } from "@/components/ui/separator";
 import type { Api, KeyAuth, Workspace } from "@unkey/db";
 import { CopyApiId } from "./copy-api-id";
 import { DefaultBytes } from "./default-bytes";
@@ -18,28 +17,25 @@ type Props = {
 export const SettingsClient = ({ api, workspace, keyAuth }: Props) => {
   return (
     <>
-      <div className="flex items-center justify-center w-full py-3 ">
-        <div className="lg:w-[760px] flex-col justify-center items-center">
-          <div className="w-full text-accent-12 font-semibold text-lg pt-[22px] pb-[20px] text-left border-b border-gray-4 px-2">
+      <div className="py-3 w-full flex items-center justify-center">
+        <div className="w-[760px] flex flex-col justify-center items-center gap-5 mx-6">
+          <div className="w-full text-accent-12 font-semibold text-lg py-6 text-left border-b border-gray-4">
             API Settings
           </div>
-          <div className="flex flex-col gap-6 mt-6">
+          <div className="flex flex-col w-full gap-6">
             <div>
               <UpdateApiName api={api} />
-              <Separator className="bg-gray-4" orientation="horizontal" />
               <CopyApiId apiId={api.id} />
             </div>
             <div>
               <DefaultBytes keyAuth={keyAuth} />
-              <Separator className="bg-gray-4" orientation="horizontal" />
               <DefaultPrefix keyAuth={keyAuth} />
             </div>
             <div>
               <UpdateIpWhitelist api={api} workspace={workspace} />
             </div>
             <div>
               <DeleteProtection api={api} />
-              <Separator className="bg-gray-4" orientation="horizontal" />
               <DeleteApi api={api} keys={keyAuth.sizeApprox} />
             </div>
           </div>

apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-api-name.tsx

@@ -1,12 +1,10 @@
 "use client";
 import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { tags } from "@/lib/cache";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { SettingCard } from "@unkey/ui";
-import { Button } from "@unkey/ui";
+import { Button, Input, SettingCard } from "@unkey/ui";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { revalidateTag } from "../../../../../actions";
@@ -72,20 +70,13 @@ export const UpdateApiName: React.FC<Props> = ({ api }) => {
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <SettingCard
-          title={
-            <div className="flex items-center justify-start gap-2.5">
-              <span className="text-sm font-medium text-accent-12">API Name</span>
-            </div>
-          }
-          description={
-            <div className="font-normal text-[13px] max-w-[380px]">
-              Not customer-facing. Choose a name that is easy to recognize.
-            </div>
-          }
+          title={"API Name"}
+          description={"Not customer-facing. Choose a name that is easy to recognize."}
           border="top"
-          contentWidth="w-full lg:w-[320px]"
+          className="border-b-1"
+          contentWidth="w-full lg:w-[320px] h-full"
         >
-          <div className="flex flex-row justify-items-stretch items-center w-full gap-x-2">
+          <div className="flex flex-row justify-end items-center w-full gap-x-2 mt-2">
             <input type="hidden" name="workspaceId" value={api.workspaceId} />
             <input type="hidden" name="apiId" value={api.id} />
             <label htmlFor="apiName" className="hidden sr-only">
@@ -100,7 +91,7 @@ export const UpdateApiName: React.FC<Props> = ({ api }) => {
                     <Input
                       type="text"
                       id="apiName"
-                      className="w-[20rem] lg:w-[16rem] h-9"
+                      className="min-w-[16rem]"
                       {...field}
                       autoComplete="off"
                       onBlur={(e) => {
@@ -115,7 +106,6 @@ export const UpdateApiName: React.FC<Props> = ({ api }) => {
             />
             <Button
               size="lg"
-              className="items-end"
               variant="primary"
               disabled={
                 !form.formState.isValid ||