From e4e1d910680e7e6b0e092aabd07567a14d4409bb Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 19 Mar 2024 08:42:50 +0000
Subject: [PATCH] fix: fix indicator size (#14125)

* fix: fix indicator size

* chore: import

---------

Co-authored-by: Udit Takkar <udit222001@gmail.com>
---
 apps/web/pages/settings/my-account/profile.tsx |  2 +-
 packages/ui/components/avatar/UserAvatar.tsx   | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 604a34a46c..8303e6a49d 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -43,8 +43,8 @@ import {
   SkeletonContainer,
   SkeletonText,
   TextField,
+  UserAvatar,
 } from "@calcom/ui";
-import { UserAvatar } from "@calcom/ui";
 import { AlertTriangle, Trash2, Plus } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
diff --git a/packages/ui/components/avatar/UserAvatar.tsx b/packages/ui/components/avatar/UserAvatar.tsx
index 87bea5e0c6..371791f9e6 100644
--- a/packages/ui/components/avatar/UserAvatar.tsx
+++ b/packages/ui/components/avatar/UserAvatar.tsx
@@ -23,14 +23,26 @@ type UserAvatarProps = Omit<React.ComponentProps<typeof Avatar>, "alt" | "imageS
   alt?: string | null;
 };
 
+const indicatorBySize = {
+  xxs: "hidden", // 14px
+  xs: "hidden", // 16px
+  xsm: "hidden", // 20px
+  sm: "h-3 w-3", // 24px
+  md: "h-4 w-4", // 32px
+  mdLg: "h-5 w-5", //40px
+  lg: "h-6 w-6", // 64px
+  xl: "h-10 w-10", // 96px
+} as const;
+
 function OrganizationIndicator({
   size,
   organization,
   user,
 }: Pick<UserAvatarProps, "size" | "user"> & { organization: Organization }) {
   const organizationUrl = organization.logoUrl ?? getOrgAvatarUrl(organization);
+  const indicatorSize = size && indicatorBySize[size];
   return (
-    <div className={classNames("absolute bottom-0 right-0 z-10", size === "lg" ? "h-6 w-6" : "h-10 w-10")}>
+    <div className={classNames("absolute bottom-0 right-0 z-10", indicatorSize)}>
       <img
         data-testid="organization-logo"
         src={organizationUrl}