fix: resolves UX issues in "form-error" blocks

- GiftForm.tsx - OnBehalf.tsx
Plant-for-the-Planet-org · Nov 9, 2023 · ab46edd · ab46edd
1 parent bbb9b28
commit ab46edd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/Donations/Micros/GiftForm.tsx b/src/Donations/Micros/GiftForm.tsx
@@ -109,9 +109,9 @@ export default function GiftForm(): ReactElement {
                 )}
               />
               {errors.recipientName && (
-                <span className={"form-errors"}>
+                <div className={"form-errors"}>
                   {t("recipientNameRequired")}
-                </span>
+                </div>
               )}
             </div>
 
@@ -151,11 +151,11 @@ export default function GiftForm(): ReactElement {
                     )}
                   />
                   {errors.recipientEmail && (
-                    <span className={"form-errors"}>
+                    <div className={"form-errors"}>
                       {errors.recipientEmail.type === "required"
                         ? t("emailRequired")
                         : t("enterValidEmail")}
-                    </span>
+                    </div>
                   )}
                 </div>
                 <div className={"form-field mt-30"}>

diff --git a/src/Donations/Micros/OnBehalf.tsx b/src/Donations/Micros/OnBehalf.tsx
@@ -73,7 +73,7 @@ const OnBehalf: FC = () => {
                 )}
               />
               {errors.firstName && (
-                <span className={"form-errors"}>{t("firstNameRequired")}</span>
+                <div className={"form-errors"}>{t("firstNameRequired")}</div>
               )}
             </Grid>
             <Grid item xs={6}>
@@ -91,7 +91,7 @@ const OnBehalf: FC = () => {
                 )}
               />
               {errors.lastName && (
-                <span className={"form-errors"}>{t("lastNameRequired")}</span>
+                <div className={"form-errors"}>{t("lastNameRequired")}</div>
               )}
             </Grid>
             {shouldNotify ? (
@@ -128,13 +128,13 @@ const OnBehalf: FC = () => {
                   )}
                 />
                 {errors.email && errors.email.type === "required" && (
-                  <span className={"form-errors"}>
+                  <div className={"form-errors"}>
                     {errors.email.type === "required"
                       ? t("emailRequired")
                       : t("inValidField", {
                           fieldName: "Email",
                         })}
-                  </span>
+                  </div>
                 )}
               </Grid>
             ) : (