Merge pull request 'fix: contact form section UI' (#14) from dev into main

Reviewed-on: #14

src/components/ContactFormSection.tsx

@@ -3,6 +3,7 @@
 import { FormBlock } from "@/components/blocks/Form";
 import { useFormQuery } from "@/services/hooks/form";
 import { useEffect } from "react";
+import Loader from "./loaders/Loader";
 
 export default function ContactFormSection() {
   const form = useFormQuery();
@@ -13,12 +14,17 @@ export default function ContactFormSection() {
 
   return (
     <div className="box-1-cell height-fill context-dark bg-colorContactForm! z-20!">
-      <div className="box-1-bg-shape">
-        <img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
+      {form.isFetching && (
+        <div className="my-16">
+          <Loader />
         </div>
+      )}
+
+      {!form.isFetching && (
         <div className="cell-inner box-1-outer">
           <div className="box-1">{!form.isFetching && !!form.data && <FormBlock form={form.data} />}</div>
         </div>
+      )}
     </div>
   );
 }

src/components/blocks/Form/Email/index.tsx

@@ -23,11 +23,12 @@ export const Email: React.FC<
           type="email"
           className="form-input"
           id={name}
+          placeholder={label}
           {...register(name, { pattern: /^\S[^\s@]*@\S+$/, required: requiredFromProps })}
         />
-        <label className="form-label" htmlFor={name}>
+        {/* <label className="form-label" htmlFor={name}>
           {label}
-        </label>
+        </label> */}
         {requiredFromProps && errors[name] && <Error />}
       </div>
     </Width>

src/components/blocks/Form/Number/index.tsx

@@ -19,10 +19,16 @@ export const Number: React.FC<
   return (
     <Width width={width}>
       <div className="form-wrap">
-        <input type="number" className="form-input" id={name} {...register(name, { required: requiredFromProps })} />
-        <label className="form-label" htmlFor={name}>
+        <input
+          type="number"
+          placeholder={label}
+          className="form-input"
+          id={name}
+          {...register(name, { required: requiredFromProps })}
+        />
+        {/* <label className="form-label" htmlFor={name}>
           {label}
-        </label>
+        </label> */}
         {requiredFromProps && errors[name] && <Error />}
       </div>
     </Width>

src/components/blocks/Form/Text/index.tsx

@@ -19,10 +19,16 @@ export const Text: React.FC<
   return (
     <Width width={width}>
       <div className="form-wrap">
-        <input type="text" id={name} className="form-input" {...register(name, { required: requiredFromProps })} />
-        <label className="form-label" htmlFor={name}>
+        <input
+          type="text"
+          id={name}
+          className="form-input"
+          placeholder={label}
+          {...register(name, { required: requiredFromProps })}
+        />
+        {/* <label className="form-label" htmlFor={name}>
           {label}
-        </label>
+        </label> */}
         {requiredFromProps && errors[name] && <Error />}
       </div>
     </Width>

src/components/blocks/Form/Textarea/index.tsx

@@ -20,10 +20,16 @@ export const Textarea: React.FC<
   return (
     <Width width={width}>
       <div className="form-wrap">
-        <textarea className="form-input" id={name} rows={rows} {...register(name, { required: requiredFromProps })} />
-        <label className="form-label" htmlFor={name}>
+        <textarea
+          className="form-input"
+          id={name}
+          rows={rows}
+          placeholder={label}
+          {...register(name, { required: requiredFromProps })}
+        />
+        {/* <label className="form-label" htmlFor={name}>
           {label}
-        </label>
+        </label> */}
         {requiredFromProps && errors[name] && <Error />}
       </div>
     </Width>