GnosysLabs/Synapsis
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed modal

Browse Source
This commit is contained in:
Christopher
2026-01-28 13:17:36 -08:00
parent aebc3a81fc
commit 9cd23081ed
1 changed files with 211 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/IdentityUnlockPrompt.tsx
+113 -90
View File
@@ -59,37 +59,7 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
}; };
return ( return (
<div <>
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'rgba(0, 0, 0, 0.8)',
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'center',
zIndex: 99999,
padding: 0
}}
onClick={handleCancel}
>
<div
className="identity-unlock-sheet"
style={{
width: '100%',
maxWidth: '100%',
background: 'var(--background-secondary)',
borderTopLeftRadius: '20px',
borderTopRightRadius: '20px',
padding: '24px',
paddingBottom: 'calc(24px + env(safe-area-inset-bottom))',
boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.5)',
animation: 'slideUp 0.3s ease-out'
}}
onClick={(e) => e.stopPropagation()}
>
<style jsx>{` <style jsx>{`
@keyframes slideUp { @keyframes slideUp {
from { from {
@@ -99,38 +69,94 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
transform: translateY(0); transform: translateY(0);
} }
} }
.identity-unlock-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 20px;
}
.identity-unlock-sheet {
width: 100%;
max-width: 400px;
background: var(--background-secondary);
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.drag-indicator {
display: none;
}
@media (max-width: 768px) {
.identity-unlock-container {
align-items: flex-end;
padding: 0;
}
.identity-unlock-sheet {
max-width: 100%;
border-radius: 0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 24px;
padding-bottom: calc(24px + env(safe-area-inset-bottom));
animation: slideUp 0.3s ease-out;
}
.drag-indicator {
display: block;
width: 40px;
height: 4px;
background: var(--border);
border-radius: 2px;
margin: 0 auto 20px;
}
}
`}</style> `}</style>
{/* Drag indicator */} <div
<div style={{ className="identity-unlock-container"
width: '40px', onClick={handleCancel}
height: '4px', >
background: 'var(--border)', <div
borderRadius: '2px', className="identity-unlock-sheet"
margin: '0 auto 20px' onClick={(e) => e.stopPropagation()}
}} /> >
{/* Drag indicator - only visible on mobile */}
<div className="drag-indicator" />
{/* Header */} {/* Header */}
<div style={{ textAlign: 'center', marginBottom: '20px' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
<div style={{ <div style={{
width: '56px', width: '48px',
height: '56px', height: '48px',
borderRadius: '50%', borderRadius: '50%',
background: 'rgba(255, 255, 255, 0.1)', background: 'rgba(255, 255, 255, 0.1)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center'
margin: '0 auto 16px'
}}> }}>
<Lock size={28} style={{ color: 'var(--accent)' }} /> <Lock size={24} style={{ color: 'var(--accent)' }} />
</div> </div>
<h2 style={{ fontSize: '22px', fontWeight: 600, margin: '0 0 8px 0' }}> <h2 style={{ fontSize: '20px', fontWeight: 600, margin: 0 }}>
Identity Required Identity Required
</h2> </h2>
<p style={{ color: 'var(--foreground-secondary)', margin: 0, lineHeight: 1.5, fontSize: '15px' }}> </div>
{/* Description */}
<p style={{ color: 'var(--foreground-secondary)', marginBottom: '20px', lineHeight: 1.5, fontSize: '15px' }}>
Enter your password to unlock your identity Enter your password to unlock your identity
</p> </p>
</div>
{/* Form */} {/* Form */}
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
@@ -160,12 +186,12 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
autoFocus autoFocus
style={{ style={{
width: '100%', width: '100%',
padding: '14px 16px', padding: '12px 14px',
borderRadius: '12px', borderRadius: '8px',
border: error ? '2px solid var(--error)' : '2px solid var(--border)', border: error ? '2px solid var(--error)' : '1px solid var(--border)',
background: 'var(--background)', background: 'var(--background)',
color: 'var(--foreground)', color: 'var(--foreground)',
fontSize: '16px', fontSize: '15px',
outline: 'none', outline: 'none',
transition: 'border-color 0.2s' transition: 'border-color 0.2s'
}} }}
@@ -189,7 +215,7 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
alignItems: 'center', alignItems: 'center',
gap: '8px', gap: '8px',
padding: '12px 14px', padding: '12px 14px',
borderRadius: '10px', borderRadius: '8px',
background: 'rgba(239, 68, 68, 0.1)', background: 'rgba(239, 68, 68, 0.1)',
color: 'var(--error)', color: 'var(--error)',
fontSize: '14px', fontSize: '14px',
@@ -201,52 +227,48 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
)} )}
{/* Buttons */} {/* Buttons */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '20px' }}> <div style={{ display: 'flex', gap: '12px', marginTop: '20px' }}>
<button
type="submit"
disabled={isUnlocking || !password.trim()}
className="btn btn-primary"
style={{
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '8px',
minHeight: '52px',
padding: '14px 20px',
fontSize: '16px',
fontWeight: 600,
borderRadius: '12px'
}}
>
{isUnlocking ? (
<>
<Loader2 size={20} className="animate-spin" />
<span>Unlocking...</span>
</>
) : (
<>
<Lock size={18} />
<span>Unlock Identity</span>
</>
)}
</button>
<button <button
type="button" type="button"
onClick={handleCancel} onClick={handleCancel}
disabled={isUnlocking} disabled={isUnlocking}
className="btn btn-ghost" className="btn btn-ghost"
style={{ style={{
width: '100%', flex: 1,
minHeight: '52px', minHeight: '44px',
padding: '14px 20px', padding: '10px 16px',
fontSize: '16px', fontSize: '15px'
fontWeight: 500,
borderRadius: '12px'
}} }}
> >
Cancel Cancel
</button> </button>
<button
type="submit"
disabled={isUnlocking || !password.trim()}
className="btn btn-primary"
style={{
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '8px',
minHeight: '44px',
padding: '10px 16px',
fontSize: '15px'
}}
>
{isUnlocking ? (
<>
<Loader2 size={18} className="animate-spin" />
<span>Unlocking...</span>
</>
) : (
<>
<Lock size={16} />
<span>Unlock</span>
</>
)}
</button>
</div> </div>
</form> </form>
@@ -254,7 +276,7 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
<p style={{ <p style={{
fontSize: '13px', fontSize: '13px',
color: 'var(--foreground-tertiary)', color: 'var(--foreground-tertiary)',
marginTop: '20px', marginTop: '16px',
marginBottom: 0, marginBottom: 0,
lineHeight: 1.5, lineHeight: 1.5,
textAlign: 'center' textAlign: 'center'
@@ -263,5 +285,6 @@ export function IdentityUnlockPrompt({ onUnlock, onCancel }: IdentityUnlockPromp
</p> </p>
</div> </div>
</div> </div>
</>
); );
} }