Middle Column: Replace default background (#997)

src/components/middle/MessageList.scss

@@ -5,19 +5,12 @@
   overflow: scroll;
   overflow-x: hidden;
   overflow-y: overlay;
-  padding-bottom: .3125rem;
+  margin-bottom: .3125rem;
 
-  body.hide-mask-shadow .mask-image-disabled &,
   .mask-image-enabled & {
     mask-image: linear-gradient(to top, transparent 0, #000 1rem);
   }
 
-  .custom-bg-color.mask-image-disabled &,
-  .custom-bg-image.mask-image-disabled & {
-    margin-bottom: .3125rem;
-    padding-bottom: 0;
-  }
-
   @media (pointer: coarse) {
     -webkit-user-select: none;
     -webkit-touch-callout: none;

src/components/middle/MessageSelectToolbar.scss

@@ -11,8 +11,6 @@
   .mask-image-disabled &::before {
     left: auto !important;
     right: auto !important;
-    height: 3.5rem;
-    border-radius: var(--border-radius-messages);
   }
 
   @media (min-width: 601px) {

src/components/middle/MiddleColumn.scss

@@ -277,7 +277,11 @@
   display: flex;
   justify-content: center;
   position: relative;
+}
 
+.MessageSelectToolbar,
+.unpin-all-button,
+.messaging-disabled {
   .mask-image-disabled &::before {
     --shadow-color: #84a686;
 
@@ -287,7 +291,8 @@
     top: 0;
     left: 0.125rem;
     right: 0.125rem;
-    height: 1.5rem;
+    height: 3.5rem;
+    border-radius: var(--border-radius-messages);
     box-shadow: 0 0 .5rem .5rem var(--shadow-color);
     background: var(--shadow-color);
     z-index: -1;
@@ -304,7 +309,7 @@
     }
 
     @media screen and (min-height: 750px) {
-      --shadow-color: #759b72;
+      --shadow-color: #9bb281;;
     }
 
     @media screen and (min-width: 1276px) {
@@ -313,7 +318,7 @@
       }
 
       body.animation-level-2 #Main.right-column-open & {
-        --shadow-color: #84a686;
+        --shadow-color: #9cb186;
       }
 
       @media (min-height: 750px) {
@@ -322,7 +327,7 @@
         }
 
         body.animation-level-2 #Main.right-column-open & {
-          --shadow-color: #759b72;
+          --shadow-color: #97ae86;
         }
       }
     }
@@ -349,6 +354,10 @@
     overflow: visible;
     box-shadow: 0 1px 2px var(--color-default-shadow);
 
+    &::before {
+      height: 3.125rem;
+    }
+
     &:hover {
       .icon-unpin {
         color: var(--color-white);
@@ -359,11 +368,6 @@
       display: none;
     }
 
-    .mask-image-disabled &::before {
-      height: 3.125rem;
-      border-radius: var(--border-radius-messages);
-    }
-
     @media (max-width: 600px) {
       height: 2.5rem;
     }

src/components/middle/MiddleColumn.tsx

@@ -256,7 +256,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
                         </Button>
                       </div>
                     )}
-                    {!renderingCanPost && messageSendingRestrictionReason && (
+                    {!isPinnedMessageList && !renderingCanPost && messageSendingRestrictionReason && (
                       <div className={messagingDisabledClassName}>
                         <div className="messaging-disabled-inner">
                           <span>
@@ -315,6 +315,7 @@ export default memo(withGlobal(
     const canPost = chat && getCanPostInChat(chat, threadId);
     const isBotNotStarted = selectIsChatBotNotStarted(global, chatId);
     const isPinnedMessageList = messageListType === 'pinned';
+
     return {
       chatId,
       threadId,

src/components/middle/composer/Composer.scss

@@ -19,10 +19,10 @@
         right: 1rem;
       }
     }
-  }
 
-  .hide-mask-shadow &::before {
-    opacity: 0 !important;
+    .svg-appendix {
+      opacity: 0;
+    }
   }
 
   > .Button {
@@ -164,6 +164,7 @@
     right: -.5625rem;
     width: .5625rem;
     height: 1.25rem;
+    transition: opacity 200ms;
 
     .corner {
       fill: var(--color-background);

src/components/middle/composer/MessageInput.tsx

@@ -49,7 +49,6 @@ type StateProps = {
 
 type DispatchProps = Pick<GlobalActions, 'editLastMessage'>;
 
-const DISABLE_MASK_SHADOW_THRESHOLD = 100;
 const MAX_INPUT_HEIGHT = IS_MOBILE_SCREEN ? 256 : 416;
 const TAB_INDEX_PRIORITY_TIMEOUT = 2000;
 const TEXT_FORMATTER_SAFE_AREA_PX = 90;
@@ -276,7 +275,6 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
     const clone = cloneRef.current!;
     input.style.height = `${Math.min(clone.scrollHeight, MAX_INPUT_HEIGHT)}px`;
     input.classList.toggle('overflown', clone.scrollHeight > MAX_INPUT_HEIGHT);
-    document.body.classList.toggle('hide-mask-shadow', clone.scrollHeight > DISABLE_MASK_SHADOW_THRESHOLD);
   }
 
   useEffect(() => {