From 85f5ec3a94402a14667486518353036a2d431f0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 6 Aug 2021 10:27:18 +0200
Subject: [PATCH 1/5] Move LayoutSwitcher into a separate component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .../views/settings/LayoutSwitcher.tsx         | 129 ++++++++++++++++++
 .../tabs/user/AppearanceUserSettingsTab.tsx   |  98 +++----------
 2 files changed, 145 insertions(+), 82 deletions(-)
 create mode 100644 src/components/views/settings/LayoutSwitcher.tsx

diff --git a/src/components/views/settings/LayoutSwitcher.tsx b/src/components/views/settings/LayoutSwitcher.tsx
new file mode 100644
index 0000000000..4796519ee1
--- /dev/null
+++ b/src/components/views/settings/LayoutSwitcher.tsx
@@ -0,0 +1,129 @@
+/*
+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.
+*/
+
+import React from "react";
+import classNames from "classnames";
+import SettingsStore from "../../../settings/SettingsStore";
+import EventTilePreview from "../elements/EventTilePreview";
+import StyledRadioButton from "../elements/StyledRadioButton";
+import { _t } from "../../../languageHandler";
+import { Layout } from "../../../settings/Layout";
+import { SettingLevel } from "../../../settings/SettingLevel";
+
+interface IProps {
+    userId: string;
+    displayName: string;
+    avatarUrl: string;
+    messagePreviewText: string;
+    onLayoutChanged?: (layout: Layout) => void;
+}
+
+interface IState {
+    layout: Layout;
+}
+
+export default class LayoutSwitcher extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            layout: SettingsStore.getValue("layout"),
+        };
+    }
+
+    private onLayoutChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+        const layout = e.target.value as Layout;
+
+        this.setState({ layout: layout });
+        SettingsStore.setValue("layout", null, SettingLevel.DEVICE, layout);
+        this.props.onLayoutChanged(layout);
+    };
+
+    public render(): JSX.Element {
+        const ircClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.IRC,
+        });
+        const groupClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.Group,
+        });
+        const bubbleClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout === Layout.Bubble,
+        });
+
+        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
+            <span className="mx_SettingsTab_subheading">
+                { _t("Message layout") }
+            </span>
+
+            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
+                <label className={ircClasses}>
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.props.messagePreviewText}
+                        layout={Layout.IRC}
+                        userId={this.props.userId}
+                        displayName={this.props.displayName}
+                        avatarUrl={this.props.avatarUrl}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value={Layout.IRC}
+                        checked={this.state.layout === Layout.IRC}
+                        onChange={this.onLayoutChange}
+                    >
+                        { _t("IRC") }
+                    </StyledRadioButton>
+                </label>
+                <label className={groupClasses}>
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.props.messagePreviewText}
+                        layout={Layout.Group}
+                        userId={this.props.userId}
+                        displayName={this.props.displayName}
+                        avatarUrl={this.props.avatarUrl}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value={Layout.Group}
+                        checked={this.state.layout == Layout.Group}
+                        onChange={this.onLayoutChange}
+                    >
+                        { _t("Modern") }
+                    </StyledRadioButton>
+                </label>
+                <label className={bubbleClasses}>
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.props.messagePreviewText}
+                        layout={Layout.Bubble}
+                        userId={this.props.userId}
+                        displayName={this.props.displayName}
+                        avatarUrl={this.props.avatarUrl}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value={Layout.Bubble}
+                        checked={this.state.layout == Layout.Bubble}
+                        onChange={this.onLayoutChange}
+                    >
+                        { _t("Message bubbles") }
+                    </StyledRadioButton>
+                </label>
+            </div>
+        </div>;
+    }
+}
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 44873816dc..e4cae80406 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -37,10 +37,9 @@ import StyledRadioGroup from "../../../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import { UIFeature } from "../../../../../settings/UIFeature";
 import { Layout } from "../../../../../settings/Layout";
-import classNames from 'classnames';
-import StyledRadioButton from '../../../elements/StyledRadioButton';
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 import { compare } from "../../../../../utils/strings";
+import LayoutSwitcher from "../../LayoutSwitcher";
 
 interface IProps {
 }
@@ -243,17 +242,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         this.setState({ customThemeUrl: e.target.value });
     };
 
-    private onLayoutChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-        let layout;
-        switch (e.target.value) {
-            case "irc": layout = Layout.IRC; break;
-            case "group": layout = Layout.Group; break;
-            case "bubble": layout = Layout.Bubble; break;
-        }
-
+    private onLayoutChanged = (layout: Layout): void => {
         this.setState({ layout: layout });
-
-        SettingsStore.setValue("layout", null, SettingLevel.DEVICE, layout);
     };
 
     private onIRCLayoutChange = (enabled: boolean) => {
@@ -391,75 +381,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         </div>;
     }
 
-    private renderLayoutSection = () => {
-        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
-            <span className="mx_SettingsTab_subheading">{ _t("Message layout") }</span>
-
-            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
-                <label className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.IRC,
-                })}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.MESSAGE_PREVIEW_TEXT}
-                        layout={Layout.IRC}
-                        userId={this.state.userId}
-                        displayName={this.state.displayName}
-                        avatarUrl={this.state.avatarUrl}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value="irc"
-                        checked={this.state.layout === Layout.IRC}
-                        onChange={this.onLayoutChange}
-                    >
-                        { _t("IRC") }
-                    </StyledRadioButton>
-                </label>
-                <label className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.Group,
-                })}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.MESSAGE_PREVIEW_TEXT}
-                        layout={Layout.Group}
-                        userId={this.state.userId}
-                        displayName={this.state.displayName}
-                        avatarUrl={this.state.avatarUrl}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value="group"
-                        checked={this.state.layout == Layout.Group}
-                        onChange={this.onLayoutChange}
-                    >
-                        { _t("Modern") }
-                    </StyledRadioButton>
-                </label>
-                <label className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout === Layout.Bubble,
-                })}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.MESSAGE_PREVIEW_TEXT}
-                        layout={Layout.Bubble}
-                        userId={this.state.userId}
-                        displayName={this.state.displayName}
-                        avatarUrl={this.state.avatarUrl}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value="bubble"
-                        checked={this.state.layout == Layout.Bubble}
-                        onChange={this.onLayoutChange}
-                    >
-                        { _t("Message bubbles") }
-                    </StyledRadioButton>
-                </label>
-            </div>
-        </div>;
-    };
-
     private renderAdvancedSection() {
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
@@ -527,6 +448,19 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
     render() {
         const brand = SdkConfig.get().brand;
 
+        let layoutSection;
+        if (SettingsStore.getValue("feature_new_layout_switcher")) {
+            layoutSection = (
+                <LayoutSwitcher
+                    userId={this.state.userId}
+                    displayName={this.state.displayName}
+                    avatarUrl={this.state.avatarUrl}
+                    messagePreviewText={this.MESSAGE_PREVIEW_TEXT}
+                    onLayoutChanged={this.onLayoutChanged}
+                />
+            );
+        }
+
         return (
             <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{ _t("Customise your appearance") }</div>
@@ -534,7 +468,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     { _t("Appearance Settings only affect this %(brand)s session.", { brand }) }
                 </div>
                 { this.renderThemeSection() }
-                { SettingsStore.getValue("feature_new_layout_switcher") ? this.renderLayoutSection() : null }
+                { layoutSection }
                 { this.renderFontSection() }
                 { this.renderAdvancedSection() }
             </div>

From 186acf92a988e7f1b338b59aa8739655e65dde76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 6 Aug 2021 10:30:38 +0200
Subject: [PATCH 2/5] Wrap in ()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .../views/settings/LayoutSwitcher.tsx         | 122 +++++++++---------
 1 file changed, 62 insertions(+), 60 deletions(-)

diff --git a/src/components/views/settings/LayoutSwitcher.tsx b/src/components/views/settings/LayoutSwitcher.tsx
index 4796519ee1..a96161d781 100644
--- a/src/components/views/settings/LayoutSwitcher.tsx
+++ b/src/components/views/settings/LayoutSwitcher.tsx
@@ -63,67 +63,69 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
             mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout === Layout.Bubble,
         });
 
-        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
-            <span className="mx_SettingsTab_subheading">
-                { _t("Message layout") }
-            </span>
+        return (
+            <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
+                <span className="mx_SettingsTab_subheading">
+                    { _t("Message layout") }
+                </span>
 
-            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
-                <label className={ircClasses}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.props.messagePreviewText}
-                        layout={Layout.IRC}
-                        userId={this.props.userId}
-                        displayName={this.props.displayName}
-                        avatarUrl={this.props.avatarUrl}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value={Layout.IRC}
-                        checked={this.state.layout === Layout.IRC}
-                        onChange={this.onLayoutChange}
-                    >
-                        { _t("IRC") }
-                    </StyledRadioButton>
-                </label>
-                <label className={groupClasses}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.props.messagePreviewText}
-                        layout={Layout.Group}
-                        userId={this.props.userId}
-                        displayName={this.props.displayName}
-                        avatarUrl={this.props.avatarUrl}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value={Layout.Group}
-                        checked={this.state.layout == Layout.Group}
-                        onChange={this.onLayoutChange}
-                    >
-                        { _t("Modern") }
-                    </StyledRadioButton>
-                </label>
-                <label className={bubbleClasses}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.props.messagePreviewText}
-                        layout={Layout.Bubble}
-                        userId={this.props.userId}
-                        displayName={this.props.displayName}
-                        avatarUrl={this.props.avatarUrl}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value={Layout.Bubble}
-                        checked={this.state.layout == Layout.Bubble}
-                        onChange={this.onLayoutChange}
-                    >
-                        { _t("Message bubbles") }
-                    </StyledRadioButton>
-                </label>
+                <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
+                    <label className={ircClasses}>
+                        <EventTilePreview
+                            className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                            message={this.props.messagePreviewText}
+                            layout={Layout.IRC}
+                            userId={this.props.userId}
+                            displayName={this.props.displayName}
+                            avatarUrl={this.props.avatarUrl}
+                        />
+                        <StyledRadioButton
+                            name="layout"
+                            value={Layout.IRC}
+                            checked={this.state.layout === Layout.IRC}
+                            onChange={this.onLayoutChange}
+                        >
+                            { _t("IRC") }
+                        </StyledRadioButton>
+                    </label>
+                    <label className={groupClasses}>
+                        <EventTilePreview
+                            className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                            message={this.props.messagePreviewText}
+                            layout={Layout.Group}
+                            userId={this.props.userId}
+                            displayName={this.props.displayName}
+                            avatarUrl={this.props.avatarUrl}
+                        />
+                        <StyledRadioButton
+                            name="layout"
+                            value={Layout.Group}
+                            checked={this.state.layout == Layout.Group}
+                            onChange={this.onLayoutChange}
+                        >
+                            { _t("Modern") }
+                        </StyledRadioButton>
+                    </label>
+                    <label className={bubbleClasses}>
+                        <EventTilePreview
+                            className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                            message={this.props.messagePreviewText}
+                            layout={Layout.Bubble}
+                            userId={this.props.userId}
+                            displayName={this.props.displayName}
+                            avatarUrl={this.props.avatarUrl}
+                        />
+                        <StyledRadioButton
+                            name="layout"
+                            value={Layout.Bubble}
+                            checked={this.state.layout == Layout.Bubble}
+                            onChange={this.onLayoutChange}
+                        >
+                            { _t("Message bubbles") }
+                        </StyledRadioButton>
+                    </label>
+                </div>
             </div>
-        </div>;
+        );
     }
 }

From 25c6b216b0976759d642f963b076bd0bb37b3d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 6 Aug 2021 10:37:42 +0200
Subject: [PATCH 3/5] Move LayoutSwitcher CSS to a separate file
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/_components.scss                      |  1 +
 res/css/views/settings/_LayoutSwitcher.scss   | 90 +++++++++++++++++++
 .../tabs/user/_AppearanceUserSettingsTab.scss | 73 ---------------
 .../views/settings/LayoutSwitcher.tsx         | 22 ++---
 4 files changed, 102 insertions(+), 84 deletions(-)
 create mode 100644 res/css/views/settings/_LayoutSwitcher.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 92d2bfe7f3..4bef7bf14a 100644
--- a/res/css/_components.scss
+++ b/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";
diff --git a/res/css/views/settings/_LayoutSwitcher.scss b/res/css/views/settings/_LayoutSwitcher.scss
new file mode 100644
index 0000000000..1cf312f4d1
--- /dev/null
+++ b/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%;
+            }
+        }
+    }
+}
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index ca5a6f0a66..55124dfde1 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/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;
 
diff --git a/src/components/views/settings/LayoutSwitcher.tsx b/src/components/views/settings/LayoutSwitcher.tsx
index a96161d781..9afdf205f8 100644
--- a/src/components/views/settings/LayoutSwitcher.tsx
+++ b/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", {
-            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.IRC,
+        const ircClasses = classNames("mx_LayoutSwitcher_RadioButton", {
+            mx_LayoutSwitcher_RadioButton_selected: this.state.layout == Layout.IRC,
         });
-        const groupClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.Group,
+        const groupClasses = classNames("mx_LayoutSwitcher_RadioButton", {
+            mx_LayoutSwitcher_RadioButton_selected: this.state.layout == Layout.Group,
         });
-        const bubbleClasses = classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-            mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout === Layout.Bubble,
+        const bubbleClasses = classNames("mx_LayoutSwitcher_RadioButton", {
+            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}

From 6afd75ac3c947d1f792892f964484405a7c28cd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 6 Aug 2021 10:40:26 +0200
Subject: [PATCH 4/5] Update/fix licenses
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/settings/_LayoutSwitcher.scss                     | 1 +
 .../views/settings/tabs/user/_AppearanceUserSettingsTab.scss    | 2 +-
 src/components/views/settings/LayoutSwitcher.tsx                | 2 ++
 .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx      | 2 +-
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/res/css/views/settings/_LayoutSwitcher.scss b/res/css/views/settings/_LayoutSwitcher.scss
index 1cf312f4d1..924fe5ae1b 100644
--- a/res/css/views/settings/_LayoutSwitcher.scss
+++ b/res/css/views/settings/_LayoutSwitcher.scss
@@ -1,4 +1,5 @@
 /*
+Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
 Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 55124dfde1..d8e617a40d 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/settings/LayoutSwitcher.tsx b/src/components/views/settings/LayoutSwitcher.tsx
index 9afdf205f8..dd7accf9a8 100644
--- a/src/components/views/settings/LayoutSwitcher.tsx
+++ b/src/components/views/settings/LayoutSwitcher.tsx
@@ -1,4 +1,6 @@
 /*
+Copyright 2019 New Vector Ltd
+Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
 Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index e4cae80406..cbf0b7916c 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -1,6 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

From b05038ebd5a7722d87d5b64447c7c6f82ffbe308 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 6 Aug 2021 10:47:59 +0200
Subject: [PATCH 5/5] i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/i18n/strings/en_EN.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 70bb1e436b..9a3e10fac3 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1129,6 +1129,10 @@
     "Connecting to integration manager...": "Connecting to integration manager...",
     "Cannot connect to integration manager": "Cannot connect to integration manager",
     "The integration manager is offline or it cannot reach your homeserver.": "The integration manager is offline or it cannot reach your homeserver.",
+    "Message layout": "Message layout",
+    "IRC": "IRC",
+    "Modern": "Modern",
+    "Message bubbles": "Message bubbles",
     "Messages containing keywords": "Messages containing keywords",
     "Error saving notification preferences": "Error saving notification preferences",
     "An error occurred whilst saving your notification preferences.": "An error occurred whilst saving your notification preferences.",
@@ -1241,10 +1245,6 @@
     "Custom theme URL": "Custom theme URL",
     "Add theme": "Add theme",
     "Theme": "Theme",
-    "Message layout": "Message layout",
-    "IRC": "IRC",
-    "Modern": "Modern",
-    "Message bubbles": "Message bubbles",
     "Set the name of a font installed on your system & %(brand)s will attempt to use it.": "Set the name of a font installed on your system & %(brand)s will attempt to use it.",
     "Enable experimental, compact IRC style layout": "Enable experimental, compact IRC style layout",
     "Customise your appearance": "Customise your appearance",