mac titlebar design fix

src/App.vue

 <template>
-    <div id="app" tabindex="-1" v-on:keydown.esc="closeOverlays()">
+    <div id="app" :class="platform != 'darwin' ? 'app' : 'app-darwin'" tabindex="-1" v-on:keydown.esc="closeOverlays()">
         <WindowTitleBar />
 
         <main>
@@ -48,6 +48,7 @@
         },
         data: function() {
             return {
+                platform: "win32",
                 downloadQueue: [],
                 finishedQueue: [],
                 failedQueue: [],
@@ -58,6 +59,8 @@
             }
         },
         mounted: function() {
+            this.$data.platform = process.platform;
+            
             document.addEventListener('auxclick', function(e) {
                 e.preventDefault();
             });
@@ -238,6 +241,9 @@
         right: 0px;
         overflow-y: scroll;
     }
+    .app-darwin main {
+        top: 40px;
+    }
     button, .button {
         font-family: 'Open Sans', sans-serif;
         font-size: 12px;

src/background.js

@@ -63,10 +63,12 @@ function createWindow () {
   win = new BrowserWindow({
     title: "SpinSha.re",
     width: 1350,
-    height: 730,
-    minHeight: 730,
+    height: 740,
+    minHeight: 740,
     minWidth: 1350,
     frame: false,
+    backgroundColor: '#212629',
+    titleBarStyle: 'hiddenInset',
     webPreferences: {
       nodeIntegration: true
     }

src/components/Navigation/Navigation.vue

@@ -113,4 +113,7 @@
             }
         }
     }
+    .app-darwin aside {
+        top: 40px;
+    }
 </style>

src/components/Overlays/DeleteOverlay.vue

@@ -99,4 +99,7 @@
             }
         }
     }
+    .app-darwin .delete-overlay {
+        top: 40px;
+    }
 </style>

src/components/Overlays/DownloadOverlay.vue

@@ -33,14 +33,6 @@
         props: [
             'downloadQueue'
         ],
-        mounted: function() {
-            ipcRenderer.on("overlays-close", () => {
-                this.close();
-            });
-            ipcRenderer.on('downloadProgress', (event, data) => {
-                this.$data.downloadProgress = data
-            });
-        },
         data: function() {
             return {
                 showUpdateOverlay: false,
@@ -49,6 +41,14 @@
                 downloadProgress: 0
             }
         },
+        mounted: function() {
+            ipcRenderer.on("overlays-close", () => {
+                this.close();
+            });
+            ipcRenderer.on('downloadProgress', (event, data) => {
+                this.$data.downloadProgress = data
+            });
+        },
         methods: {
             close() {
                 this.$root.$emit('hideDownloadOverlay');
@@ -150,4 +150,7 @@
             }
         }
     }
+    .app-darwin .download-overlay {
+        top: 40px;
+    }
 </style>

src/components/Overlays/PlayOverlay.vue

@@ -130,4 +130,7 @@
             }
         }
     }
+    .app-darwin .play-overlay {
+        top: 40px;
+    }
 </style>

src/components/Overlays/UpdateOverlay.vue

@@ -107,4 +107,7 @@
             }
         }
     }
+    .app-darwin .update-overlay {
+        top: 40px;
+    }
 </style>

src/components/WindowTitleBar.vue

@@ -4,7 +4,7 @@
             <div class="back" v-on:click="NavigateBack()"><i class="mdi mdi-arrow-left"></i></div>
             <div class="text">SpinShare</div>
         </div>
-        <div class="actions-windows" v-if="platform != 'darwin'">
+        <div class="actions" v-if="platform != 'darwin'">
             <div class="action" v-on:click="WindowMinimize()"><i class="mdi mdi-window-minimize"></i></div>
             <div class="action" v-on:click="WindowMaximize()" v-if="!isMaximized"><i class="mdi mdi-window-maximize"></i></div>
             <div class="action" v-on:click="WindowMaximize()" v-if="isMaximized"><i class="mdi mdi-window-restore"></i></div>
@@ -25,7 +25,8 @@
             }
         },
         mounted: function() {
-            this.$data.system = process.platform;
+            this.$data.platform = process.platform;
+
             if(remote.BrowserWindow.getFocusedWindow()) {
                 this.$data.isMaximized = remote.BrowserWindow.getFocusedWindow().isMaximized();
             }
@@ -94,7 +95,7 @@
             }
         }
 
-        & .actions-windows {
+        & .actions {
             display: grid;
             grid-template-columns: 1fr 1fr 1fr;
 
@@ -115,4 +116,15 @@
             }
         }
     }
+    .app-darwin .window-title-bar {
+        height: 40px;
+
+        & .title {
+            padding-left: 80px;
+
+            & .back {
+                height: 40px;
+            }
+        }
+    }
 </style>