Deprecate mx_RightPanel_headerButton class (#10821)

* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g

* Conform the selectors to our naming policy: with flag (--)

- %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g
- %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g

* Update a Jest snapshot

* Move the declarations and Sass variables

- Move Sass variables to the place where they are used

src/components/views/right_panel/HeaderButton.tsx

@@ -45,9 +45,9 @@ export default class HeaderButton extends React.Component<IProps> {
         const { isHighlighted, isUnread = false, onClick, name, title, ...props } = this.props;
 
         const classes = classNames({
-            mx_RightPanel_headerButton: true,
-            mx_RightPanel_headerButton_highlight: isHighlighted,
-            mx_RightPanel_headerButton_unread: isUnread,
+            "mx_RoomHeader_button": true,
+            "mx_RoomHeader_button--highlight": isHighlighted,
+            "mx_RoomHeader_button--unread": isUnread,
             [`mx_RightPanel_${name}`]: true,
         });
 

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -64,14 +64,14 @@ const UnreadIndicator: React.FC<IUnreadIndicatorProps> = ({ color }) => {
 
     const classes = classNames({
         mx_Indicator: true,
-        mx_RightPanel_headerButton_unreadIndicator: true,
+        mx_RoomHeader_button_unreadIndicator: true,
         mx_Indicator_bold: color === NotificationColor.Bold,
         mx_Indicator_gray: color === NotificationColor.Grey,
         mx_Indicator_red: color === NotificationColor.Red,
     });
     return (
         <>
-            <div className="mx_RightPanel_headerButton_unreadIndicator_bg" />
+            <div className="mx_RoomHeader_button_unreadIndicator_bg" />
             <div className={classes} />
         </>
     );