wip: Update styles

PotLock · Sep 20, 2024 · a70fe4a · a70fe4a
1 parent 44d1695
commit a70fe4a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 33 deletions.
diff --git a/src/common/ui/form-fields/text.tsx b/src/common/ui/form-fields/text.tsx
@@ -123,8 +123,8 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
         <div
           className={cn(
-            "flex w-full items-center",
-            "border-op-100 border-1 rounded-md border border-neutral-300",
+            "h-10.5 flex w-full items-center",
+            "border-1 rounded-md border border-neutral-300",
             "file:border-0 file:bg-transparent file:text-sm file:font-medium",
             "disabled:cursor-not-allowed disabled:opacity-50",
             { "pr-3": appendixElement !== null },
@@ -137,14 +137,14 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             <input
               {...fieldProps}
               className={cn(
-                "placeholder-text-muted-foreground max-h-10 w-full rounded-md px-3 py-2.5",
+                "placeholder-text-muted-foreground h-10 w-full rounded-md border-none px-3 py-2.5",
                 {
                   "mr-2.5": appendixElement !== null,
 
-                  "focus-visible:border-inset focus-visible:rounded-l-none focus-visible:pl-2.5":
+                  "focus-visible:rounded-l-none focus-visible:pl-2.5 focus-visible:outline-none":
                     inputExtensionElement !== null && appendixElement !== null,
 
-                  "focus-visible:border-l-2 focus-visible:border-input focus-visible:outline-none":
+                  "focus-visible:border-inset focus-visible:border-l focus-visible:border-l-2 focus-visible:border-neutral-300":
                     inputExtensionElement !== null && appendixElement !== null,
                 },
               )}

diff --git a/src/modules/donation/components/DonationPotAllocation.tsx b/src/modules/donation/components/DonationPotAllocation.tsx
@@ -250,34 +250,32 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
                   <FormField
                     name="potDonationPlan"
                     control={form.control}
-                    render={({ field: { value = [], ...field } }) => {
-                      const recipientEntry = value.find(
-                        ({ account_id }) => account_id === applicant.id,
-                      );
-
-                      return (
-                        <TextField
-                          {...field}
-                          type="number"
-                          placeholder="0.00"
-                          min={yoctoNearToFloat(
-                            pot.min_matching_pool_donation_amount,
-                          )}
-                          max={balanceFloat ?? undefined}
-                          step={0.01}
-                          defaultValue={recipientEntry?.amount}
-                          onChange={handleDonationPlanChange({
-                            accountId: applicant.id,
-                          })}
-                          appendix={<NearIcon width={24} height={24} />}
-                          customErrorMessage={
-                            isBalanceSufficient
-                              ? null
-                              : DONATION_INSUFFICIENT_BALANCE_ERROR
-                          }
-                        />
-                      );
-                    }}
+                    render={({ field: { value = [], ...field } }) => (
+                      <TextField
+                        {...field}
+                        type="number"
+                        placeholder="0.00"
+                        min={yoctoNearToFloat(
+                          pot.min_matching_pool_donation_amount,
+                        )}
+                        max={balanceFloat ?? undefined}
+                        step={0.01}
+                        defaultValue={
+                          value.find(
+                            ({ account_id }) => account_id === applicant.id,
+                          )?.amount
+                        }
+                        onChange={handleDonationPlanChange({
+                          accountId: applicant.id,
+                        })}
+                        appendix={<NearIcon width={24} height={24} />}
+                        customErrorMessage={
+                          isBalanceSufficient
+                            ? null
+                            : DONATION_INSUFFICIENT_BALANCE_ERROR
+                        }
+                      />
+                    )}
                   />
                 )
               }