feat: add dollar sign icon to input field in FundEscrowDialog for bet…

…ter UX
Trustless-Work · Feb 18, 2025 · 5e044b2 · 5e044b2
1 parent 1c56793
commit 5e044b2
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/src/components/modules/escrow/ui/dialogs/FundEscrowDialog.tsx b/src/components/modules/escrow/ui/dialogs/FundEscrowDialog.tsx
@@ -21,6 +21,7 @@ import TooltipInfo from "@/components/utils/ui/Tooltip";
 import useFundEscrowDialogHook from "./hooks/fund-escrow-dialog.hook";
 import { useEscrowBoundedStore } from "../../store/ui";
 import SkeletonFundEscrow from "./utils/SkeletonFundEscrow";
+import { DollarSign } from "lucide-react";
 
 interface FundEscrowDialogProps {
   isSecondDialogOpen: boolean;
@@ -70,13 +71,20 @@ const FundEscrowDialog = ({
                         <TooltipInfo content="The amount to be funded." />
                       </FormLabel>
                       <FormControl>
-                        <Input
-                          placeholder="The amount to be funded"
-                          {...field}
-                          onChange={(e) => {
-                            field.onChange(e);
-                          }}
-                        />
+                        <div className="relative">
+                          <DollarSign
+                            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
+                            size={18}
+                          />
+                          <Input
+                            className="pl-10"
+                            placeholder="The amount to be funded"
+                            {...field}
+                            onChange={(e) => {
+                              field.onChange(e);
+                            }}
+                          />
+                        </div>
                       </FormControl>
                       <FormMessage />
                     </FormItem>