Address design issues and set theme at device level

src/components/views/elements/StyledRadioButton.tsx

@@ -29,9 +29,16 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
     }
 
     public render() {
-        const { children, className, ...otherProps } = this.props;
-        return <label className={classnames('mx_RadioButton', className)}>
-            <input type='radio' {...otherProps} />
+        const { children, className, disabled, ...otherProps } = this.props;
+        const _className = classnames(
+            'mx_RadioButton',
+            className,
+            {
+                "mx_RadioButton_disabled": disabled,
+                "mx_RadioButton_enabled": !disabled,
+            });
+        return <label className={_className}>
+            <input type='radio' disabled={disabled} {...otherProps} />
             {/* Used to render the radio button circle */}
             <div><div></div></div>
             <span>{children}</span>

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -110,7 +110,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         // doing getValue in the .catch will still return the value we failed to set,
         // so remember what the value was before we tried to set it so we can revert
         const oldTheme: string = SettingsStore.getValue('theme');
-        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
+        SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
             dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme});
             this.setState({theme: oldTheme});
         });
@@ -316,7 +316,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     render() {
         return (
-            <div className="mx_SettingsTab">
+            <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Customise your appearance")}</div>
                 <div className="mx_SettingsTab_SubHeading">
                     {_t("Appearance Settings only affect this Riot session.")}

src/i18n/strings/en_EN.json

@@ -298,8 +298,8 @@
     "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
     "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
     "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
-    "Light theme": "Light theme",
-    "Dark theme": "Dark theme",
+    "Light": "Light",
+    "Dark": "Dark",
     "You signed in to a new session without verifying it:": "You signed in to a new session without verifying it:",
     "Verify your other session using one of the options below.": "Verify your other session using one of the options below.",
     "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) signed in to a new session without verifying it:",

src/theme.js

@@ -24,8 +24,8 @@ import ThemeWatcher from "./settings/watchers/ThemeWatcher";
 
 export function enumerateThemes() {
     const BUILTIN_THEMES = {
-        "light": _t("Light theme"),
-        "dark": _t("Dark theme"),
+        "light": _t("Light"),
+        "dark": _t("Dark"),
     };
     const customThemes = SettingsStore.getValue("custom_themes");
     const customThemeNames = {};