Skip to content

Commit 982efdb

Browse files
kentcdoddscursoragent
kentcdodds
and
cursoragent
authored
Mobile search form styling (#91)
* Improve mobile search and composer layout Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com> * Refine mobile composer styling Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com> * Remove unsupported date placeholders Co-authored-by: me <me@kentcdodds.com> * Add button variants for search and add Co-authored-by: me <me@kentcdodds.com> * Fix success button styling Co-authored-by: me <me@kentcdodds.com> * Standardize button variants Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com>
1 parent 0f7f8ef commit 982efdb

16 files changed

Lines changed: 62 additions & 46 deletions

File tree

‎app/components/search-bar.tsx‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,11 @@ export function SearchBar({
3939
<Form
4040
method="GET"
4141
action={action}
42-
className="flex flex-wrap items-center justify-center gap-2"
42+
className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between"
4343
onChange={(e) => autoSubmit && handleFormChange(e.currentTarget)}
4444
>
45-
<div className="flex-1">
45+
<div className="flex w-full items-center gap-2 sm:flex-1">
46+
<div className="min-w-0 flex-1">
4647
<Label htmlFor={id} className="sr-only">
4748
Search
4849
</Label>
@@ -54,14 +55,22 @@ export function SearchBar({
5455
placeholder="Search"
5556
className="w-full"
5657
autoFocus={autoFocus}
57-
/>
58+
/>
59+
</div>
60+
<StatusButton
61+
type="submit"
62+
size="icon-lg"
63+
status={isSubmitting ? 'pending' : status}
64+
className="shrink-0"
65+
>
66+
<Icon name="magnifying-glass" size="md" />
67+
<span className="sr-only">Search</span>
68+
</StatusButton>
5869
</div>
5970
{showDateFilter ? (
60-
<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
61-
<div className="w-full sm:w-[160px]">
62-
<Label htmlFor={startDateId} className="sr-only">
63-
Start date
64-
</Label>
71+
<div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:items-end">
72+
<div className="min-w-0 space-y-1 sm:w-[160px]">
73+
<Label htmlFor={startDateId}>Start date</Label>
6574
<Input
6675
type="date"
6776
name="startDate"
@@ -70,10 +79,8 @@ export function SearchBar({
7079
className="w-full"
7180
/>
7281
</div>
73-
<div className="w-full sm:w-[160px]">
74-
<Label htmlFor={endDateId} className="sr-only">
75-
End date
76-
</Label>
82+
<div className="min-w-0 space-y-1 sm:w-[160px]">
83+
<Label htmlFor={endDateId}>End date</Label>
7784
<Input
7885
type="date"
7986
name="endDate"
@@ -84,16 +91,6 @@ export function SearchBar({
8491
</div>
8592
</div>
8693
) : null}
87-
<div>
88-
<StatusButton
89-
type="submit"
90-
status={isSubmitting ? 'pending' : status}
91-
className="flex w-full items-center justify-center"
92-
>
93-
<Icon name="magnifying-glass" size="md" />
94-
<span className="sr-only">Search</span>
95-
</StatusButton>
96-
</div>
9794
</Form>
9895
)
9996
}

‎app/components/ui/button.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,20 @@ const buttonVariants = cva(
1212
variant: {
1313
default:
1414
'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm',
15+
brand:
16+
'bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))] shadow-sm',
17+
'brand-soft':
18+
'bg-[hsl(var(--palette-green-300))] text-[hsl(var(--palette-dark-navy))] hover:bg-[hsl(var(--palette-green-500))] hover:text-[hsl(var(--palette-cream))] shadow-sm',
19+
warm:
20+
'bg-[hsl(var(--palette-chestnut))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-hot-fire-red))] shadow-sm',
1521
destructive:
1622
'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
1723
outline: 'border-border bg-card text-foreground hover:bg-muted border',
1824
secondary:
1925
'border-border text-foreground hover:bg-muted border bg-transparent',
2026
ghost: 'text-foreground hover:bg-muted',
27+
'ghost-inverse':
28+
'text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15]',
2129
link: 'text-primary underline-offset-4 hover:underline',
2230
},
2331
size: {
@@ -27,6 +35,7 @@ const buttonVariants = cva(
2735
lg: 'h-14 px-8 text-base',
2836
pill: 'h-10 px-8 text-sm',
2937
icon: 'h-10 w-10 p-0',
38+
'icon-lg': 'h-12 w-12 p-0',
3039
},
3140
icon: {
3241
true: 'h-10 w-10 rounded-full p-2',

‎app/routes/_app+/_auth+/forgot-password.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,8 @@ export default function ForgotPasswordRoute() {
187187
</div>
188188
<ErrorList errors={form.errors} id={form.errorId} />
189189
<StatusButton
190-
className="w-full bg-[hsl(var(--palette-hot-fire-red))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-fire-red))]"
190+
variant="destructive"
191+
className="w-full"
191192
status={
192193
forgotPassword.state === 'submitting'
193194
? 'pending'

‎app/routes/_app+/_auth+/login.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,8 @@ export default function LoginPage() {
152152
<ErrorList errors={form.errors} id={form.errorId} />
153153

154154
<StatusButton
155-
className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
155+
variant="brand"
156+
className="w-full"
156157
status={isPending ? 'pending' : (form.status ?? 'idle')}
157158
type="submit"
158159
disabled={isPending}

‎app/routes/_app+/_auth+/onboarding.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,8 @@ export default function SignupRoute() {
217217
<input {...getInputProps(fields.redirectTo, { type: 'hidden' })} />
218218
<ErrorList errors={form.errors} id={form.errorId} />
219219
<StatusButton
220-
className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
220+
variant="brand"
221+
className="w-full"
221222
status={isPending ? 'pending' : (form.status ?? 'idle')}
222223
type="submit"
223224
disabled={isPending}

‎app/routes/_app+/_auth+/reset-password.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,8 @@ export default function ResetPasswordPage() {
123123
<ErrorList errors={form.errors} id={form.errorId} />
124124

125125
<StatusButton
126-
className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
126+
variant="brand"
127+
className="w-full"
127128
status={isPending ? 'pending' : (form.status ?? 'idle')}
128129
type="submit"
129130
disabled={isPending}

‎app/routes/_app+/_auth+/signup.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,8 @@ export default function SignupRoute() {
174174
</div>
175175
<ErrorList errors={form.errors} id={form.errorId} />
176176
<StatusButton
177-
className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
177+
variant="brand"
178+
className="w-full"
178179
status={isPending ? 'pending' : (form.status ?? 'idle')}
179180
type="submit"
180181
disabled={isPending}

‎app/routes/_app+/_auth+/verify.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,8 @@ export default function VerifyRoute() {
156156
/>
157157
<StatusButton
158158
size="lg"
159-
className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
159+
variant="brand"
160+
className="w-full"
160161
status={isPending ? 'pending' : (form.status ?? 'idle')}
161162
type="submit"
162163
disabled={isPending}

‎app/routes/_app+/_layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,8 @@ function MobileMenu() {
289289
<Button
290290
asChild
291291
size="lg"
292-
className="mt-6 w-full bg-[hsl(var(--palette-orange))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-chestnut))]"
292+
variant="warm"
293+
className="mt-6 w-full"
293294
>
294295
<Link to="/login" onClick={() => setOpen(false)}>
295296
<Icon name="star" size="sm" aria-hidden="true">

‎app/routes/_app+/_marketing+/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ export default function Index() {
6767
<Button
6868
asChild
6969
size="lg"
70-
className="w-full max-w-[320px] bg-[hsl(var(--palette-chestnut))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-hot-fire-red))] sm:w-auto"
70+
variant="warm"
71+
className="w-full max-w-[320px] sm:w-auto"
7172
>
7273
{user ? (
7374
<Link to="/recipients">Open dashboard</Link>
@@ -234,7 +235,7 @@ export default function Index() {
234235
<div className="flex flex-col gap-3 sm:flex-row">
235236
<Button
236237
asChild
237-
className="bg-[hsl(var(--palette-chestnut))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-hot-fire-red))]"
238+
variant="warm"
238239
>
239240
<Link to="/login">Get started</Link>
240241
</Button>

0 commit comments

Comments
 (0)