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 {
+        .mx_AppTileMenuBar_widgets_button {
-        --size: 24px; /* Size of the button. Its height and width values should be same */
+            --size: 24px; /* Size of the button. Its height and width values should be same */
 
-        margin: 0 4px;
+            margin: 0 4px;
-        position: relative;
+            position: relative;
-        height: var(--size);
-        width: var(--size);
-
-        &::before,
-        &:hover::after {
-            content: "";
-            position: absolute;
             height: var(--size);
             width: var(--size);
-        }
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-        &::before {
+            &:hover::after {
-            background-color: $muted-fg-color;
+                content: "";
-            mask-position: center;
+                position: absolute;
-            mask-repeat: no-repeat;
+                height: var(--size);
-            mask-size: 12px;
+                width: var(--size);
-        }
+                background-color: $panel-actions;
+                border-radius: 50%;
+                left: 0;
+                top: 0;
+            }
 
-        &:hover::after {
+            .mx_Icon {
-            background-color: $panel-actions;
+                color: $muted-fg-color;
-            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");
         }
     }
 }

res/img/element-icons/maximise-expand.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 4.34778V0.777778C14 0.35 13.65 0 13.2222 0H9.65222C8.96 0 8.61 0.84 9.1 1.33L10.3367 2.56667L2.55889 10.3444L1.32222 9.10778C0.84 8.61778 0 8.96 0 9.65222V13.2222C0 13.65 0.35 14 0.777778 14H4.34778C5.04 14 5.39 13.16 4.9 12.67L3.66333 11.4333L11.4411 3.65556L12.6778 4.89222C13.16 5.38222 14 5.04 14 4.34778Z" fill="#737D8C"/>
+<path d="M14 4.34778V0.777778C14 0.35 13.65 0 13.2222 0H9.65222C8.96 0 8.61 0.84 9.1 1.33L10.3367 2.56667L2.55889 10.3444L1.32222 9.10778C0.84 8.61778 0 8.96 0 9.65222V13.2222C0 13.65 0.35 14 0.777778 14H4.34778C5.04 14 5.39 13.16 4.9 12.67L3.66333 11.4333L11.4411 3.65556L12.6778 4.89222C13.16 5.38222 14 5.04 14 4.34778Z" fill="currentColor"/>
 </svg>

res/img/element-icons/minimise-collapse.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.7855 1.25024L10.4345 4.60126L11.5953 5.76207C12.0553 6.22202 11.7267 7.01049 11.077 7.01049H7.73326C7.33172 7.01049 7.00319 6.68196 7.00319 6.28042V2.9221C7.00319 2.27234 7.79166 1.94381 8.25161 2.40375L9.41242 3.56456L12.7634 0.213545C13.0482 -0.0711818 13.5081 -0.0711818 13.7928 0.213545C14.0703 0.505573 14.0703 0.965517 13.7855 1.25024ZM1.25024 13.7855L4.60126 10.4345L5.76207 11.5953C6.22202 12.0553 7.01049 11.7267 7.01049 11.077V7.73326C7.01049 7.33172 6.68196 7.00319 6.28042 7.00319H2.9221C2.27234 7.00319 1.94381 7.79166 2.40375 8.25161L3.56456 9.41242L0.213545 12.7634C-0.0711818 13.0482 -0.0711818 13.5081 0.213545 13.7928C0.505573 14.0703 0.965517 14.0703 1.25024 13.7855Z" fill="#737D8C"/>
+<path d="M13.7855 1.25024L10.4345 4.60126L11.5953 5.76207C12.0553 6.22202 11.7267 7.01049 11.077 7.01049H7.73326C7.33172 7.01049 7.00319 6.68196 7.00319 6.28042V2.9221C7.00319 2.27234 7.79166 1.94381 8.25161 2.40375L9.41242 3.56456L12.7634 0.213545C13.0482 -0.0711818 13.5081 -0.0711818 13.7928 0.213545C14.0703 0.505573 14.0703 0.965517 13.7855 1.25024ZM1.25024 13.7855L4.60126 10.4345L5.76207 11.5953C6.22202 12.0553 7.01049 11.7267 7.01049 11.077V7.73326C7.01049 7.33172 6.68196 7.00319 6.28042 7.00319H2.9221C2.27234 7.00319 1.94381 7.79166 2.40375 8.25161L3.56456 9.41242L0.213545 12.7634C-0.0711818 13.0482 -0.0711818 13.5081 0.213545 13.7928C0.505573 14.0703 0.965517 14.0703 1.25024 13.7855Z" fill="currentColor"/>
 </svg>

res/img/element-icons/room/ellipsis.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="15.5" cy="10" r="1.5" transform="rotate(180 15.5 10)" fill="#15191E"/>
+    <circle cx="15.5" cy="10" r="1.5" transform="rotate(180 15.5 10)" fill="currentColor"/>
-    <circle cx="10" cy="10" r="1.5" transform="rotate(180 10 10)" fill="#15191E"/>
+    <circle cx="10" cy="10" r="1.5" transform="rotate(180 10 10)" fill="currentColor"/>
-    <circle cx="4.5" cy="10" r="1.5" transform="rotate(180 4.5 10)" fill="#15191E"/>
+    <circle cx="4.5" cy="10" r="1.5" transform="rotate(180 4.5 10)" fill="currentColor"/>
 </svg>

res/img/feather-customised/widget/external-link.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
-    <g fill="none" fill-rule="evenodd" stroke="#212121" stroke-linecap="round" stroke-linejoin="round">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
         <path d="M8.5 6v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h3M7 1h3v3M4.5 6.5L10 1"/>
     </g>
 </svg>

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