Message / Reactions: Fix colors (#3457)

src/components/common/Avatar.tsx

@@ -28,21 +28,23 @@ import useMedia from '../../hooks/useMedia';
 import useMediaTransition from '../../hooks/useMediaTransition';
 import useLang from '../../hooks/useLang';
 import { useFastClick } from '../../hooks/useFastClick';
+import useLastCallback from '../../hooks/useLastCallback';
 
 import OptimizedVideo from '../ui/OptimizedVideo';
 
 import './Avatar.scss';
-import useLastCallback from '../../hooks/useLastCallback';
 
 const LOOP_COUNT = 3;
 
+export type AvatarSize = 'micro' | 'tiny' | 'mini' | 'small' | 'small-mobile' | 'medium' | 'large' | 'jumbo';
+
 const cn = createClassNameBuilder('Avatar');
 cn.media = cn('media');
 cn.icon = cn('icon');
 
 type OwnProps = {
   className?: string;
-  size?: 'micro' | 'tiny' | 'mini' | 'small' | 'small-mobile' | 'medium' | 'large' | 'jumbo';
+  size?: AvatarSize;
   peer?: ApiChat | ApiUser;
   photo?: ApiPhoto;
   text?: string;

src/components/common/AvatarList.module.scss

@@ -0,0 +1,60 @@
+.root {
+  display: flex;
+  --spacing: calc(var(--size) * 0.4);
+  --spacing-gap: calc(var(--size) * 0.04);
+  --size: 0px;
+
+  --half-size: calc(var(--size) / 2);
+}
+
+.size-micro {
+  --size: 1rem;
+}
+
+.size-mini {
+  --size: 1.5rem;
+}
+
+.size-tiny {
+  --size: 2rem;
+}
+
+.size-small {
+  --size: 2.125rem;
+}
+
+.size-small-mobile {
+  --size: 2.5rem;
+}
+
+.size-medium {
+  --size: 2.75rem;
+}
+
+.size-large {
+  --size: 3.375rem;
+}
+
+.size-jumbo {
+  --size: 7.5rem;
+}
+
+.avatar {
+  --radius: calc(var(--half-size) + var(--spacing-gap));
+
+  margin-inline-start: calc(var(--spacing-gap) - var(--spacing));
+  mask: radial-gradient(circle var(--radius) at var(--offset) 50%, transparent 99%, #fff 100%);
+
+  &:first-child {
+    margin-inline-start: 0;
+    mask: none;
+  }
+}
+
+.root[dir="ltr"] .avatar {
+  --offset: calc(0% - var(--half-size) + var(--spacing));
+}
+
+.root[dir="rtl"] .avatar {
+  --offset: calc(100% + var(--half-size) - var(--spacing));
+}

src/components/common/AvatarList.tsx

@@ -0,0 +1,35 @@
+import type { FC } from '../../lib/teact/teact';
+import React, { memo } from '../../lib/teact/teact';
+
+import type { AvatarSize } from './Avatar';
+import type { ApiChat, ApiUser } from '../../api/types';
+
+import buildClassName from '../../util/buildClassName';
+import useLang from '../../hooks/useLang';
+
+import Avatar from './Avatar';
+
+import styles from './AvatarList.module.scss';
+
+type OwnProps = {
+  size: AvatarSize;
+  peers?: (ApiUser | ApiChat)[];
+};
+
+const AvatarList: FC<OwnProps> = ({
+  peers,
+  size,
+}) => {
+  const lang = useLang();
+
+  return (
+    <div
+      className={buildClassName(styles.root, styles[`size-${size}`])}
+      dir={lang.isRtl ? 'rtl' : 'ltr'}
+    >
+      {peers?.map((peer) => <Avatar size={size} peer={peer} className={styles.avatar} />)}
+    </div>
+  );
+};
+
+export default memo(AvatarList);

src/components/middle/message/Message.scss

@@ -11,6 +11,10 @@
   --hover-color: var(--color-reply-hover);
   --color-reaction: var(--color-message-reaction);
   --hover-color-reaction: var(--color-message-reaction-hover);
+  --text-color-reaction: var(--accent-color);
+  --color-reaction-chosen: var(--accent-color);
+  --hover-color-reaction-chosen: var(--color-message-reaction-chosen-hover);
+  --text-color-reaction-chosen: #FFFFFF;
   --active-color: var(--color-reply-active);
   --max-width: 29rem;
   --accent-color: var(--color-primary);
@@ -184,6 +188,10 @@
     --hover-color: var(--color-reply-own-hover);
     --color-reaction: var(--color-message-reaction-own);
     --hover-color-reaction: var(--color-message-reaction-hover-own);
+    --text-color-reaction: var(--accent-color);
+    --color-reaction-chosen: var(--accent-color);
+    --hover-color-reaction-chosen: var(--color-message-reaction-chosen-hover-own);
+    --text-color-reaction-chosen: var(--color-background);
     --active-color: var(--color-reply-own-active);
     --max-width: 30rem;
     --accent-color: var(--color-accent-own);

src/components/middle/message/ReactionAnimatedEmoji.module.scss

@@ -11,10 +11,6 @@
   margin-inline-end: 0.125rem;
 
   z-index: 1;
-
-  &.is-custom-emoji {
-    margin-inline-end: 0.375rem;
-  }
 }
 
 .animated-icon, .effect {

src/components/middle/message/ReactionButton.tsx

@@ -15,7 +15,7 @@ import { isSameReaction, isReactionChosen } from '../../../global/helpers';
 import useLastCallback from '../../../hooks/useLastCallback';
 
 import Button from '../../ui/Button';
-import Avatar from '../../common/Avatar';
+import AvatarList from '../../common/AvatarList';
 import ReactionAnimatedEmoji from './ReactionAnimatedEmoji';
 import AnimatedCounter from '../../common/AnimatedCounter';
 
@@ -80,15 +80,7 @@ const ReactionButton: FC<{
         withEffects={withEffects}
       />
       {recentReactors?.length ? (
-        <div className="avatars">
+        <AvatarList size="mini" peers={recentReactors} />
-          {recentReactors.map((user) => (
-            <Avatar
-              key={user.id}
-              peer={user}
-              size="micro"
-            />
-          ))}
-        </div>
       ) : <AnimatedCounter text={formatIntegerCompact(reaction.count)} className="counter" />}
     </Button>
   );

src/components/middle/message/Reactions.scss

@@ -9,20 +9,28 @@
 
   .Button {
     --reaction-background: var(--color-reaction);
+    --reaction-background-hover: var(--hover-color-reaction);
+    --reaction-text-color: var(--text-color-reaction);
+
+    .theme-dark & {
+      --reaction-background: rgb(255, 255, 255, 0.1);
+      --reaction-background-hover: rgb(255, 255, 255, 0.2);
+      --reaction-text-color: var(--color-text);
+    }
+
     display: flex;
     flex-direction: row;
     height: 1.875rem;
     white-space: nowrap;
     width: auto;
     margin: 0.125rem;
-    padding: 0 0.25rem;
+    padding: 0 0.375rem 0 0.25rem;
-    border: 2px solid transparent;
     background-color: var(--reaction-background) !important;
     border-radius: 1.75rem;
     font-weight: 500;
     font-variant-numeric: tabular-nums;
     text-transform: none;
-    color: var(--accent-color);
+    color: var(--reaction-text-color);
     overflow: visible;
     line-height: 1.75rem;
 
@@ -47,9 +55,22 @@
     }
 
     &.chosen {
-      border-color: var(--accent-color);
+      --reaction-background: var(--color-reaction-chosen);
+      --reaction-background-hover: var(--hover-color-reaction-chosen);
+      --reaction-text-color: var(--text-color-reaction-chosen);
       position: relative;
       z-index: 1;
+
+      .theme-dark & {
+        --reaction-background: #3390ec;
+        --reaction-background-hover: #4096ec;
+      }
+
+      .theme-dark .own & {
+        --reaction-background: rgb(255, 255, 255, 0.75);
+        --reaction-background-hover: rgb(255, 255, 255, 0.85);
+        --reaction-text-color: rgb(62 62 62);
+      }
     }
 
     .counter {
@@ -57,7 +78,7 @@
     }
 
     &:hover {
-      --reaction-background: var(--hover-color-reaction);
+      --reaction-background: var(--reaction-background-hover) !important;
     }
 
     &:first-of-type {
@@ -89,19 +110,15 @@
     }
   }
 
-  &.is-outside .Button {
+  .theme-light &.is-outside .Button {
-    --reaction-background: var(--pattern-color);
+    --reaction-background: rgb(0, 0, 0, 0.15);
-    color: white;
+    --reaction-background-hover: rgba(0, 0, 0, 0.2);
-    .theme-dark & {
+    --reaction-text-color: white;
-      color: var(--accent-color);
-    }
 
     &.chosen {
-      border-color: white;
+      --reaction-background: rgb(255, 255, 255, 0.6);
-
+      --reaction-background-hover: rgb(255, 255, 255, 0.75);
-      .theme-dark & {
+      --reaction-text-color: rgb(62 62 62);
-        border-color: var(--accent-color);
-      }
     }
   }
 }

src/styles/_variables.scss

@@ -63,6 +63,8 @@ $color-message-reaction: #ebf3fd;
 $color-message-reaction-hover: #c5def9;
 $color-message-reaction-own: #cef0ba;
 $color-message-reaction-own-hover: #b5e0a4;
+$color-message-reaction-chosen-hover: #1a82ea;
+$color-message-reaction-chosen-hover-own: #3f9d4b;
 
 :root {
   --color-background: #{$color-white};
@@ -138,6 +140,8 @@ $color-message-reaction-own-hover: #b5e0a4;
   --color-message-reaction-hover: $color-message-reaction-hover;
   --color-message-reaction-own: $color-message-reaction-own;
   --color-message-reaction-hover-own: $color-message-reaction-own-hover;
+  --color-message-reaction-chosen-hover: $color-message-reaction-chosen-hover;
+  --color-message-reaction-chosen-hover-own: $color-message-reaction-chosen-hover-own;
 
   --color-reply-hover: #{blend-normal(rgba($color-text-secondary, 0.08), $color-white)};
   --color-reply-active: #{blend-normal(rgba($color-text-secondary, 0.16), $color-white)};

src/styles/themes.json

@@ -48,8 +48,10 @@
   "--color-composer-button": ["#707579CC", "#AAAAAACC"],
   "--color-message-reaction": ["#ebf3fd", "#2b2a35"],
   "--color-message-reaction-hover": ["#c5def9", "#343147"],
-  "--color-message-reaction-own": ["#cef0ba", "#675CAF"],
+  "--color-message-reaction-own": ["#c6eab2", "#675CAF"],
   "--color-message-reaction-hover-own": ["#b5e0a4", "#5B529B"],
+  "--color-message-reaction-chosen-hover": ["#1a82ea", "#7864dd"],
+  "--color-message-reaction-chosen-hover-own": ["#3f9d4b", "#f5f5f5"],
   "--color-voice-transcribe-button": ["#e8f3ff", "#2a2a3c"],
   "--color-voice-transcribe-button-own": ["#cceebf", "#8373d3"],
   "--color-topic-blue": ["#2F7772", "#6ff9f0"],