improving error styles

formspree · Sep 25, 2024 · 53d351c · 53d351c
1 parent 389b6c5
commit 53d351c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/examples/astro-react-demo/src/components/ContactForm.css b/examples/astro-react-demo/src/components/ContactForm.css
@@ -54,6 +54,5 @@
 .contact-form .error {
   color: #dc3545;
   font-size: 14px;
-  margin-top: -10px;
-  margin-bottom: 10px;
+  margin-top: 10px;
 }
diff --git a/examples/astro-react-demo/src/components/ContactForm.tsx b/examples/astro-react-demo/src/components/ContactForm.tsx
@@ -25,7 +25,7 @@ function ContactForm() {
         prefix="Email" 
         field="email"
         errors={state.errors}
-        className="error-message"
+        className="error"
       />
       <label htmlFor="message" className="form-label">
         Message
@@ -39,11 +39,15 @@ function ContactForm() {
         prefix="Message" 
         field="message"
         errors={state.errors}
-        className="error-message"
+        className="error"
       />
       <button type="submit" disabled={state.submitting} className="submit-button">
         Submit
       </button>
+      <ValidationError 
+        errors={state.errors}
+        className="error"
+      />
     </form>
   );
 }