From 761acbf073f565db0d9de88deaab5561180416ea Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Mon, 4 Dec 2023 14:39:37 +0100 Subject: [PATCH] Composer: same alignment for EmbededMessage and WebPage (#4014) --- src/components/common/Composer.scss | 4 +-- .../common/embedded/EmbeddedMessage.scss | 2 ++ .../composer/ComposerEmbeddedMessage.scss | 17 +++++------ .../middle/composer/WebPagePreview.scss | 28 ++++++------------- src/components/middle/message/WebPage.scss | 9 ++++++ src/styles/_variables.scss | 1 + src/styles/themes.json | 1 + 7 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/common/Composer.scss b/src/components/common/Composer.scss index 510a67e4c..e4e8b8fb3 100644 --- a/src/components/common/Composer.scss +++ b/src/components/common/Composer.scss @@ -610,7 +610,7 @@ } @media (min-width: 600px) { - left: 0.75rem; + left: 0.5rem; } } @@ -699,7 +699,7 @@ padding-right: 0; @media (min-width: 600px) { - padding-left: 0.75rem; + padding-left: 0.5rem; } } } diff --git a/src/components/common/embedded/EmbeddedMessage.scss b/src/components/common/embedded/EmbeddedMessage.scss index bd15a5877..373fd7ad1 100644 --- a/src/components/common/embedded/EmbeddedMessage.scss +++ b/src/components/common/embedded/EmbeddedMessage.scss @@ -190,6 +190,8 @@ &.inside-input { flex-grow: 1; + margin: 0; + border-radius: 0.25rem; .embedded-thumb { margin-left: 0.125rem; diff --git a/src/components/middle/composer/ComposerEmbeddedMessage.scss b/src/components/middle/composer/ComposerEmbeddedMessage.scss index ee3845224..6026dd9ba 100644 --- a/src/components/middle/composer/ComposerEmbeddedMessage.scss +++ b/src/components/middle/composer/ComposerEmbeddedMessage.scss @@ -19,17 +19,14 @@ &_inner { display: flex; align-items: center; - padding-right: 0.625rem; - padding-top: 0.1875rem; + margin-top: 0.5rem; } & .embedded-left-icon { flex-shrink: 0; background: none !important; - width: 3.5rem; - height: 2.875rem; - margin: 0 -0.0625rem 0 0; - padding: 0; + height: 2.625rem; + padding: 0.5625rem 0.75rem 0.5625rem 1rem; display: grid; place-content: center; font-size: 1.5rem; @@ -43,15 +40,15 @@ & .embedded-cancel { flex-shrink: 0; background: none !important; - width: 2.25rem; - height: 2.875rem; - margin: 0 -0.0625rem 0 0.75rem; + width: auto; + height: 1.5rem; padding: 0; + margin: 0.5625rem 1rem 0.5625rem 0.75rem; align-self: center; color: var(--accent-color, var(--color-primary)); @media (max-width: 600px) { - width: 1.75rem; + margin: 0.5625rem 0.75rem 0.5625rem 0.5rem; } } diff --git a/src/components/middle/composer/WebPagePreview.scss b/src/components/middle/composer/WebPagePreview.scss index 1ea31803d..e22102449 100644 --- a/src/components/middle/composer/WebPagePreview.scss +++ b/src/components/middle/composer/WebPagePreview.scss @@ -1,5 +1,6 @@ .WebPagePreview { height: 2.625rem; + margin-top: 0.5rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: height 150ms ease-out, opacity 150ms ease-out; @@ -19,15 +20,11 @@ &_inner { display: flex; align-items: center; - padding-right: 0.625rem; - padding-top: 0.1875rem; } --accent-color: var(--color-primary); .ComposerEmbeddedMessage + & { - margin-top: 0.75rem; - body.no-message-composer-animations & { transition: opacity 150ms ease-out; } @@ -36,14 +33,12 @@ & &-left-icon { flex-shrink: 0; background: none !important; - width: 3.5rem; - height: 2.875rem; - margin: 0 -0.0625rem 0 0; - padding: 0; + height: 2.625rem; + padding: 0.5625rem 0.75rem 0.5625rem 1rem; display: grid; place-content: center; font-size: 1.5rem; - color: var(--color-primary); + color: var(--accent-color); @media (max-width: 600px) { width: 2.875rem; @@ -53,28 +48,23 @@ & &-clear { flex-shrink: 0; background: none !important; - width: 2.25rem; - height: 2.875rem; - margin: 0 -0.0625rem 0 0; + width: auto; + height: 1.5rem; padding: 0; + margin: 0.5625rem 1rem 0.5625rem 0.75rem; align-self: center; + color: var(--accent-color); @media (max-width: 600px) { - width: 1.75rem; + margin: 0.5625rem 0.75rem 0.5625rem 0.5rem; } } .WebPage { flex-grow: 1; - margin: 0.1875rem 0 0.1875rem 0.125rem; max-width: calc(100% - 3.375rem); overflow: hidden; - &::before { - top: 0.125rem; - bottom: 0.0625rem; - } - &.with-video .media-inner { display: none; } diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index ebbe9c644..8506ed9f6 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -10,6 +10,15 @@ position: relative; overflow: hidden; + &.in-preview { + border-radius: 0.25rem; + background-color: var(--color-primary-tint); + height: 2.625rem; + margin: 0; + padding: 0.125rem 0.25rem 0.125rem 0.625rem; + transition: background-color 0.2s ease-in; + } + &::before { content: ""; display: block; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index ded824d03..004fa3c03 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -102,6 +102,7 @@ $color-message-story-mention-to: #74bcff; --color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))}; --color-primary-opacity: rgba(var(--color-primary), 0.25); --color-primary-opacity-hover: rgba(var(--color-primary), 0.15); + --color-primary-tint: rgba(var(--color-primary), 0.1); --color-green: #{$color-green}; --color-green-darker: #{color.mix($color-green, $color-black, 84%)}; diff --git a/src/styles/themes.json b/src/styles/themes.json index 7c4f32050..9ded169b9 100644 --- a/src/styles/themes.json +++ b/src/styles/themes.json @@ -2,6 +2,7 @@ "--color-primary": ["#3390EC", "#8774E1"], "--color-primary-opacity": ["#50A2E940", "#8378DB80"], "--color-primary-opacity-hover": ["#50A2E926", "#8378DBA0"], + "--color-primary-tint": ["#3390ec1a", "#8774e11a"], "--color-primary-shade": ["#4a95d6", "#7b71c6"], "--color-background": ["#FFFFFF", "#212121"], "--color-background-compact-menu": ["#FFFFFFBB", "#212121DD"],