Revert recent composer changes

res/css/_components.scss

@@ -83,7 +83,6 @@
 @import "./views/avatars/_DecoratedRoomAvatar.scss";
 @import "./views/avatars/_WidgetAvatar.scss";
 @import "./views/beta/_BetaCard.scss";
-@import "./views/buttons/_Cancel.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_DeviceContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";

res/css/structures/_RoomView.scss

@@ -32,12 +32,6 @@ limitations under the License.
     position: relative;
 }
 
-.mx_MainSplit_timeline {
-    .mx_MessageComposer_wrapper {
-        margin: $spacing-8 $spacing-16;
-    }
-}
-
 .mx_RoomView_auxPanel {
     min-width: 0px;
     width: 100%;
@@ -161,7 +155,7 @@ limitations under the License.
     .mx_RoomView_messageListWrapper {
         justify-content: flex-start;
 
-        > .mx_RoomView_MessageList > li > ol {
+        >.mx_RoomView_MessageList > li > ol {
             list-style-type: none;
         }
     }

res/css/views/rooms/_MessageComposer.scss

@@ -20,50 +20,31 @@ limitations under the License.
     margin: auto;
     border-top: 1px solid $primary-hairline-color;
     position: relative;
+    padding-left: 42px;
+    padding-right: 16px;
+}
 
-    display: grid;
-    grid-template:
-        "reply    reply"    auto
-        "composer controls" auto
-        / 1fr     auto;
-
-    /* the below is required, without this some unexpected scroll jump
-       will occur when erasing the composer content or jumping to voice note
-       recording */
-    min-height: 45px;
-
-    .mx_ReplyPreview {
-        grid-area: reply;
-    }
-
-    .mx_MessageComposer_row {
-        min-width: 0;
-        grid-area: composer;
-    }
-
-    .mx_MessageComposer_controls {
-        grid-area: controls;
-        display: flex;
-        align-items: flex-end;
-        margin-bottom: 2px;
-    }
-
-    >[role=button] {
-        margin-bottom: 7px;
-    }
+.mx_MessageComposer_replaced_wrapper {
+    margin-left: auto;
+    margin-right: auto;
+}
 
-    .mx_VoiceRecordComposerTile_delete {
-        margin-bottom: 9px;
-    }
+.mx_MessageComposer_replaced_valign {
+    height: 60px;
+    display: table-cell;
+    vertical-align: middle;
+}
 
-    .mx_VoiceRecordComposerTile_stop,
-    .mx_MessageComposer_sendMessage {
-        margin-bottom: $spacing-4;
-    }
+.mx_MessageComposer_roomReplaced_icon {
+    float: left;
+    margin-right: 20px;
+    margin-top: 5px;
+    width: 31px;
+    height: 31px;
+}
 
-    .mx_VoiceMessagePrimaryContainer {
-        margin-right: $spacing-8;
-    }
+.mx_MessageComposer_roomReplaced_header {
+    font-weight: bold;
 }
 
 .mx_MessageComposer_autocomplete_wrapper {
@@ -75,36 +56,7 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     align-items: center;
-    border: 1px solid $quaternary-content;
-    border-radius: 12px;
-    padding: $spacing-12 $spacing-8;
-    margin-right: $spacing-16;
-
-    transition: border-color var(--transition-short);
-
-    &[data-notice=true] {
-        border-color: transparent;
-        color: $secondary-content;
-
-        p {
-            margin: 0;
-            line-height: 0;
-        }
-
-        svg {
-            vertical-align: middle;
-            position: relative;
-            top: -2px;
-        }
-    }
-
-    &:focus-within {
-        border-color: $tertiary-content;
-    }
-
-    &[aria-disabled=true] {
-        cursor: not-allowed;
-    }
+    width: 100%;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
@@ -121,16 +73,22 @@ limitations under the License.
 }
 
 .mx_MessageComposer_e2eIcon.mx_E2EIcon {
-    margin: 0 0 2px;
+    position: absolute;
+    left: 20px;
+    margin-right: 0; // Counteract the E2EIcon class
+    margin-left: 3px; // Counteract the E2EIcon class
     width: 12px;
     height: 12px;
-    align-self: end;
 }
 
 .mx_MessageComposer_noperm_error {
+    width: 100%;
+    height: 60px;
     font-style: italic;
-    color: $tertiary-content;
-    font-size: $font-12px;
+    color: $info-plinth-fg-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .mx_MessageComposer_input_wrapper {
@@ -166,19 +124,13 @@ limitations under the License.
 .mx_MessageComposer_editor > :first-child {
     margin-top: 0 !important;
 }
-
 .mx_MessageComposer_editor > :last-child {
     margin-bottom: 0 !important;
 }
 
 @keyframes visualbell {
-    from {
-        background-color: $visual-bell-bg-color;
-    }
-
-    to {
-        background-color: $background;
-    }
+    from { background-color: $visual-bell-bg-color; }
+    to { background-color: $background; }
 }
 
 .mx_MessageComposer_input_error {
@@ -214,14 +166,12 @@ limitations under the License.
     color: $accent;
     opacity: 1.0;
 }
-
 .mx_MessageComposer_input textarea::-webkit-input-placeholder {
     color: $accent;
 }
 
 .mx_MessageComposer_button_highlight {
     background: rgba($accent, 0.25);
-
     // make the icon the accent color too
     &::before {
         background-color: $accent !important;
@@ -238,7 +188,6 @@ limitations under the License.
     padding-left: var(--size);
     border-radius: 50%;
     margin-right: 6px;
-    margin-bottom: 7px;
 
     &:last-child {
         margin-right: auto;
@@ -312,30 +261,11 @@ limitations under the License.
     mask-image: url('$(res)/img/image-view/more.svg');
 }
 
-.mx_MessageComposer_sendMessageWrapper {
-    --sendMessageSize: 32px;
-    transition: all var(--transition-short);
-}
-
-.mx_MessageComposer_sendMessageWrapper,
-.mx_MessageComposer_sendMessageWrapper-enter,
-.mx_MessageComposer_sendMessageWrapper-exit {
-    width: 0;
-    transform: scale(.6);
-    opacity: 0;
-}
-
-.mx_MessageComposer_sendMessageWrapper-enter-active {
-    width: var(--sendMessageSize);
-    transform: scale(1);
-    opacity: 1;
-}
-
 .mx_MessageComposer_sendMessage {
     cursor: pointer;
     position: relative;
-    width: var(--sendMessageSize);
-    height: var(--sendMessageSize);
+    width: 32px;
+    height: 32px;
     border-radius: 100%;
     background-color: $accent;
 
@@ -428,6 +358,10 @@ limitations under the License.
     .mx_MessageComposer_input {
         min-height: 50px;
     }
+
+    .mx_MessageComposer_noperm_error {
+        height: 50px;
+    }
 }
 
 /**
@@ -437,7 +371,21 @@ limitations under the License.
 .mx_MessageComposer.mx_MessageComposer--compact {
     margin-right: 0;
 
+    .mx_MessageComposer_wrapper {
+        padding: 0 0 0 25px;
+    }
+
+    &:not(.mx_MessageComposer_e2eStatus) {
+        .mx_MessageComposer_wrapper {
+            padding: 0;
+        }
+    }
+
     .mx_MessageComposer_button:last-child {
         margin-right: 0;
     }
+
+    .mx_MessageComposer_e2eIcon {
+        left: 0;
+    }
 }

res/css/views/rooms/_ReplyPreview.scss

@@ -15,44 +15,48 @@ limitations under the License.
 */
 
 .mx_ReplyPreview {
-    border: 1px solid $system;
-
-    margin-left: calc(-1 * $spacing-16);
-    margin-right: calc(-1 * $spacing-16);
-    padding: $spacing-8 $spacing-16 0 $spacing-16;
-
-    border-top-left-radius: 16px;
-    border-top-right-radius: 16px;
-
+    border: 1px solid $primary-hairline-color;
     border-bottom: none;
     background: $background;
     max-height: 50vh;
     overflow: auto;
-}
 
-.mx_ReplyPreview_header {
-    display: flex;
-    font-size: $font-12px;
-    color: $secondary-content;
-    position: relative;
-
-    > svg {
-        width: 1em;
-        vertical-align: middle;
-        margin-right: $spacing-8;
-    }
-
-    .mx_CancelButton {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
+    .mx_ReplyPreview_section {
+        border-bottom: 1px solid $primary-hairline-color;
+        display: flex;
+        flex-flow: column;
+        row-gap: $spacing-8;
+        padding: $spacing-8 $spacing-8 0 $spacing-8;
+
+        .mx_ReplyPreview_header {
+            display: flex;
+            justify-content: space-between;
+            column-gap: 8px;
+
+            color: $primary-content;
+            font-weight: 400;
+            opacity: 0.4;
+
+            .mx_ReplyPreview_header_cancel {
+                background-color: $primary-content;
+                mask: url('$(res)/img/cancel.svg');
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: 18px;
+                width: 18px;
+                height: 18px;
+                min-width: 18px;
+                min-height: 18px;
+            }
+        }
     }
 }
 
-.mx_ReplyPreview_header_cancel {
-    position: absolute;
-    right: 0;
-    color: $primary-content;
-    width: 18px;
+.mx_RoomView_body {
+    .mx_ReplyPreview {
+        // Add box-shadow to the reply preview on the main (left) panel only.
+        // It is not added to the preview on the (right) panel for threads and a chat with a maximized widget.
+        box-shadow: 0px -16px 32px $composer-shadow-color;
+        border-radius: 8px 8px 0 0;
+    }
 }