ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reactions: Make reactions size bigger (#2398)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-01-28 02:16:31 +01:00
parent 35bf02107e
commit b0e3832a75
3 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/middle/message/ReactionAnimatedEmoji.module.scss
View File

@ -6,9 +6,9 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 1.125rem; width: 1.75rem;
height: 1.125rem; height: 1.75rem;
margin-right: 0.25rem; margin-right: 0.125rem;
z-index: 1; z-index: 1;

4
src/components/middle/message/ReactionAnimatedEmoji.tsx
View File

@ -33,8 +33,8 @@ type OwnProps = {
observeIntersection?: ObserveFn; observeIntersection?: ObserveFn;
}; };
const CENTER_ICON_SIZE = 1.875 * REM; const CENTER_ICON_SIZE = 2.5 * REM;
const EFFECT_SIZE = 6.25 * REM; const EFFECT_SIZE = 6.5 * REM;
const ReactionAnimatedEmoji: FC<OwnProps> = ({ const ReactionAnimatedEmoji: FC<OwnProps> = ({
reaction, reaction,

14
src/components/middle/message/Reactions.scss
View File

@ -10,11 +10,11 @@
--reaction-background: var(--color-reaction); --reaction-background: var(--color-reaction);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 1.75rem; height: 1.875rem;
white-space: nowrap; white-space: nowrap;
width: auto; width: auto;
margin: 0.125rem; margin: 0.125rem;
padding: 0 0.5rem; padding: 0 0.25rem;
border: 2px solid transparent; border: 2px solid transparent;
background-color: var(--reaction-background) !important; background-color: var(--reaction-background) !important;
border-radius: 1.75rem; border-radius: 1.75rem;
@ -23,7 +23,11 @@
text-transform: none; text-transform: none;
color: var(--accent-color); color: var(--accent-color);
overflow: visible; overflow: visible;
line-height: 1.25rem; line-height: 1.75rem;
.ReactionStaticEmoji {
width: 1.25rem;
}
.avatars { .avatars {
display: flex; display: flex;
@ -31,8 +35,8 @@
.Avatar { .Avatar {
margin: 0 0 0 -0.25rem; margin: 0 0 0 -0.25rem;
border: 0.0625rem solid var(--reaction-background); border: 0.0625rem solid var(--reaction-background);
width: 1.25rem; width: 1.5rem;
height: 1.25rem; height: 1.5rem;
&:first-child { &:first-child {
margin: 0; margin: 0;