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 { FormField } from "@/components/molecules/FormField/FormField";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner"; import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { useZodForm } from "@/shared/hooks"; import { useZodForm } from "@/shared/hooks";
import { CheckCircle } from "lucide-react"; import { CheckCircle, Clock } from "lucide-react";
import { import {
publicContactRequestSchema, publicContactRequestSchema,
type PublicContactRequest, type PublicContactRequest,
@ -60,15 +60,15 @@ export function ContactForm({ className }: ContactFormProps) {
} }
return ( 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 && ( {form.submitError && (
<AlertBanner variant="error" title="Error" className="mb-6"> <AlertBanner variant="error" title="Error" className="mb-6">
{form.submitError} {form.submitError}
</AlertBanner> </AlertBanner>
)} )}
<form onSubmit={event => void form.handleSubmit(event)} className="space-y-5"> <form onSubmit={event => void form.handleSubmit(event)} className="space-y-4">
<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 <FormField
label="Name" label="Name"
error={form.touched["name"] ? form.errors["name"] : undefined} error={form.touched["name"] ? form.errors["name"] : undefined}
@ -99,7 +99,7 @@ export function ContactForm({ className }: ContactFormProps) {
</FormField> </FormField>
</div> </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}> <FormField label="Phone" error={form.touched["phone"] ? form.errors["phone"] : undefined}>
<Input <Input
value={form.values.phone ?? ""} value={form.values.phone ?? ""}
@ -131,7 +131,7 @@ export function ContactForm({ className }: ContactFormProps) {
required required
> >
<textarea <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} value={form.values.message}
onChange={e => form.setValue("message", e.target.value)} onChange={e => form.setValue("message", e.target.value)}
onBlur={() => form.setTouchedField("message")} onBlur={() => form.setTouchedField("message")}
@ -152,9 +152,10 @@ export function ContactForm({ className }: ContactFormProps) {
</Button> </Button>
</form> </form>
<p className="text-xs text-muted-foreground mt-4 pt-4 border-t border-border/60"> <div className="flex items-center gap-2 text-xs text-muted-foreground mt-4 pt-3 border-t border-border/40">
We typically respond within 24 hours. <Clock className="h-3.5 w-3.5 shrink-0" />
</p> <span>We typically respond within 24 hours.</span>
</div>
</div> </div>
); );
} }