ux: clean security warnings modal and overlays

This commit is contained in:
LC mac
2026-01-31 01:58:32 +08:00
parent 2a7ac1cce0
commit a607cd74cf
2 changed files with 81 additions and 90 deletions

View File

@@ -612,62 +612,68 @@ function App() {
{/* Security Modal */}
{showSecurityModal && (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
<div className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl">
<div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
onClick={() => setShowSecurityModal(false)}
>
<div
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<h3 className="text-lg font-semibold text-white mb-4">Security Limitations</h3>
<div className="text-sm text-slate-300 space-y-2">
<SecurityWarnings />
</div>
<button
className="mt-4 w-full py-2 bg-slate-700 hover:bg-slate-600 rounded-lg"
onClick={() => setShowSecurityModal(false)}
>
Close
</button>
</div>
</div>
)}
{/* Storage Modal */}
{showStorageModal && (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
<div className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl">
<div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
onClick={() => setShowStorageModal(false)}
>
<div
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<h3 className="text-lg font-semibold text-white mb-4">Storage Details</h3>
<div className="text-sm text-slate-300 space-y-2">
<StorageDetails localItems={localItems} sessionItems={sessionItems} />
</div>
<button
className="mt-4 w-full py-2 bg-slate-700 hover:bg-slate-600 rounded-lg"
onClick={() => setShowStorageModal(false)}
>
Close
</button>
</div>
</div>
)}
{/* Clipboard Modal */}
{showClipboardModal && (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
<div className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl">
<div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
onClick={() => setShowClipboardModal(false)}
>
<div
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<h3 className="text-lg font-semibold text-white mb-4">Clipboard Activity</h3>
<div className="text-sm text-slate-300 space-y-2">
<ClipboardDetails events={clipboardEvents} onClear={clearClipboard} />
</div>
<button
className="mt-4 w-full py-2 bg-slate-700 hover:bg-slate-600 rounded-lg"
onClick={() => setShowClipboardModal(false)}
>
Close
</button>
</div>
</div>
)}
{/* Lock Confirmation Modal */}
{showLockConfirm && (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
<div className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl">
<div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
onClick={() => setShowLockConfirm(false)}
>
<div
className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
<Lock className="w-5 h-5 text-amber-500" />
Lock Sensitive Data?