From c155382445eeb2037ccee45b331cbd65384f8e21 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 21 Jul 2021 14:55:30 +0200
Subject: [PATCH] Improve new layout switcher UI

---
 .../tabs/user/_AppearanceUserSettingsTab.scss | 23 ++++++++++++++-----
 .../tabs/user/AppearanceUserSettingsTab.tsx   | 14 +++++------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 9bc583ea93..ca5a6f0a66 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 .mx_AppearanceUserSettingsTab_fontSlider,
-.mx_AppearanceUserSettingsTab_fontSlider_preview,
-.mx_AppearanceUserSettingsTab_Layout {
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
     @mixin mx_Settings_fullWidthField;
 }
 
@@ -159,13 +158,10 @@ limitations under the License.
 .mx_AppearanceUserSettingsTab_Layout_RadioButtons {
     display: flex;
     flex-direction: row;
+    gap: 24px;
 
     color: $primary-fg-color;
 
-    .mx_AppearanceUserSettingsTab_spacer {
-        width: 24px;
-    }
-
     > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
         flex-grow: 0;
         flex-shrink: 1;
@@ -215,6 +211,21 @@ limitations under the License.
     .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 {
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index bd488f42b6..d1c497b351 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -393,7 +393,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             <span className="mx_SettingsTab_subheading">{ _t("Message layout") }</span>
 
             <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
-                <div className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+                <label className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
                     mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.IRC,
                 })}>
                     <EventTilePreview
@@ -412,9 +412,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     >
                         { _t("IRC") }
                     </StyledRadioButton>
-                </div>
-                <div className="mx_AppearanceUserSettingsTab_spacer" />
-                <div className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+                </label>
+                <label className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
                     mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout == Layout.Group,
                 })}>
                     <EventTilePreview
@@ -433,9 +432,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     >
                         { _t("Modern") }
                     </StyledRadioButton>
-                </div>
-                <div className="mx_AppearanceUserSettingsTab_spacer" />
-                <div className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+                </label>
+                <label className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
                     mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.layout === Layout.Bubble,
                 })}>
                     <EventTilePreview
@@ -454,7 +452,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     >
                         { _t("Message bubbles") }
                     </StyledRadioButton>
-                </div>
+                </label>
             </div>
         </div>;
     };