Merge branch 'monochromatic-icons'

31 files changed, 116 insertions, 7 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac3ffc31c5..f4bb2ec365 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,9 @@ Line wrap the file at 100 chars.                                              Th
   Settings screen.
 - Add a drop-down warning to notify the user when the account credits are running low.
 
+#### macOS
+- Add a monochromatic tray icon option for the GUI.
+
 #### Linux
 - Detect if the computer is offline. If so, don't sit in a reconnect loop, instead block and show
   an error message.
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template.png
new file mode 100644
index 0000000000..d11893684c
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template@2x.png
new file mode 100644
index 0000000000..71a918649c
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-10Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template.png
new file mode 100644
index 0000000000..b20bc19515
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template@2x.png
new file mode 100644
index 0000000000..1c512d12bd
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-1Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template.png
new file mode 100644
index 0000000000..d98d05d951
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template@2x.png
new file mode 100644
index 0000000000..c92dec19ec
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-2Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template.png
new file mode 100644
index 0000000000..871f8402bf
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template@2x.png
new file mode 100644
index 0000000000..d961af45f3
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-3Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template.png
new file mode 100644
index 0000000000..6fcb60c663
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template@2x.png
new file mode 100644
index 0000000000..f67b4c0921
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-4Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template.png
new file mode 100644
index 0000000000..43d02ab1e0
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template@2x.png
new file mode 100644
index 0000000000..1f05adf802
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-5Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template.png
new file mode 100644
index 0000000000..e282ff8dad
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template@2x.png
new file mode 100644
index 0000000000..f76ab999f1
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-6Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template.png
new file mode 100644
index 0000000000..1299817a53
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template@2x.png
new file mode 100644
index 0000000000..f3a1428ad4
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-7Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template.png
new file mode 100644
index 0000000000..161e4f5e82
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template@2x.png
new file mode 100644
index 0000000000..5b12910e4a
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-8Template@2x.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template.png
new file mode 100644
index 0000000000..c823aa87a1
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template.png
diff --git a/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template@2x.png b/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template@2x.png
new file mode 100644
index 0000000000..e4dc28a192
--- /dev/null
+++ b/gui/packages/desktop/src/assets/images/menubar icons/lock-9Template@2x.png
diff --git a/gui/packages/desktop/src/main/gui-settings.js b/gui/packages/desktop/src/main/gui-settings.js
index 2fe3b0178e..3b05261ab9 100644
--- a/gui/packages/desktop/src/main/gui-settings.js
+++ b/gui/packages/desktop/src/main/gui-settings.js
@@ -10,10 +10,12 @@ import type { GuiSettingsState } from '../shared/gui-settings-state';
 
 export default class GuiSettings {
   _state: GuiSettingsState = {
+    monochromaticIcon: false,
     startMinimized: false,
   };
 
   _notify: ?(GuiSettingsState) => void;
+  _monochromaticIconChangeListener: ?(boolean) => void;
 
   load() {
     try {
@@ -21,6 +23,7 @@ export default class GuiSettings {
       const contents = fs.readFileSync(settingsFile, 'utf8');
       const settings = JSON.parse(contents);
 
+      this._state.monochromaticIcon = settings.monochromaticIcon || false;
       this._state.startMinimized = settings.startMinimized || false;
     } catch (error) {
       log.error(`Failed to read GUI settings file: ${error}`);
@@ -41,6 +44,14 @@ export default class GuiSettings {
     return this._state;
   }
 
+  get monochromaticIcon(): boolean {
+    return this._state.monochromaticIcon;
+  }
+
+  onChangeMonochromaticIcon(listener: (boolean) => void) {
+    this._monochromaticIconChangeListener = listener;
+  }
+
   get startMinimized(): boolean {
     return this._state.startMinimized;
   }
@@ -48,6 +59,14 @@ export default class GuiSettings {
   registerIpcHandlers(ipcEventChannel: IpcEventChannel) {
     this._notify = ipcEventChannel.guiSettings.notify;
 
+    ipcEventChannel.guiSettings.handleMonochromaticIcon((monochromaticIcon: boolean) => {
+      this._state.monochromaticIcon = monochromaticIcon;
+      this._settingsChanged();
+
+      if (this._monochromaticIconChangeListener) {
+        this._monochromaticIconChangeListener(monochromaticIcon);
+      }
+    });
     ipcEventChannel.guiSettings.handleStartMinimized((startMinimized: boolean) => {
       this._state.startMinimized = startMinimized;
       this._settingsChanged();
diff --git a/gui/packages/desktop/src/main/index.js b/gui/packages/desktop/src/main/index.js
index 4409526ebc..114dc7c508 100644
--- a/gui/packages/desktop/src/main/index.js
+++ b/gui/packages/desktop/src/main/index.js
@@ -126,9 +126,7 @@ const ApplicationMain = {
       app.setAppUserModelId('net.mullvad.vpn');
     }
 
-    if (process.platform === 'linux') {
-      this._guiSettings.load();
-    }
+    this._guiSettings.load();
 
     app.on('activate', () => this._onActivate());
     app.on('ready', () => this._onReady());
@@ -276,7 +274,11 @@ const ApplicationMain = {
     const tray = this._createTray();
 
     const windowController = new WindowController(window, tray);
-    const trayIconController = new TrayIconController(tray, 'unsecured');
+    const trayIconController = new TrayIconController(
+      tray,
+      'unsecured',
+      process.platform === 'darwin' && this._guiSettings.monochromaticIcon,
+    );
 
     this._registerWindowListener(windowController);
     this._registerIpcListeners();
@@ -300,6 +302,7 @@ const ApplicationMain = {
         break;
       case 'darwin':
         this._installMacOsMenubarAppWindowHandlers(tray, windowController);
+        this._installMonochromaticTrayIconHandler();
         break;
       case 'linux':
         this._installGenericMenubarAppWindowHandlers(tray, windowController);
@@ -996,6 +999,14 @@ const ApplicationMain = {
     });
   },
 
+  _installMonochromaticTrayIconHandler() {
+    this._guiSettings.onChangeMonochromaticIcon((monochromaticIcon) => {
+      if (this._trayIconController) {
+        this._trayIconController.useMonochromaticIcon = monochromaticIcon;
+      }
+    });
+  },
+
   _shouldShowWindowOnStart(): boolean {
     switch (process.platform) {
       case 'win32':
diff --git a/gui/packages/desktop/src/main/keyframe-animation.js b/gui/packages/desktop/src/main/keyframe-animation.js
index fe79eb35a4..3323670d27 100644
--- a/gui/packages/desktop/src/main/keyframe-animation.js
+++ b/gui/packages/desktop/src/main/keyframe-animation.js
@@ -45,6 +45,10 @@ export default class KeyframeAnimation {
     return this._speed;
   }
 
+  get isRunning(): boolean {
+    return this._isRunning;
+  }
+
   get isFinished(): boolean {
     return this._isFinished;
   }
diff --git a/gui/packages/desktop/src/main/tray-icon-controller.js b/gui/packages/desktop/src/main/tray-icon-controller.js
index c6f1e4d321..dbabe6a9a9 100644
--- a/gui/packages/desktop/src/main/tray-icon-controller.js
+++ b/gui/packages/desktop/src/main/tray-icon-controller.js
@@ -11,15 +11,18 @@ export default class TrayIconController {
   _animation: ?KeyframeAnimation;
   _iconType: TrayIconType;
   _iconImages: Array<NativeImage>;
+  _monochromaticIconImages: Array<NativeImage>;
+  _useMonochromaticIcon: boolean;
 
-  constructor(tray: Tray, initialType: TrayIconType) {
+  constructor(tray: Tray, initialType: TrayIconType, useMonochromaticIcon: boolean) {
     this._loadImages();
     this._iconType = initialType;
+    this._useMonochromaticIcon = useMonochromaticIcon;
 
     const initialFrame = this._targetFrame();
     const animation = new KeyframeAnimation();
     animation.speed = 100;
-    animation.onFrame = (frameNumber) => tray.setImage(this._iconImages[frameNumber]);
+    animation.onFrame = (frameNumber) => tray.setImage(this._imageForFrame(frameNumber));
     animation.play({ start: initialFrame, end: initialFrame });
 
     this._animation = animation;
@@ -36,6 +39,14 @@ export default class TrayIconController {
     return this._iconType;
   }
 
+  set useMonochromaticIcon(useMonochromaticIcon: boolean) {
+    this._useMonochromaticIcon = useMonochromaticIcon;
+
+    if (this._animation && !this._animation.isRunning) {
+      this._animation.play({ end: this._targetFrame() });
+    }
+  }
+
   animateToIcon(type: TrayIconType) {
     if (this._iconType === type || !this._animation) {
       return;
@@ -56,6 +67,10 @@ export default class TrayIconController {
     this._iconImages = frames.map((frame) =>
       nativeImage.createFromPath(path.join(basePath, `lock-${frame}.png`)),
     );
+
+    this._monochromaticIconImages = frames.map((frame) =>
+      nativeImage.createFromPath(path.join(basePath, `lock-${frame}Template.png`)),
+    );
   }
 
   _targetFrame(): number {
@@ -70,4 +85,10 @@ export default class TrayIconController {
         throw new Error(`Unknown tray icon type: ${(this._iconType: empty)}`);
     }
   }
+
+  _imageForFrame(frame: number): NativeImage {
+    return this._useMonochromaticIcon
+      ? this._monochromaticIconImages[frame]
+      : this._iconImages[frame];
+  }
 }
diff --git a/gui/packages/desktop/src/renderer/app.js b/gui/packages/desktop/src/renderer/app.js
index f0b4f3244f..88e849cb1d 100644
--- a/gui/packages/desktop/src/renderer/app.js
+++ b/gui/packages/desktop/src/renderer/app.js
@@ -352,6 +352,10 @@ export default class AppRenderer {
     IpcEventChannel.guiSettings.setStartMinimized(startMinimized);
   }
 
+  async setMonochromaticIcon(monochromaticIcon: boolean) {
+    IpcEventChannel.guiSettings.setMonochromaticIcon(monochromaticIcon);
+  }
+
   async _onDaemonConnected() {
     this._connectedToDaemon = true;
 
diff --git a/gui/packages/desktop/src/renderer/components/Preferences.js b/gui/packages/desktop/src/renderer/components/Preferences.js
index 7e82516b68..53ed912798 100644
--- a/gui/packages/desktop/src/renderer/components/Preferences.js
+++ b/gui/packages/desktop/src/renderer/components/Preferences.js
@@ -10,6 +10,7 @@ import {
   NavigationContainer,
   NavigationScrollbars,
   BackBarItem,
+  TitleBarItem,
 } from './NavigationBar';
 import Switch from './Switch';
 import styles from './PreferencesStyles';
@@ -17,13 +18,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,
 };
 
@@ -49,6 +53,7 @@ export default class Preferences extends Component<PreferencesProps, State> {
             <NavigationContainer>
               <NavigationBar>
                 <BackBarItem action={this.props.onClose} title={'Settings'} />
+                <TitleBarItem>Preferences</TitleBarItem>
               </NavigationBar>
 
               <View style={styles.preferences__container}>
@@ -83,6 +88,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 +116,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',
   };
 };
 
diff --git a/gui/packages/desktop/src/renderer/redux/settings/reducers.js b/gui/packages/desktop/src/renderer/redux/settings/reducers.js
index eb10ed91a0..99795c41ba 100644
--- a/gui/packages/desktop/src/renderer/redux/settings/reducers.js
+++ b/gui/packages/desktop/src/renderer/redux/settings/reducers.js
@@ -59,6 +59,7 @@ export type SettingsReduxState = {
 
 const initialState: SettingsReduxState = {
   guiSettings: {
+    monochromaticIcon: false,
     startMinimized: false,
   },
   relaySettings: {
diff --git a/gui/packages/desktop/src/shared/gui-settings-state.js b/gui/packages/desktop/src/shared/gui-settings-state.js
index 5e70295723..4a7ccb572e 100644
--- a/gui/packages/desktop/src/shared/gui-settings-state.js
+++ b/gui/packages/desktop/src/shared/gui-settings-state.js
@@ -1,5 +1,6 @@
 // @flow
 
 export type GuiSettingsState = {
+  monochromaticIcon: boolean,
   startMinimized: boolean,
 };
diff --git a/gui/packages/desktop/src/shared/ipc-event-channel.js b/gui/packages/desktop/src/shared/ipc-event-channel.js
index fa5e92783c..f3c629a418 100644
--- a/gui/packages/desktop/src/shared/ipc-event-channel.js
+++ b/gui/packages/desktop/src/shared/ipc-event-channel.js
@@ -29,10 +29,12 @@ interface Receiver<T> {
 
 interface GuiSettingsMethods {
   setStartMinimized: (boolean) => void;
+  setMonochromaticIcon: (boolean) => void;
 }
 
 interface GuiSettingsHandlers {
   handleStartMinimized: ((boolean) => void) => void;
+  handleMonochromaticIcon: ((boolean) => void) => void;
 }
 
 /// Events names
@@ -47,6 +49,7 @@ const CURRENT_VERSION_CHANGED = 'current-version-changed';
 const UPGRADE_VERSION_CHANGED = 'upgrade-version-changed';
 const GUI_SETTINGS_CHANGED = 'gui-settings-changed';
 
+const SET_MONOCHROMATIC_ICON = 'set-monochromatic-icon';
 const SET_START_MINIMIZED = 'set-start-minimized';
 
 /// Typed IPC event channel
@@ -157,12 +160,14 @@ export default class IpcEventChannel {
 
   static guiSettings: Receiver<GuiSettingsState> & GuiSettingsMethods = {
     listen: listen(GUI_SETTINGS_CHANGED),
+    setMonochromaticIcon: set(SET_MONOCHROMATIC_ICON),
     setStartMinimized: set(SET_START_MINIMIZED),
   };
 
   get guiSettings(): Sender<GuiSettingsState> & GuiSettingsHandlers {
     return {
       notify: sender(this._webContents, GUI_SETTINGS_CHANGED),
+      handleMonochromaticIcon: handler(SET_MONOCHROMATIC_ICON),
       handleStartMinimized: handler(SET_START_MINIMIZED),
     };
   }