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

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;

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;
+            padding-left: 12px;
-            border-left: 4px solid rgba(var(--center-channel-color-rgb), 0.2);
+            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 {

webapp/channels/src/sass/layout/_markdown.scss

@@ -410,23 +410,22 @@ ol.markdown__list {
 
 blockquote {
     position: relative;
-    padding: 10px 10px 10px 38px;
+    padding: 2px 12px 2px 12px;
-    border: none;
+    border-left: 2px solid rgba(var(--center-channel-color-rgb), 0.20);
-    margin-bottom: 0;
+    margin: 6px 0 0 0;
+    color: rgba(var(--center-channel-color-rgb), 0.72);
     font-size: inherit;
 
-    &::before {
+    &:first-child {
-        position: absolute;
+        margin-top: 0;
-        top: 5px;
+    }
-        left: 8px;
+    
-        display: inline-block;
+    +p {
-        content: '\f10d';
+        margin-top: 6px;
-        font-family: FontAwesome, sans-serif;
+
-        font-size: 20px;
+        .post & {
-        font-style: normal;
+            margin-top: 6px;
-        font-weight: normal;
+        }
-        opacity: 0.73;
-        text-decoration: inherit;
     }
 }
 

webapp/channels/src/sass/responsive/_tablet.scss

@@ -174,12 +174,11 @@
         &.post--compact {
             .post-message--overflow {
                 @include mixins.clearfix;
-
+                margin-top: 12px; //Any value change to this needs to reflect for MARGIN_CHANGE_FOR_COMPACT_POST variable in show_more component
-                margin-top: 22px; //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;
                 }
 

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.buttonBg, 0.24));
-        changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         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) {