Message List: Use Pattern Color more (#2047)

src/components/middle/MessageList.scss

@@ -139,7 +139,7 @@
       left: -50vw;
       right: -50vw;
       background: black;
-      z-index: -1;
+      z-index: 0;
 
       opacity: 0;
       transition: opacity var(--select-transition);
@@ -180,6 +180,24 @@
     }
   }
 
+  html.theme-light &.with-default-bg {
+    .Message,
+    .ActionMessage {
+      &::before {
+        background: var(--pattern-color);
+      }
+
+      &.focused,
+      &.is-forwarding,
+      &.is-selected,
+      &.has-menu-open {
+        &::before {
+          opacity: 0.55;
+        }
+      }
+    }
+  }
+
   > .empty {
     width: 100%;
     height: 100%;
@@ -243,6 +261,8 @@
       padding: 0 0.5rem;
       border-radius: var(--border-radius-messages);
       word-break: break-word;
+      position: relative;
+      z-index: 0;
 
       body.is-ios &,
       body.is-macos & {

src/components/middle/MessageList.tsx

@@ -77,6 +77,7 @@ type OwnProps = {
   onNotchToggle: (shouldShow: boolean) => void;
   hasTools?: boolean;
   withBottomShift?: boolean;
+  withDefaultBg: boolean;
 };
 
 type StateProps = {
@@ -151,6 +152,7 @@ const MessageList: FC<OwnProps & StateProps> = ({
   hasLinkedChat,
   lastSyncTime,
   withBottomShift,
+  withDefaultBg,
 }) => {
   const {
     loadViewportMessages, setScrollOffset, loadSponsoredMessages, loadMessageReactions, copyMessagesByIds,
@@ -522,6 +524,7 @@ const MessageList: FC<OwnProps & StateProps> = ({
     !canPost && 'no-composer',
     type === 'pinned' && 'type-pinned',
     withBottomShift && 'with-bottom-shift',
+    withDefaultBg && 'with-default-bg',
     isSelectModeActive && 'select-mode-active',
     isScrolled && 'scrolled',
     !isReady && 'is-animating',

src/components/middle/MiddleColumn.tsx

@@ -429,6 +429,7 @@ const MiddleColumn: FC<StateProps> = ({
                 onNotchToggle={setIsNotchShown}
                 isReady={isReady}
                 withBottomShift={withMessageListBottomShift}
+                withDefaultBg={Boolean(!customBackground && !backgroundColor)}
               />
               <div className={footerClassName}>
                 {renderingCanPost && (

src/components/middle/message/CommentButton.scss

@@ -56,17 +56,22 @@
     padding: 0.375rem 0.3125rem 0.25rem;
     align-items: flex-start;
     color: white;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: var(--pattern-color);
 
     opacity: 0;
-    transition: opacity 0.2s ease;
+    transition: opacity 150ms, backdrop-filter 150ms, filter 150ms;
 
     @media (pointer: coarse) {
       opacity: 1 !important;
     }
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.28);
+      background-color: var(--pattern-color);
+      backdrop-filter: brightness(115%);
+
+      @supports not (backdrop-filter: brightness(115%)) {
+        filter: brightness(115%);
+      }
     }
 
     .Message:hover & {

src/components/middle/message/InlineButtons.scss

@@ -17,27 +17,15 @@
     border-radius: var(--border-radius-messages-small);
     font-weight: 500;
     text-transform: none;
+    transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms;
 
-    &::before {
+    &:hover,
-      content: "";
+    &:focus {
-      background-color: var(--color-white);
-      opacity: 0;
-
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: var(--border-radius-messages-small);
-      z-index: var(--z-below);
-      transition: opacity 200ms;
-    }
-
-    &:hover {
       background: var(--pattern-color) !important;
+      backdrop-filter: brightness(115%);
 
-      &::before {
+      @supports not (backdrop-filter: brightness(115%)) {
-        opacity: 0.4;
+        filter: brightness(115%);
       }
     }
 

src/components/middle/message/Message.scss

@@ -616,10 +616,10 @@
     position: absolute;
     bottom: 0;
     color: white;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: var(--pattern-color);
 
     opacity: 0;
-    transition: opacity 0.2s ease;
+    transition: opacity 150ms, backdrop-filter 150ms, filter 150ms;
 
     @media (pointer: coarse) {
       opacity: 1 !important;
@@ -628,7 +628,12 @@
     &:hover,
     &:active,
     &:focus {
-      background-color: rgba(0, 0, 0, 0.28) !important;
+      background-color: var(--pattern-color) !important;
+      backdrop-filter: brightness(115%);
+
+      @supports not (backdrop-filter: brightness(115%)) {
+        filter: brightness(115%);
+      }
     }
   }
 

src/components/middle/message/MessageMeta.scss

@@ -62,7 +62,6 @@
   .media:not(.text) &,
   .Message .custom-shape &,
   .Message .invoice & {
-    background: rgba(0, 0, 0, 0.2);
     --color-accent-own: white;
     --color-accent: white;
     color: white !important;
@@ -78,6 +77,15 @@
     }
   }
 
+  .media:not(.text) &,
+  .Message .invoice & {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .Message .custom-shape & {
+    background: var(--pattern-color);
+  }
+
   .voice &[dir="rtl"] {
     right: auto !important;
     left: 0.25rem;

src/components/middle/message/_message-content.scss

@@ -631,6 +631,10 @@
     }
   }
 
+  .message-media-duration {
+    background: var(--pattern-color);
+  }
+
   .text-content {
     margin-bottom: 1rem;
   }