Profile: Fix styles for status background (#6636)

src/components/common/Avatar.tsx

@@ -88,6 +88,7 @@ type OwnProps = {
   loopIndefinitely?: boolean;
   noPersonalPhoto?: boolean;
   asMessageBubble?: boolean;
+  storyCircleStyle?: string;
   observeIntersection?: ObserveFn;
   onClick?: (e: ReactMouseEvent<HTMLDivElement, MouseEvent>, hasMedia: boolean) => void;
   onContextMenu?: (e: React.MouseEvent) => void;
@@ -118,6 +119,7 @@ const Avatar = ({
   loopIndefinitely,
   noPersonalPhoto,
   asMessageBubble,
+  storyCircleStyle,
   onClick,
   onContextMenu,
   onMouseMove,
@@ -334,6 +336,7 @@ const Avatar = ({
           size={pxSize}
           withExtraGap={withStoryGap}
           colors={storyColors}
+          style={storyCircleStyle}
         />
       )}
     </div>

src/components/common/AvatarStoryCircle.tsx

@@ -8,6 +8,7 @@ import type { ThemeKey } from '../../types';
 
 import { selectPeerStories, selectTheme } from '../../global/selectors';
 import buildClassName from '../../util/buildClassName';
+import buildStyle from '../../util/buildStyle';
 import { REM } from './helpers/mediaDimensions';
 
 import useDevicePixelRatio from '../../hooks/window/useDevicePixelRatio';
@@ -18,6 +19,7 @@ interface OwnProps {
   size: number;
   withExtraGap?: boolean;
   colors?: string[];
+  style?: string;
 }
 
 interface StateProps {
@@ -52,6 +54,7 @@ function AvatarStoryCircle({
   withExtraGap,
   appTheme,
   colors,
+  style,
 }: OwnProps & StateProps) {
   const ref = useRef<HTMLCanvasElement>();
 
@@ -113,7 +116,7 @@ function AvatarStoryCircle({
     <canvas
       ref={ref}
       className={buildClassName('story-circle', className)}
-      style={`max-width: ${adaptedSize}px; max-height: ${adaptedSize}px;`}
+      style={buildStyle(`max-width: ${adaptedSize}px`, `max-height: ${adaptedSize}px`, style)}
     />
   );
 }

src/components/common/profile/ProfileInfo.module.scss

@@ -405,6 +405,10 @@
   grid-area: 1 / -1;
 
   @include mixins.with-vt-type('profileAvatar');
+
+  :global(.story-circle) {
+    @include mixins.with-vt-type('profileAvatar');
+  }
 }
 
 .activeProfilePhoto {
@@ -449,6 +453,14 @@
   &::view-transition-group(.photoDashes) {
     z-index: 1;
   }
+
+  &::view-transition-group(.avatarStoryCircle) {
+    z-index: -1;
+  }
+
+  &::view-transition-group(.profileInfo) {
+    z-index: -2;
+  }
 }
 
 @include mixins.on-active-vt('profileExpand') {

src/components/common/profile/ProfileInfo.tsx

@@ -585,6 +585,7 @@ const ProfileInfo = ({
           size="jumbo"
           peer={peer}
           style={createVtnStyle('avatar', true)}
+          storyCircleStyle={createVtnStyle('avatarStoryCircle', true)}
           onClick={hasAvatar ? handleMinimizedAvatarClick : undefined}
         />
       )}

src/global/selectors/peers.ts

@@ -8,6 +8,7 @@ import { getHasAdminRight, isChatAdmin, isChatChannel, isDeletedUser } from '../
 import { selectChat, selectChatFullInfo, selectIsMonoforumAdmin } from './chats';
 import { type ProfileCollectionKey } from './payments';
 import { selectTabState } from './tabs';
+import { selectPeerProfileColor } from './ui';
 import { selectBot, selectUser, selectUserFullInfo } from './users';
 
 export function selectPeer<T extends GlobalState>(global: T, peerId: string): ApiPeer | undefined {
@@ -72,10 +73,12 @@ export function selectPeerPaidMessagesStars<T extends GlobalState>(
 
 export function selectPeerHasProfileBackground<T extends GlobalState>(global: T, peerId: string) {
   const peer = selectPeer(global, peerId);
-  const profileColor = peer?.profileColor;
-  if (profileColor?.type === 'collectible') return true;
-  if (profileColor?.type === 'regular') return profileColor.color !== undefined;
-  return peer?.emojiStatus?.type === 'collectible';
+  if (!peer) return false;
+  const profileColor = selectPeerProfileColor(global, peer);
+
+  if (peer.profileColor?.type === 'collectible') return true;
+  if (peer.emojiStatus?.type === 'collectible') return true;
+  return Boolean(profileColor);
 }
 
 export function selectCanUpdateMainTab<T extends GlobalState>(global: T, peerId: string) {