From 5e044b264907aa47784c8848eb05d0401c743178 Mon Sep 17 00:00:00 2001
From: JoelVR17 <vermudo.com@gmail.com>
Date: Tue, 18 Feb 2025 17:59:18 -0600
Subject: [PATCH] feat: add dollar sign icon to input field in FundEscrowDialog
 for better UX

---
 .../escrow/ui/dialogs/FundEscrowDialog.tsx    | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/modules/escrow/ui/dialogs/FundEscrowDialog.tsx b/src/components/modules/escrow/ui/dialogs/FundEscrowDialog.tsx
index 78d2b0b..6cd0551 100644
--- 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>