Middle Footer: Various issues (#1031)

src/components/middle/MessageList.scss

@@ -62,7 +62,7 @@
 
   &.select-mode-active {
     .messages-container {
-      padding-bottom: 5.25rem;
+      padding-bottom: 4.75rem;
     }
   }
 

src/components/middle/MessageSelectToolbar.scss

@@ -13,6 +13,10 @@
     right: auto !important;
   }
 
+  .no-composer & {
+    width: 100%;
+  }
+
   @media (min-width: 601px) {
     left: 1rem;
     right: 1rem;
@@ -30,19 +34,15 @@
     transition: transform var(--select-transition), opacity var(--select-transition);
   }
 
-  &.with-composer .MessageSelectToolbar-inner {
+  & .MessageSelectToolbar-inner {
     transform: scaleX(1) translateX(0);
   }
 
+  .no-composer .unpin-button-container + &,
   .no-composer .messaging-disabled + & {
     top: auto;
   }
 
-  .no-composer .unpin-button-container + & {
-    top: auto;
-    margin-bottom: 1rem;
-  }
-
   body.animation-level-0 & {
     transition: none !important;
   }
@@ -58,6 +58,10 @@
     &.with-composer .MessageSelectToolbar-inner {
       transform: scaleX(var(--toolbar-hidden-scale, 1)) translateX(var(--toolbar-translate-x, 0));
     }
+
+    &:not(.with-composer) .MessageSelectToolbar-inner {
+      transform: scaleX(var(--toolbar-unpin-hidden-scale)) translateX(0);
+    }
   }
 
   &::before {

src/components/middle/MiddleColumn.scss

@@ -279,63 +279,11 @@
   position: relative;
 }
 
-.MessageSelectToolbar,
+.MessageSelectToolbar-inner,
 .unpin-all-button,
 .messaging-disabled {
-  .mask-image-disabled &::before {
+  .mask-image-disabled & {
-    --shadow-color: #84a686;
+    box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
-
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0.125rem;
-    right: 0.125rem;
-    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;
-
-    @media (max-width: 600px) {
-      left: 0;
-      right: 0;
-      z-index: -1;
-      --shadow-color: #678a64;
-
-      body.is-symbol-menu-open & {
-        --shadow-color: #b4bf9e;
-      }
-    }
-
-    @media screen and (min-height: 750px) {
-      --shadow-color: #9bb281;;
-    }
-
-    @media screen and (min-width: 1276px) {
-      body.animation-level-2 & {
-        --shadow-color: #97af8e;
-      }
-
-      body.animation-level-2 #Main.right-column-open & {
-        --shadow-color: #9cb186;
-      }
-
-      @media (min-height: 750px) {
-        body.animation-level-2 & {
-          --shadow-color: #91a67f;
-        }
-
-        body.animation-level-2 #Main.right-column-open & {
-          --shadow-color: #97ae86;
-        }
-      }
-    }
-  }
-
-  .custom-bg-color &::before,
-  .custom-bg-image &::before {
-    display: none;
   }
 }
 
@@ -344,19 +292,15 @@
   display: flex;
   justify-content: center;
   position: absolute;
-  margin-top: 0.25rem;
+  padding-bottom: 1.25rem;
-  padding-bottom: 1rem;
 
   .unpin-all-button {
     text-transform: capitalize;
     color: var(--color-black);
-    height: 3.125rem;
+    height: 3.5rem;
     overflow: visible;
-    box-shadow: 0 1px 2px var(--color-default-shadow);
+    transform: scaleX(1);
-
+    transition: transform var(--select-transition), background-color .15s, color .15s;
-    &::before {
-      height: 3.125rem;
-    }
 
     &:hover {
       .icon-unpin {
@@ -365,7 +309,8 @@
     }
 
     .select-mode-active + .middle-column-footer & {
-      display: none;
+      box-shadow: none;
+      transform: scaleX(var(--unpin-hidden-scale));
     }
 
     @media (max-width: 600px) {
@@ -377,6 +322,7 @@
       margin-left: -0.438rem;
       color: var(--color-text-secondary);
       font-size: 1.5rem;
+      transition: color .15s
     }
   }
 

src/components/middle/MiddleColumn.tsx

@@ -183,6 +183,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   const {
     composerHiddenScale, toolbarHiddenScale,
     composerTranslateX, toolbarTranslateX,
+    unpinHiddenScale, toolbarForUnpinHiddenScale,
   } = useMemo(
     () => calculateMiddleFooterTransforms(windowWidth, renderingCanPost),
     [renderingCanPost, windowWidth],
@@ -198,6 +199,8 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
       style={`
         --composer-hidden-scale: ${composerHiddenScale};
         --toolbar-hidden-scale: ${toolbarHiddenScale};
+        --unpin-hidden-scale: ${unpinHiddenScale};
+        --toolbar-unpin-hidden-scale: ${toolbarForUnpinHiddenScale};
         --composer-translate-x: ${composerTranslateX}px;
         --toolbar-translate-x: ${toolbarTranslateX}px;
       `}

src/components/middle/composer/Composer.scss

@@ -5,7 +5,7 @@
     @media (min-width: 601px) {
       position: absolute;
       padding-right: 2rem;
-      margin-top: -.5rem;
+      bottom: 0;
     }
 
     @media (max-width: 600px) {

src/components/middle/helpers/calculateMiddleFooterTransforms.ts

@@ -9,6 +9,7 @@ const MAX_TOOLBAR_WIDTH = 32 * REM;
 const MAX_MESSAGES_LIST_WIDTH = 45.5 * REM;
 const SIDE_COLUMN_MAX_WIDTH = 26.5 * REM;
 const MIN_LEFT_COLUMN_WIDTH = 18 * REM;
+const UNPIN_BUTTON_WIDTH = 16.125 * REM;
 
 export default function calculateMiddleFooterTransforms(windowWidth: number, canPost?: boolean) {
   const sidePadding = windowWidth <= MOBILE_SCREEN_MAX_WIDTH
@@ -28,6 +29,8 @@ export default function calculateMiddleFooterTransforms(windowWidth: number, can
 
   const composerHiddenScale = toolbarWidth / composerWidth;
   const toolbarHiddenScale = composerWidth / toolbarWidth;
+  const unpinHiddenScale = toolbarWidth / UNPIN_BUTTON_WIDTH;
+  const toolbarForUnpinHiddenScale = UNPIN_BUTTON_WIDTH / toolbarWidth;
 
   const composerTranslateX = canPost
     ? (sendButtonWidth / 2) * toolbarHiddenScale
@@ -42,6 +45,8 @@ export default function calculateMiddleFooterTransforms(windowWidth: number, can
     toolbarHiddenScale,
     composerTranslateX,
     toolbarTranslateX,
+    unpinHiddenScale,
+    toolbarForUnpinHiddenScale,
   };
 }
 

src/components/right/RightColumn.scss

@@ -23,7 +23,7 @@
   }
 
   @media (max-width: 1275px) {
-    box-shadow: 0 .25rem .5rem .1rem var(--color-default-shadow);
+    box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
   }
 
   @media (max-width: 600px) {

src/components/ui/Menu.scss

@@ -21,7 +21,7 @@
     margin: 0;
     position: absolute;
     background-color: var(--color-background);
-    box-shadow: 0 .25rem .5rem .1rem var(--color-default-shadow);
+    box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
     border-radius: var(--border-radius-default);
     min-width: 13.5rem;
     z-index: var(--z-menu-bubble);

src/components/ui/Modal.scss

@@ -48,7 +48,7 @@
     min-width: 17.5rem;
     margin: 2rem auto;
     background-color: var(--color-background);
-    box-shadow: 0 .25rem .5rem .1rem var(--color-default-shadow);
+    box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
     border-radius: var(--border-radius-default);
     transform: translate3d(0, -1rem, 0);