From c8bb6f5904256b58b41fb0ba7a28e3503bf4ea4a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 3 Jul 2020 19:48:22 +0100
Subject: [PATCH] Improve radio outlines for message layout to be more
 consistent

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../tabs/user/_AppearanceUserSettingsTab.scss       |  6 ++++++
 .../tabs/user/AppearanceUserSettingsTab.tsx         | 13 ++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index d724b164e5..df766ab883 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -188,11 +188,17 @@ limitations under the License.
         .mx_RadioButton {
             flex-grow: 0;
             padding: 10px;
+            // create a horizontal separation line between the preview and the radio interaction
+            border-top: 1px solid $input-darker-bg-color;
         }
 
         .mx_EventTile_content {
             margin-right: 0;
         }
+
+        &.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
+            border-color: $accent-color;
+        }
     }
 
     .mx_RadioButton {
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 4b2e09a3e3..0a56fc3cb7 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -34,6 +34,7 @@ import SettingsFlag from '../../../elements/SettingsFlag';
 import Field from '../../../elements/Field';
 import EventTilePreview from '../../../elements/EventTilePreview';
 import StyledRadioGroup from "../../../elements/StyledRadioGroup";
+import classNames from 'classnames';
 
 interface IProps {
 }
@@ -344,8 +345,10 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
             <span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
 
-            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons" >
-                <div className="mx_AppearanceUserSettingsTab_Layout_RadioButton">
+            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
+                <div className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.useIRCLayout,
+                })}>
                     <EventTilePreview
                         className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
                         message={this.MESSAGE_PREVIEW_TEXT}
@@ -356,13 +359,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         value="true"
                         checked={this.state.useIRCLayout}
                         onChange={this.onLayoutChange}
-                        outlined
                     >
                         {_t("Compact")}
                     </StyledRadioButton>
                 </div>
                 <div className="mx_AppearanceUserSettingsTab_spacer" />
-                <div className="mx_AppearanceUserSettingsTab_Layout_RadioButton">
+                <div className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
+                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: !this.state.useIRCLayout,
+                })}>
                     <EventTilePreview
                         className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
                         message={this.MESSAGE_PREVIEW_TEXT}
@@ -373,7 +377,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         value="false"
                         checked={!this.state.useIRCLayout}
                         onChange={this.onLayoutChange}
-                        outlined
                     >
                         {_t("Modern")}
                     </StyledRadioButton>