letsbe
/
MOPC-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix profile photo section: replace hover overlay with button
Build and Push Docker Image / build (push) Has been cancelled Details 

Remove showEditOverlay that stretched across the full width.
Show avatar and a "Change Photo" button side by side instead.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-01-30 20:08:59 +01:00
parent 402bdfd8c5
commit 7ff961f0c2
1 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/(settings)/settings/profile/page.tsx
View File

@ -155,24 +155,27 @@ export default function ProfileSettingsPage() {
Profile Photo Profile Photo
</CardTitle> </CardTitle>
<CardDescription> <CardDescription>
Click your avatar to upload a new profile picture Click the button below to upload a new profile picture
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex items-center gap-4">
<UserAvatar
user={{ name: user.name, email: user.email }}
avatarUrl={avatarUrl}
size="xl"
/>
<AvatarUpload <AvatarUpload
user={{ name: user.name, email: user.email, profileImageKey: user.profileImageKey }} user={{ name: user.name, email: user.email, profileImageKey: user.profileImageKey }}
currentAvatarUrl={avatarUrl} currentAvatarUrl={avatarUrl}
onUploadComplete={() => refetch()} onUploadComplete={() => refetch()}
> >
<div className="cursor-pointer"> <Button variant="outline" size="sm">
<UserAvatar <Camera className="mr-2 h-4 w-4" />
user={{ name: user.name, email: user.email }} Change Photo
avatarUrl={avatarUrl} </Button>
size="xl"
showEditOverlay
/>
</div>
</AvatarUpload> </AvatarUpload>
</div>
</CardContent> </CardContent>
</Card> </Card>