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/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} />
         </>
     );