Update _AuxPanel.pcss (#10888)

* Fix class names - from m_ to mx_

* Move mx_RoomView_auxPanel from _RoomView.pcss to _AuxPanel.pcss

The class name 'mx_RoomView_auxPanel' belongs to AuxPanel, not RoomView

* Correct naming

* Strictify: mx_RoomView_auxPanel *

* Nest mx_AuxPanel_stateViews_span

* Sort

* Run prettier

* Use custom properties

* Revert "Use custom properties"

This reverts commit fe720d05f4572e74e71887203d43c491f0723a92.

res/css/structures/_RoomView.pcss

@@ -46,14 +46,6 @@ limitations under the License.
     }
 }
 
-.mx_RoomView_auxPanel {
-    min-width: 0px;
-    width: 100%;
-    margin: 0px auto;
-
-    overflow: auto;
-}
-
 .mx_RoomView_auxPanel_hiddenHighlights {
     border-bottom: 1px solid $primary-hairline-color;
     padding: 10px 26px;

res/css/views/rooms/_AuxPanel.pcss

@@ -14,37 +14,47 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.m_RoomView_auxPanel_stateViews {
+.mx_AuxPanel {
-    padding: 5px;
+    min-width: 0px;
-    padding-left: 19px;
+    width: 100%;
-    border-bottom: 1px solid $primary-hairline-color;
+    margin: 0px auto;
-}
 
-.m_RoomView_auxPanel_stateViews_span a {
+    overflow: auto;
-    text-decoration: none;
-    color: inherit;
-}
 
-.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
+    .mx_AuxPanel_stateViews {
-    font-weight: bold;
+        padding: 5px;
-    color: orange;
+        padding-left: 19px;
-}
+        border-bottom: 1px solid $primary-hairline-color;
+    }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
+    .mx_AuxPanel_stateViews_span {
-    font-weight: bold;
+        &[data-severity="warning"] {
-    color: red;
+            font-weight: bold;
-}
+            color: orange;
+        }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
+        &[data-severity="alert"] {
-    font-weight: normal;
+            font-weight: bold;
-}
+            color: red;
+        }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
+        &[data-severity="normal"] {
-    font-weight: normal;
+            font-weight: normal;
-    color: $settings-grey-fg-color;
+        }
-}
 
-.m_RoomView_auxPanel_stateViews_delim {
+        &[data-severity="notice"] {
-    padding: 0 5px;
+            font-weight: normal;
-    color: $settings-grey-fg-color;
+            color: $settings-grey-fg-color;
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+    }
+
+    .mx_AuxPanel_stateViews_delim {
+        padding: 0 5px;
+        color: $settings-grey-fg-color;
+    }
 }

src/components/views/rooms/AuxPanel.tsx

@@ -173,18 +173,14 @@ export default class AuxPanel extends React.Component<IProps, IState> {
                 }
 
                 span = (
-                    <span
+                    <span className="mx_AuxPanel_stateViews_span" data-severity={severity} key={"x-" + stateKey}>
-                        className="m_RoomView_auxPanel_stateViews_span"
-                        data-severity={severity}
-                        key={"x-" + stateKey}
-                    >
                         {span}
                     </span>
                 );
 
                 counters.push(span);
                 counters.push(
-                    <span className="m_RoomView_auxPanel_stateViews_delim" key={"delim" + idx}>
+                    <span className="mx_AuxPanel_stateViews_delim" key={"delim" + idx}>
                         {" "}
                         ─{" "}
                     </span>,
@@ -193,12 +189,12 @@ export default class AuxPanel extends React.Component<IProps, IState> {
 
             if (counters.length > 0) {
                 counters.pop(); // remove last deliminator
-                stateViews = <div className="m_RoomView_auxPanel_stateViews">{counters}</div>;
+                stateViews = <div className="mx_AuxPanel_stateViews">{counters}</div>;
             }
         }
 
         return (
-            <AutoHideScrollbar className="mx_RoomView_auxPanel">
+            <AutoHideScrollbar className="mx_AuxPanel">
                 {stateViews}
                 {this.props.children}
                 {appsDrawer}