Improve composer visiblity (#8578)

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

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;
+    font-size: $font-12px;
+    color: $secondary-content;
+    position: relative;
 
-        .mx_ReplyPreview_header {
-            display: flex;
-            justify-content: space-between;
-            column-gap: 8px;
+    > svg {
+        width: 1em;
+        vertical-align: middle;
+        margin-right: $spacing-8;
+    }
 
-            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_CancelButton {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
     }
 }
 
-.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_ReplyPreview_header_cancel {
+    position: absolute;
+    right: 0;
+    color: $primary-content;
+    width: 18px;
 }