feat: adjust form spacing

martapanc · Feb 18, 2024 · 04db826 · 04db826
1 parent 7060584
commit 04db826
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/src/components/molecules/ContactForm/ContactForm.tsx b/src/components/molecules/ContactForm/ContactForm.tsx
@@ -172,9 +172,10 @@ const ContactForm = () => {
               id='message'
               label={t('contacts.fields.message.label')}
               placeholder={t('contacts.fields.message.placeholder')}
+              rows={6}
             />
 
-            <div className='mt-6 flex justify-end'>
+            <div className='mt-2 flex justify-end'>
               <ReCAPTCHA
                 sitekey={reCaptchaSiteKey}
                 ref={recaptchaRef}

diff --git a/src/components/molecules/ContactForm/Input.tsx b/src/components/molecules/ContactForm/Input.tsx
@@ -19,7 +19,7 @@ export const Input = ({
   const [_, meta] = useField(fieldProps);
 
   return (
-    <label htmlFor='firstName' className='mb-2 mt-6 flex flex-col font-bold'>
+    <label htmlFor={id} className='mb-2 mt-4 flex flex-col font-bold'>
       {label}
       <Field
         placeholder={placeholder}

diff --git a/src/components/molecules/ContactForm/Select.tsx b/src/components/molecules/ContactForm/Select.tsx
@@ -21,7 +21,7 @@ export const Select = ({ id, label, options }: SelectProps) => {
   const { t } = useTranslation();
 
   return (
-    <label htmlFor={id} className='mb-2 mt-6 flex flex-col font-bold'>
+    <label htmlFor={id} className='mb-2 mt-4 flex flex-col font-bold'>
       {label}
       <Field
         as='select'

diff --git a/src/components/molecules/ContactForm/TextArea.tsx b/src/components/molecules/ContactForm/TextArea.tsx
@@ -6,14 +6,15 @@ export interface TextAreaProps {
   id: string;
   label: string;
   placeholder?: string;
+  rows?: number;
 }
 
-export const TextArea = ({ id, label, placeholder }: TextAreaProps) => {
+export const TextArea = ({ id, label, placeholder, rows }: TextAreaProps) => {
   const fieldProps = { id, name: id, label, placeholder };
   const [_, meta] = useField(fieldProps);
 
   return (
-    <label htmlFor='firstName' className='mb-2 mt-6 flex flex-col font-bold'>
+    <label htmlFor={id} className='mb-2 mt-4 flex flex-col font-bold'>
       {label}
       <Field
         as='textarea'
@@ -27,7 +28,7 @@ export const TextArea = ({ id, label, placeholder }: TextAreaProps) => {
             'ring-grey-400 dark:ring-slate-500': !meta.touched || !meta.error,
           },
         )}
-        rows={7}
+        rows={rows}
       />
       <div className='font-sm font-normal text-red-600'>
         {meta.touched && meta.error}