From 649b939e6ae7dea87634a2be3f1b72e18989846c Mon Sep 17 00:00:00 2001 From: Matthew Birtch Date: Mon, 26 May 2025 22:20:42 -0400 Subject: [PATCH] MM-63898 Improve Blockquote Style (#31008) * quote style exploration * style tweak * updated quote style * Update _markdown.scss * update value to match css * fix linter issue * changed reply bar to button-bg * tweaks to compact mode * a few more minor tweaks to spacing for compact mode and in edit preview mode * fix lint issue * add comment back in * move to proper if statement for theme util --- .../post_view/show_more/show_more.tsx | 2 +- .../channels/src/sass/components/_post.scss | 20 +++++++++---- .../channels/src/sass/layout/_markdown.scss | 29 +++++++++---------- .../channels/src/sass/responsive/_tablet.scss | 6 ++-- webapp/channels/src/utils/utils.tsx | 6 ++-- 5 files changed, 34 insertions(+), 29 deletions(-) diff --git a/webapp/channels/src/components/post_view/show_more/show_more.tsx b/webapp/channels/src/components/post_view/show_more/show_more.tsx index aeafc9ed1c..1585c79395 100644 --- a/webapp/channels/src/components/post_view/show_more/show_more.tsx +++ b/webapp/channels/src/components/post_view/show_more/show_more.tsx @@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl'; export type AttachmentTextOverflowType = 'ellipsis'; const MAX_POST_HEIGHT = 600; -const MARGIN_CHANGE_FOR_COMPACT_POST = 22; +const MARGIN_CHANGE_FOR_COMPACT_POST = 12; type Props = { children?: React.ReactNode; diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss index 9af271140b..69129b9154 100644 --- a/webapp/channels/src/sass/components/_post.scss +++ b/webapp/channels/src/sass/components/_post.scss @@ -53,7 +53,6 @@ } p { - margin: 0; white-space: pre-wrap; } @@ -758,6 +757,11 @@ } } + .post__link { + padding-top: 3px; + margin: 0; + } + .attachment { padding-top: 1px; clear: both; @@ -776,6 +780,10 @@ } &.post--comment { + .post__body { + padding-left: 8px; + } + .attachment { .attachment__body__wrap { .btn-close { @@ -823,7 +831,7 @@ blockquote { display: flex; flex-direction: column; - padding: 3px 0 3px 20px; + padding: 0 0 0 8px; &::before { top: 0; @@ -854,7 +862,7 @@ } .post__body { - padding: 2px 0 0; + padding: 2px 0; background: transparent !important; line-height: 1.5; @@ -1011,8 +1019,8 @@ &.post--comment { .post__body { - padding-left: 7px; - border-left: 4px solid rgba(var(--center-channel-color-rgb), 0.2); + padding-left: 12px; + border-left: 4px solid rgba(var(--button-bg-rgb), 0.24); } &.mention-comment { @@ -1376,7 +1384,7 @@ .post__body { width: 100%; - padding: 0 0 0.2em; + padding: 0.2em 0; word-wrap: break-word; &-reactions-acks { diff --git a/webapp/channels/src/sass/layout/_markdown.scss b/webapp/channels/src/sass/layout/_markdown.scss index 9e9ebb74c9..276b0160ad 100644 --- a/webapp/channels/src/sass/layout/_markdown.scss +++ b/webapp/channels/src/sass/layout/_markdown.scss @@ -410,23 +410,22 @@ ol.markdown__list { blockquote { position: relative; - padding: 10px 10px 10px 38px; - border: none; - margin-bottom: 0; + padding: 2px 12px 2px 12px; + border-left: 2px solid rgba(var(--center-channel-color-rgb), 0.20); + margin: 6px 0 0 0; + color: rgba(var(--center-channel-color-rgb), 0.72); font-size: inherit; - &::before { - position: absolute; - top: 5px; - left: 8px; - display: inline-block; - content: '\f10d'; - font-family: FontAwesome, sans-serif; - font-size: 20px; - font-style: normal; - font-weight: normal; - opacity: 0.73; - text-decoration: inherit; + &:first-child { + margin-top: 0; + } + + +p { + margin-top: 6px; + + .post & { + margin-top: 6px; + } } } diff --git a/webapp/channels/src/sass/responsive/_tablet.scss b/webapp/channels/src/sass/responsive/_tablet.scss index a08ff8b5a9..b9af54421b 100644 --- a/webapp/channels/src/sass/responsive/_tablet.scss +++ b/webapp/channels/src/sass/responsive/_tablet.scss @@ -174,12 +174,11 @@ &.post--compact { .post-message--overflow { @include mixins.clearfix; - - margin-top: 22px; //Any value change to this needs to reflect for MARGIN_CHANGE_FOR_COMPACT_POST variable in show_more component + margin-top: 12px; //Any value change to this needs to reflect for MARGIN_CHANGE_FOR_COMPACT_POST variable in show_more component } .attachment__body .post-message--overflow { - margin-top: 0; //The above margin was added for wrapping texg in compact view but it isnt needed for attachment text + margin-top: 0; //The above margin was added for wrapping text in compact view but it isnt needed for attachment text } &.same--root { @@ -284,7 +283,6 @@ padding: 0 0.5em 0 77px; // .post-row__padding.bottom needs to be changed accordingly if this is changed .post__link { - margin: 3px 0 7px; vertical-align: bottom; } diff --git a/webapp/channels/src/utils/utils.tsx b/webapp/channels/src/utils/utils.tsx index d251ffaa56..aa2f047292 100644 --- a/webapp/channels/src/utils/utils.tsx +++ b/webapp/channels/src/utils/utils.tsx @@ -381,7 +381,7 @@ export function applyTheme(theme: Theme) { changeCss('.app__body .modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3)); changeCss('.app__body .channel-intro, .app__body hr, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header, .app__body .user-settings .authorized-app:not(:last-child)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .post.post--comment.other--root.current--user .post-comment, .app__body pre', 'background:' + changeOpacity(theme.centerChannelColor, 0.05)); - changeCss('.app__body .post.post--comment.other--root.current--user .post-comment, .app__body .more-modal__list .more-modal__row, .app__body .member-div:first-child, .app__body .member-div, .app__body .access-history__table .access__report, .app__body .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1)); + changeCss('.app__body .post.post--comment.other--root.current--user .post-comment, .app__body .more-modal__list .more-modal__row, .app__body .member-div:first-child, .app__body .member-div, .app__body .access-history__table .access__report, .app__body .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.4)); changeCss('@media(max-width: 1800px){.app__body .inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07)); changeCss('.app__body .post.post--hovered', 'background:' + changeOpacity(theme.centerChannelColor, 0.08)); changeCss('.app__body .attachment__body__wrap.btn-close', 'background:' + changeOpacity(theme.centerChannelColor, 0.08)); @@ -397,8 +397,7 @@ export function applyTheme(theme: Theme) { changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor); changeCss('.app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .status svg, .app__body .edit-post__actions .icon svg', 'fill:' + theme.centerChannelColor); changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5)); - changeCss('@media(min-width: 768px){.app__body .post.post--compact.same--root.post--comment .post__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); - changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); + changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.buttonBg, 0.24)); changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor); changeCss('.app__body .emoji-picker', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .emoji-picker__search-icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.4)); @@ -446,6 +445,7 @@ export function applyTheme(theme: Theme) { changeCss('.app__body .SendMessageButton:not(.disabled):hover', 'background:' + blendColors(theme.buttonBg, '#000000', 0.1)); changeCss('.app__body #button_send_post_options:not(.disabled):hover', 'background:' + blendColors(theme.buttonBg, '#000000', 0.1)); + changeCss('@media(min-width: 768px){.app__body .post.post--compact.same--root.post--comment .post__content', 'border-color:' + changeOpacity(theme.buttonBg, 0.24)); } if (theme.buttonColor) {