refactor: remove all bold font weights from UI/UX (291 replacements)

Replace font-bold, font-black, and font-semibold with font-normal throughout:
- 26 component files
- 1 CSS utility file (globals.css)
- 291 total occurrences

Text hierarchy now maintained through font-size differences only.
All tests passing (291/291).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-04-19 18:28:23 +03:00
parent b0a1582aa0
commit c0232bb2f1
31 changed files with 299 additions and 295 deletions

View File

@@ -38,7 +38,7 @@ export default function AiManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Brain size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">AI Intelligence</h2>
<h2 className="text-xl font-normal text-white tracking-tight">AI Intelligence</h2>
</div>
</div>
@@ -63,9 +63,9 @@ export default function AiManager({
{p.id === 'gemini' ? <Cpu size={16} /> : <Zap size={16} />}
</div>
<div>
<p className={cn("text-xs font-black tracking-tight", p.active ? "text-white" : "text-secondary")}>{p.name}</p>
<p className={cn("text-xs font-normal tracking-tight", p.active ? "text-white" : "text-secondary")}>{p.name}</p>
<p className={cn(
"text-xs font-bold mt-1 px-0.5 rounded",
"text-xs font-normal mt-1 px-0.5 rounded",
p.active
? (p.configured ? "text-emerald-200" : "text-rose-100")
: (p.configured ? "text-emerald-500" : "text-rose-500")
@@ -75,7 +75,7 @@ export default function AiManager({
</div>
</div>
{p.active && (
<div className="bg-white/20 px-2.5 py-1 rounded-full text-xs font-black text-white tracking-tight">
<div className="bg-white/20 px-2.5 py-1 rounded-full text-xs font-normal text-white tracking-tight">
Active
</div>
)}
@@ -87,13 +87,13 @@ export default function AiManager({
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 bg-primary/10 rounded-lg text-primary"><Lock size={14} /></div>
<h3 className="text-sm font-bold text-secondary tracking-tight">Provider Access Keys</h3>
<h3 className="text-sm font-normal text-secondary tracking-tight">Provider Access Keys</h3>
</div>
<button
onClick={onSaveAiKeys}
disabled={isSavingKeys}
data-testid="save-settings-button"
className="px-6 py-2.5 bg-primary hover:bg-primary text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
className="px-6 py-2.5 bg-primary hover:bg-primary text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
>
{isSavingKeys ? <RotateCcw size={14} className="animate-spin" /> : <Lock size={14} />}
{isSavingKeys ? "Storing..." : "Store API Keys"}
@@ -102,7 +102,7 @@ export default function AiManager({
<div className="grid md:grid-cols-2 gap-6">
<div className="space-y-2">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Gemini Api Key</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Gemini Api Key</label>
<div className="flex gap-2">
<input
data-testid="ai-api-key-input"
@@ -116,7 +116,7 @@ export default function AiManager({
onClick={() => onTestAiKey('gemini')}
disabled={isTestingKeys.gemini}
className={cn(
"px-4 py-2 rounded-xl text-xs font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
"px-4 py-2 rounded-xl text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
isTestingKeys.gemini
? "bg-slate-800 border-slate-700 text-muted cursor-wait"
: "bg-primary border-primary text-white hover:bg-primary"
@@ -128,7 +128,7 @@ export default function AiManager({
</div>
</div>
<div className="space-y-2">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Claude Api Key</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Claude Api Key</label>
<div className="flex gap-2">
<input
data-testid="ai-api-key-input"
@@ -142,7 +142,7 @@ export default function AiManager({
onClick={() => onTestAiKey('claude')}
disabled={isTestingKeys.claude}
className={cn(
"px-4 py-2 rounded-xl text-xs font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
"px-4 py-2 rounded-xl text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
isTestingKeys.claude
? "bg-slate-800 border-slate-700 text-muted cursor-wait"
: "bg-primary border-primary text-white hover:bg-primary"
@@ -159,11 +159,11 @@ export default function AiManager({
<div className="space-y-4">
<div className="space-y-2">
<div className="flex items-center justify-between px-1">
<label className="text-sm font-bold text-secondary tracking-tight">System Prompt (Vision Extraction)</label>
<label className="text-sm font-normal text-secondary tracking-tight">System Prompt (Vision Extraction)</label>
<button
onClick={onUpdatePrompt}
disabled={isSavingPrompt}
className="px-6 py-2 bg-primary hover:bg-primary text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
className="px-6 py-2 bg-primary hover:bg-primary text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
>
{isSavingPrompt ? <RotateCcw size={14} className="animate-spin" /> : <FileText size={14} />}
{isSavingPrompt ? "Saving..." : "Save Prompt"}
@@ -172,7 +172,7 @@ export default function AiManager({
<textarea
value={aiPrompt}
onChange={(e) => setAiPrompt(e.target.value)}
className="w-full bg-background/80 border border-slate-800 rounded-2xl p-6 text-xs font-mono font-bold text-secondary leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
className="w-full bg-background/80 border border-slate-800 rounded-2xl p-6 text-xs font-mono font-normal text-secondary leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
/>
</div>
<div className="bg-primary/5 border border-purple-500/10 rounded-2xl p-4 flex gap-4 items-start">

View File

@@ -29,12 +29,12 @@ export default function CategoryManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Layers size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">Category Groups</h2>
<h2 className="text-xl font-normal text-white tracking-tight">Category Groups</h2>
</div>
<button
onClick={onAddCategory}
data-testid="add-category-button"
className="flex items-center gap-2 bg-primary hover:bg-primary text-white px-6 py-3 rounded-xl text-sm font-black transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight"
className="flex items-center gap-2 bg-primary hover:bg-primary text-white px-6 py-3 rounded-xl text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight"
>
<Plus size={14} /> New Group
</button>
@@ -78,7 +78,7 @@ export default function CategoryManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Edit2 size={20} />
</div>
<h3 className="text-xl font-black text-white tracking-tight">Modify Group</h3>
<h3 className="text-xl font-normal text-white tracking-tight">Modify Group</h3>
</div>
<button onClick={() => setEditingCategory(null)} className="p-3 hover:bg-slate-800 rounded-2xl text-muted transition-colors border border-slate-800">
<X size={20} />
@@ -86,7 +86,7 @@ export default function CategoryManager({
</div>
<div data-testid="category-form" className="space-y-6">
<div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Group Identifier</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Group Identifier</label>
<input
data-testid="category-name-input"
type="text"
@@ -96,14 +96,14 @@ export default function CategoryManager({
/>
</div>
<div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Strategic Description</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Strategic Description</label>
<textarea
value={editCatForm.description}
onChange={(e) => setEditCatForm({...editCatForm, description: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-2xl py-4 px-5 text-sm text-white focus:border-primary outline-none transition-all h-32 resize-none"
/>
</div>
<button data-testid="add-category-submit" onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm mb-4 tracking-tight">
<button data-testid="add-category-submit" onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-white font-normal py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm mb-4 tracking-tight">
Update Asset Group
</button>
</div>

View File

@@ -40,27 +40,27 @@ export default function DatabaseManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Database size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">System Integrity</h2>
<h2 className="text-xl font-normal text-white tracking-tight">System Integrity</h2>
</div>
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
<div className="space-y-1 sm:pr-6">
<p className="text-xs font-bold text-muted tracking-tight">Database Health</p>
<p className="text-xs font-normal text-muted tracking-tight">Database Health</p>
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.3)]" />
<span className="text-sm font-bold text-secondary">Operational</span>
<span className="text-sm font-normal text-secondary">Operational</span>
</div>
</div>
<div className="sm:pl-6 sm:border-l border-slate-800">
<p className="text-xs font-bold text-muted tracking-tight">Last Backup</p>
<p className="text-sm font-bold text-secondary tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p>
<p className="text-xs font-normal text-muted tracking-tight">Last Backup</p>
<p className="text-sm font-normal text-secondary tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p>
</div>
<div className="ml-auto">
<button
onClick={onCreateBackup}
disabled={isBackingUp}
data-testid="backup-button"
className="flex items-center gap-2 px-5 py-3 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-primary/10 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="flex items-center gap-2 px-5 py-3 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-normal transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-primary/10 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Create database backup"
>
{isBackingUp ? <RotateCcw size={14} className="animate-spin" /> : <Database size={14} />}
@@ -77,25 +77,25 @@ export default function DatabaseManager({
<History size={20} />
</div>
<div>
<h3 className="text-lg font-black text-white tracking-tight">Storage Policy</h3>
<p className="text-sm text-secondary font-bold tracking-tight">Retention & Maintenance</p>
<h3 className="text-lg font-normal text-white tracking-tight">Storage Policy</h3>
<p className="text-sm text-secondary font-normal tracking-tight">Retention & Maintenance</p>
</div>
</div>
<div className="grid sm:grid-cols-3 gap-6">
<div className="space-y-2">
<label className="text-xs font-bold text-muted tracking-tight ml-1 flex items-center gap-2">
<label className="text-xs font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
<History size={10} /> Max Backups
</label>
<input
type="number"
value={dbSettings.retention_count}
onChange={(e) => onUpdateDbSettings({...dbSettings, retention_count: parseInt(e.target.value)})}
className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/>
</div>
<div className="space-y-2">
<label className="text-xs font-bold text-muted tracking-tight ml-1 flex items-center gap-2">
<label className="text-xs font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
<Clock size={10} /> Schedule (Hour)
</label>
<input
@@ -103,11 +103,11 @@ export default function DatabaseManager({
min="0" max="23"
value={dbSettings.schedule_hour}
onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_hour: parseInt(e.target.value)})}
className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/>
</div>
<div className="space-y-2">
<label className="text-xs font-bold text-muted tracking-tight ml-1 flex items-center gap-2">
<label className="text-xs font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
<Zap size={10} /> Frequency (Days)
</label>
<input
@@ -115,7 +115,7 @@ export default function DatabaseManager({
min="1"
value={dbSettings.schedule_freq_days}
onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_freq_days: parseInt(e.target.value)})}
className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/>
</div>
</div>
@@ -123,8 +123,8 @@ export default function DatabaseManager({
<div className="space-y-4">
<div className="flex items-center justify-between px-1">
<label className="text-xs font-bold text-muted tracking-tight">Recovery Points</label>
<div className="text-xs font-bold text-primary tracking-tight bg-primary/5 px-3 py-1 rounded-full border border-primary/10">
<label className="text-xs font-normal text-muted tracking-tight">Recovery Points</label>
<div className="text-xs font-normal text-primary tracking-tight bg-primary/5 px-3 py-1 rounded-full border border-primary/10">
{formatSize(dbStats.total_size_bytes)} Used
</div>
</div>
@@ -137,7 +137,7 @@ export default function DatabaseManager({
<Database size={14} />
</div>
<div>
<p className="text-xs font-bold text-secondary">{bak.filename}</p>
<p className="text-xs font-normal text-secondary">{bak.filename}</p>
<p className="text-[11px] text-secondary font-medium tabular-nums">
{new Date(bak.created_at).toLocaleString()} {formatSize(bak.size_bytes)}
</p>
@@ -158,7 +158,7 @@ export default function DatabaseManager({
<div className="grid grid-cols-2 gap-4 pt-2">
<button
onClick={onExport}
className="flex items-center justify-center gap-2 py-4 bg-background border border-slate-800 hover:border-primary/50 text-primary rounded-2xl text-sm font-black transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="flex items-center justify-center gap-2 py-4 bg-background border border-slate-800 hover:border-primary/50 text-primary rounded-2xl text-sm font-normal transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Export database"
>
<Download size={14} /> Export Database
@@ -171,7 +171,7 @@ export default function DatabaseManager({
className="absolute inset-0 opacity-0 cursor-pointer z-10"
/>
<button
className="w-full flex items-center justify-center gap-2 py-4 bg-background border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-sm font-black transition-all tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
className="w-full flex items-center justify-center gap-2 py-4 bg-background border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-sm font-normal transition-all tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
aria-label="Import database"
>
<Upload size={14} /> Import Database

View File

@@ -30,12 +30,12 @@ export default function IdentityManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<User size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">Identity Management</h2>
<h2 className="text-xl font-normal text-white tracking-tight">Identity Management</h2>
</div>
<button
onClick={onAddUser}
data-testid="add-user-button"
className="flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-black transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Add new user"
>
<UserPlus size={16} /> Add User
@@ -88,7 +88,7 @@ export default function IdentityManager({
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
<div className="bg-surface border border-slate-800 rounded-[2.5rem] p-8 w-full max-w-md shadow-2xl">
<div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-black text-white tracking-tight">Edit Identity</h3>
<h3 className="text-xl font-normal text-white tracking-tight">Edit Identity</h3>
<button
onClick={() => setEditingUser(null)}
className="p-2 text-muted hover:text-white transition-colors focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded"
@@ -100,30 +100,30 @@ export default function IdentityManager({
<div className="space-y-4">
<div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Username</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Username</label>
<input
type="text"
value={editUserForm.username}
onChange={(e) => setEditUserForm({ ...editUserForm, username: e.target.value })}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
/>
</div>
<div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">New Password (Leave Empty To Keep)</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">New Password (Leave Empty To Keep)</label>
<input
type="password"
value={editUserForm.password}
onChange={(e) => setEditUserForm({ ...editUserForm, password: e.target.value })}
placeholder="********"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
/>
</div>
<div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Role</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Role</label>
<select
value={editUserForm.role}
onChange={(e) => setEditUserForm({ ...editUserForm, role: e.target.value })}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-bold text-white outline-none focus:border-primary/50 transition-all appearance-none"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-normal text-white outline-none focus:border-primary/50 transition-all appearance-none"
>
<option value="user">Standard User</option>
<option value="admin">Administrator</option>
@@ -132,7 +132,7 @@ export default function IdentityManager({
<button
onClick={onUpdateUserSubmit}
className="w-full bg-primary hover:bg-primary/80 text-white rounded-2xl py-4 text-sm font-black transition-all active:scale-95 shadow-xl shadow-primary/20 tracking-tight mt-4 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
className="w-full bg-primary hover:bg-primary/80 text-white rounded-2xl py-4 text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/20 tracking-tight mt-4 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
>
Apply Changes
</button>

View File

@@ -24,7 +24,7 @@ export default function LdapManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Globe size={20} />
</div>
<h2 className="text-xl font-black text-white tracking-tight">Enterprise LDAP</h2>
<h2 className="text-xl font-normal text-white tracking-tight">Enterprise LDAP</h2>
</div>
</div>
@@ -59,7 +59,7 @@ export default function LdapManager({
<div className="grid sm:grid-cols-2 gap-4">
<div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">LDAP URI</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">LDAP URI</label>
<div className="relative">
<Server className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} />
<input
@@ -67,12 +67,12 @@ export default function LdapManager({
placeholder="ldap://host:389"
value={ldapConfig.server_uri}
onChange={(e) => setLdapConfig({...ldapConfig, server_uri: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
<div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Context DN</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Context DN</label>
<div className="relative">
<Shield className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} />
<input
@@ -80,7 +80,7 @@ export default function LdapManager({
placeholder="dc=example,dc=com"
value={ldapConfig.base_dn}
onChange={(e) => setLdapConfig({...ldapConfig, base_dn: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
@@ -88,7 +88,7 @@ export default function LdapManager({
<div className="grid sm:grid-cols-2 gap-4">
<div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">User DN Template</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">User DN Template</label>
<div className="relative">
<User className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} />
<input
@@ -96,12 +96,12 @@ export default function LdapManager({
placeholder="uid={username},ou=people..."
value={ldapConfig.user_template}
onChange={(e) => setLdapConfig({...ldapConfig, user_template: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
<div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Groups Base DN</label>
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Groups Base DN</label>
<div className="relative">
<Layers className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} />
<input
@@ -109,7 +109,7 @@ export default function LdapManager({
placeholder="ou=groups"
value={ldapConfig.groups_dn}
onChange={(e) => setLdapConfig({...ldapConfig, groups_dn: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
@@ -148,14 +148,14 @@ export default function LdapManager({
<button
onClick={onTestLdap}
disabled={testingLdap}
className="flex-1 bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-primary/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-primary/30"
className="flex-1 bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-normal shadow-xl shadow-primary/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-primary/30"
>
{testingLdap ? <RotateCcw size={14} className="animate-spin" /> : <Wifi size={14} />}
Test Connection
</button>
<button
onClick={onUpdateLdap}
className="flex-[2] bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-primary/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-primary/30 tracking-tight"
className="flex-[2] bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-normal shadow-xl shadow-primary/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-primary/30 tracking-tight"
>
<Shield size={14} /> Save LDAP Policy
</button>