Merge branch 'develop' into yaya-usman/patch_2

Author: t3chguy

res/css/structures/_ToastContainer.scss

@@ -108,26 +108,25 @@ limitations under the License.
         }
 
         .mx_Toast_title {
+            display: flex;
+            align-items: center;
+            column-gap: 8px;
             width: 100%;
             box-sizing: border-box;
 
             h2 {
-                grid-column: 1 / 3;
-                grid-row: 1;
                 margin: 0;
                 font-size: $font-15px;
                 font-weight: 600;
                 display: inline;
                 width: auto;
-                vertical-align: middle;
             }
 
-            span {
-                padding-left: 8px;
-                float: right;
+            .mx_Toast_title_countIndicator {
                 font-size: $font-12px;
                 line-height: $font-22px;
                 color: $secondary-content;
+                margin-inline-start: auto; // on the end side of the div
             }
         }
 
@@ -137,17 +136,14 @@ limitations under the License.
         }
 
         .mx_Toast_buttons {
-            float: right;
             display: flex;
+            justify-content: flex-end;
+            column-gap: 5px;
 
             .mx_AccessibleButton {
                 min-width: 96px;
                 box-sizing: border-box;
             }
-
-            .mx_AccessibleButton + .mx_AccessibleButton {
-                margin-left: 5px;
-            }
         }
 
         .mx_Toast_description {

res/css/views/context_menus/_MessageContextMenu.scss

@@ -90,6 +90,22 @@ limitations under the License.
         mask-image: url('$(res)/img/element-icons/room/pin.svg');
     }
 
+    .mx_MessageContextMenu_iconCopy::before {
+        mask-image: url($copy-button-url);
+    }
+
+    .mx_MessageContextMenu_iconEdit::before {
+        mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
+    }
+
+    .mx_MessageContextMenu_iconReply::before {
+        mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
+    }
+
+    .mx_MessageContextMenu_iconReact::before {
+        mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
+    }
+
     .mx_MessageContextMenu_iconViewInRoom::before {
         mask-image: url('$(res)/img/element-icons/view-in-room.svg');
     }

res/css/views/elements/_CopyableText.scss

@@ -18,14 +18,17 @@ limitations under the License.
 .mx_CopyableText {
     display: flex;
     justify-content: space-between;
-    border-radius: 5px;
-    border: solid 1px $light-fg-color;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    padding: 10px;
     width: max-content;
     max-width: 100%;
 
+    &.mx_CopyableText_border {
+        border-radius: 5px;
+        border: solid 1px $light-fg-color;
+        margin-bottom: 10px;
+        margin-top: 10px;
+        padding: 10px;
+    }
+
     .mx_CopyableText_copyButton {
         flex-shrink: 0;
         width: 20px;

res/css/views/elements/_TagComposer.scss

@@ -29,7 +29,9 @@ limitations under the License.
             margin-left: 16px; // distance from <Field>
         }
 
-        .mx_Field, .mx_Field input, .mx_AccessibleButton {
+        .mx_Field,
+        .mx_Field input,
+        .mx_AccessibleButton {
             // So they look related to each other by feeling the same
             border-radius: 8px;
         }
@@ -39,39 +41,48 @@ limitations under the License.
         display: flex;
         flex-wrap: wrap;
         margin-top: 12px; // this plus 12px from the tags makes 24px from the input
+    }
 
-        .mx_TagComposer_tag {
-            padding: 6px 8px 8px 12px;
-            position: relative;
-            margin-right: 12px;
-            margin-top: 12px;
-
-            // Cheaty way to get an opacified variable colour background
-            &::before {
-                content: '';
-                border-radius: 20px;
-                background-color: $tertiary-content;
-                opacity: 0.15;
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-
-                // Pass through the pointer otherwise we have effectively put a whole div
-                // on top of the component, which makes it hard to interact with buttons.
-                pointer-events: none;
-            }
-        }
+    .mx_Tag {
+        margin-right: 12px;
+        margin-top: 12px;
+    }
+}
 
-        .mx_AccessibleButton {
-            background-image: url('$(res)/img/subtract.svg');
-            width: 16px;
-            height: 16px;
-            margin-left: 8px;
-            display: inline-block;
+.mx_Tag {
+
+    font-size: $font-15px;
+
+    display: inline-flex;
+    align-items: center;
+
+    gap: 8px;
+    padding: 8px;
+    border-radius: 8px;
+
+    color: $primary-content;
+    background: $quinary-content;
+
+    >svg:first-child {
+        width: 1em;
+        color: $secondary-content;
+        transform: scale(1.25);
+        transform-origin: center;
+    }
+
+    .mx_Tag_delete {
+        border-radius: 50%;
+        text-align: center;
+        width: 1.066666em; // 16px;
+        height: 1.066666em;
+        line-height: 1em;
+        color: $secondary-content;
+        background: $system;
+        position: relative;
+
+        svg {
+            width: .5em;
             vertical-align: middle;
-            cursor: pointer;
         }
     }
 }