3 files changed, 30 insertions, 43 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index b3139362d8..08dc43243b 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -275,7 +275,6 @@ class ApplicationMain {
 
     this.registerWindowListener(windowController);
     this.registerIpcListeners();
-    this.setAppMenu();
     this.addContextMenu(window);
 
     this.windowController = windowController;
@@ -311,6 +310,7 @@ class ApplicationMain {
         break;
       case 'darwin':
         this.installMacOsMenubarAppWindowHandlers(tray, windowController);
+        this.setMacOsAppMenu();
         break;
       case 'linux':
         this.installGenericMenubarAppWindowHandlers(tray, windowController);
@@ -967,7 +967,7 @@ class ApplicationMain {
     // the size of transparent area around arrow on macOS
     const headerBarArrowHeight = 12;
 
-    const options = {
+    const options: Electron.BrowserWindowConstructorOptions = {
       width: 320,
       minWidth: 320,
       height: contentHeight,
@@ -1003,16 +1003,24 @@ class ApplicationMain {
           skipTaskbar: true,
         });
 
-      default:
-        return new BrowserWindow(options);
+      default: {
+        const appWindow = new BrowserWindow({
+          ...options,
+          frame: true,
+        });
+
+        return appWindow;
+      }
     }
   }
 
-  private setAppMenu() {
+  // On macOS, hotkeys are bound to the app menu and won't work if it's not set,
+  // even though the app menu itself is not visible because the app does not appear in the dock.
+  private setMacOsAppMenu() {
     const template: Electron.MenuItemConstructorOptions[] = [
       {
         label: 'Mullvad',
-        submenu: [{ role: 'about' }, { type: 'separator' }, { role: 'quit' }],
+        submenu: [{ role: 'quit' }],
       },
       {
         label: 'Edit',
@@ -1129,7 +1137,7 @@ class ApplicationMain {
 
   private installLinuxWindowCloseHandler(windowController: WindowController) {
     windowController.window.on('close', (closeEvent: Event) => {
-      if (process.platform === 'linux' && this.quitStage !== AppQuitStage.ready) {
+      if (this.quitStage !== AppQuitStage.ready) {
         closeEvent.preventDefault();
         windowController.hide();
       }
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index cc73b1a292..87b9747449 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -23,14 +23,9 @@ const headerBarStyles = {
       paddingLeft: 12,
       paddingRight: 12,
     }),
-    platformOverride: {
-      darwin: Styles.createViewStyle({
-        paddingTop: 24,
-      }),
-      linux: Styles.createViewStyle({
-        appRegion: 'drag',
-      }),
-    },
+    darwin: Styles.createViewStyle({
+      paddingTop: 24,
+    }),
   },
   content: Styles.createViewStyle({
     flexDirection: 'row',
@@ -63,8 +58,7 @@ export default class HeaderBar extends Component<IHeaderBarProps> {
   public render() {
     const style = [
       headerBarStyles.container.base,
-      // @ts-ignore
-      headerBarStyles.container.platformOverride[process.platform],
+      process.platform === 'darwin' ? headerBarStyles.container.darwin : undefined,
       headerBarStyles.barStyle[this.props.barStyle],
       this.props.style,
     ];
@@ -109,31 +103,16 @@ interface ISettingsButtonProps {
   onPress?: () => void;
 }
 
-const settingsBarButtonStyles = {
-  container: {
-    base: Styles.createViewStyle({
-      cursor: 'default',
-      padding: 0,
-      marginLeft: 8,
-    }),
-    platformOverride: {
-      linux: Styles.createViewStyle({
-        appRegion: 'no-drag',
-      }),
-    },
-  },
-};
+const settingsBarButtonStyle = Styles.createButtonStyle({
+  cursor: 'default',
+  padding: 0,
+  marginLeft: 8,
+});
 
 export class SettingsBarButton extends Component<ISettingsButtonProps> {
   public render() {
     return (
-      <Button
-        style={[
-          settingsBarButtonStyles.container.base,
-          // @ts-ignore
-          settingsBarButtonStyles.container.platformOverride[process.platform],
-        ]}
-        onPress={this.props.onPress}>
+      <Button style={settingsBarButtonStyle} onPress={this.props.onPress}>
         <ImageView
           height={24}
           width={24}
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 82a8ed3dbd..dc5b6c91ea 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -28,7 +28,6 @@ const styles = {
     }),
     linux: Styles.createViewStyle({
       paddingTop: 12,
-      appRegion: 'drag',
     }),
   },
   navigationBarTitle: {
@@ -54,7 +53,6 @@ const styles = {
   buttonBarItem: {
     default: Styles.createButtonStyle({
       cursor: 'default',
-      appRegion: 'no-drag',
     }),
     content: Styles.createViewStyle({
       flexDirection: 'row',
@@ -70,7 +68,6 @@ const styles = {
   closeBarItem: {
     default: Styles.createViewStyle({
       cursor: 'default',
-      appRegion: 'no-drag',
     }),
     icon: Styles.createViewStyle({
       flex: 0,
@@ -83,7 +80,6 @@ const styles = {
       padding: 0,
       margin: 0,
       cursor: 'default',
-      appRegion: 'no-drag',
     }),
     content: Styles.createViewStyle({
       flexDirection: 'row',
@@ -447,9 +443,13 @@ interface ICloseBarItemProps {
 
 export class CloseBarItem extends Component<ICloseBarItemProps> {
   public render() {
+    // Use the arrow down icon on Linux, to avoid confusion with the close button in the window
+    // title bar.
+    const iconName = process.platform === 'linux' ? 'icon-close-down' : 'icon-close';
+
     return (
       <Button style={[styles.closeBarItem.default]} onPress={this.props.action}>
-        <ImageView height={24} width={24} style={[styles.closeBarItem.icon]} source="icon-close" />
+        <ImageView height={24} width={24} style={[styles.closeBarItem.icon]} source={iconName} />
       </Button>
     );
   }