[MM-60605] Fix the Download button being hidden on Windows/Linux (#3148)

* [MM-60605] Fix missing downloads/developer mode icon hidden on Linux and Windows

* Disable for mac

* Fix lint

* Fix misalignment on Windows

* "fix" linux

* Return to inline version, ignore Linux

src/renderer/components/MainPage.tsx

@@ -483,16 +483,17 @@ class MainPage extends React.PureComponent<Props, State> {
                         developerMode={this.state.developerMode}
                     />
                     {downloadsDropdownButton}
-                    {window.process.platform !== 'darwin' && this.state.fullScreen &&
-                        <span className='title-bar-btns'>
+                    {window.process.platform !== 'darwin' && this.state.fullScreen && (
                         <div
-                                className='button full-screen-button'
+                            className={`button full-screen-button${this.props.darkMode ? ' darkMode' : ''}`}
                             onClick={this.handleExitFullScreen}
                         >
                             <i className='icon icon-arrow-collapse'/>
                         </div>
-                        </span>
-                    }
+                    )}
+                    {window.process.platform !== 'darwin' && !this.state.fullScreen && (
+                        <span style={{width: `${window.innerWidth - (window.navigator.windowControlsOverlay?.getTitlebarAreaRect().width ?? 0)}px`}}/>
+                    )}
                 </div>
             </Row>
         );

src/renderer/css/index.css

@@ -113,10 +113,6 @@ body {
   color: rgba(243,243,243,0.7);
 }
 
-.topBar.darkMode .title-bar-btns {
-  color: rgba(243,243,243,0.7);
-}
-
 .topBar .app-title {
   position: absolute;
   top: 0;
@@ -139,58 +135,43 @@ body {
   color: rgba(221,221,221,0.64);
 }
 
-.topBar .title-bar-btns {
-  position: relative;
-  line-height: 40px;
-  height: 40px;
-  z-index: 9;
-  color: rgba(61,60,64,0.7);
-  -webkit-app-region: no-drag;
-  display: grid;
-  grid-template-columns: repeat(3, 46px);
-}
-
-.topBar .title-bar-btns>.button {
-  grid-row: 1 / span 1;
-  display: flex;
-  justify-content: center;
+.full-screen-button {
   align-items: center;
-  width: 100%;
-  height: 100%;
-  user-select: none;
-}
+  background: transparent;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 4px;
+  position: relative;
+  width: 32px;
 
-.topBar.darkMode .title-bar-btns>.button:hover {
-  background: rgba(255,255,255,0.1);
-}
+  i {
+      color: rgba(63, 67, 80, 0.56);
+      cursor: pointer;
+      font-size: 21px;
+      line-height: 21px;
+  }
 
-.topBar.darkMode .title-bar-btns>.button:active {
-  background: rgba(255,255,255,0.2);
-}
+  &:hover, &:focus {
+      i {
+          color: rgba(63, 67, 80, 0.78);
+      }
+  }
 
-.topBar .title-bar-btns>.button:hover {
-  background: rgba(0,0,0,0.1);
-}
+  &.darkMode {
+      i {
+          color: rgba(221, 223, 228, 0.56);
+      }
 
-.topBar .title-bar-btns>.button:active {
-  background: rgba(0,0,0,0.2);
-}
-
-.topBar .title-bar-btns>.full-screen-button {
-  font-size: 18px;
-}
-
-.topBar .title-bar-btns img {
-  opacity: 0.7;
-}
-
-.topBar.darkMode .title-bar-btns img {
-  filter: invert(100%);
-  -webkit-filter: invert(100%);
-}
-
-.topBar .title-bar-btns>.close-button, .topBar .title-bar-btns>.full-screen-button {
-  grid-column: 3;
+      &:hover, &:focus {
+          i {
+              color: rgba(221, 223, 228, 0.78);
+          }
+      }
+  }
 }
 
 .topBar .overlay-gradient {

src/types/window.ts

@@ -155,4 +155,10 @@ declare global {
             };
         };
     }
+
+    interface Navigator {
+        windowControlsOverlay?: {
+            getTitlebarAreaRect: () => DOMRect;
+        };
+    }
 }