From 438d17b9339d096000e428b6aead2406e63dc68f Mon Sep 17 00:00:00 2001
From: Mike Sawka <mike.sawka@gmail.com>
Date: Mon, 4 Mar 2024 11:55:43 -0800
Subject: [PATCH] linux/darwin overrides for logo position and corner rounding
 (#372)

* linux/darwin overrides for logo position and corner rounding

* more perfect border/border-radius on mac
---
 public/themes/default.css             |  6 +++--
 src/app/app.less                      | 35 +++++++++++++++++++++++++--
 src/app/app.tsx                       |  1 +
 src/app/common/elements/mainview.less |  1 -
 src/app/sidebar/sidebar.less          |  1 -
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/public/themes/default.css b/public/themes/default.css
index c69d9549f..32b6536c0 100644
--- a/public/themes/default.css
+++ b/public/themes/default.css
@@ -37,7 +37,7 @@
     --screen-tab-width: 11.4em;
 
     /* floating logo settings */
-    --floating-logo-width-darwin: 110px;
+    --floating-logo-width-darwin: 105px;
     --floating-logo-width: 40px;
     --floating-logo-height: var(--screentabs-height);
 
@@ -52,10 +52,12 @@
     --app-text-secondary-color: rgb(195, 200, 194);
     --app-border-color: rgb(51, 51, 51);
     --app-maincontent-bg-color: #333;
-    --app-border-radius: 10px;
     --app-panel-bg-color: rgba(21, 23, 21, 1);
     --app-panel-bg-color-dev: rgb(21, 23, 48);
 
+    /* just for macos */
+    --app-border-radius-darwin: 10px;
+
     /* global generic colors */
     --app-black: rgb(0, 0, 0);
 
diff --git a/src/app/app.less b/src/app/app.less
index a49dbe3a8..e32cf69d8 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -51,6 +51,34 @@ body input.input {
     }
 }
 
+// platform overrides
+.platform-darwin {
+    border-radius: var(--app-border-radius-darwin);
+
+    .main-content {
+        border-radius: var(--app-border-radius-darwin);
+    }
+
+    .main-content > :first-child {
+        border-top-left-radius: var(--app-border-radius-darwin);
+        border-bottom-left-radius: var(--app-border-radius-darwin);
+    }
+
+    .main-content > .collapsed:first-child + div {
+        border-top-left-radius: var(--app-border-radius-darwin);
+        border-bottom-left-radius: var(--app-border-radius-darwin);
+    }
+
+    .main-content > :last-child {
+        border-top-right-radius: var(--app-border-radius-darwin);
+        border-bottom-right-radius: var(--app-border-radius-darwin);
+    }
+
+    .logo-button-container {
+        width: var(--floating-logo-width-darwin);
+    }
+}
+
 // typography
 .text-s1 {
     font-size: 12.5px;
@@ -271,7 +299,7 @@ a.a-block {
 }
 
 .logo-button-container {
-    width: 105px;
+    width: var(--floating-logo-width);
     flex-shrink: 0;
     position: absolute;
     z-index: 25;
@@ -279,11 +307,14 @@ a.a-block {
     left: 0px;
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
     align-items: center;
     -webkit-app-region: drag;
     pointer-events: none;
 
+    .logo-button-spacer {
+        flex-grow: 1;
+    }
+
     .logo-button {
         width: 25px;
         height: 25px;
diff --git a/src/app/app.tsx b/src/app/app.tsx
index 7d9229dd7..050c1df30 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -120,6 +120,7 @@ class App extends React.Component<{}, {}> {
             >
                 <If condition={sidebarCollapsed}>
                     <div key="logo-button" className="logo-button-container">
+                        <div className="logo-button-spacer" />
                         <div className="logo-button" onClick={this.openSidebar}>
                             <img src="public/logos/wave-logo.png" alt="logo" />
                         </div>
diff --git a/src/app/common/elements/mainview.less b/src/app/common/elements/mainview.less
index 75902ca69..56d3a3f19 100644
--- a/src/app/common/elements/mainview.less
+++ b/src/app/common/elements/mainview.less
@@ -3,7 +3,6 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    border-radius: 0 var(--app-border-radius) var(--app-border-radius) 0;
     border-bottom: 1px solid var(--app-border-color);
     border-right: 1px solid var(--app-border-color);
     border-left: 1px solid var(--app-border-color);
diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index d650933c0..719486bfd 100644
--- a/src/app/sidebar/sidebar.less
+++ b/src/app/sidebar/sidebar.less
@@ -8,7 +8,6 @@
     line-height: 20px;
     backdrop-filter: blur(4px);
     z-index: 20;
-    border-radius: var(--app-border-radius) 0 0 var(--app-border-radius);
     border-left: 1px solid var(--app-border-color);
     border-bottom: 1px solid var(--app-border-color);
     font-size: var(--sidebar-font-size);