add follow function and make small style changes

This commit is contained in:
luisa.bellitto 2025-06-29 15:15:48 +02:00 committed by Rudi Regentonne
parent 79e1f4ebe0
commit 9a9724d024
8 changed files with 57 additions and 19 deletions

View file

@ -87,11 +87,9 @@ export default function AvatarDialog({
<Avatar
className="profile-avatar"
alt="Username"
// current code does not work yet
// TODO: If no image is selected, return the image already in the database or undefined
src={imageUrl ? imageUrl : undefined}
>
U
{username && username[0].toUpperCase() || ""}
</Avatar>
</Button>
<Username username={username} />

View file

@ -19,8 +19,8 @@
}
.profile-avatar {
width: 40px;
height: 40px;
width: 50px;
height: 50px;
background-color: var(--Rotkehlchen-yellow-default);
}
@ -46,8 +46,8 @@
@media screen and (min-width: 768px) {
.profile-avatar {
width: 5rem;
height: 5rem;
width: 4.5rem;
height: 4.5rem;
background-color: var(--Rotkehlchen-yellow-default);
}

View file

@ -1,10 +1,21 @@
.profile-username {
color: var(--Rotkehlchen-orange-default);
max-width: 10rem;
width: 15rem;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
text-align: start;
}
.profile-popover {
padding: 1rem;
}
@media screen and (min-width: 768px) {
.profile-username {
width: 10rem;
}
.profile-popover {
padding: 2rem;
}
}