Merge branch 'main' into 12544-cal-2758-left-align-profile-view

apps/web/pages/[user].tsx

@@ -96,12 +96,13 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
         <main
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
-            isEmbed ? "border-booker border-booker-width  bg-default rounded-md border" : "",
+            isEmbed ? "border-booker border-booker-width bg-default rounded-md border" : "",
             "max-w-3xl px-4 py-24"
           )}>
-          <div className="mb-8 text-center">
+          <div className="p-4">
             <OrganizationMemberAvatar
               size="xl"
+              reflection
               user={{
                 organizationId: profile.organization?.id,
                 name: profile.name,
@@ -117,7 +118,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
                   : null
               }
             />
-            <h1 className="font-cal text-emphasis my-1 text-3xl" data-testid="name-title">
+            <h1 className="font-cal text-emphasis my-2 text-3xl" data-testid="name-title">
               {profile.name}
               {user.verified && (
                 <Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />

packages/features/ee/organizations/components/OrganizationMemberAvatar.tsx

@@ -4,6 +4,7 @@ import { getOrgAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { UserAvatar } from "@calcom/web/components/ui/avatar/UserAvatar";
 
 type OrganizationMemberAvatarProps = React.ComponentProps<typeof UserAvatar> & {
+  reflection?: boolean;
   organization: {
     id: number;
     slug: string | null;
@@ -19,6 +20,7 @@ const OrganizationMemberAvatar = ({
   user,
   organization,
   previewSrc,
+  reflection,
   ...rest
 }: OrganizationMemberAvatarProps) => {
   return (
@@ -26,6 +28,7 @@ const OrganizationMemberAvatar = ({
       data-testid="organization-avatar"
       size={size}
       user={user}
+      reflection={reflection}
       previewSrc={previewSrc}
       indicator={
         organization ? (

packages/ui/components/avatar/Avatar.tsx

@@ -21,6 +21,7 @@ export type AvatarProps = {
   asChild?: boolean; // Added to ignore the outer span on the fallback component - messes up styling
   indicator?: React.ReactNode;
   "data-testid"?: string;
+  reflection: boolean;
 };
 
 const sizesPropsBySize = {
@@ -31,38 +32,51 @@ const sizesPropsBySize = {
   md: "w-8 h-8 min-w-8 min-h-8", // 32px
   mdLg: "w-10 h-10 min-w-10 min-h-10", //40px
   lg: "w-16 h-16 min-w-16 min-h-16", // 64px
-  xl: "w-24 h-24 min-w-24 min-h-24", // 96px
+  xl: "w-24 h-24 min-w-24 min-h-24 ring-4 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10", // 96px
 } as const;
 
 export function Avatar(props: AvatarProps) {
-  const { imageSrc, size = "md", alt, title, href, indicator } = props;
+  const { imageSrc, size = "md", alt, title, href, indicator, reflection } = props;
   const rootClass = classNames("aspect-square rounded-full", sizesPropsBySize[size]);
   let avatar = (
-    <AvatarPrimitive.Root
-      data-testid={props?.["data-testid"]}
-      className={classNames(
-        "bg-emphasis item-center relative inline-flex aspect-square justify-center rounded-full align-top",
-        indicator ? "overflow-visible" : "overflow-hidden",
-        props.className,
-        sizesPropsBySize[size]
-      )}>
-      <>
-        <AvatarPrimitive.Image
+    <>
+      {/* {reflection && (
+        <img
+          className="min-w-5xl absolute left-0 hidden w-[150%] -translate-y-3/4 rounded-full opacity-10 blur-2xl dark:block"
           src={imageSrc ?? undefined}
-          alt={alt}
-          className={classNames("aspect-square rounded-full", sizesPropsBySize[size])}
+          alt="Shadow of Avatar"
         />
-        <AvatarPrimitive.Fallback
-          delayMs={600}
-          asChild={props.asChild}
-          className="flex h-full items-center justify-center">
-          <>
-            {props.fallback ? props.fallback : <img src={AVATAR_FALLBACK} alt={alt} className={rootClass} />}
-          </>
-        </AvatarPrimitive.Fallback>
-        {indicator}
-      </>
-    </AvatarPrimitive.Root>
+      )} */}
+      <AvatarPrimitive.Root
+        data-testid={props?.["data-testid"]}
+        className={classNames(
+          "bg-emphasis item-center relative inline-flex aspect-square justify-center rounded-full align-top",
+          indicator ? "overflow-visible" : "overflow-hidden",
+          props.className,
+          sizesPropsBySize[size]
+        )}>
+        <>
+          <AvatarPrimitive.Image
+            src={imageSrc ?? undefined}
+            alt={alt}
+            className={classNames("aspect-square rounded-full", sizesPropsBySize[size])}
+          />
+          <AvatarPrimitive.Fallback
+            delayMs={600}
+            asChild={props.asChild}
+            className="flex h-full items-center justify-center">
+            <>
+              {props.fallback ? (
+                props.fallback
+              ) : (
+                <img src={AVATAR_FALLBACK} alt={alt} className={rootClass} />
+              )}
+            </>
+          </AvatarPrimitive.Fallback>
+          {indicator}
+        </>
+      </AvatarPrimitive.Root>
+    </>
   );
 
   if (href) {