From 9ee24d0b0caf1d2eb18d1467eee1461cc09da7bc Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Thu, 14 Jan 2021 17:14:19 -0600
Subject: [PATCH] add help with zoom

---
 src/components/SettingsDrawer.tsx    | 12 +++++++++++-
 src/components/settings-i18n.en.json |  3 +++
 src/components/settings-i18n.ts      |  1 +
 src/components/settings.scss         |  6 +++++-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/SettingsDrawer.tsx b/src/components/SettingsDrawer.tsx
index d974d443..611461be 100644
--- a/src/components/SettingsDrawer.tsx
+++ b/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,
diff --git a/src/components/settings-i18n.en.json b/src/components/settings-i18n.en.json
index 94a6a92a..4cdbfaed 100644
--- a/src/components/settings-i18n.en.json
+++ b/src/components/settings-i18n.en.json
@@ -8,6 +8,9 @@
             },
             "dark-mode": {
                 "label": "Dark mode"
+            },
+            "zoom": {
+                "help": "Use {in} and {out} to zoom."
             }
         }
     }
diff --git a/src/components/settings-i18n.ts b/src/components/settings-i18n.ts
index 0e7062bb..c56cda37 100644
--- a/src/components/settings-i18n.ts
+++ b/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',
 }
diff --git a/src/components/settings.scss b/src/components/settings.scss
index 6a4d3bf0..e79c6349 100644
--- a/src/components/settings.scss
+++ b/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;
+}