ankhbayar/Assist_Design
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

style: tighten contact form spacing and polish styling

Browse Source
This commit is contained in:
barsa 2026-03-04 15:00:58 +09:00
parent 6d3655ac5c
commit 6de5e1a735
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/portal/src/features/support/components/ContactForm.tsx
View File

@ -5,7 +5,7 @@ import { Button, Input } from "@/components/atoms";
import { FormField } from "@/components/molecules/FormField/FormField";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { useZodForm } from "@/shared/hooks";
import { CheckCircle } from "lucide-react";
import { CheckCircle, Clock } from "lucide-react";
import {
publicContactRequestSchema,
type PublicContactRequest,
@ -60,15 +60,15 @@ export function ContactForm({ className }: ContactFormProps) {
}
return (
<div className={cn("bg-card rounded-2xl border border-border/60 p-6", className)}>
<div className={cn("bg-card rounded-2xl border border-border/60 p-5 sm:p-6", className)}>
{form.submitError && (
<AlertBanner variant="error" title="Error" className="mb-6">
{form.submitError}
</AlertBanner>
)}
<form onSubmit={event => void form.handleSubmit(event)} className="space-y-5">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<form onSubmit={event => void form.handleSubmit(event)} className="space-y-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<FormField
label="Name"
error={form.touched["name"] ? form.errors["name"] : undefined}
@ -99,7 +99,7 @@ export function ContactForm({ className }: ContactFormProps) {
</FormField>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<FormField label="Phone" error={form.touched["phone"] ? form.errors["phone"] : undefined}>
<Input
value={form.values.phone ?? ""}
@ -131,7 +131,7 @@ export function ContactForm({ className }: ContactFormProps) {
required
>
<textarea
className="flex min-h-[120px] w-full rounded-lg border border-input bg-muted/20 px-4 py-3 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50 transition-colors resize-y text-sm"
className="flex min-h-[100px] w-full rounded-lg border border-input bg-muted/20 px-3.5 py-2.5 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50 transition-all resize-y text-sm"
value={form.values.message}
onChange={e => form.setValue("message", e.target.value)}
onBlur={() => form.setTouchedField("message")}
@ -152,9 +152,10 @@ export function ContactForm({ className }: ContactFormProps) {
</Button>
</form>
<p className="text-xs text-muted-foreground mt-4 pt-4 border-t border-border/60">
We typically respond within 24 hours.
</p>
<div className="flex items-center gap-2 text-xs text-muted-foreground mt-4 pt-3 border-t border-border/40">
<Clock className="h-3.5 w-3.5 shrink-0" />
<span>We typically respond within 24 hours.</span>
</div>
</div>
);
}