[TOOL-3366] Dashboard: Contract Deployment UI improvements, Reduce Chakra Usage (#6211)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on refining the UI components and improving the overall structure of the contract deployment forms. It introduces new styles, modifies existing components, and enhances accessibility.

### Detailed summary
- Updated `ThemeProvider` to enable color scheme.
- Changed class names for various components to improve styling.
- Simplified props for `SolidityInput` components.
- Replaced `FormControl` with `FormFieldSetup` for better structure.
- Enhanced accessibility by modifying error messages and labels.
- Streamlined imports and removed unnecessary components.
- Improved the layout and styling of various fieldsets and buttons.
- Added new utility functions for better handling of form states.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx

@@ -1,10 +1,11 @@
 import { Label } from "@/components/ui/label";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { AsteriskIcon, InfoIcon } from "lucide-react";
+import type React from "react";
 
 export function FormFieldSetup(props: {
   htmlFor?: string;
-  label: string;
+  label: React.ReactNode;
   errorMessage: React.ReactNode | undefined;
   children: React.ReactNode;
   tooltip?: React.ReactNode;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx

@@ -132,9 +132,8 @@ export const SettingsPlatformFees = ({
               <SolidityInput
                 solidityType="address"
                 formContext={form}
-                variant="filled"
                 {...form.register("platform_fee_recipient")}
-                isDisabled={!address || sendAndConfirmTx.isPending}
+                disabled={!address || sendAndConfirmTx.isPending}
               />
               <FormErrorMessage>
                 {
@@ -155,15 +154,14 @@ export const SettingsPlatformFees = ({
             >
               <FormLabel>Percentage</FormLabel>
               <BasisPointsInput
-                variant="filled"
                 value={form.watch("platform_fee_basis_points")}
                 onChange={(value) =>
                   form.setValue("platform_fee_basis_points", value, {
                     shouldDirty: true,
                     shouldTouch: true,
                   })
                 }
-                isDisabled={sendAndConfirmTx.isPending}
+                disabled={sendAndConfirmTx.isPending}
               />
               <FormErrorMessage>
                 {

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx

@@ -128,10 +128,9 @@ export const SettingsPrimarySale = ({
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
-                isDisabled={mutation.isPending || !address}
+                disabled={mutation.isPending || !address}
                 solidityType="address"
                 formContext={form}
-                variant="filled"
                 {...form.register("primary_sale_recipient")}
               />
               <FormErrorMessage>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx

@@ -144,9 +144,8 @@ export const SettingsRoyalties = ({
               <SolidityInput
                 solidityType="address"
                 formContext={form}
-                variant="filled"
                 {...form.register("fee_recipient")}
-                isDisabled={!address}
+                disabled={!address}
               />
               <FormErrorMessage>
                 {
@@ -165,7 +164,6 @@ export const SettingsRoyalties = ({
             >
               <FormLabel>Percentage</FormLabel>
               <BasisPointsInput
-                variant="filled"
                 value={form.watch("seller_fee_basis_points")}
                 onChange={(value) =>
                   form.setValue("seller_fee_basis_points", value, {

apps/dashboard/src/app/(dashboard)/published-contract/components/contract-actions-deploy.client.tsx

@@ -19,6 +19,7 @@ export function PublishedActions(props: {
     <div className="flex gap-3">
       <Button
         variant="outline"
+        className="bg-card"
         onClick={() => {
           shareLink({
             title: `Deploy ${props.displayName}`,
@@ -27,7 +28,7 @@ export function PublishedActions(props: {
       >
         Share
       </Button>
-      <Button asChild variant="primary" className="gap-2">
+      <Button asChild className="gap-2">
         <Link
           href={`/${props.publisher}/${props.contract_id}${props.version ? `/${props.version}` : ""}/deploy${stringifiedSearchParams ? `?${stringifiedSearchParams}` : ""}`}
         >

apps/dashboard/src/app/(dashboard)/published-contract/components/contract-actions-published.client.tsx

@@ -18,7 +18,7 @@ export function DeployContractInfo(props: {
     <div className="flex flex-col gap-2">
       <div className="flex flex-1 items-center gap-4">
         {contractImageLink && (
-          <div className="hidden shrink-0 items-center justify-center rounded-xl border border-border p-2 md:flex">
+          <div className="hidden shrink-0 items-center justify-center rounded-xl border border-border bg-card p-2 md:flex">
             {/*eslint-disable-next-line @next/next/no-img-element*/}
             <img className="size-12" alt={props.name} src={contractImageLink} />
           </div>

apps/dashboard/src/app/(dashboard)/published-contract/components/contract-info.tsx

@@ -1,4 +1,3 @@
-import { Separator } from "@/components/ui/separator";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import {
   fetchPublishedContractVersion,
@@ -7,7 +6,6 @@ import {
 import { isAddress } from "thirdweb";
 import { fetchDeployMetadata } from "thirdweb/contract";
 import { resolveAddress } from "thirdweb/extensions/ens";
-import { DeployActions } from "./contract-actions-deploy.client";
 import { DeployContractHeader } from "./contract-header";
 import { DeployFormForUri } from "./uri-based-deploy";
 
@@ -73,23 +71,17 @@ export async function DeployFormForPublishInfo(props: PublishBasedDeployProps) {
   ]);
 
   return (
-    <>
+    <div className="mx-auto flex w-full max-w-[1000px] flex-col gap-8 pb-20">
       <DeployContractHeader
         {...props}
         allVersions={publishedContractVersions}
         activeVersion={publishedContract}
-      >
-        <DeployActions
-          {...props}
-          displayName={publishedContract.displayName || publishedContract.name}
-        />
-      </DeployContractHeader>
-      <Separator />
+      />
       <DeployFormForUri
         contractMetadata={contractMetadata}
         modules={fetchedModules.filter((m) => m !== null)}
         pathname={`/${props.publisher}/${props.contract_id}${props.version ? `/${props.version}` : ""}/deploy`}
       />
-    </>
+    </div>
   );
 }

apps/dashboard/src/app/(dashboard)/published-contract/components/publish-based-deploy.tsx

@@ -56,7 +56,7 @@ export function DeployContractVersionSelector({
         }
       }}
     >
-      <SelectTrigger className="min-w-[180px] bg-transparent hover:bg-accent">
+      <SelectTrigger className="min-w-[180px] bg-card hover:bg-accent">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>

apps/dashboard/src/app/(dashboard)/published-contract/components/version-selector.tsx

@@ -86,6 +86,7 @@ function TailwindTheme(props: { children: React.ReactNode }) {
       disableTransitionOnChange
       enableSystem={false}
       defaultTheme="dark"
+      enableColorScheme={true}
     >
       {props.children}
     </ThemeProvider>