bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Avatar issue

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-08-31 15:16:40 +02:00
parent a8b73e22ea
commit c494078441
2 changed files with 44 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/layout/Header/Header.tsx
View File

@@ -401,7 +401,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
<Avatar
src={user.avatar}
alt={user.name}
fallback={user.name}
name={user.name}
size="xs"
className={clsx(
"flex-shrink-0 transition-all duration-200",
@@ -409,20 +409,23 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
isUserMenuOpen && "ring-2 ring-[var(--color-primary)]/30"
)}
/>
<span className="hidden sm:block text-sm font-medium text-[var(--text-primary)] truncate max-w-[120px]">
{user.name}
</span>
</Button>
{isUserMenuOpen && (
<div className="absolute right-0 top-full mt-2 w-56 bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-lg py-2 z-[var(--z-dropdown)]">
{/* User info */}
<div className="px-4 py-2 border-b border-[var(--border-primary)]">
<div className="text-sm font-medium text-[var(--text-primary)] truncate">
{user.name}
</div>
<div className="text-xs text-[var(--text-tertiary)] truncate">
{user.email}
<div className="px-4 py-3 border-b border-[var(--border-primary)] flex items-center gap-3">
<Avatar
src={user.avatar || undefined}
alt={user.name}
name={user.name}
size="sm"
className="flex-shrink-0"
/>
<div className="min-w-0 flex-1">
<div className="text-xs text-[var(--text-tertiary)] truncate">
{user.email}
</div>
</div>
</div>

50
frontend/src/components/ui/Avatar/Avatar.tsx
View File

@@ -104,10 +104,10 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
};
const statusClasses = {
online: 'bg-status-online',
offline: 'bg-status-offline',
away: 'bg-status-away',
busy: 'bg-status-busy',
online: 'bg-[var(--color-success)]',
offline: 'bg-[var(--text-tertiary)]',
away: 'bg-[var(--color-warning)]',
busy: 'bg-[var(--color-error)]',
};
const statusSizeClasses = {
@@ -135,7 +135,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
const baseClasses = [
'relative inline-flex items-center justify-center',
'bg-bg-tertiary text-text-primary font-medium',
'bg-[var(--bg-tertiary)] text-[var(--text-primary)] font-medium',
'overflow-hidden flex-shrink-0',
];
@@ -164,11 +164,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
if (loading) {
return (
<div className="animate-pulse bg-bg-quaternary w-full h-full" />
<div className="animate-pulse bg-[var(--bg-quaternary)] w-full h-full" />
);
}
if (src && !imageError) {
if (src && typeof src === 'string' && src.trim() !== '' && !imageError) {
return (
<img
src={src}
@@ -203,7 +203,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
if (icon) {
return (
<span className="text-text-tertiary">
<span className="text-[var(--text-tertiary)]">
{icon}
</span>
);
@@ -213,15 +213,27 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
return fallback;
}
// Default user icon
// Default bakery-themed chef icon
return (
<svg
className="w-3/5 h-3/5 text-text-tertiary"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</svg>
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white">
<svg
className="w-3/5 h-3/5"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
{/* Chef hat */}
<path d="M18.5 7c-1.4 0-2.5-1.1-2.5-2.5S17.1 2 18.5 2s2.5 1.1 2.5 2.5S19.9 7 18.5 7z"/>
<path d="M5.5 7C4.1 7 3 5.9 3 4.5S4.1 2 5.5 2 8 3.1 8 4.5 6.9 7 5.5 7z"/>
<path d="M12 6c-1.4 0-2.5-1.1-2.5-2.5S10.6 1 12 1s2.5 1.1 2.5 2.5S13.4 6 12 6z"/>
<path d="M19 8H5c-1.1 0-2 .9-2 2v1c0 .6.4 1 1 1h16c.6 0 1-.4 1-1v-1c0-1.1-.9-2-2-2z"/>
<path d="M18 12H6v8c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-8z"/>
{/* Chef details */}
<circle cx="9" cy="16" r="0.5" fill="currentColor" opacity="0.7"/>
<circle cx="15" cy="16" r="0.5" fill="currentColor" opacity="0.7"/>
<path d="M10 18h4" stroke="currentColor" strokeWidth="0.5" strokeLinecap="round" opacity="0.7"/>
</svg>
</div>
);
};
@@ -247,7 +259,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
{status && (
<span
className={clsx(
'absolute rounded-full ring-2 ring-bg-primary',
'absolute rounded-full ring-2 ring-[var(--bg-primary)]',
statusClasses[status],
statusSizeClasses[size],
statusPositionClasses[statusPosition]
@@ -282,7 +294,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
return (
<div className="flex items-center gap-2">
{avatarElement}
<span className="text-sm text-text-secondary">
<span className="text-sm text-[var(--text-secondary)]">
{statusTextMap[status]}
</span>
</div>
@@ -341,7 +353,7 @@ const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(({
size={size}
shape={shape}
onClick={onMoreClick}
className="bg-bg-quaternary text-text-secondary cursor-pointer hover:bg-bg-tertiary transition-colors duration-200"
className="bg-[var(--bg-quaternary)] text-[var(--text-secondary)] cursor-pointer hover:bg-[var(--bg-tertiary)] transition-colors duration-200"
>
<span className="font-medium">
{moreText || `+${hiddenCount}`}