From d4cdad60954a6164fe8a37c1ac25d96a191b98bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicole=20Miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Wed, 2 Apr 2025 12:47:31 +0200
Subject: [PATCH] pl-fe: cat ears improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/ui/avatar.tsx | 22 ++++++++++-----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/pl-fe/src/components/ui/avatar.tsx b/packages/pl-fe/src/components/ui/avatar.tsx
index a0febef42..e06acc3b5 100644
--- a/packages/pl-fe/src/components/ui/avatar.tsx
+++ b/packages/pl-fe/src/components/ui/avatar.tsx
@@ -31,7 +31,7 @@ const Avatar = (props: IAvatar) => {
   const { alt, src, size = AVATAR_SIZE, className, isCat } = props;
 
   const [color, setColor] = useState<string | undefined>(undefined);
-  const [isAvatarMissing, setIsAvatarMissing] = useState<boolean>(false);
+  const [isAvatarMissing, setIsAvatarMissing] = useState(false);
 
   const handleLoadFailure = () => setIsAvatarMissing(true);
 
@@ -59,24 +59,22 @@ const Avatar = (props: IAvatar) => {
   if (isAvatarMissing) {
     return (
       <div
-        style={{
-          width: size,
-          height: size,
-          color,
-        }}
-        className={clsx('flex items-center justify-center rounded-lg bg-gray-200 leading-[0] dark:bg-gray-900', isCat && 'avatar__cat', className)}
+        style={style}
+        className={clsx('relative rounded-lg bg-gray-200 leading-[0] dark:bg-gray-900', isCat && 'avatar__cat', className)}
       >
-        <Icon
-          src={require('@tabler/icons/outline/photo-off.svg')}
-          className='size-4 text-gray-500 dark:text-gray-700'
-        />
+        <div className='absolute inset-0 z-[1] flex items-center justify-center rounded-lg bg-gray-200 dark:bg-gray-900'>
+          <Icon
+            src={require('@tabler/icons/outline/photo-off.svg')}
+            className='size-4 text-gray-500 dark:text-gray-700'
+          />
+        </div>
       </div>
     );
   }
 
   return (
     <StillImage
-      className={clsx('rounded-lg leading-[0]', isCat && 'avatar__cat', className)}
+      className={clsx('rounded-lg leading-[0]', isCat && 'avatar__cat bg-gray-200 dark:bg-gray-900', className)}
       innerClassName='rounded-lg'
       style={style}
       src={src}