UI tweaks

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/SocialUrls.tsx

@@ -34,7 +34,7 @@ export function SocialUrlsFieldset<T extends WithSocialUrls>(props: {
       <h2 className="mb-2 font-medium text-sm">Social URLs</h2>
 
       {fields.length > 0 && (
-        <div className="mb-4 space-y-3">
+        <div className="mb-4 space-y-4">
           {fields.map((field, index) => (
             <div
               className="flex gap-3 max-sm:mb-6 max-sm:border-b max-sm:border-dashed max-sm:pb-6"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-airdrop.tsx

@@ -66,10 +66,10 @@ export function TokenAirdropSection(props: {
 
   return (
     <DynamicHeight>
-      <div className="relative border-t border-dashed">
-        <div className="flex items-center justify-between gap-3 px-4 py-6 md:px-6">
+      <div className="relative border-t border-dashed px-4 py-8 md:px-6">
+        <div className="flex items-center justify-between gap-3 ">
           <div>
-            <h2 className="font-semibold text-lg">Airdrop</h2>
+            <h2 className="font-semibold text-xl tracking-tight">Airdrop</h2>
             <p className="text-muted-foreground text-sm">
               Airdrop tokens to a list of addresses with each address receiving
               a specific quantity
@@ -88,7 +88,7 @@ export function TokenAirdropSection(props: {
         </div>
 
         {isEnabled && (
-          <div className="flex justify-start px-4 pb-4 md:px-6 md:pb-6">
+          <div className="flex justify-start mt-4">
             {airdropAddresses.length > 0 ? (
               <div className="flex w-full flex-col gap-4 rounded-lg border bg-background p-4 md:flex-row lg:items-center lg:justify-between">
                 {/* left */}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx

@@ -58,7 +58,7 @@ export function TokenDistributionFieldset(props: {
                 isRequired
                 label="Total Supply"
               >
-                <div className="relative">
+                <div className="relative max-w-96">
                   <Input id={supplyId} {...form.register("supply")} />
                   <span className="-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground text-sm">
                     {props.tokenSymbol || "Tokens"}
@@ -75,7 +75,7 @@ export function TokenDistributionFieldset(props: {
 
             <TokenAirdropSection client={props.client} form={form} />
 
-            <div className="flex flex-col gap-3 p-4 py-6 md:px-6 md:py-6 border-t border-dashed">
+            <div className="flex flex-col gap-3 p-4 py-8 md:px-6 border-t border-dashed">
               <TokenDistributionBarChart
                 distributionFormValues={form.watch()}
               />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-sale.tsx

@@ -81,11 +81,11 @@ export function TokenSaleSection(props: {
 
   return (
     <DynamicHeight>
-      <div className="relative border-t border-dashed p-4 md:p-6">
+      <div className="relative border-t border-dashed px-4 md:px-6 py-8">
         <div>
           <div className="flex items-center justify-between gap-3">
             <div>
-              <h2 className="font-semibold text-lg">Sale</h2>
+              <h2 className="font-semibold text-xl tracking-tight">Sale</h2>
               <p className="text-muted-foreground text-sm">
                 List your coin on a decentralized exchange and earn rewards on
                 every trade
@@ -206,7 +206,7 @@ function PoolConfig(props: {
   );
 
   return (
-    <div className="grid grid-cols-1 gap-5">
+    <div className="space-y-6">
       {/* Pricing Strategy */}
       <FormFieldSetup
         isRequired
@@ -235,7 +235,7 @@ function PoolConfig(props: {
         </Select>
       </FormFieldSetup>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:max-w-[536px]">
         {/* supply % */}
         <FormFieldSetup
           errorMessage={

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/token-info/token-info-fieldset.tsx

@@ -60,7 +60,7 @@ export function TokenInfoFieldset(props: {
               {/* name + symbol */}
               <div className="flex flex-col gap-6 lg:flex-row lg:gap-4">
                 <FormFieldSetup
-                  className="grow"
+                  className="lg:max-w-[300px] grow"
                   errorMessage={form.formState.errors.name?.message}
                   htmlFor={nameId}
                   isRequired
@@ -74,7 +74,7 @@ export function TokenInfoFieldset(props: {
                 </FormFieldSetup>
 
                 <FormFieldSetup
-                  className="lg:max-w-[200px]"
+                  className="lg:max-w-[150px]"
                   errorMessage={form.formState.errors.symbol?.message}
                   htmlFor={symbolId}
                   isRequired