Improve composer visiblity (#8578)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/_components.scss

@@ -83,6 +83,7 @@
 @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,6 +32,12 @@ 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%;
@@ -155,7 +161,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/buttons/_Cancel.scss

@@ -0,0 +1,32 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CancelButton {
+    width: var(--size);
+    height: var(--size);
+
+    box-sizing: border-box;
+    padding: calc(var(--size) / 4);
+    border-radius: 50%;
+
+    line-height: 0;
+    background: $quinary-content;
+
+    svg {
+        width: calc(var(--size) / 2);
+        color: $secondary-content;
+    }
+}

res/css/views/rooms/_MessageComposer.scss

@@ -20,31 +20,48 @@ limitations under the License.
     margin: auto;
     border-top: 1px solid $primary-hairline-color;
     position: relative;
-    padding-left: 42px;
-    padding-right: 16px;
-}
 
-.mx_MessageComposer_replaced_wrapper {
-    margin-left: auto;
-    margin-right: auto;
-}
+    display: grid;
+    grid-template:
+        "reply    reply"    auto
+        "composer controls" auto
+        / 1fr     auto;
 
-.mx_MessageComposer_replaced_valign {
-    height: 60px;
-    display: table-cell;
-    vertical-align: middle;
-}
+    .mx_ReplyPreview {
+        grid-area: reply;
+    }
 
-.mx_MessageComposer_roomReplaced_icon {
-    float: left;
-    margin-right: 20px;
-    margin-top: 5px;
-    width: 31px;
-    height: 31px;
-}
+    .mx_MessageComposer_row {
+        grid-area: composer;
+    }
+
+    .mx_MessageComposer_controls {
+        grid-area: controls;
+        display: flex;
+        align-items: flex-end;
+        margin-bottom: 2px;
+    }
+
+    >[role=button] {
+        margin-bottom: 7px;
+    }
+
+    .mx_VoiceRecordComposerTile_delete {
+        margin-bottom: 9px;
+    }
+
+    .mx_VoiceRecordComposerTile_stop,
+    .mx_MessageComposer_sendMessage {
+        margin-bottom: $spacing-4;
+    }
 
-.mx_MessageComposer_roomReplaced_header {
-    font-weight: bold;
+    .mx_VoiceMessagePrimaryContainer {
+        margin-right: $spacing-8;
+    }
+
+    a {
+        color: $accent;
+    }
 }
 
 .mx_MessageComposer_autocomplete_wrapper {
@@ -56,7 +73,36 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     align-items: center;
-    width: 100%;
+    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;
+    }
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
@@ -73,22 +119,16 @@ limitations under the License.
 }
 
 .mx_MessageComposer_e2eIcon.mx_E2EIcon {
-    position: absolute;
-    left: 20px;
-    margin-right: 0; // Counteract the E2EIcon class
-    margin-left: 3px; // Counteract the E2EIcon class
+    margin: 0 0 2px;
     width: 12px;
     height: 12px;
+    align-self: end;
 }
 
 .mx_MessageComposer_noperm_error {
-    width: 100%;
-    height: 60px;
     font-style: italic;
-    color: $info-plinth-fg-color;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    color: $tertiary-content;
+    font-size: $font-12px;
 }
 
 .mx_MessageComposer_input_wrapper {
@@ -124,13 +164,19 @@ 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 {
@@ -166,12 +212,14 @@ 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;
@@ -188,6 +236,7 @@ limitations under the License.
     padding-left: var(--size);
     border-radius: 50%;
     margin-right: 6px;
+    margin-bottom: 7px;
 
     &:last-child {
         margin-right: auto;
@@ -261,11 +310,30 @@ 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: 32px;
-    height: 32px;
+    width: var(--sendMessageSize);
+    height: var(--sendMessageSize);
     border-radius: 100%;
     background-color: $accent;
 
@@ -358,10 +426,6 @@ limitations under the License.
     .mx_MessageComposer_input {
         min-height: 50px;
     }
-
-    .mx_MessageComposer_noperm_error {
-        height: 50px;
-    }
 }
 
 /**
@@ -371,21 +435,7 @@ 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,48 +15,44 @@ limitations under the License.
 */
 
 .mx_ReplyPreview {
-    border: 1px solid $primary-hairline-color;
+    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-bottom: none;
     background: $background;
     max-height: 50vh;
     overflow: auto;
+}
 
-    .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 {
+    display: flex;
+    font-size: $font-12px;
+    color: $secondary-content;
+    position: relative;
+
+    > svg {
+        width: 1em;
+        vertical-align: middle;
+        margin-right: $spacing-8;
     }
-}
 
-.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;
+    .mx_CancelButton {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
     }
 }
+
+.mx_ReplyPreview_header_cancel {
+    position: absolute;
+    right: 0;
+    color: $primary-content;
+    width: 18px;
+}