feat: add action icons to table row actions and refine focus styles for various form elements.
This commit is contained in:
pradeepkumar
@@ -173,7 +173,7 @@ export default function ProfileSectionsPage() {
|
||||
type="checkbox"
|
||||
checked={showInactive}
|
||||
onChange={(e) => setShowInactive(e.target.checked)}
|
||||
className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
|
||||
className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
|
||||
/>
|
||||
<span>Show Inactive</span>
|
||||
</label>
|
||||
@@ -331,28 +331,44 @@ export default function ProfileSectionsPage() {
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<Link
|
||||
href={`/dashboard/profile-sections/${section.id}`}
|
||||
className="text-[#f5a623] hover:text-[#e09620] mr-4"
|
||||
className="text-[#f5a623] hover:text-[#e09620] mr-3 inline-flex items-center gap-1"
|
||||
title="Manage"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Manage
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => openEditModal(section)}
|
||||
className="text-[#5ba4a4] hover:text-[#5ba4a4]/80 mr-4"
|
||||
className="text-[#5ba4a4] hover:text-[#5ba4a4]/80 mr-3 inline-flex items-center gap-1"
|
||||
title="Edit"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
Edit
|
||||
</button>
|
||||
{section.isSystem ? (
|
||||
<span
|
||||
className="text-[#9ca3af] cursor-not-allowed"
|
||||
className="text-[#9ca3af] cursor-not-allowed inline-flex items-center gap-1"
|
||||
title="System sections cannot be deleted"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Delete
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => openDeleteModal(section)}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
className="text-red-600 hover:text-red-900 inline-flex items-center gap-1"
|
||||
title="Delete"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
@@ -389,7 +405,7 @@ export default function ProfileSectionsPage() {
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
|
||||
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
|
||||
placeholder="e.g., Location, Experience, Education"
|
||||
required
|
||||
/>
|
||||
@@ -402,7 +418,7 @@ export default function ProfileSectionsPage() {
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
|
||||
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
|
||||
placeholder="Brief description of this section"
|
||||
/>
|
||||
</div>
|
||||
@@ -414,7 +430,7 @@ export default function ProfileSectionsPage() {
|
||||
type="text"
|
||||
value={formData.icon}
|
||||
onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
|
||||
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
|
||||
placeholder="e.g., location_on"
|
||||
/>
|
||||
</div>
|
||||
@@ -429,7 +445,7 @@ export default function ProfileSectionsPage() {
|
||||
onFocus={(e) => e.target.select()}
|
||||
placeholder="0"
|
||||
min={0}
|
||||
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
|
||||
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-6">
|
||||
@@ -439,7 +455,7 @@ export default function ProfileSectionsPage() {
|
||||
id="isActive"
|
||||
checked={formData.isActive}
|
||||
onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
|
||||
className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
|
||||
className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
|
||||
/>
|
||||
<label htmlFor="isActive" className="ml-2 text-sm text-[#00293d] font-serif">
|
||||
Active
|
||||
@@ -451,7 +467,7 @@ export default function ProfileSectionsPage() {
|
||||
id="isGlobal"
|
||||
checked={formData.isGlobal}
|
||||
onChange={(e) => setFormData({ ...formData, isGlobal: e.target.checked })}
|
||||
className="rounded border-[#e5e7eb] text-[#5ba4a4] focus:ring-[#5ba4a4]"
|
||||
className="rounded border-[#e5e7eb] text-[#5ba4a4] focus:ring-0"
|
||||
/>
|
||||
<label htmlFor="isGlobal" className="ml-2 text-sm text-[#00293d] font-serif">
|
||||
Global (all agent types)
|
||||
@@ -464,7 +480,7 @@ export default function ProfileSectionsPage() {
|
||||
id="isRepeatable"
|
||||
checked={formData.isRepeatable}
|
||||
onChange={(e) => setFormData({ ...formData, isRepeatable: e.target.checked })}
|
||||
className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
|
||||
className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-0"
|
||||
/>
|
||||
<label htmlFor="isRepeatable" className="ml-2 text-sm text-[#00293d] font-serif">
|
||||
Allow Multiple Entries (e.g., certifications, education)
|
||||
|
||||
Reference in New Issue
Block a user