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

feat: enhance file upload UI for avatar and header images with improved styling and error handling

Browse Source
This commit is contained in:
Christopher
2026-01-22 09:53:13 -08:00
parent 6cd74e1cc2
commit 64fbca7fbb
1 changed files with 65 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[handle]/page.tsx
+13 -7
View File
@@ -491,7 +491,9 @@ export default function ProfilePage() {
</div> </div>
<div> <div>
<label style={{ fontSize: '12px', color: 'var(--foreground-tertiary)' }}>Avatar</label> <label style={{ fontSize: '12px', color: 'var(--foreground-tertiary)' }}>Avatar</label>
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}> <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<label className="btn btn-ghost btn-sm" style={{ cursor: 'pointer' }}>
{isSaving ? 'Uploading...' : 'Choose File'}
<input <input
type="file" type="file"
accept="image/*" accept="image/*"
@@ -518,10 +520,11 @@ export default function ProfilePage() {
} }
}} }}
disabled={isSaving} disabled={isSaving}
style={{ fontSize: '13px' }} style={{ display: 'none' }}
/> />
</label>
{profileForm.avatarUrl && ( {profileForm.avatarUrl && (
<div style={{ width: '32px', height: '32px', borderRadius: '50%', overflow: 'hidden' }}> <div style={{ width: '40px', height: '40px', borderRadius: '50%', overflow: 'hidden', border: '1px solid var(--border)' }}>
<img src={profileForm.avatarUrl} alt="Preview" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> <img src={profileForm.avatarUrl} alt="Preview" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
</div> </div>
)} )}
@@ -529,7 +532,9 @@ export default function ProfilePage() {
</div> </div>
<div> <div>
<label style={{ fontSize: '12px', color: 'var(--foreground-tertiary)' }}>Header</label> <label style={{ fontSize: '12px', color: 'var(--foreground-tertiary)' }}>Header</label>
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}> <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<label className="btn btn-ghost btn-sm" style={{ cursor: 'pointer' }}>
{isSaving ? 'Uploading...' : 'Choose File'}
<input <input
type="file" type="file"
accept="image/*" accept="image/*"
@@ -556,10 +561,11 @@ export default function ProfilePage() {
} }
}} }}
disabled={isSaving} disabled={isSaving}
style={{ fontSize: '13px' }} style={{ display: 'none' }}
/> />
</label>
{profileForm.headerUrl && ( {profileForm.headerUrl && (
<div style={{ width: '48px', height: '32px', borderRadius: '4px', overflow: 'hidden' }}> <div style={{ width: '80px', height: '40px', borderRadius: '4px', overflow: 'hidden', border: '1px solid var(--border)' }}>
<img src={profileForm.headerUrl} alt="Preview" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> <img src={profileForm.headerUrl} alt="Preview" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
</div> </div>
)} )}
@@ -568,7 +574,7 @@ export default function ProfilePage() {
{saveError && ( {saveError && (
<div style={{ color: 'var(--error)', fontSize: '13px' }}>{saveError}</div> <div style={{ color: 'var(--error)', fontSize: '13px' }}>{saveError}</div>
)} )}
<div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}> <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end', marginTop: '8px' }}>
<button className="btn btn-ghost" onClick={() => setIsEditing(false)} disabled={isSaving}> <button className="btn btn-ghost" onClick={() => setIsEditing(false)} disabled={isSaving}>
Cancel Cancel
</button> </button>