Replace mask-images with svg components in MessageActionBar (#9088)

* Use svg components in messageactionbar

* highlight options button in pinned messages mock buttons

Author: Kerry

res/css/structures/_MatrixChat.pcss

@@ -86,7 +86,9 @@ limitations under the License.
     // (IF there is NO margin on the leftPanel_wrapper)
     // The resizeHandle does not change the gap between the left panel and the room view:
     //  the resizeHandle width is:
-    //      11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
+    //      11px =  10px (padding) + 1px (width)
+    //      and the total negative margin is -12px ->
+    //      the handle requires no space
     // right: -6px left: -6px positions the element exactly on the edge of leftPanel.
     // left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
     // We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)

res/css/views/messages/_MessageActionBar.pcss

@@ -89,103 +89,55 @@ limitations under the License.
         }
     }
 
-    .mx_MessageActionBar_maskButton {
+    .mx_MessageActionBar_iconButton {
+        --MessageActionBar-icon-size: 18px;
         width: var(--MessageActionBar-size-button);
         height: var(--MessageActionBar-size-button);
+        color: $secondary-content;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+            height: var(--MessageActionBar-icon-size);
+            width: var(--MessageActionBar-icon-size);
+            flex: 0 0 var(--MessageActionBar-icon-size);
+        }
 
         &:disabled,
         &[disabled] {
             cursor: not-allowed;
             opacity: .75;
         }
 
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-            mask-size: 18px;
-            mask-repeat: no-repeat;
-            mask-position: center;
-            background-color: $secondary-content;
-        }
-
-        &:hover::after {
-            background-color: $primary-content;
-        }
-
-        &.mx_MessageActionBar_reactButton::after {
-            mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
-        }
-
-        &.mx_MessageActionBar_replyButton::after {
-            mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
+        &:hover {
+            color: $primary-content;
         }
 
         &.mx_MessageActionBar_threadButton {
-            &::after {
-                mask-image: url('$(res)/img/element-icons/message/thread.svg');
-            }
 
             .mx_Indicator {
                 background: $links;
                 animation-iteration-count: infinite;
             }
         }
 
-        &.mx_MessageActionBar_favouriteButton::after {
-            mask-image: url('$(res)/img/element-icons/room/message-bar/star.svg');
-        }
-
-        &.mx_MessageActionBar_favouriteButton_fillstar::after {
-            background-color: var(--MessageActionBar-star-button-color);
-        }
-
-        &.mx_MessageActionBar_editButton::after {
-            mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
-        }
-
-        &.mx_MessageActionBar_optionsButton::after {
-            mask-image: url('$(res)/img/element-icons/context-menu.svg');
-        }
-
-        &.mx_MessageActionBar_resendButton::after {
-            mask-image: url('$(res)/img/element-icons/retry.svg');
-        }
-
-        &.mx_MessageActionBar_cancelButton::after {
-            mask-image: url('$(res)/img/element-icons/trashcan.svg');
+        &.mx_MessageActionBar_favouriteButton_fillstar {
+            color: var(--MessageActionBar-star-button-color);
         }
 
         &.mx_MessageActionBar_downloadButton {
-            &::after {
-                mask-size: 14px;
-                mask-image: url('$(res)/img/download.svg');
-            }
+            --MessageActionBar-icon-size: 14px;
 
-            &.mx_MessageActionBar_downloadSpinnerButton::after {
-                background-color: transparent; // hide the download icon mask
+            &.mx_MessageActionBar_downloadSpinnerButton {
+                svg {
+                    display: none; // hide the download icon
+                }
             }
         }
 
-        &.mx_MessageActionBar_expandMessageButton::after {
-            mask-size: 12px;
-            mask-image: url('$(res)/img/element-icons/expand-message.svg');
-        }
-
-        &.mx_MessageActionBar_collapseMessageButton::after {
-            mask-size: 12px;
-            mask-image: url('$(res)/img/element-icons/collapse-message.svg');
-        }
-
-        &.mx_MessageActionBar_viewInRoomButton::after {
-            mask-image: url('$(res)/img/element-icons/view-in-room.svg');
-        }
-
-        &.mx_MessageActionBar_copyLinkButton::after {
-            mask-image: url('$(res)/img/element-icons/link.svg');
+        &.mx_MessageActionBar_expandCollapseMessageButton {
+            --MessageActionBar-icon-size: 12px;
         }
     }
 }

res/css/views/right_panel/_PinnedMessagesCard.pcss

@@ -42,10 +42,7 @@ limitations under the License.
                     background: var(--MessageActionBar-item-hover-background);
                     border-radius: var(--MessageActionBar-item-hover-borderRadius);
                     z-index: var(--MessageActionBar-item-hover-zIndex);
-
-                    &::after {
-                        background-color: $primary-content;
-                    }
+                    color: $primary-content;
                 }
             }
 

res/css/views/rooms/_RoomSublist.pcss

@@ -213,7 +213,8 @@ limitations under the License.
         }
 
         &.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
-            // in this state the div can collapse its height entirely in Chromium, so prevent that by allowing overflow
+            // in this state the div can collapse its height entirely in Chromium,
+            // so prevent that by allowing overflow
             overflow: visible;
             // clear the min-height to make it not collapse entirely in a state with no active resizer
             min-height: unset;