From 427a56f26e6a78165baf2715f525be1b5211aaea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ricardo=20L=C3=BCders?= <rluders@redhat.com>
Date: Mon, 12 Jun 2023 13:50:43 +0200
Subject: [PATCH] feat: adds avatar.img.base to avatar theme

---
 src/components/Avatar/Avatar.tsx | 4 +++-
 src/components/Avatar/theme.ts   | 9 +++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 59f25ab4b..ded343ce8 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -28,6 +28,7 @@ export interface FlowbiteAvatarRootTheme {
 }
 
 export interface FlowbiteAvatarImageTheme extends FlowbiteBoolean {
+  base: string;
   placeholder: string;
 }
 
@@ -92,6 +93,7 @@ const AvatarComponent: FC<AvatarProps> = ({
   const theme = mergeDeep(useTheme().theme.avatar, customTheme);
 
   const imgClassName = twMerge(
+    theme.root.img.base,
     bordered && theme.root.bordered,
     bordered && theme.root.color[color],
     rounded && theme.root.rounded,
@@ -118,11 +120,11 @@ const AvatarComponent: FC<AvatarProps> = ({
             className={twMerge(
               theme.root.img.off,
               theme.root.initials.base,
-              rounded && theme.root.rounded,
               stacked && theme.root.stacked,
               bordered && theme.root.bordered,
               bordered && theme.root.color[color],
               theme.root.size[size],
+              rounded && theme.root.rounded,
             )}
             data-testid="flowbite-avatar-initials-placeholder"
           >
diff --git a/src/components/Avatar/theme.ts b/src/components/Avatar/theme.ts
index 2cd831405..f0cee48f3 100644
--- a/src/components/Avatar/theme.ts
+++ b/src/components/Avatar/theme.ts
@@ -2,9 +2,9 @@ import type { FlowbiteAvatarTheme } from "./Avatar";
 
 export const avatarTheme: FlowbiteAvatarTheme = {
   root: {
-    base: 'flex justify-center items-center space-x-4',
+    base: 'flex justify-center items-center space-x-4 rounded',
     bordered: 'p-1 ring-2',
-    rounded: '!rounded-full',
+    rounded: 'rounded-full',
     color: {
       dark: 'ring-gray-800 dark:ring-gray-800',
       failure: 'ring-red-500 dark:ring-red-700',
@@ -17,8 +17,9 @@ export const avatarTheme: FlowbiteAvatarTheme = {
       pink: 'ring-pink-500 dark:ring-pink-500',
     },
     img: {
-      off: 'rounded relative overflow-hidden bg-gray-100 dark:bg-gray-600',
-      on: 'rounded',
+      base: 'rounded',
+      off: 'relative overflow-hidden bg-gray-100 dark:bg-gray-600',
+      on: '',
       placeholder: 'absolute w-auto h-auto text-gray-400 -bottom-1',
     },
     size: {