[BLD-80] Dashboard: in-app wallet settings page UI improvements

Author: MananTank

apps/dashboard/src/@/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -21,7 +21,11 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <CheckIcon className="size-4" />
+      {props.checked === "indeterminate" ? (
+        <MinusIcon className="size-3" />
+      ) : (
+        <CheckIcon className="size-4" />
+      )}
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx

@@ -240,32 +240,39 @@ export const InAppWalletSettingsUI: React.FC<
 
   return (
     <Form {...form}>
-      <form
-        autoComplete="off"
-        className="flex flex-col gap-6"
-        onSubmit={handleSubmit}
-      >
+      <form autoComplete="off" className="space-y-6" onSubmit={handleSubmit}>
         {/* Branding */}
         <BrandingFieldset
           client={props.client}
           form={form}
           requiredPlan={brandingRequiredPlan}
           teamPlan={props.teamPlan}
           teamSlug={props.teamSlug}
+          isUpdating={props.isUpdating}
         />
 
-        <NativeAppsFieldset form={form} />
+        <NativeAppsFieldset form={form} isUpdating={props.isUpdating} />
 
         {/* Authentication */}
-        <Fieldset legend="Authentication">
+        <Fieldset
+          legend="Authentication"
+          footer={
+            <div className="flex justify-end p-4 md:px-6 border-t border-dashed">
+              <Button className="gap-2" type="submit" size="sm">
+                {props.isUpdating && <Spinner className="size-4" />}
+                Save
+              </Button>
+            </div>
+          }
+        >
           <JSONWebTokenFields
             form={form}
             requiredPlan={authRequiredPlan}
             teamPlan={props.teamPlan}
             teamSlug={props.teamSlug}
           />
 
-          <div className="h-5" />
+          <div className="my-5 border-t border-dashed" />
 
           <AuthEndpointFields
             form={form}
@@ -274,7 +281,7 @@ export const InAppWalletSettingsUI: React.FC<
             teamSlug={props.teamSlug}
           />
 
-          <div className="h-5" />
+          <div className="my-5 border-t border-dashed" />
 
           <SMSCountryFields
             form={form}
@@ -284,13 +291,6 @@ export const InAppWalletSettingsUI: React.FC<
             teamSlug={props.teamSlug}
           />
         </Fieldset>
-
-        <div className="flex justify-end">
-          <Button className="gap-2" type="submit" variant="primary">
-            {props.isUpdating && <Spinner className="size-4" />}
-            Save changes
-          </Button>
-        </div>
       </form>
     </Form>
   );
@@ -302,14 +302,22 @@ function BrandingFieldset(props: {
   teamSlug: string;
   requiredPlan: Team["billingPlan"];
   client: ThirdwebClient;
+  isUpdating: boolean;
 }) {
   return (
-    <Fieldset legend="Branding">
-      <SwitchContainer
-        description="Pass a custom logo and app name to be used in the emails sent to users."
-        switchId="branding-switch"
-        title="Custom email logo and name"
-      >
+    <FieldsetWithDescription
+      legend="Branding"
+      description="Set a app name and logo   to be used in the emails sent to users."
+      footer={
+        <div className="flex justify-end p-4 md:px-6 border-t border-dashed">
+          <Button className="gap-2" type="submit" size="sm">
+            {props.isUpdating && <Spinner className="size-4" />}
+            Save
+          </Button>
+        </div>
+      }
+    >
+      <div className="absolute top-8 right-6">
         <GatedSwitch
           currentPlan={props.teamPlan}
           requiredPlan={props.requiredPlan}
@@ -330,26 +338,39 @@ function BrandingFieldset(props: {
           teamSlug={props.teamSlug}
           trackingLabel="customEmailLogoAndName"
         />
-      </SwitchContainer>
+      </div>
 
       <GatedCollapsibleContainer
-        className="grid grid-cols-1 gap-6 lg:grid-cols-2"
+        className="grid grid-cols-1 gap-16 lg:grid-cols-[1fr_1.5fr]"
         currentPlan={props.teamPlan}
         isExpanded={!!props.form.watch("branding")}
         requiredPlan={props.requiredPlan}
       >
-        {/* Application Image */}
+        {/* Application Name */}
+        <FormField
+          control={props.form.control}
+          name="branding.applicationName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Application Name</FormLabel>
+              <FormDescription>
+                Name that will be displayed in the emails sent to users.{" "}
+                <br className="max-sm:hidden" /> Defaults to your API Key's
+                name.
+              </FormDescription>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <FormField
           control={props.form.control}
           name="branding.applicationImageUrl"
           render={() => (
-            <FormItem className="space-y-1">
-              <FormLabel>Application Image URL</FormLabel>
-              <FormDescription className="!mb-4">
-                Logo that will display in the emails sent to users.{" "}
-                <br className="max-sm:hidden" /> The image must be squared with
-                recommended size of 72x72 px.
-              </FormDescription>
+            <FormItem className="flex items-center gap-4">
               <FormControl>
                 <AppImageFormControl
                   client={props.client}
@@ -362,32 +383,22 @@ function BrandingFieldset(props: {
                   uri={props.form.watch("branding.applicationImageUrl")}
                 />
               </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
 
-        {/* Application Name */}
-        <FormField
-          control={props.form.control}
-          name="branding.applicationName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Application Name</FormLabel>
-              <FormDescription className="!mb-2">
-                Name that will be displayed in the emails sent to users.{" "}
-                <br className="max-sm:hidden" /> Defaults to your API Key's
-                name.
-              </FormDescription>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
+              <div className="space-y-1">
+                <FormLabel>Application Image URL</FormLabel>
+                <FormDescription className="!mb-4">
+                  Logo that will display in the emails sent to users.{" "}
+                  <br className="max-sm:hidden" /> The image must be squared
+                  with recommended size of 72x72 px.
+                </FormDescription>
+
+                <FormMessage />
+              </div>
             </FormItem>
           )}
         />
       </GatedCollapsibleContainer>
-    </Fieldset>
+    </FieldsetWithDescription>
   );
 }
 
@@ -743,10 +754,21 @@ function AuthEndpointFieldsContent(props: {
 
 function NativeAppsFieldset(props: {
   form: UseFormReturn<ApiKeyEmbeddedWalletsValidationSchema>;
+  isUpdating: boolean;
 }) {
   const { form } = props;
   return (
-    <Fieldset legend="Native Apps">
+    <Fieldset
+      legend="Native Apps"
+      footer={
+        <div className="flex justify-end p-4 md:px-6 border-t border-dashed">
+          <Button className="gap-2" type="submit" size="sm">
+            {props.isUpdating && <Spinner className="size-4" />}
+            Save
+          </Button>
+        </div>
+      }
+    >
       <FormField
         control={form.control}
         name="redirectUrls"
@@ -789,21 +811,54 @@ function GatedCollapsibleContainer(props: {
     return null;
   }
 
-  return <div className={cn("mt-6", props.className)}>{props.children}</div>;
+  return <div className={cn("mt-5", props.className)}>{props.children}</div>;
 }
 
-function Fieldset(props: { legend: string; children: React.ReactNode }) {
+function Fieldset(props: {
+  legend: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
   return (
-    <DynamicHeight>
-      <fieldset className="rounded-lg border border-border bg-card p-4 md:p-6">
-        {/* put inside div to remove default styles on legend  */}
-        <div className="mb-4 font-semibold text-xl tracking-tight">
-          <legend> {props.legend}</legend>
-        </div>
+    <div className="rounded-lg border bg-card relative">
+      <DynamicHeight>
+        <fieldset>
+          {/* put inside div to remove default styles on legend  */}
+          <div className="p-4 md:py-5 md:px-6 border-b border-dashed font-semibold text-xl tracking-tight">
+            <legend> {props.legend}</legend>
+          </div>
 
-        {props.children}
-      </fieldset>
-    </DynamicHeight>
+          <div className="p-4 md:p-6">{props.children}</div>
+        </fieldset>
+      </DynamicHeight>
+      {props.footer}
+    </div>
+  );
+}
+
+function FieldsetWithDescription(props: {
+  legend: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  description: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-lg border bg-card relative">
+      <DynamicHeight>
+        <fieldset className="p-4 md:p-6">
+          {/* put inside div to remove default styles on legend  */}
+          <div className="pr-20">
+            <legend className="font-semibold text-xl tracking-tight">
+              {props.legend}
+            </legend>
+            <p className="text-muted-foreground text-sm">{props.description}</p>
+          </div>
+
+          {props.children}
+        </fieldset>
+      </DynamicHeight>
+      {props.footer}
+    </div>
   );
 }