Move LayoutSwitcher CSS to a separate file

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/_components.scss

@@ -240,6 +240,7 @@
 @import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
 @import "./views/settings/_IntegrationManager.scss";
+@import "./views/settings/_LayoutSwitcher.scss";
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";
 @import "./views/settings/_ProfileSettings.scss";

res/css/views/settings/_LayoutSwitcher.scss

@@ -0,0 +1,90 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LayoutSwitcher {
+    .mx_LayoutSwitcher_RadioButtons {
+        display: flex;
+        flex-direction: row;
+        gap: 24px;
+
+        color: $primary-fg-color;
+
+        > .mx_LayoutSwitcher_RadioButton {
+            flex-grow: 0;
+            flex-shrink: 1;
+            display: flex;
+            flex-direction: column;
+
+            width: 300px;
+
+            border: 1px solid $appearance-tab-border-color;
+            border-radius: 10px;
+
+            .mx_EventTile_msgOption,
+            .mx_MessageActionBar {
+                display: none;
+            }
+
+            .mx_LayoutSwitcher_RadioButton_preview {
+                flex-grow: 1;
+                display: flex;
+                align-items: center;
+                padding: 10px;
+                pointer-events: none;
+            }
+
+            .mx_RadioButton {
+                flex-grow: 0;
+                padding: 10px;
+            }
+
+            .mx_EventTile_content {
+                margin-right: 0;
+            }
+
+            &.mx_LayoutSwitcher_RadioButton_selected {
+                border-color: $accent-color;
+            }
+        }
+
+        .mx_RadioButton {
+            border-top: 1px solid $appearance-tab-border-color;
+
+            > input + div {
+                border-color: rgba($muted-fg-color, 0.2);
+            }
+        }
+
+        .mx_RadioButton_checked {
+            background-color: rgba($accent-color, 0.08);
+        }
+
+        .mx_EventTile {
+            margin: 0;
+            &[data-layout=bubble] {
+                margin-right: 40px;
+            }
+            &[data-layout=irc] {
+                > a {
+                    display: none;
+                }
+            }
+            .mx_EventTile_line {
+                max-width: 90%;
+            }
+        }
+    }
+}

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -155,79 +155,6 @@ limitations under the License.
     margin-left: calc($font-16px + 10px);
 }
 
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
-    display: flex;
-    flex-direction: row;
-    gap: 24px;
-
-    color: $primary-fg-color;
-
-    > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
-        flex-grow: 0;
-        flex-shrink: 1;
-        display: flex;
-        flex-direction: column;
-
-        width: 300px;
-
-        border: 1px solid $appearance-tab-border-color;
-        border-radius: 10px;
-
-        .mx_EventTile_msgOption,
-        .mx_MessageActionBar {
-            display: none;
-        }
-
-        .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
-            flex-grow: 1;
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            pointer-events: none;
-        }
-
-        .mx_RadioButton {
-            flex-grow: 0;
-            padding: 10px;
-        }
-
-        .mx_EventTile_content {
-            margin-right: 0;
-        }
-
-        &.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
-            border-color: $accent-color;
-        }
-    }
-
-    .mx_RadioButton {
-        border-top: 1px solid $appearance-tab-border-color;
-
-        > input + div {
-            border-color: rgba($muted-fg-color, 0.2);
-        }
-    }
-
-    .mx_RadioButton_checked {
-        background-color: rgba($accent-color, 0.08);
-    }
-
-    .mx_EventTile {
-        margin: 0;
-        &[data-layout=bubble] {
-            margin-right: 40px;
-        }
-        &[data-layout=irc] {
-            > a {
-                display: none;
-            }
-        }
-        .mx_EventTile_line {
-            max-width: 90%;
-        }
-    }
-}
-
 .mx_AppearanceUserSettingsTab_Advanced {
     color: $primary-fg-color;
 

src/components/views/settings/LayoutSwitcher.tsx

@@ -53,26 +53,26 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
     };
 
     public render(): JSX.Element {
-        const ircClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+        const ircClasses = classNames("mx_LayoutSwitcher_RadioButton", {
-            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.IRC,
+            mx_LayoutSwitcher_RadioButton_selected: this.state.layout == Layout.IRC,
         });
-        const groupClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+        const groupClasses = classNames("mx_LayoutSwitcher_RadioButton", {
-            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.Group,
+            mx_LayoutSwitcher_RadioButton_selected: this.state.layout == Layout.Group,
         });
-        const bubbleClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+        const bubbleClasses = classNames("mx_LayoutSwitcher_RadioButton", {
-            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout === Layout.Bubble,
+            mx_LayoutSwitcher_RadioButton_selected: this.state.layout === Layout.Bubble,
         });
 
         return (
-            <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
+            <div className="mx_SettingsTab_section mx_LayoutSwitcher">
                 <span className="mx_SettingsTab_subheading">
                     { _t("Message layout") }
                 </span>
 
-                <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
+                <div className="mx_LayoutSwitcher_RadioButtons">
                     <label className={ircClasses}>
                         <EventTilePreview
-                            className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                            className="mx_LayoutSwitcher_RadioButton_preview"
                             message={this.props.messagePreviewText}
                             layout={Layout.IRC}
                             userId={this.props.userId}
@@ -90,7 +90,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
                     </label>
                     <label className={groupClasses}>
                         <EventTilePreview
-                            className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                            className="mx_LayoutSwitcher_RadioButton_preview"
                             message={this.props.messagePreviewText}
                             layout={Layout.Group}
                             userId={this.props.userId}
@@ -108,7 +108,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
                     </label>
                     <label className={bubbleClasses}>
                         <EventTilePreview
-                            className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                            className="mx_LayoutSwitcher_RadioButton_preview"
                             message={this.props.messagePreviewText}
                             layout={Layout.Bubble}
                             userId={this.props.userId}