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>
<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
type="file"
accept="image/*"
@@ -518,10 +520,11 @@ export default function ProfilePage() {
}
}}
disabled={isSaving}
style={{ fontSize: '13px' }}
style={{ display: 'none' }}
/>
</label>
{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' }} />
</div>
)}
@@ -529,7 +532,9 @@ export default function ProfilePage() {
</div>
<div>
<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
type="file"
accept="image/*"
@@ -556,10 +561,11 @@ export default function ProfilePage() {
}
}}
disabled={isSaving}
style={{ fontSize: '13px' }}
style={{ display: 'none' }}
/>
</label>
{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' }} />
</div>
)}
@@ -568,7 +574,7 @@ export default function ProfilePage() {
{saveError && (
<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}>
Cancel
</button>