Make Styled Radio Button outlines default-off

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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

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

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