Reposition Brave Lion on Windows

app/renderer/components/windowCaptionButtons.js

@@ -53,7 +53,8 @@ class WindowCaptionButtons extends ImmutableComponent {
 
     return <div className={cx({
       fullscreen: this.props.windowMaximized,
-      windowCaptionButtons: true
+      windowCaptionButtons: true,
+      verticallyCenter: this.props.verticallyCenter
     })}>
       <div className='container'>
         <button

js/components/main.js

@@ -909,6 +909,7 @@ class Main extends ImmutableComponent {
                     contextMenuDetail={this.props.windowState.get('contextMenuDetail')}
                     autohide={getSetting(settings.AUTO_HIDE_MENU)}
                     lastFocusedSelector={customTitlebar.lastFocusedSelector} />
+                  <WindowCaptionButtons windowMaximized={customTitlebar.isMaximized} />
                 </div>
                 : null
             }
@@ -969,7 +970,7 @@ class Main extends ImmutableComponent {
               />
               <div className='topLevelEndButtons'>
                 <div className={cx({
-                  extraDragArea: true,
+                  extraDragArea: !customTitlebar.menubarVisible,
                   allowDragging: shouldAllowWindowDrag
                 })} />
                 {
@@ -980,15 +981,21 @@ class Main extends ImmutableComponent {
                   className={cx({
                     navbutton: true,
                     braveShieldsDisabled,
-                    braveShieldsDown: !braverySettings.shieldsUp
+                    braveShieldsDown: !braverySettings.shieldsUp,
+                    leftOfCaptionButton: customTitlebar.captionButtonsVisible && !customTitlebar.menubarVisible
                   })}
                   onClick={this.onBraveMenu} />
+                {
+                  customTitlebar.captionButtonsVisible && !customTitlebar.menubarVisible
+                  ? <span className='buttonSeparator' />
+                  : null
+                }
               </div>
             </div>
           </div>
           {
-            customTitlebar.captionButtonsVisible
-              ? <WindowCaptionButtons windowMaximized={customTitlebar.isMaximized} />
+            customTitlebar.captionButtonsVisible && !customTitlebar.menubarVisible
+              ? <WindowCaptionButtons windowMaximized={customTitlebar.isMaximized} verticallyCenter='true' />
               : null
           }
         </div>

less/button.less

@@ -15,7 +15,7 @@
 
 span.buttonSeparator {
   width: 1px;
-  border-left: 1px solid @gray;
+  border-left: 1px solid #e2e2e2;
   margin: 4px 3px 4px 3px;
 }
 

less/navigationBar.less

@@ -232,6 +232,9 @@
         }
       }
     }
+    .verticallyCenter {
+      justify-content: center;
+    }
   }
 
   // Windows 10 specific styles
@@ -243,16 +246,29 @@
       border: 1px solid #2283d3;
     }
     .windowCaptionButtons {
+      &.verticallyCenter {
+        > .container {
+          height: 100%;
+        }
+      }
+      &:not(.verticallyCenter) {
+        > .container {
+          button.captionButton {
+            height: 29px;
+            &.fullscreen {
+              height: 21px;
+            }
+          }
+        }
+      }
+
       > .container {
         button.captionButton {
           width: 45px;
-          height: 29px;
           border: 0;
           background-color: transparent;
 
-          &.fullscreen {
-            height:21px;
-          }
+          &.fullscreen { }
 
           &.minimize {
             &:hover {
@@ -350,6 +366,9 @@
         }
       }
     }
+    .verticallyCenter {
+      justify-content: center;
+    }
   }
 }
 
@@ -414,8 +433,9 @@
     display: flex;
     cursor: default;
     -webkit-user-select: none;
-    flex-grow: 0;
+    flex-grow: 1;
     margin-top: 2px;
+    height: 19px;
 
     .menubarItem {
       color: black;
@@ -436,6 +456,10 @@
       border: 1px solid #99d1ff !important;
     }
   }
+
+  .windowCaptionButtons {
+    flex-grow: 0;
+  }
 }
 
 // Here I grouped the rules to keep the layout of the top bar consistent.
@@ -499,6 +523,7 @@
   .topLevelEndButtons {
     display: flex;
     flex-direction: row;
+    margin-left: 3px;
 
     .extensionButton {
       -webkit-app-region: no-drag;
@@ -522,6 +547,9 @@
         -webkit-filter: grayscale(100%);
         opacity: 0.4;
       }
+      &.leftOfCaptionButton {
+        margin-right: 1px;
+      }
     }
 
     .extraDragArea {
@@ -812,7 +840,7 @@
     &.endButtons {
       margin-right: 20px;
       @media (max-width: @breakpointNarrowViewport) {
-        margin-right: -5px;
+        margin-right: 0px;
       }
     }
   }