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

@@ -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);
 

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;

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>

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);

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);