Skip to content

Commit 18933d6

Browse files
ntoombs19ntoombs19
committed
layout improvements
1 parent 925412f commit 18933d6

3 files changed

Lines changed: 257 additions & 272 deletions

File tree

‎resources/js/Layouts/AuthenticatedLayout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ export default function Authenticated({
191191

192192
<div className="flex flex-col flex-[1_1_80%]">
193193
<div className="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700 h-fit">
194-
<div className="flex justify-between h-24 px-2 sm:px-4 lg:px-5 items-center">
194+
<div className="flex justify-between h-24 px-6 sm:px-8 lg:px-10 items-center">
195195
<div className="flex items-center space-x-8 sm:flex">
196196
{header && (
197197
<header className="bg-white dark:bg-gray-800 flex flex-row">
@@ -366,7 +366,7 @@ export default function Authenticated({
366366

367367
<main className="flex flex-col gap-6 overflow-x-auto px-6 sm:px-8 lg:px-10 py-4">
368368
{(actions || breadcrumbs) && (
369-
<div className="flex items-center justify-between gap-4">
369+
<div className="flex items-center justify-between gap-4 min-h-10">
370370
<Breadcrumb>
371371
<BreadcrumbList>
372372
{breadcrumbs.length > 0 &&

‎resources/js/Pages/Users/Form.tsx‎

Lines changed: 150 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -66,174 +66,167 @@ export default function UserForm({ auth, user, roles }: UserFormProps) {
6666
}
6767
>
6868
<Head title={isEditMode ? 'Edit User' : 'Create User'} />
69+
<div className="space-y-6">
70+
<form onSubmit={handleSubmit} className="space-y-6">
71+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
72+
<div className="space-y-4">
73+
<div>
74+
<Label htmlFor="first_name">First Name</Label>
75+
<Input
76+
id="first_name"
77+
type="text"
78+
value={data.first_name}
79+
onChange={(e) => setData('first_name', e.target.value)}
80+
className="mt-1 block w-full"
81+
required
82+
/>
83+
{errors.first_name && (
84+
<p className="text-sm text-red-600 mt-1">
85+
{errors.first_name}
86+
</p>
87+
)}
88+
</div>
6989

70-
<div className="w-full sm:px-6 lg:px-8">
71-
<div className="space-y-6">
72-
<form onSubmit={handleSubmit} className="space-y-6">
73-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
74-
<div className="space-y-4">
75-
<div>
76-
<Label htmlFor="first_name">First Name</Label>
77-
<Input
78-
id="first_name"
79-
type="text"
80-
value={data.first_name}
81-
onChange={(e) => setData('first_name', e.target.value)}
82-
className="mt-1 block w-full"
83-
required
84-
/>
85-
{errors.first_name && (
86-
<p className="text-sm text-red-600 mt-1">
87-
{errors.first_name}
88-
</p>
89-
)}
90-
</div>
91-
92-
<div>
93-
<Label htmlFor="last_name">Last Name</Label>
94-
<Input
95-
id="last_name"
96-
type="text"
97-
value={data.last_name}
98-
onChange={(e) => setData('last_name', e.target.value)}
99-
className="mt-1 block w-full"
100-
required
101-
/>
102-
{errors.last_name && (
103-
<p className="text-sm text-red-600 mt-1">
104-
{errors.last_name}
105-
</p>
106-
)}
107-
</div>
108-
109-
<div>
110-
<Label htmlFor="email">Email</Label>
111-
<Input
112-
id="email"
113-
type="email"
114-
value={data.email}
115-
onChange={(e) => setData('email', e.target.value)}
116-
className="mt-1 block w-full"
117-
required
118-
/>
119-
{errors.email && (
120-
<p className="text-sm text-red-600 mt-1">{errors.email}</p>
121-
)}
122-
</div>
90+
<div>
91+
<Label htmlFor="last_name">Last Name</Label>
92+
<Input
93+
id="last_name"
94+
type="text"
95+
value={data.last_name}
96+
onChange={(e) => setData('last_name', e.target.value)}
97+
className="mt-1 block w-full"
98+
required
99+
/>
100+
{errors.last_name && (
101+
<p className="text-sm text-red-600 mt-1">
102+
{errors.last_name}
103+
</p>
104+
)}
105+
</div>
123106

124-
<div>
125-
<Label htmlFor="phone_number">Phone Number</Label>
126-
<Input
127-
id="phone_number"
128-
type="text"
129-
value={data.phone_number}
130-
onChange={(e) => setData('phone_number', e.target.value)}
131-
className="mt-1 block w-full"
132-
/>
133-
{errors.phone_number && (
134-
<p className="text-sm text-red-600 mt-1">
135-
{errors.phone_number}
136-
</p>
137-
)}
138-
</div>
107+
<div>
108+
<Label htmlFor="email">Email</Label>
109+
<Input
110+
id="email"
111+
type="email"
112+
value={data.email}
113+
onChange={(e) => setData('email', e.target.value)}
114+
className="mt-1 block w-full"
115+
required
116+
/>
117+
{errors.email && (
118+
<p className="text-sm text-red-600 mt-1">{errors.email}</p>
119+
)}
120+
</div>
139121

140-
<div className="flex items-center space-x-2">
141-
<Checkbox
142-
id="active"
143-
checked={data.active}
144-
onCheckedChange={(checked) =>
145-
setData('active', checked as boolean)
146-
}
147-
/>
148-
<Label htmlFor="active">Active</Label>
149-
</div>
122+
<div>
123+
<Label htmlFor="phone_number">Phone Number</Label>
124+
<Input
125+
id="phone_number"
126+
type="text"
127+
value={data.phone_number}
128+
onChange={(e) => setData('phone_number', e.target.value)}
129+
className="mt-1 block w-full"
130+
/>
131+
{errors.phone_number && (
132+
<p className="text-sm text-red-600 mt-1">
133+
{errors.phone_number}
134+
</p>
135+
)}
150136
</div>
151137

152-
<div className="space-y-4">
153-
<div>
154-
<Label>Roles</Label>
155-
<div className="mt-2 space-y-2 p-4 border rounded-md">
156-
{roles.map((role) => (
157-
<div key={role} className="flex items-center space-x-2">
158-
<Checkbox
159-
id={`role-${role}`}
160-
checked={data.roles.includes(role)}
161-
onCheckedChange={(checked) => {
162-
if (checked) {
163-
setData('roles', [...data.roles, role])
164-
} else {
165-
setData(
166-
'roles',
167-
data.roles.filter((r) => r !== role),
168-
)
169-
}
170-
}}
171-
/>
172-
<Label htmlFor={`role-${role}`} className="font-normal">
173-
{role.charAt(0).toUpperCase() + role.slice(1)}
174-
</Label>
175-
</div>
176-
))}
177-
</div>
178-
{errors.roles && (
179-
<p className="text-sm text-red-600 mt-1">{errors.roles}</p>
180-
)}
181-
</div>
138+
<div className="flex items-center space-x-2">
139+
<Checkbox
140+
id="active"
141+
checked={data.active}
142+
onCheckedChange={(checked) =>
143+
setData('active', checked as boolean)
144+
}
145+
/>
146+
<Label htmlFor="active">Active</Label>
147+
</div>
148+
</div>
182149

183-
<div>
184-
<Label htmlFor="password">Password</Label>
185-
<Input
186-
id="password"
187-
type="password"
188-
value={data.password}
189-
onChange={(e) => setData('password', e.target.value)}
190-
className="mt-1 block w-full"
191-
required={!isEditMode}
192-
/>
193-
{errors.password && (
194-
<p className="text-sm text-red-600 mt-1">
195-
{errors.password}
196-
</p>
197-
)}
198-
{isEditMode && (
199-
<p className="text-xs text-gray-500 mt-1">
200-
Leave blank to keep the current password
201-
</p>
202-
)}
150+
<div className="space-y-4">
151+
<div>
152+
<Label>Roles</Label>
153+
<div className="mt-2 space-y-2 p-4 border rounded-md">
154+
{roles.map((role) => (
155+
<div key={role} className="flex items-center space-x-2">
156+
<Checkbox
157+
id={`role-${role}`}
158+
checked={data.roles.includes(role)}
159+
onCheckedChange={(checked) => {
160+
if (checked) {
161+
setData('roles', [...data.roles, role])
162+
} else {
163+
setData(
164+
'roles',
165+
data.roles.filter((r) => r !== role),
166+
)
167+
}
168+
}}
169+
/>
170+
<Label htmlFor={`role-${role}`} className="font-normal">
171+
{role.charAt(0).toUpperCase() + role.slice(1)}
172+
</Label>
173+
</div>
174+
))}
203175
</div>
176+
{errors.roles && (
177+
<p className="text-sm text-red-600 mt-1">{errors.roles}</p>
178+
)}
179+
</div>
204180

205-
<div>
206-
<Label htmlFor="password_confirmation">
207-
Confirm Password
208-
</Label>
209-
<Input
210-
id="password_confirmation"
211-
type="password"
212-
value={data.password_confirmation}
213-
onChange={(e) =>
214-
setData('password_confirmation', e.target.value)
215-
}
216-
className="mt-1 block w-full"
217-
required={!isEditMode}
218-
/>
219-
</div>
181+
<div>
182+
<Label htmlFor="password">Password</Label>
183+
<Input
184+
id="password"
185+
type="password"
186+
value={data.password}
187+
onChange={(e) => setData('password', e.target.value)}
188+
className="mt-1 block w-full"
189+
required={!isEditMode}
190+
/>
191+
{errors.password && (
192+
<p className="text-sm text-red-600 mt-1">{errors.password}</p>
193+
)}
194+
{isEditMode && (
195+
<p className="text-xs text-gray-500 mt-1">
196+
Leave blank to keep the current password
197+
</p>
198+
)}
220199
</div>
221-
</div>
222200

223-
<div className="flex justify-end space-x-4">
224-
<Button
225-
type="button"
226-
variant="outline"
227-
onClick={() => router.visit(route('users.list'))}
228-
>
229-
Cancel
230-
</Button>
231-
<Button type="submit" disabled={processing}>
232-
{isEditMode ? 'Update User' : 'Create User'}
233-
</Button>
201+
<div>
202+
<Label htmlFor="password_confirmation">Confirm Password</Label>
203+
<Input
204+
id="password_confirmation"
205+
type="password"
206+
value={data.password_confirmation}
207+
onChange={(e) =>
208+
setData('password_confirmation', e.target.value)
209+
}
210+
className="mt-1 block w-full"
211+
required={!isEditMode}
212+
/>
213+
</div>
234214
</div>
235-
</form>
236-
</div>
215+
</div>
216+
217+
<div className="flex justify-end space-x-4">
218+
<Button
219+
type="button"
220+
variant="outline"
221+
onClick={() => router.visit(route('users.list'))}
222+
>
223+
Cancel
224+
</Button>
225+
<Button type="submit" disabled={processing}>
226+
{isEditMode ? 'Update User' : 'Create User'}
227+
</Button>
228+
</div>
229+
</form>
237230
</div>
238231
</AuthenticatedLayout>
239232
)

0 commit comments

Comments
 (0)