add help with zoom

src/components/SettingsDrawer.tsx

@@ -10,6 +10,7 @@ import { closeSettings } from '../actions/app';
 import { setBoolean } from '../actions/settings';
 import { RootState } from '../reducers';
 import { SettingId } from '../settings';
+import { isMacOS } from '../utils/os';
 import { SettingsStringId } from './settings-i18n';
 import en from './settings-i18n.en.json';
 
@@ -49,7 +50,16 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                 onClose={() => onClose()}
             >
                 <div className="pb-settings">
-                    <FormGroup label={i18n.translate(SettingsStringId.AppearanceTitle)}>
+                    <FormGroup
+                        label={i18n.translate(SettingsStringId.AppearanceTitle)}
+                        helperText={i18n.translate(
+                            SettingsStringId.AppearanceZoomHelp,
+                            {
+                                in: <span>{isMacOS() ? 'Cmd' : 'Ctrl'}-+</span>,
+                                out: <span>{isMacOS() ? 'Cmd' : 'Ctrl'}--</span>,
+                            },
+                        )}
+                    >
                         <Switch
                             label={i18n.translate(
                                 SettingsStringId.AppearanceDocumentationLabel,

src/components/settings-i18n.en.json

@@ -8,6 +8,9 @@
             },
             "dark-mode": {
                 "label": "Dark mode"
+            },
+            "zoom": {
+                "help": "Use {in} and {out} to zoom."
             }
         }
     }

src/components/settings-i18n.ts

@@ -8,4 +8,5 @@ export enum SettingsStringId {
     AppearanceTitle = 'settings.appearance.title',
     AppearanceDocumentationLabel = 'settings.appearance.documentation.label',
     AppearanceDarkModeLabel = 'settings.appearance.dark-mode.label',
+    AppearanceZoomHelp = 'settings.appearance.zoom.help',
 }

src/components/settings.scss

@@ -8,6 +8,10 @@
 }
 
 .pb-settings .bp3-label {
-    font-size: larger;
+    font-size: 18px;
     font-weight: bolder;
 }
+
+.pb-settings .bp3-form-helper-text {
+    font-size: 14px;
+}