Skip to content
This repository was archived by the owner on Nov 29, 2025. It is now read-only.

Commit c2a5032

Browse files
ashwin31ashwin31
committed
feat: improve form styling and accessibility for organization and user management
1 parent 34cc6ec commit c2a5032

File tree

1 file changed

+35
-31
lines changed

1 file changed

+35
-31
lines changed

‎src/routes/(app)/app/users/+page.svelte‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -128,66 +128,67 @@
128128
<form method="POST" action="?/update" class="mt-6 space-y-6">
129129
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
130130
<div>
131-
<label for="org-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
132-
Organization Name
131+
<label for="org-name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
132+
Organization Name <span class="text-red-500">*</span>
133133
</label>
134-
<div class="mt-1 relative">
134+
<div class="relative">
135135
<input
136136
id="org-name"
137137
name="name"
138138
type="text"
139139
bind:value={formOrg.name}
140140
required
141-
class="block w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white pl-10 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 sm:text-sm"
141+
class="block w-full rounded-xl border-0 bg-white dark:bg-gray-700 py-3 pl-11 pr-4 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-blue-600 dark:focus:ring-blue-500 hover:ring-gray-400 dark:hover:ring-gray-500 transition-all duration-200 sm:text-sm sm:leading-6"
142+
placeholder="Enter organization name"
142143
/>
143-
<Building2 class="absolute left-3 top-3 h-4 w-4 text-gray-400 dark:text-gray-500" />
144+
<Building2 class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" />
144145
</div>
145146
</div>
146147
147148
<div>
148-
<label for="org-domain" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
149+
<label for="org-domain" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
149150
Domain
150151
</label>
151-
<div class="mt-1 relative">
152+
<div class="relative">
152153
<input
153154
id="org-domain"
154155
name="domain"
155156
type="text"
156157
bind:value={formOrg.domain}
157158
placeholder="yourcompany.com"
158-
class="block w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white pl-10 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 sm:text-sm placeholder-gray-400 dark:placeholder-gray-500"
159+
class="block w-full rounded-xl border-0 bg-white dark:bg-gray-700 py-3 pl-11 pr-4 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-blue-600 dark:focus:ring-blue-500 hover:ring-gray-400 dark:hover:ring-gray-500 transition-all duration-200 sm:text-sm sm:leading-6"
159160
/>
160-
<Globe class="absolute left-3 top-3 h-4 w-4 text-gray-400 dark:text-gray-500" />
161+
<Globe class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" />
161162
</div>
162163
</div>
163164
</div>
164165
165166
<div>
166-
<label for="org-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
167+
<label for="org-description" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
167168
Description
168169
</label>
169170
<textarea
170171
id="org-description"
171172
name="description"
172-
rows="3"
173+
rows="4"
173174
bind:value={formOrg.description}
174-
class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 sm:text-sm placeholder-gray-400 dark:placeholder-gray-500"
175-
placeholder="Describe your organization"
175+
class="block w-full rounded-xl border-0 bg-white dark:bg-gray-700 py-3 px-4 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-blue-600 dark:focus:ring-blue-500 hover:ring-gray-400 dark:hover:ring-gray-500 transition-all duration-200 sm:text-sm sm:leading-6 resize-none"
176+
placeholder="Describe your organization..."
176177
></textarea>
177178
</div>
178179
179-
<div class="flex justify-end gap-3">
180+
<div class="flex justify-end gap-3 pt-2">
180181
<button
181182
type="button"
182-
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600"
183+
class="inline-flex items-center gap-2 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-6 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-all duration-200"
183184
on:click={cancelEdit}
184185
>
185186
<X class="h-4 w-4" />
186187
Cancel
187188
</button>
188189
<button
189190
type="submit"
190-
class="inline-flex items-center gap-2 rounded-lg bg-blue-600 dark:bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 dark:hover:bg-blue-700"
191+
class="inline-flex items-center gap-2 rounded-xl bg-blue-600 dark:bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 dark:hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:focus-visible:outline-blue-500 transition-all duration-200"
191192
>
192193
<Check class="h-4 w-4" />
193194
Save Changes
@@ -211,38 +212,41 @@
211212
</div>
212213
213214
<!-- Add User Form -->
214-
<div class="mt-6 rounded-lg bg-gray-50 dark:bg-gray-700/50 p-4">
215-
<h4 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Add New Member</h4>
216-
<form method="POST" action="?/add_user" class="flex flex-col gap-3 sm:flex-row sm:items-end">
215+
<div class="mt-6 rounded-xl bg-gray-50 dark:bg-gray-700/50 p-6 border border-gray-100 dark:border-gray-600/50">
216+
<h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
217+
<Plus class="h-4 w-4" />
218+
Add New Member
219+
</h4>
220+
<form method="POST" action="?/add_user" class="flex flex-col gap-4 sm:flex-row sm:items-end">
217221
<div class="flex-1">
218-
<label for="add-user-email" class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
219-
Email Address
222+
<label for="add-user-email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
223+
Email Address <span class="text-red-500">*</span>
220224
</label>
221225
<input
222226
id="add-user-email"
223227
name="email"
224228
type="email"
225229
required
226-
class="block w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400 dark:placeholder-gray-500"
230+
class="block w-full rounded-xl border-0 bg-white dark:bg-gray-800 py-3 px-4 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-blue-600 dark:focus:ring-blue-500 hover:ring-gray-400 dark:hover:ring-gray-500 transition-all duration-200 sm:text-sm sm:leading-6"
227231
placeholder="user@example.com"
228232
/>
229233
</div>
230-
<div class="sm:w-32">
231-
<label for="add-user-role" class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
234+
<div class="sm:w-40">
235+
<label for="add-user-role" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
232236
Role
233237
</label>
234238
<select
235239
id="add-user-role"
236240
name="role"
237-
class="block w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400"
241+
class="block w-full rounded-xl border-0 bg-white dark:bg-gray-800 py-3 px-4 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-inset focus:ring-blue-600 dark:focus:ring-blue-500 hover:ring-gray-400 dark:hover:ring-gray-500 transition-all duration-200 sm:text-sm sm:leading-6"
238242
>
239243
<option value="USER">User</option>
240244
<option value="ADMIN">Admin</option>
241245
</select>
242246
</div>
243247
<button
244248
type="submit"
245-
class="inline-flex items-center gap-2 rounded-lg bg-blue-600 dark:bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 dark:hover:bg-blue-700"
249+
class="inline-flex items-center gap-2 rounded-xl bg-blue-600 dark:bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 dark:hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:focus-visible:outline-blue-500 transition-all duration-200"
246250
>
247251
<Plus class="h-4 w-4" />
248252
Add Member
@@ -251,7 +255,7 @@
251255
</div>
252256
253257
<!-- Users Table -->
254-
<div class="mt-6 overflow-hidden">
258+
<div class="mt-8 overflow-hidden">
255259
<div class="overflow-x-auto">
256260
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
257261
<thead class="bg-gray-50 dark:bg-gray-700/50">
@@ -313,7 +317,7 @@
313317
<select
314318
id="role-select-{user.id}"
315319
name="role"
316-
class="rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-xs focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400"
320+
class="rounded-lg border-0 bg-white dark:bg-gray-700 py-2 px-3 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-inset focus:ring-blue-600 dark:focus:ring-blue-500 hover:ring-gray-400 dark:hover:ring-gray-500 transition-all duration-200 text-xs"
317321
>
318322
<option value="USER" selected={user.role === 'USER'}>User</option>
319323
<option value="ADMIN" selected={user.role === 'ADMIN'}>Admin</option>
@@ -323,14 +327,14 @@
323327
</select>
324328
<button
325329
type="submit"
326-
class="rounded-lg bg-green-600 dark:bg-green-600 p-1.5 text-white hover:bg-green-700 dark:hover:bg-green-700"
330+
class="rounded-lg bg-green-600 dark:bg-green-600 p-2 text-white hover:bg-green-700 dark:hover:bg-green-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 dark:focus-visible:outline-green-500 transition-all duration-200 shadow-sm"
327331
title="Save"
328332
>
329333
<Check class="h-3.5 w-3.5" />
330334
</button>
331335
<button
332336
type="button"
333-
class="rounded-lg bg-gray-600 dark:bg-gray-600 p-1.5 text-white hover:bg-gray-700 dark:hover:bg-gray-700"
337+
class="rounded-lg bg-gray-600 dark:bg-gray-600 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 dark:focus-visible:outline-gray-500 transition-all duration-200 shadow-sm"
334338
on:click={() => { users[i].editingRole = false }}
335339
title="Cancel"
336340
>
@@ -340,7 +344,7 @@
340344
{:else}
341345
<button
342346
type="button"
343-
class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors {roleColors[user.role]} hover:bg-opacity-80 dark:hover:bg-opacity-80"
347+
class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-all duration-200 {roleColors[user.role]} hover:bg-opacity-80 dark:hover:bg-opacity-80 hover:shadow-sm"
344348
on:click={() => { users[i].editingRole = true }}
345349
title="Click to edit role"
346350
>

0 commit comments

Comments
 (0)