Profile: Design tweaks (#6299)

src/components/common/Avatar.tsx

@@ -35,7 +35,7 @@ import renderText from './helpers/renderText';
 import { useFastClick } from '../../hooks/useFastClick';
 import useLastCallback from '../../hooks/useLastCallback';
 import useMedia from '../../hooks/useMedia';
-import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated';
+import useMediaTransition from '../../hooks/useMediaTransition';
 import useOldLang from '../../hooks/useOldLang';
 
 import OptimizedVideo from '../ui/OptimizedVideo';
@@ -189,7 +189,7 @@ const Avatar: FC<OwnProps> = ({
   // `videoBlobUrl` can be taken from memory cache, so we need to check `shouldLoadVideo` again
   const shouldPlayVideo = Boolean(videoBlobUrl && shouldLoadVideo);
 
-  const transitionClassNames = useMediaTransitionDeprecated(hasBlobUrl);
+  const { ref: mediaRef } = useMediaTransition<HTMLImageElement>({ hasMediaData: hasBlobUrl });
 
   const handleVideoEnded = useLastCallback((e) => {
     const video = e.currentTarget;
@@ -221,8 +221,9 @@ const Avatar: FC<OwnProps> = ({
     content = (
       <>
         <img
+          ref={mediaRef}
           src={imgUrl}
-          className={buildClassName(cn.media, 'avatar-media', transitionClassNames, videoBlobUrl && 'poster')}
+          className={buildClassName(cn.media, 'avatar-media', videoBlobUrl && 'poster')}
           alt={author}
           decoding="async"
           draggable={false}

src/components/common/profile/ProfileInfo.tsx

@@ -104,6 +104,8 @@ const LOAD_MORE_THRESHOLD = 3;
 const MAX_PHOTO_DASH_COUNT = 30;
 const STATUS_UPDATE_INTERVAL = 1000 * 60; // 1 min
 const PATTERN_COLOR = '#000000';
+const PATTERN_SIZE_FACTOR = 0.75;
+const PATTERN_OPACITY = 0.75;
 
 const ProfileInfo = ({
   isExpanded,
@@ -167,7 +169,7 @@ const ProfileInfo = ({
     if (collectibleEmojiStatus) {
       return {
         bgColors: [collectibleEmojiStatus.centerColor, collectibleEmojiStatus.edgeColor],
-        storyColors: [collectibleEmojiStatus.centerColor, collectibleEmojiStatus.edgeColor],
+        storyColors: [collectibleEmojiStatus.textColor, collectibleEmojiStatus.textColor],
       };
     }
 
@@ -482,7 +484,8 @@ const ProfileInfo = ({
           patternIcon={backgroundEmoji}
           patternColor={collectibleEmojiStatus?.patternColor || PATTERN_COLOR}
           className={styles.radialPatternBackground}
-          patternSize={0.75}
+          patternSize={PATTERN_SIZE_FACTOR}
+          patternOpacity={collectibleEmojiStatus ? 1 : PATTERN_OPACITY}
         />
       )}
       {pinnedGifts && (

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

@@ -16,8 +16,19 @@
 }
 
 .canvas {
+  pointer-events: none;
+
   position: relative;
+
   width: 100%;
   height: 100%;
+
+  opacity: 0;
   object-fit: cover;
+
+  transition: opacity 0.15s ease-out;
+
+  &.showing {
+    opacity: 1;
+  }
 }

src/components/common/profile/RadialPatternBackground.tsx

@@ -9,6 +9,7 @@ import { getStickerMediaHash } from '../../../global/helpers';
 import buildClassName from '../../../util/buildClassName';
 import buildStyle from '../../../util/buildStyle';
 import { preloadImage } from '../../../util/files';
+import { clamp } from '../../../util/math';
 
 import useLastCallback from '../../../hooks/useLastCallback';
 import useMedia from '../../../hooks/useMedia';
@@ -24,6 +25,7 @@ type OwnProps = {
   className?: string;
   clearBottomSector?: boolean;
   patternSize?: number;
+  patternOpacity?: number;
 };
 
 const RINGS = 3;
@@ -39,6 +41,7 @@ const RadialPatternBackground = ({
   backgroundColors,
   patternColor,
   patternIcon,
+  patternOpacity,
   clearBottomSector,
   className,
   patternSize = 1,
@@ -140,8 +143,11 @@ const RadialPatternBackground = ({
     }
 
     const radialGradient = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, width / 2);
-    radialGradient.addColorStop(0, '#FFFFFF77');
-    radialGradient.addColorStop(1, '#FFFFFF');
+
+    const alpha = clamp(0.6 * (patternOpacity ?? 1), 0, 1);
+
+    radialGradient.addColorStop(0, `rgb(255 255 255 / ${1 - alpha})`);
+    radialGradient.addColorStop(1, `rgb(255 255 255 / 1)`);
 
     // Alpha mask
     ctx.save();
@@ -153,12 +159,12 @@ const RadialPatternBackground = ({
 
   useEffect(() => {
     draw();
-  }, [emojiImage]);
+  }, [emojiImage, patternOpacity, patternSize, patternColor, patternPositions]);
 
   useEffect(() => {
     const { width, height } = getContainerSize();
-    const canvas = canvasRef.current!;
-    if (!width || !height) {
+    const canvas = canvasRef.current;
+    if (!width || !height || !canvas) {
       return;
     }
 
@@ -180,7 +186,11 @@ const RadialPatternBackground = ({
         `--_bg-2: ${backgroundColors[1] || backgroundColors[0]}`,
       )}
     >
-      <canvas className={styles.canvas} ref={canvasRef} />
+      <canvas
+        ref={canvasRef}
+        className={buildClassName(styles.canvas, emojiImage && styles.showing)}
+        aria-hidden="true"
+      />
     </div>
   );
 };