Update some class names of AppTile (AppTileMenuBar_iconButton) on the naming policy (#10778)

Author: luixxiul

res/css/views/rooms/_AppsDrawer.pcss

@@ -251,23 +251,23 @@ $MinWidth: 240px;
         width: 24px;
     }
 
-    &.mx_AppTileMenuBar_iconButton_collapse::before {
+    &.mx_AppTileMenuBar_iconButton--collapse::before {
         mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
     }
 
-    &.mx_AppTileMenuBar_iconButton_maximise::before {
+    &.mx_AppTileMenuBar_iconButton--maximise::before {
         mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
     }
 
-    &.mx_AppTileMenuBar_iconButton_minimise::before {
+    &.mx_AppTileMenuBar_iconButton--minimise::before {
         mask-image: url("$(res)/img/element-icons/minus-button.svg");
     }
 
-    &.mx_AppTileMenuBar_iconButton_popout::before {
+    &.mx_AppTileMenuBar_iconButton--popout::before {
         mask-image: url("$(res)/img/feather-customised/widget/external-link.svg");
     }
 
-    &.mx_AppTileMenuBar_iconButton_menu::before {
+    &.mx_AppTileMenuBar_iconButton--menu::before {
         mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
     }
 }

src/components/views/elements/AppTile.tsx

@@ -693,9 +693,9 @@ export default class AppTile extends React.Component<IProps, IState> {
                 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,
+                "mx_AppTileMenuBar_iconButton": true,
+                "mx_AppTileMenuBar_iconButton--collapse": isMaximised,
+                "mx_AppTileMenuBar_iconButton--maximise": !isMaximised,
             });
             layoutButtons.push(
                 <AccessibleButton
@@ -709,7 +709,7 @@ export default class AppTile extends React.Component<IProps, IState> {
             layoutButtons.push(
                 <AccessibleButton
                     key="minimise"
-                    className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_minimise"
+                    className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--minimise"
                     title={_t("Minimise")}
                     onClick={this.onMinimiseClicked}
                 />,
@@ -731,13 +731,13 @@ 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_iconButton mx_AppTileMenuBar_iconButton--popout"
                                         title={_t("Popout widget")}
                                         onClick={this.onPopoutWidgetClick}
                                     />
                                 )}
                                 <ContextMenuButton
-                                    className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_menu"
+                                    className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--menu"
                                     label={_t("Options")}
                                     isExpanded={this.state.menuDisplayed}
                                     inputRef={this.contextMenuButton}