Skip to content

Commit a11b07f

Browse files
mahatmamahardhikachmahatmamahardhikach
committed
fix: polish mobile todo forms
1 parent c9c1afa commit a11b07f

2 files changed

Lines changed: 58 additions & 34 deletions

File tree

‎resources/js/Pages/Todos/Create.jsx‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -123,32 +123,36 @@ export default function Create({ tags, todos, defaultType = 'todo' }) {
123123

124124
return (
125125
<AppLayout title={isNote ? 'Create Note' : 'Create Todo'}>
126-
<div className="max-w-7xl mx-auto">
127-
<Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
128-
<CardHeader>
129-
<div className="flex items-center justify-between">
130-
<CardTitle className="text-2xl text-gray-900 dark:text-white">{isNote ? 'Create New Note' : 'Create New Todo'}</CardTitle>
131-
<Link href={isNote ? '/todos?type=note' : '/todos'}>
132-
<Button variant="ghost" size="sm" className="text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
133-
<ArrowLeft className="w-4 h-4 mr-2" />
134-
Back to {isNote ? 'Notes' : 'Todos'}
135-
</Button>
126+
<div className="max-w-3xl mx-auto px-4 py-6 md:py-10">
127+
<Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg">
128+
<CardHeader className="space-y-4 border-b border-gray-200/60 dark:border-gray-700/60 pb-6">
129+
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
130+
<div>
131+
<CardTitle className="text-2xl text-gray-900 dark:text-white">{isNote ? 'Create New Note' : 'Create New Todo'}</CardTitle>
132+
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Capture details, choose tags, and attach files to keep your work organized.</p>
133+
</div>
134+
<Link
135+
href={isNote ? '/todos?type=note' : '/todos'}
136+
className="inline-flex items-center justify-center gap-2 text-sm font-medium text-indigo-600 transition hover:text-indigo-500 dark:text-indigo-300 dark:hover:text-indigo-200"
137+
>
138+
<ArrowLeft className="w-4 h-4" />
139+
Back to {isNote ? 'Notes' : 'Todos'}
136140
</Link>
137141
</div>
138142
</CardHeader>
139-
<CardContent>
143+
<CardContent className="p-6 sm:p-8">
140144
<form onSubmit={handleSubmit} className="space-y-6">
141145
<div className="space-y-2">
142146
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
143147
Type
144148
</label>
145-
<div className="flex rounded-md bg-gray-100 dark:bg-gray-800 p-1 w-fit">
149+
<div className="grid grid-cols-2 gap-2 rounded-xl bg-gray-100 dark:bg-gray-800 p-1">
146150
{[{ value: 'todo', label: 'Todo' }, { value: 'note', label: 'Note' }].map(option => (
147151
<button
148152
key={option.value}
149153
type="button"
150154
onClick={() => handleTypeChange(option.value)}
151-
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
155+
className={`w-full rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
152156
data.type === option.value
153157
? 'bg-black text-white dark:bg-white dark:text-black'
154158
: 'text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white'
@@ -267,13 +271,21 @@ export default function Create({ tags, todos, defaultType = 'todo' }) {
267271
/>
268272
</div>
269273

270-
<div className="flex items-center justify-end space-x-4 pt-4 border-t border-gray-200 dark:border-gray-700">
271-
<Link href={isNote ? '/todos?type=note' : '/todos'}>
272-
<Button type="button" variant="outline" className="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
274+
<div className="flex flex-col-reverse gap-3 pt-6 border-t border-gray-200 dark:border-gray-700 sm:flex-row sm:items-center sm:justify-end">
275+
<Link href={isNote ? '/todos?type=note' : '/todos'} className="sm:w-auto">
276+
<Button
277+
type="button"
278+
variant="outline"
279+
className="w-full bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
280+
>
273281
Cancel
274282
</Button>
275283
</Link>
276-
<Button type="submit" disabled={processing} className="bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-800 text-white">
284+
<Button
285+
type="submit"
286+
disabled={processing}
287+
className="w-full sm:w-auto bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-800 text-white"
288+
>
277289
{processing ? 'Creating...' : isNote ? 'Create Note' : 'Create Todo'}
278290
</Button>
279291
</div>

‎resources/js/Pages/Todos/Edit.jsx‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -155,32 +155,36 @@ export default function Edit({ todo, tags, todos, linkedTodoIds = [], selectedLi
155155

156156
return (
157157
<AppLayout title={`Edit ${todo.title}`}>
158-
<div className="max-w-7xl mx-auto">
159-
<Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
160-
<CardHeader>
161-
<div className="flex items-center justify-between">
162-
<CardTitle className="text-2xl text-gray-900 dark:text-white">{isNote ? 'Edit Note' : 'Edit Todo'}</CardTitle>
163-
<Link href={isNote ? '/todos?type=note' : '/todos'}>
164-
<Button variant="ghost" size="sm" className="text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
165-
<ArrowLeft className="w-4 h-4 mr-2" />
166-
Back to {isNote ? 'Notes' : 'Todos'}
167-
</Button>
158+
<div className="max-w-3xl mx-auto px-4 py-6 md:py-10">
159+
<Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg">
160+
<CardHeader className="space-y-4 border-b border-gray-200/60 dark:border-gray-700/60 pb-6">
161+
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
162+
<div>
163+
<CardTitle className="text-2xl text-gray-900 dark:text-white">{isNote ? 'Edit Note' : 'Edit Todo'}</CardTitle>
164+
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Update details, adjust priorities, and keep related tasks in sync.</p>
165+
</div>
166+
<Link
167+
href={isNote ? '/todos?type=note' : '/todos'}
168+
className="inline-flex items-center justify-center gap-2 text-sm font-medium text-indigo-600 transition hover:text-indigo-500 dark:text-indigo-300 dark:hover:text-indigo-200"
169+
>
170+
<ArrowLeft className="w-4 h-4" />
171+
Back to {isNote ? 'Notes' : 'Todos'}
168172
</Link>
169173
</div>
170174
</CardHeader>
171-
<CardContent>
175+
<CardContent className="p-6 sm:p-8">
172176
<form onSubmit={handleSubmit} className="space-y-6">
173177
<div className="space-y-2">
174178
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
175179
Type
176180
</label>
177-
<div className="flex rounded-md bg-gray-100 dark:bg-gray-800 p-1 w-fit">
181+
<div className="grid grid-cols-2 gap-2 rounded-xl bg-gray-100 dark:bg-gray-800 p-1">
178182
{[{ value: 'todo', label: 'Todo' }, { value: 'note', label: 'Note' }].map(option => (
179183
<button
180184
key={option.value}
181185
type="button"
182186
onClick={() => handleTypeChange(option.value)}
183-
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
187+
className={`w-full rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
184188
data.type === option.value
185189
? 'bg-black text-white dark:bg-white dark:text-black'
186190
: 'text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white'
@@ -334,13 +338,21 @@ export default function Edit({ todo, tags, todos, linkedTodoIds = [], selectedLi
334338
/>
335339
</div>
336340

337-
<div className="flex items-center justify-end space-x-4 pt-4 border-t border-gray-200 dark:border-gray-700">
338-
<Link href={isNote ? '/todos?type=note' : '/todos'}>
339-
<Button type="button" variant="outline" className="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
341+
<div className="flex flex-col-reverse gap-3 pt-6 border-t border-gray-200 dark:border-gray-700 sm:flex-row sm:items-center sm:justify-end">
342+
<Link href={isNote ? '/todos?type=note' : '/todos'} className="sm:w-auto">
343+
<Button
344+
type="button"
345+
variant="outline"
346+
className="w-full bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
347+
>
340348
Cancel
341349
</Button>
342350
</Link>
343-
<Button type="submit" disabled={processing} className="bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-800 text-white">
351+
<Button
352+
type="submit"
353+
disabled={processing}
354+
className="w-full sm:w-auto bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-800 text-white"
355+
>
344356
{processing ? 'Updating...' : isNote ? 'Update Note' : 'Update Todo'}
345357
</Button>
346358
</div>

0 commit comments

Comments
 (0)