From f23b01e0b174daa754d138f130e014ec96437330 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Wed, 5 Jul 2023 13:15:33 +0200 Subject: [PATCH] Message / Reactions: Fix colors (#3457) --- src/components/common/Avatar.tsx | 6 +- src/components/common/AvatarList.module.scss | 60 +++++++++++++++++++ src/components/common/AvatarList.tsx | 35 +++++++++++ src/components/middle/message/Message.scss | 8 +++ .../message/ReactionAnimatedEmoji.module.scss | 4 -- .../middle/message/ReactionButton.tsx | 12 +--- src/components/middle/message/Reactions.scss | 49 ++++++++++----- src/styles/_variables.scss | 4 ++ src/styles/themes.json | 4 +- 9 files changed, 149 insertions(+), 33 deletions(-) create mode 100644 src/components/common/AvatarList.module.scss create mode 100644 src/components/common/AvatarList.tsx diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx index 199679595..2f10b6990 100644 --- a/src/components/common/Avatar.tsx +++ b/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; diff --git a/src/components/common/AvatarList.module.scss b/src/components/common/AvatarList.module.scss new file mode 100644 index 000000000..29a7e9882 --- /dev/null +++ b/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)); +} diff --git a/src/components/common/AvatarList.tsx b/src/components/common/AvatarList.tsx new file mode 100644 index 000000000..d189328f7 --- /dev/null +++ b/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 = ({ + peers, + size, +}) => { + const lang = useLang(); + + return ( +
+ {peers?.map((peer) => )} +
+ ); +}; + +export default memo(AvatarList); diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index f51fa5a25..a2e76020d 100644 --- a/src/components/middle/message/Message.scss +++ b/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); diff --git a/src/components/middle/message/ReactionAnimatedEmoji.module.scss b/src/components/middle/message/ReactionAnimatedEmoji.module.scss index b7a1094c2..3fc749f4e 100644 --- a/src/components/middle/message/ReactionAnimatedEmoji.module.scss +++ b/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 { diff --git a/src/components/middle/message/ReactionButton.tsx b/src/components/middle/message/ReactionButton.tsx index 6a903d974..4e4d7c13b 100644 --- a/src/components/middle/message/ReactionButton.tsx +++ b/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 ? ( -
- {recentReactors.map((user) => ( - - ))} -
+ ) : } ); diff --git a/src/components/middle/message/Reactions.scss b/src/components/middle/message/Reactions.scss index 827b5cbc8..6f33f0d78 100644 --- a/src/components/middle/message/Reactions.scss +++ b/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; - border: 2px solid transparent; + padding: 0 0.375rem 0 0.25rem; 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 { - --reaction-background: var(--pattern-color); - color: white; - .theme-dark & { - color: var(--accent-color); - } + .theme-light &.is-outside .Button { + --reaction-background: rgb(0, 0, 0, 0.15); + --reaction-background-hover: rgba(0, 0, 0, 0.2); + --reaction-text-color: white; &.chosen { - border-color: white; - - .theme-dark & { - border-color: var(--accent-color); - } + --reaction-background: rgb(255, 255, 255, 0.6); + --reaction-background-hover: rgb(255, 255, 255, 0.75); + --reaction-text-color: rgb(62 62 62); } } } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 2bde091db..123d6b62e 100644 --- a/src/styles/_variables.scss +++ b/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)}; diff --git a/src/styles/themes.json b/src/styles/themes.json index 147548d80..aae1fa781 100644 --- a/src/styles/themes.json +++ b/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"],