Fixed UI inconsistencies
This commit is contained in:
@@ -468,25 +468,35 @@ export const SettingsPage: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-[#0f1523]/80 backdrop-blur-md p-6 rounded-2xl border border-slate-800/80 shadow-xl">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white tracking-tight flex items-center gap-2">
|
||||
<span>System Administration & Audit</span>
|
||||
<HelpTooltip
|
||||
title="System Administration & Audit"
|
||||
content="Manage platform security, active user directory, statutory invitations, communications gateways, and comprehensive audit trail ledger."
|
||||
placement="right"
|
||||
/>
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 mt-1">
|
||||
User access directory, statutory invitations, gateway broadcasts, and immutable system audit ledger.
|
||||
</p>
|
||||
{/* Header Banner */}
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gradient-to-r from-[#0d1322] via-[#0f172a] to-[#0d1322] p-6 sm:p-8 rounded-3xl border border-slate-800/80 shadow-2xl relative overflow-hidden">
|
||||
<div className="absolute -right-10 -bottom-10 w-60 h-60 bg-blue-600/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="space-y-2 relative z-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-12 w-12 rounded-2xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400 shadow-lg shadow-blue-500/10">
|
||||
<Shield className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2.5 flex-wrap">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white flex items-center gap-2.5">
|
||||
System Administration & Audit
|
||||
</h1>
|
||||
<HelpTooltip
|
||||
title="System Administration & Audit"
|
||||
content="Manage platform security, active user directory, statutory invitations, communications gateways, and comprehensive audit trail ledger."
|
||||
placement="right"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-slate-400 mt-1">
|
||||
User access directory, statutory invitations, gateway broadcasts, and immutable system audit ledger.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 relative z-10 self-start md:self-center flex-wrap">
|
||||
{activeTab === 'users' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span
|
||||
className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
|
||||
title="User directory synchronization active in browser"
|
||||
@@ -497,11 +507,11 @@ export const SettingsPage: React.FC = () => {
|
||||
<button
|
||||
onClick={() => syncMutation.mutate()}
|
||||
disabled={syncMutation.isPending}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-slate-800 hover:bg-slate-700 border border-slate-700/80 rounded-xl shadow-md transition cursor-pointer disabled:opacity-50"
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-slate-900/90 hover:bg-slate-800 border border-slate-700/80 rounded-xl shadow-md transition cursor-pointer disabled:opacity-50"
|
||||
title="Force refresh user sync and update browser cache"
|
||||
>
|
||||
<RefreshCw className={`w-3.5 h-3.5 ${syncMutation.isPending ? 'animate-spin' : ''}`} />
|
||||
{syncMutation.isPending ? 'Syncing...' : 'Sync User Directory'}
|
||||
<span>{syncMutation.isPending ? 'Syncing...' : 'Sync User Directory'}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -509,10 +519,10 @@ export const SettingsPage: React.FC = () => {
|
||||
{activeTab === 'invites' && (
|
||||
<button
|
||||
onClick={() => setIsSendInviteModalOpen(true)}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-500/20 transition cursor-pointer"
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-600/25 transition cursor-pointer"
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
Dispatch Invitation
|
||||
<span>Dispatch Invitation</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -522,10 +532,10 @@ export const SettingsPage: React.FC = () => {
|
||||
setInviteOrgId(effectiveNotificationOrgId);
|
||||
setIsSendInviteModalOpen(true);
|
||||
}}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-500/20 transition cursor-pointer"
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-600/25 transition cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Notification
|
||||
<span>Add Notification</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user