Merge branch 'remove-macos-window-arrow'

7 files changed, 30 insertions, 82 deletions

diff --git a/gui/src/main/window-controller.ts b/gui/src/main/window-controller.ts
index 0c3e5bb36c..dbe4a8e983 100644
--- a/gui/src/main/window-controller.ts
+++ b/gui/src/main/window-controller.ts
@@ -20,9 +20,6 @@ export interface WindowControllerDelegate {
   isUnpinnedWindow(): boolean;
 }
 
-// Tray applications are positioned aproximately 10px from the tray in Windows 11.
-const MARGIN = isWindows11OrNewer() ? 10 : 0;
-
 class StandaloneWindowPositioning implements IWindowPositioning {
   public getPosition(window: BrowserWindow): IPosition {
     const windowBounds = window.getBounds();
@@ -59,27 +56,29 @@ class AttachedToTrayWindowPositioning implements IWindowPositioning {
     const maxX = workArea.x + workArea.width - windowBounds.width;
     const maxY = workArea.y + workArea.height - windowBounds.height;
 
+    const margin = this.getWindowMargin();
+
     let x = 0;
     let y = 0;
 
     switch (placement) {
       case 'top':
         x = trayBounds.x + (trayBounds.width - windowBounds.width) * 0.5;
-        y = workArea.y + MARGIN;
+        y = workArea.y + margin;
         break;
 
       case 'bottom':
         x = trayBounds.x + (trayBounds.width - windowBounds.width) * 0.5;
-        y = workArea.y + workArea.height - windowBounds.height - MARGIN;
+        y = workArea.y + workArea.height - windowBounds.height - margin;
         break;
 
       case 'left':
-        x = workArea.x + MARGIN;
+        x = workArea.x + margin;
         y = trayBounds.y + (trayBounds.height - windowBounds.height) * 0.5;
         break;
 
       case 'right':
-        x = workArea.width - windowBounds.width - MARGIN;
+        x = workArea.width - windowBounds.width - margin;
         y = trayBounds.y + (trayBounds.height - windowBounds.height) * 0.5;
         break;
 
@@ -132,6 +131,17 @@ class AttachedToTrayWindowPositioning implements IWindowPositioning {
         return 'none';
     }
   }
+
+  private getWindowMargin() {
+    if (isWindows11OrNewer()) {
+      // Tray applications are positioned aproximately 10px from the tray in Windows 11.
+      return 10;
+    } else if (process.platform === 'darwin') {
+      return 5;
+    } else {
+      return 0;
+    }
+  }
 }
 
 export default class WindowController {
@@ -304,12 +314,6 @@ export default class WindowController {
     const contentHeight = 568;
 
     switch (process.platform) {
-      case 'darwin': {
-        // The size of transparent area around arrow on macOS.
-        const headerBarArrowHeight = 12;
-
-        return unpinnedWindow ? contentHeight : contentHeight + headerBarArrowHeight;
-      }
       case 'win32':
         // On Windows the app height ends up slightly lower than we set it to if running in unpinned
         // mode and the app becomes a tiny bit taller when pinned to task bar.
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index f9127ffd77..faaf784aed 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -40,7 +40,6 @@ import ErrorBoundary from './components/ErrorBoundary';
 import KeyboardNavigation from './components/KeyboardNavigation';
 import MacOsScrollbarDetection from './components/MacOsScrollbarDetection';
 import { ModalContainer } from './components/Modal';
-import PlatformWindowContainer from './containers/PlatformWindowContainer';
 import { AppContext } from './context';
 import History, { ITransitionSpecification, transitions } from './lib/history';
 import { loadTranslations } from './lib/load-translations';
@@ -102,7 +101,6 @@ export default class AppRenderer {
   private tunnelState!: TunnelState;
   private settings!: ISettings;
   private deviceState?: DeviceState;
-  private guiSettings!: IGuiSettingsState;
   private loginState: LoginState = 'none';
   private previousLoginState: LoginState = 'none';
   private loginScheduler = new Scheduler();
@@ -271,17 +269,15 @@ export default class AppRenderer {
       <AppContext.Provider value={{ app: this }}>
         <Provider store={this.reduxStore}>
           <Router history={this.history.asHistory}>
-            <PlatformWindowContainer>
-              <ErrorBoundary>
-                <ModalContainer>
-                  <KeyboardNavigation>
-                    <AppRouter />
-                    <Changelog />
-                  </KeyboardNavigation>
-                  {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
-                </ModalContainer>
-              </ErrorBoundary>
-            </PlatformWindowContainer>
+            <ErrorBoundary>
+              <ModalContainer>
+                <KeyboardNavigation>
+                  <AppRouter />
+                  <Changelog />
+                </KeyboardNavigation>
+                {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
+              </ModalContainer>
+            </ErrorBoundary>
           </Router>
         </Provider>
       </AppContext.Provider>
@@ -535,13 +531,7 @@ export default class AppRenderer {
   // the one we have set.
   // https://github.com/electron/electron/issues/28777
   private checkContentHeight(resize: boolean): void {
-    let expectedContentHeight = 568;
-
-    // The app content is 12px taller on macOS to fit the top arrow.
-    if (window.env.platform === 'darwin' && !this.guiSettings.unpinnedWindow) {
-      expectedContentHeight += 12;
-    }
-
+    const expectedContentHeight = 568;
     const contentHeight = window.innerHeight;
     if (contentHeight !== expectedContentHeight) {
       log.verbose(
@@ -874,7 +864,6 @@ export default class AppRenderer {
   }
 
   private setGuiSettings(guiSettings: IGuiSettingsState) {
-    this.guiSettings = guiSettings;
     this.reduxActions.settings.updateGuiSettings(guiSettings);
   }
 
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index ab0284cfaf..8a9ea40a9d 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -32,7 +32,6 @@ interface IHeaderBarContainerProps {
 
 const HeaderBarContainer = styled.header({}, (props: IHeaderBarContainerProps) => ({
   padding: '12px 16px',
-  paddingTop: window.env.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
   backgroundColor: headerBarStyleColorMap[props.barStyle ?? HeaderBarStyle.default],
 }));
 
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 7e231646ce..0b119efe30 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -180,10 +180,9 @@ interface INavigationBarProps {
 
 export const NavigationBar = function NavigationBarT(props: INavigationBarProps) {
   const { showsBarSeparator, showsBarTitle } = useContext(NavigationScrollContext);
-  const unpinnedWindow = useSelector((state) => state.settings.guiSettings.unpinnedWindow);
 
   return (
-    <StyledNavigationBar unpinnedWindow={unpinnedWindow}>
+    <StyledNavigationBar>
       <TitleBarItemContext.Provider
         value={{ visible: props.alwaysDisplayBarTitle || showsBarTitle }}>
         {props.children}
diff --git a/gui/src/renderer/components/NavigationBarStyles.tsx b/gui/src/renderer/components/NavigationBarStyles.tsx
index e3b879908e..d773c868d8 100644
--- a/gui/src/renderer/components/NavigationBarStyles.tsx
+++ b/gui/src/renderer/components/NavigationBarStyles.tsx
@@ -20,11 +20,10 @@ export const StyledNavigationItems = styled.div({
   alignItems: 'center',
 });
 
-export const StyledNavigationBar = styled.nav((props: { unpinnedWindow: boolean }) => ({
+export const StyledNavigationBar = styled.nav({
   flex: 0,
   padding: '12px',
-  paddingTop: window.env.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
-}));
+});
 
 export const StyledTitleBarItemLabel = styled.h1(normalText, (props: { visible?: boolean }) => ({
   fontWeight: 400,
diff --git a/gui/src/renderer/components/PlatformWindow.tsx b/gui/src/renderer/components/PlatformWindow.tsx
deleted file mode 100644
index 9b18f5f726..0000000000
--- a/gui/src/renderer/components/PlatformWindow.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-const ARROW_WIDTH = 30;
-
-interface IPlatformWindowProps {
-  arrowPosition?: number;
-  unpinnedWindow: boolean;
-}
-
-export default styled.div({}, (props: IPlatformWindowProps) => {
-  let mask: string | undefined;
-
-  if (window.env.platform === 'darwin' && !props.unpinnedWindow) {
-    const arrowPositionCss =
-      props.arrowPosition !== undefined ? `${props.arrowPosition - ARROW_WIDTH * 0.5}px` : '50%';
-
-    mask = [
-      `url(../../assets/images/app-triangle.svg) ${arrowPositionCss} 0% no-repeat`,
-      'url(../../assets/images/app-header-backdrop.svg) no-repeat',
-    ].join(',');
-  }
-
-  return {
-    position: 'relative',
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    mask,
-  };
-});
diff --git a/gui/src/renderer/containers/PlatformWindowContainer.tsx b/gui/src/renderer/containers/PlatformWindowContainer.tsx
deleted file mode 100644
index 9652a54a6c..0000000000
--- a/gui/src/renderer/containers/PlatformWindowContainer.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { connect } from 'react-redux';
-
-import PlatformWindow from '../components/PlatformWindow';
-import { IReduxState } from '../redux/store';
-
-const mapStateToProps = (state: IReduxState) => ({
-  arrowPosition: state.userInterface.arrowPosition,
-  unpinnedWindow: state.settings.guiSettings.unpinnedWindow,
-});
-
-export default connect(mapStateToProps)(PlatformWindow);