Profile: Fix displaying emoji pattern without color (#6448)

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

@@ -14,6 +14,8 @@
 
   color: var(--color-white);
 
+  background-color: var(--color-background);
+
   @include mixins.with-vt-type('profileAvatar');
 
   :global(.VerifiedIcon),
@@ -30,6 +32,10 @@
   padding-block: 1.5rem 0;
   color: var(--color-text);
 
+  .info {
+    background-image: linear-gradient(0deg, var(--color-background) 50%, transparent);
+  }
+
   .userRatingNegativeWrapper,
   .userRatingWrapper {
     color: var(--color-white);
@@ -43,6 +49,10 @@
     opacity: 1;
   }
 
+  :global(.title .custom-emoji) {
+    color: var(--color-primary);
+  }
+
   :global(.VerifiedIcon),
   :global(.StarIcon) {
     --color-fill: var(--color-primary);

src/components/common/profile/ProfileInfo.tsx

@@ -69,8 +69,6 @@ import RadialPatternBackground from './RadialPatternBackground.tsx';
 import './ProfileInfo.scss';
 import styles from './ProfileInfo.module.scss';
 
-const MAX_LEVEL_ICON = 90;
-
 type OwnProps = {
   isExpanded?: boolean;
   peerId: string;
@@ -101,12 +99,16 @@ type StateProps = {
   hasAvatar?: boolean;
 };
 
+const MAX_LEVEL_ICON = 90;
+
 const EMOJI_STATUS_SIZE = 24;
 const EMOJI_TOPIC_SIZE = 120;
 const LOAD_MORE_THRESHOLD = 3;
 const MAX_PHOTO_DASH_COUNT = 30;
 const STATUS_UPDATE_INTERVAL = 1000 * 60; // 1 min
+
 const PATTERN_Y_SHIFT = 8 * REM;
+const PATTERN_PLAIN_Y_SHIFT = 5.25 * REM;
 
 const ProfileInfo = ({
   isExpanded,
@@ -187,6 +189,8 @@ const ProfileInfo = ({
     };
   }, [profileColorOption, theme, collectibleEmojiStatus]);
 
+  const hasPatternBackground = profileColorSet?.bgColors || backgroundEmoji;
+
   const pinnedGifts = useMemo(() => {
     return savedGifts?.gifts.filter((gift) => {
       if (gift.gift.type === 'starGiftUnique') {
@@ -491,17 +495,17 @@ const ProfileInfo = ({
       )}
       dir={lang.isRtl ? 'rtl' : undefined}
     >
-      {profileColorSet?.bgColors && (
+      {hasPatternBackground && (
         <RadialPatternBackground
-          backgroundColors={profileColorSet.bgColors}
+          backgroundColors={profileColorSet?.bgColors}
           patternIcon={backgroundEmoji}
           patternSize={16}
           withLinearGradient={!collectibleEmojiStatus}
           className={styles.radialPatternBackground}
-          yPosition={PATTERN_Y_SHIFT}
+          yPosition={isPlain ? PATTERN_PLAIN_Y_SHIFT : PATTERN_Y_SHIFT}
         />
       )}
-      {pinnedGifts && (
+      {Boolean(pinnedGifts?.length) && (
         <ProfilePinnedGifts
           peerId={peerId}
           gifts={pinnedGifts}

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

@@ -1,5 +1,7 @@
 .root {
   --_y-shift: 50%;
+  --_bg-light: transparent;
+  --_bg-dark: transparent;
 
   overflow: hidden;
   border-radius: inherit;

src/components/common/profile/RadialPatternBackground.tsx

@@ -18,7 +18,7 @@ import useDevicePixelRatio from '../../../hooks/window/useDevicePixelRatio';
 import styles from './RadialPatternBackground.module.scss';
 
 type OwnProps = {
-  backgroundColors: string[];
+  backgroundColors?: string[];
   patternIcon?: ApiSticker;
   patternColor?: number;
   patternSize?: number;
@@ -41,7 +41,7 @@ const DARK_LUMA_THRESHOLD = 255 * 0.2;
 
 const DEFAULT_PATTERN_SIZE = 20;
 const DEFAULT_RINGS_COUNT = 3;
-const DEFAULT_OVAL_FACTOR = 1.61;
+const DEFAULT_OVAL_FACTOR = 1.4;
 
 const RadialPatternBackground = ({
   backgroundColors,
@@ -142,7 +142,7 @@ const RadialPatternBackground = ({
       ctx.drawImage(emojiImage, renderX - size / 2, renderY - size / 2, size, size);
     });
 
-    const patternColor = backgroundColors[1] ?? backgroundColors[0];
+    const patternColor = backgroundColors?.[1] ?? backgroundColors?.[0] ?? '#000000';
     const isDark = getColorLuma(hex2rgb(patternColor)) < DARK_LUMA_THRESHOLD;
     ctx.fillStyle = adjustHsv(patternColor, 0.5, isDark ? 0.28 : -0.28);
     ctx.globalCompositeOperation = 'source-in';
@@ -187,10 +187,14 @@ const RadialPatternBackground = ({
   return (
     <div
       ref={containerRef}
-      className={buildClassName(styles.root, withLinearGradient && styles.withLinearGradient, className)}
+      className={buildClassName(
+        styles.root,
+        withLinearGradient && Boolean(backgroundColors?.length) && styles.withLinearGradient,
+        className,
+      )}
       style={buildStyle(
-        `--_bg-light: ${backgroundColors[0]}`,
-        `--_bg-dark: ${backgroundColors[1] ?? backgroundColors[0]}`,
+        backgroundColors && `--_bg-light: ${backgroundColors[0]}`,
+        backgroundColors && `--_bg-dark: ${backgroundColors[1] ?? backgroundColors[0]}`,
         yPosition !== undefined && `--_y-shift: ${yPosition}px`,
       )}
     >

src/global/selectors/peers.ts

@@ -72,7 +72,10 @@ export function selectPeerPaidMessagesStars<T extends GlobalState>(
 
 export function selectPeerHasProfileBackground<T extends GlobalState>(global: T, peerId: string) {
   const peer = selectPeer(global, peerId);
-  return Boolean(peer?.profileColor || peer?.emojiStatus?.type === 'collectible');
+  const profileColor = peer?.profileColor;
+  if (profileColor?.type === 'collectible') return true;
+  if (profileColor?.type === 'regular') return profileColor.color !== undefined;
+  return peer?.emojiStatus?.type === 'collectible';
 }
 
 export function selectCanUpdateMainTab<T extends GlobalState>(global: T, peerId: string) {