From 5a542281ed49cc2f6d8b58485db5b65ad69eb165 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 3 Jul 2020 19:27:45 +0100
Subject: [PATCH 1/3] Make Styled Radio Button outlines default-off

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/elements/_StyledRadioButton.scss            | 8 +++++---
 .../dialogs/secretstorage/CreateSecretStorageDialog.js    | 2 ++
 src/components/views/elements/StyledRadioButton.tsx       | 6 ++++--
 src/components/views/elements/StyledRadioGroup.tsx        | 4 +++-
 .../settings/tabs/user/AppearanceUserSettingsTab.tsx      | 3 +++
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/res/css/views/elements/_StyledRadioButton.scss b/res/css/views/elements/_StyledRadioButton.scss
index 17a063593f..ffa1337ebb 100644
--- a/res/css/views/elements/_StyledRadioButton.scss
+++ b/res/css/views/elements/_StyledRadioButton.scss
@@ -28,9 +28,6 @@ limitations under the License.
     align-items: baseline;
     flex-grow: 1;
 
-    border: 1px solid $input-darker-bg-color;
-    border-radius: 8px;
-
     > .mx_RadioButton_content {
         flex-grow: 1;
 
@@ -110,6 +107,11 @@ limitations under the License.
     }
 }
 
+.mx_RadioButton_outlined {
+    border: 1px solid $input-darker-bg-color;
+    border-radius: 8px;
+}
+
 .mx_RadioButton_checked {
     border-color: $accent-color;
 }
diff --git a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
index 984158c7a2..4cef817a38 100644
--- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
@@ -444,6 +444,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                     value={CREATE_STORAGE_OPTION_KEY}
                     name="keyPassphrase"
                     checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY}
+                    outlined
                 >
                     <div className="mx_CreateSecretStorageDialog_optionTitle">
                         <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
@@ -456,6 +457,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                     value={CREATE_STORAGE_OPTION_PASSPHRASE}
                     name="keyPassphrase"
                     checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_PASSPHRASE}
+                    outlined
                 >
                     <div className="mx_CreateSecretStorageDialog_optionTitle">
                         <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx
index 3b83666048..2efd084861 100644
--- a/src/components/views/elements/StyledRadioButton.tsx
+++ b/src/components/views/elements/StyledRadioButton.tsx
@@ -18,6 +18,7 @@ import React from 'react';
 import classnames from 'classnames';
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    outlined?: boolean;
 }
 
 interface IState {
@@ -29,7 +30,7 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
     };
 
     public render() {
-        const { children, className, disabled, ...otherProps } = this.props;
+        const { children, className, disabled, outlined, ...otherProps } = this.props;
         const _className = classnames(
             'mx_RadioButton',
             className,
@@ -37,11 +38,12 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
                 "mx_RadioButton_disabled": disabled,
                 "mx_RadioButton_enabled": !disabled,
                 "mx_RadioButton_checked": this.props.checked,
+                "mx_RadioButton_outlined": outlined,
             });
         return <label className={_className}>
             <input type='radio' disabled={disabled} {...otherProps} />
             {/* Used to render the radio button circle */}
-            <div><div></div></div>
+            <div><div /></div>
             <div className="mx_RadioButton_content">{children}</div>
             <div className="mx_RadioButton_spacer" />
         </label>;
diff --git a/src/components/views/elements/StyledRadioGroup.tsx b/src/components/views/elements/StyledRadioGroup.tsx
index ded1342462..ea8f65d12b 100644
--- a/src/components/views/elements/StyledRadioGroup.tsx
+++ b/src/components/views/elements/StyledRadioGroup.tsx
@@ -32,10 +32,11 @@ interface IProps<T extends string> {
     className?: string;
     definitions: IDefinition<T>[];
     value?: T; // if not provided no options will be selected
+    outlined?: boolean;
     onChange(newValue: T);
 }
 
-function StyledRadioGroup<T extends string>({name, definitions, value, className, onChange}: IProps<T>) {
+function StyledRadioGroup<T extends string>({name, definitions, value, className, outlined, onChange}: IProps<T>) {
     const _onChange = e => {
         onChange(e.target.value);
     };
@@ -49,6 +50,7 @@ function StyledRadioGroup<T extends string>({name, definitions, value, className
                 name={name}
                 value={d.value}
                 disabled={d.disabled}
+                outlined={outlined}
             >
                 {d.label}
             </StyledRadioButton>
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index f02147608d..4b2e09a3e3 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -288,6 +288,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         }))}
                         onChange={this.onThemeChange}
                         value={this.state.useSystemTheme ? undefined : this.state.theme}
+                        outlined
                     />
                 </div>
                 {customThemeForm}
@@ -355,6 +356,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         value="true"
                         checked={this.state.useIRCLayout}
                         onChange={this.onLayoutChange}
+                        outlined
                     >
                         {_t("Compact")}
                     </StyledRadioButton>
@@ -371,6 +373,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         value="false"
                         checked={!this.state.useIRCLayout}
                         onChange={this.onLayoutChange}
+                        outlined
                     >
                         {_t("Modern")}
                     </StyledRadioButton>

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 2/3] 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>

From af5f9b7c411cf893f155147700873a1e1eac3132 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 3 Jul 2020 19:53:06 +0100
Subject: [PATCH 3/3] revert dark mode separator colour

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/settings/tabs/user/_AppearanceUserSettingsTab.scss    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index df766ab883..94983a60bf 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -188,8 +188,6 @@ 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 {