From fabfae172be61fae312ef52e95d10b5a789e6147 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 18 May 2023 08:54:31 +0000
Subject: [PATCH] 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       |  8 ----
 res/css/views/rooms/_AuxPanel.pcss      | 64 ++++++++++++++-----------
 src/components/views/rooms/AuxPanel.tsx | 12 ++---
 3 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss
index 5ddfed21ba..b340c8d994 100644
--- a/res/css/structures/_RoomView.pcss
+++ b/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;
diff --git a/res/css/views/rooms/_AuxPanel.pcss b/res/css/views/rooms/_AuxPanel.pcss
index 04d17c63b9..38b93e414f 100644
--- a/res/css/views/rooms/_AuxPanel.pcss
+++ b/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 {
-    padding: 5px;
-    padding-left: 19px;
-    border-bottom: 1px solid $primary-hairline-color;
-}
+.mx_AuxPanel {
+    min-width: 0px;
+    width: 100%;
+    margin: 0px auto;
 
-.m_RoomView_auxPanel_stateViews_span a {
-    text-decoration: none;
-    color: inherit;
-}
+    overflow: auto;
 
-.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
-    font-weight: bold;
-    color: orange;
-}
+    .mx_AuxPanel_stateViews {
+        padding: 5px;
+        padding-left: 19px;
+        border-bottom: 1px solid $primary-hairline-color;
+    }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
-    font-weight: bold;
-    color: red;
-}
+    .mx_AuxPanel_stateViews_span {
+        &[data-severity="warning"] {
+            font-weight: bold;
+            color: orange;
+        }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
-    font-weight: normal;
-}
+        &[data-severity="alert"] {
+            font-weight: bold;
+            color: red;
+        }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
-    font-weight: normal;
-    color: $settings-grey-fg-color;
-}
+        &[data-severity="normal"] {
+            font-weight: normal;
+        }
 
-.m_RoomView_auxPanel_stateViews_delim {
-    padding: 0 5px;
-    color: $settings-grey-fg-color;
+        &[data-severity="notice"] {
+            font-weight: normal;
+            color: $settings-grey-fg-color;
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+    }
+
+    .mx_AuxPanel_stateViews_delim {
+        padding: 0 5px;
+        color: $settings-grey-fg-color;
+    }
 }
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index dfcc6f27a1..e7f9141629 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -173,18 +173,14 @@ export default class AuxPanel extends React.Component<IProps, IState> {
                 }
 
                 span = (
-                    <span
-                        className="m_RoomView_auxPanel_stateViews_span"
-                        data-severity={severity}
-                        key={"x-" + stateKey}
-                    >
+                    <span className="mx_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}