Michelle
4028e913c4
Build & Push Docker Image / build (push) Successful in 4m21s
- Changed `flex-shrink-0` to `shrink-0` in multiple components for better consistency. - Updated button and checkbox classes to use `rounded-sm` for a more uniform appearance. - Adjusted backdrop blur classes for modals to `backdrop-blur-xs` for a subtler effect. - Removed unused Tailwind CSS configuration file.
37 lines
1.5 KiB
React
37 lines
1.5 KiB
React
import { Video } from 'lucide-react';
|
|
import { useBranding } from '../contexts/BrandingContext';
|
|
|
|
const sizes = {
|
|
sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-32', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
|
|
md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-40', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
|
|
lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-48', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
|
|
};
|
|
|
|
export default function BrandLogo({ size = 'md', className = '' }) {
|
|
const { appName, hasLogo, logoUrl, hideAppName } = useBranding();
|
|
const s = sizes[size] || sizes.md;
|
|
|
|
if (hasLogo && logoUrl) {
|
|
// When the app name is hidden, let the logo expand to its natural aspect
|
|
// ratio (w-auto) rather than being clamped into a tiny square.
|
|
const imgClass = hideAppName
|
|
? `${s.h} w-auto ${s.maxW} ${s.rounded} object-contain`
|
|
: `${s.box} ${s.rounded} object-contain`;
|
|
return (
|
|
<div className={`flex items-center ${hideAppName ? 'justify-center' : 'gap-2.5'} ${className}`}>
|
|
<img src={logoUrl} alt={appName} className={imgClass} />
|
|
{!hideAppName && <span className={`${s.text} font-bold gradient-text`}>{appName}</span>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`flex items-center gap-2.5 ${className}`}>
|
|
<div className={`${s.box} gradient-bg ${s.rounded} flex items-center justify-center`}>
|
|
<Video size={s.icon} className="text-white" />
|
|
</div>
|
|
<span className={`${s.text} font-bold gradient-text`}>{appName}</span>
|
|
</div>
|
|
);
|
|
}
|