Use Icon component for icons on AppTile's menu bar (#10955)

* Use icon component for buttons on mx_AppTileMenuBar_widgets

* Remove redundant declarations

* Add a Percy snapshot test

* Set color value to mx_Icon, fill and stroke with currentColor

* Iterate

cypress/e2e/widgets/layout.spec.ts

@@ -95,6 +95,10 @@ describe("Widget Layout", () => {
         cy.stopWebServers();
     });
 
+    it("should be set properly", () => {
+        cy.get(".mx_AppsDrawer").percySnapshotElement("Widgets drawer on the timeline (AppsDrawer)");
+    });
+
     it("manually resize the height of the top container layout", () => {
         cy.get('iframe[title="widget"]').invoke("height").should("be.lessThan", 250);
 

res/css/views/rooms/_AppsDrawer.pcss

@@ -222,60 +222,34 @@ limitations under the License.
     }
 
     .mx_AppTileMenuBar_widgets {
-        float: right;
         display: flex;
-        flex-direction: row;
         align-items: center;
-    }
-
-    .mx_AppTileMenuBar_iconButton {
-        --size: 24px; /* Size of the button. Its height and width values should be same */
 
-        margin: 0 4px;
-        position: relative;
-        height: var(--size);
-        width: var(--size);
+        .mx_AppTileMenuBar_widgets_button {
+            --size: 24px; /* Size of the button. Its height and width values should be same */
 
-        &::before,
-        &:hover::after {
-            content: "";
-            position: absolute;
+            margin: 0 4px;
+            position: relative;
             height: var(--size);
             width: var(--size);
-        }
-
-        &::before {
-            background-color: $muted-fg-color;
-            mask-position: center;
-            mask-repeat: no-repeat;
-            mask-size: 12px;
-        }
-
-        &:hover::after {
-            background-color: $panel-actions;
-            border-radius: 50%;
-            left: 0;
-            top: 0;
-        }
-
-        &.mx_AppTileMenuBar_iconButton--collapse::before {
-            mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
-        }
-
-        &.mx_AppTileMenuBar_iconButton--maximise::before {
-            mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
-        }
-
-        &.mx_AppTileMenuBar_iconButton--minimise::before {
-            mask-image: url("$(res)/img/element-icons/minus-button.svg");
-        }
-
-        &.mx_AppTileMenuBar_iconButton--popout::before {
-            mask-image: url("$(res)/img/feather-customised/widget/external-link.svg");
-        }
-
-        &.mx_AppTileMenuBar_iconButton--menu::before {
-            mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover::after {
+                content: "";
+                position: absolute;
+                height: var(--size);
+                width: var(--size);
+                background-color: $panel-actions;
+                border-radius: 50%;
+                left: 0;
+                top: 0;
+            }
+
+            .mx_Icon {
+                color: $muted-fg-color;
+            }
         }
     }
 }

src/components/views/elements/AppTile.tsx

@@ -40,6 +40,11 @@ import { WidgetContextMenu } from "../context_menus/WidgetContextMenu";
 import WidgetAvatar from "../avatars/WidgetAvatar";
 import LegacyCallHandler from "../../../LegacyCallHandler";
 import { IApp, isAppWidget } from "../../../stores/WidgetStore";
+import { Icon as CollapseIcon } from "../../../../res/img/element-icons/minimise-collapse.svg";
+import { Icon as MaximiseIcon } from "../../../../res/img/element-icons/maximise-expand.svg";
+import { Icon as MinimiseIcon } from "../../../../res/img/element-icons/minus-button.svg";
+import { Icon as PopoutIcon } from "../../../../res/img/feather-customised/widget/external-link.svg";
+import { Icon as MenuIcon } from "../../../../res/img/element-icons/room/ellipsis.svg";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@@ -714,27 +719,31 @@ export default class AppTile extends React.Component<IProps, IState> {
             const isMaximised =
                 this.props.room &&
                 WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center);
-            const maximisedClasses = classNames({
-                "mx_AppTileMenuBar_iconButton": true,
-                "mx_AppTileMenuBar_iconButton--collapse": isMaximised,
-                "mx_AppTileMenuBar_iconButton--maximise": !isMaximised,
-            });
+
             layoutButtons.push(
                 <AccessibleButton
                     key="toggleMaximised"
-                    className={maximisedClasses}
+                    className="mx_AppTileMenuBar_widgets_button"
                     title={isMaximised ? _t("Un-maximise") : _t("Maximise")}
                     onClick={this.onToggleMaximisedClick}
-                />,
+                >
+                    {isMaximised ? (
+                        <CollapseIcon className="mx_Icon mx_Icon_12" />
+                    ) : (
+                        <MaximiseIcon className="mx_Icon mx_Icon_12" />
+                    )}
+                </AccessibleButton>,
             );
 
             layoutButtons.push(
                 <AccessibleButton
                     key="minimise"
-                    className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--minimise"
+                    className="mx_AppTileMenuBar_widgets_button"
                     title={_t("Minimise")}
                     onClick={this.onMinimiseClicked}
-                />,
+                >
+                    <MinimiseIcon className="mx_Icon mx_Icon_12" />
+                </AccessibleButton>,
             );
         }
 
@@ -753,18 +762,22 @@ export default class AppTile extends React.Component<IProps, IState> {
                                 {layoutButtons}
                                 {this.props.showPopout && !this.state.requiresClient && (
                                     <AccessibleButton
-                                        className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--popout"
+                                        className="mx_AppTileMenuBar_widgets_button"
                                         title={_t("Popout widget")}
                                         onClick={this.onPopoutWidgetClick}
-                                    />
+                                    >
+                                        <PopoutIcon className="mx_Icon mx_Icon_12 mx_Icon--stroke" />
+                                    </AccessibleButton>
                                 )}
                                 <ContextMenuButton
-                                    className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--menu"
+                                    className="mx_AppTileMenuBar_widgets_button"
                                     label={_t("Options")}
                                     isExpanded={this.state.menuDisplayed}
                                     inputRef={this.contextMenuButton}
                                     onClick={this.onContextMenuClick}
-                                />
+                                >
+                                    <MenuIcon className="mx_Icon mx_Icon_12" />
+                                </ContextMenuButton>
                             </span>
                         </div>
                     )}

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -120,26 +120,38 @@ exports[`AppTile for a pinned widget should render 1`] = `
         class="mx_AppTileMenuBar_widgets"
       >
         <div
-          class="mx_AccessibleButton mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--collapse"
+          class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
           role="button"
           tabindex="0"
           title="Un-maximise"
-        />
+        >
+          <div
+            class="mx_Icon mx_Icon_12"
+          />
+        </div>
         <div
-          class="mx_AccessibleButton mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--minimise"
+          class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
           role="button"
           tabindex="0"
           title="Minimise"
-        />
+        >
+          <div
+            class="mx_Icon mx_Icon_12"
+          />
+        </div>
         <div
           aria-expanded="false"
           aria-haspopup="true"
           aria-label="Options"
-          class="mx_AccessibleButton mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--menu"
+          class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
           role="button"
           tabindex="0"
           title="Options"
-        />
+        >
+          <div
+            class="mx_Icon mx_Icon_12"
+          />
+        </div>
       </span>
     </div>
     <div