From 434c5a6cfce212d536da0273fb35d00ace54a5f2 Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqi@rankrunners.dev>
Date: Tue, 29 Apr 2025 05:31:10 +0700
Subject: [PATCH] fix: contact form section UI

---
 src/components/ContactFormSection.tsx         | 18 ++++++++++++------
 src/components/blocks/Form/Email/index.tsx    |  5 +++--
 src/components/blocks/Form/Number/index.tsx   | 12 +++++++++---
 src/components/blocks/Form/Text/index.tsx     | 12 +++++++++---
 src/components/blocks/Form/Textarea/index.tsx | 12 +++++++++---
 5 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/components/ContactFormSection.tsx b/src/components/ContactFormSection.tsx
index 059cda4..d6a804c 100644
--- a/src/components/ContactFormSection.tsx
+++ b/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" />
-      </div>
-      <div className="cell-inner box-1-outer">
-        <div className="box-1">{!form.isFetching && !!form.data && <FormBlock form={form.data} />}</div>
-      </div>
+      {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>
   );
 }
diff --git a/src/components/blocks/Form/Email/index.tsx b/src/components/blocks/Form/Email/index.tsx
index 841ee92..31ce2d8 100644
--- a/src/components/blocks/Form/Email/index.tsx
+++ b/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>
diff --git a/src/components/blocks/Form/Number/index.tsx b/src/components/blocks/Form/Number/index.tsx
index 4a7ad38..6a64cde 100644
--- a/src/components/blocks/Form/Number/index.tsx
+++ b/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>
diff --git a/src/components/blocks/Form/Text/index.tsx b/src/components/blocks/Form/Text/index.tsx
index 357af00..de14d11 100644
--- a/src/components/blocks/Form/Text/index.tsx
+++ b/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>
diff --git a/src/components/blocks/Form/Textarea/index.tsx b/src/components/blocks/Form/Textarea/index.tsx
index 0a3c385..d4129a5 100644
--- a/src/components/blocks/Form/Textarea/index.tsx
+++ b/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>