feat: min/max and standard div sizing PE-5161

ardriveapp · Dec 7, 2023 · 1a6e16a · 1a6e16a
1 parent 5e88682
commit 1a6e16a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/GiftForm.css b/src/GiftForm.css
@@ -3,7 +3,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 2rem 2rem;
+  margin: 0rem 2rem;
+  width: 100%;
   max-width: 40rem;
 }
 

diff --git a/src/GiftForm.tsx b/src/GiftForm.tsx
@@ -39,6 +39,15 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
   const debouncedUsdAmount = useDebounce(usdAmount, 500);
 
   const handleUSDChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const amount = Number(e.target.value);
+    if (amount > 10000) {
+      setUsdAmount(10000);
+      return;
+    }
+    if (amount < 0) {
+      setUsdAmount(0);
+      return;
+    }
     setUsdAmount(Number(Number(e.target.value).toFixed(2)));
   };
 
@@ -113,13 +122,15 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
         <label className="form-label">USD amount*</label>
 
         <div id="usd-form-input">
-          <span id="dollar-sign">$</span>
+          <span id="dollar-sign">{"$".toLocaleUpperCase()}</span>
           <input
             type="number"
             id="usd-input"
             value={usdAmount}
             onChange={handleUSDChange}
             required={true}
+            min={0}
+            max={10000}
           />
         </div>
       </div>
@@ -128,7 +139,7 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
         <div>
           {wincForOneGiB && (
             <div id="conversions">
-              $
+              {"$".toLocaleUpperCase()}
               <span className="conversion-amount">
                 {usdWhenCreditsWereLastUpdatedRef.current}
               </span>{" "}