Add toggle switch for monochromatic icon setting

2 files changed, 39 insertions, 1 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Preferences.js b/gui/packages/desktop/src/renderer/components/Preferences.js
index 7e82516b68..00957af1dc 100644
--- a/gui/packages/desktop/src/renderer/components/Preferences.js
+++ b/gui/packages/desktop/src/renderer/components/Preferences.js
@@ -17,13 +17,16 @@ import styles from './PreferencesStyles';
 export type PreferencesProps = {
   autoConnect: boolean,
   allowLan: boolean,
-  enableStartMinimizedToggle: boolean,
+  monochromaticIcon: boolean,
   startMinimized: boolean,
+  enableMonochromaticIconToggle: boolean,
+  enableStartMinimizedToggle: boolean,
   getAutoStart: () => boolean,
   setAutoStart: (boolean) => void,
   setAutoConnect: (boolean) => void,
   setAllowLan: (boolean) => void,
   setStartMinimized: (boolean) => void,
+  setMonochromaticIcon: (boolean) => void,
   onClose: () => void,
 };
 
@@ -83,6 +86,12 @@ export default class Preferences extends Component<PreferencesProps, State> {
                       Allows access to other devices on the same network for sharing, printing etc.
                     </Cell.Footer>
 
+                    <MonochromaticIconToggle
+                      enable={this.props.enableMonochromaticIconToggle}
+                      monochromaticIcon={this.props.monochromaticIcon}
+                      onChange={this.props.setMonochromaticIcon}
+                    />
+
                     <StartMinimizedToggle
                       enable={this.props.enableStartMinimizedToggle}
                       startMinimized={this.props.startMinimized}
@@ -105,6 +114,30 @@ export default class Preferences extends Component<PreferencesProps, State> {
   };
 }
 
+type MonochromaticIconProps = {
+  enable: boolean,
+  monochromaticIcon: boolean,
+  onChange: (boolean) => void,
+};
+
+class MonochromaticIconToggle extends Component<MonochromaticIconProps> {
+  render() {
+    if (this.props.enable) {
+      return (
+        <View>
+          <Cell.Container>
+            <Cell.Label>Monochromatic tray icon</Cell.Label>
+            <Switch isOn={this.props.monochromaticIcon} onChange={this.props.onChange} />
+          </Cell.Container>
+          <Cell.Footer>Use a monochromatic tray icon instead of a colored one.</Cell.Footer>
+        </View>
+      );
+    } else {
+      return null;
+    }
+  }
+}
+
 type StartMinimizedProps = {
   enable: boolean,
   startMinimized: boolean,
diff --git a/gui/packages/desktop/src/renderer/containers/PreferencesPage.js b/gui/packages/desktop/src/renderer/containers/PreferencesPage.js
index f383f66b14..a64381aa86 100644
--- a/gui/packages/desktop/src/renderer/containers/PreferencesPage.js
+++ b/gui/packages/desktop/src/renderer/containers/PreferencesPage.js
@@ -13,6 +13,7 @@ import type { SharedRouteProps } from '../routes';
 const mapStateToProps = (state: ReduxState) => ({
   autoConnect: state.settings.autoConnect,
   allowLan: state.settings.allowLan,
+  monochromaticIcon: state.settings.guiSettings.monochromaticIcon,
   startMinimized: state.settings.guiSettings.startMinimized,
 });
 
@@ -46,6 +47,10 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) =>
       props.app.setStartMinimized(startMinimized);
     },
     enableStartMinimizedToggle: process.platform === 'linux',
+    setMonochromaticIcon: (monochromaticIcon) => {
+      props.app.setMonochromaticIcon(monochromaticIcon);
+    },
+    enableMonochromaticIconToggle: process.platform === 'darwin',
   };
 };