From 40541d3da2fd157f9fde0f47bd00012f34830909 Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Thu, 4 Jun 2026 21:29:44 +0200
Subject: [PATCH] improve fields for contact and add send icon

---
 src/pages/Contact/Contact.tsx | 65 ++++++++++++++++++++++++-----------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index 5d10898..22ee876 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -1,12 +1,13 @@
 import { useActionState } from "react";
+import { LuSend } from "react-icons/lu";
 import Section from "#/components/Section.tsx";
 
 interface IFormField {
 	fieldName: string;
 	type: "text" | "email" | "textarea";
 	placeholder: string;
-	label: string;
-	required: boolean;
+	required?: boolean;
+	textarea?: boolean;
 }
 
 type IProps = {
@@ -20,18 +21,36 @@ const FormField = ({
 	type,
 	fieldName,
 	placeholder,
-	label,
-	required,
+	required = false,
+	textarea = false,
 }: IFormField) => (
 	<div className="flex flex-col gap-2">
-		<label htmlFor={fieldName}>{label}</label>
-		<input
-			type={type}
-			id={fieldName}
-			name={fieldName}
-			placeholder={placeholder}
-			required={required}
-		/>
+		<label
+			htmlFor={fieldName}
+			className="capitalize text-(--neutral-content) text-left"
+		>
+			{fieldName}
+			{required && <span>*</span>}
+		</label>
+		{textarea ? (
+			<textarea
+				id={fieldName}
+				name={fieldName}
+				placeholder={placeholder}
+				required={required}
+				rows={5}
+				className="text-(--base-content) w-full rounded-md border border-neutral-300 px-3 py-2 placeholder:text-neutral-400/50 outline-hidden transition-all duration-200 focus:border-(--accent) focus:outline-3 focus:outline-offset-2 focus:outline-(--accent)/50 resize-y"
+			/>
+		) : (
+			<input
+				type={type}
+				id={fieldName}
+				name={fieldName}
+				placeholder={placeholder}
+				required={required}
+				className="text-(--base-content) w-full rounded-md border border-neutral-300 px-3 py-2 placeholder:text-neutral-400/50 outline-hidden transition-all duration-200 focus:border-(--accent) focus:outline-3 focus:outline-offset-2 focus:outline-(--accent)/50"
+			/>
+		)}
 	</div>
 );
 
@@ -44,41 +63,45 @@ const Contact = ({ handleSubmit }: IProps) => {
 				title="Contact Us"
 				description="Do you have suggestions on how to improve this service? Would you like to get involved with this project? Ask us anything you like."
 			>
-				<form action={formAction}>
+				<form
+					action={formAction}
+					className="col-span-3 flex flex-col gap-6 w-full max-w-(--breakpoint-sm)"
+				>
 					<FormField
 						type="text"
 						fieldName="name"
 						placeholder="Your name"
-						label="Name"
 						required
 					/>
 
 					<FormField
 						fieldName="email"
-						type="text"
+						type="email"
 						placeholder="name@example.com"
-						label="Email"
 						required
 					/>
 
-					<input
+					<FormField
+						fieldName="subject"
 						type="text"
-						name="subject"
 						placeholder="Reason for contacting us"
 					/>
 
-					<textarea
-						name="message"
+					<FormField
+						fieldName="message"
+						type="text"
 						placeholder="Your message here..."
 						required
+						textarea
 					/>
 
 					<button
 						type="submit"
 						disabled={isPending}
-						className="btn btn-primary"
+						className="btn btn-primary flex items-center justify-center gap-2"
 					>
 						{isPending ? "Sending..." : "Send"}
+						<LuSend className="w-5 h-5" />
 					</button>
 					{state && <p>{state.message}</p>}
 				</form>