Merge pull request #4893 from matrix-org/t3chguy/room-list/101

Radio button outline fixes including for new room list context menu

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;
 }

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

@@ -193,6 +193,10 @@ limitations under the License.
         .mx_EventTile_content {
             margin-right: 0;
         }
+
+        &.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
+            border-color: $accent-color;
+        }
     }
 
     .mx_RadioButton {

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>

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>;

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>

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 {
 }
@@ -288,6 +289,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         }))}
                         onChange={this.onThemeChange}
                         value={this.state.useSystemTheme ? undefined : this.state.theme}
+                        outlined
                     />
                 </div>
                 {customThemeForm}
@@ -342,8 +344,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_RadioButtons">
-                <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}
@@ -359,7 +363,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     </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}