factored out window styling to app.vue and other style improvments

src/App.vue

@@ -1,10 +1,26 @@
 <template>
   <div id="app">
+
+    <button class="titlebar">
+
+      <!-- Menu -->
+      <span class="menu">
+        <button class="menuButton exitButton"></button>
+        <button class="menuButton minimizeButton"></button>
+      </span>
+
+    </button>
+
+
+
+    <!-- Windows -->
     <router-view/>
+
   </div>
 </template>
 
 <style lang="scss">
+
   html, body {
     margin: 0;
     padding: 0;
@@ -14,13 +30,62 @@
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-align: center;
+
     color: #2c3e50;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      height: 100vh;
-      width: 100vw;
+
+    height: 100vh;
+    width: 100vw;
+
+    background-color: #EBEBEB;
+    border-radius: 15px;
    }
+
+  .titlebar {
+    position: fixed;
+
+    display: flex;
+
+    width: 100vw;
+    height: 54px;
+
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+
+    background-color: #EBEBEB;
+
+    border: none;
+    outline:none;
+
+  }
+
+  .menu {
+    margin-left: 13px;
+    margin-top: 20px;
+  }
+
+  .menuButton {
+    border: none;
+    outline:none;
+    min-width: 14px;
+    min-height: 14px;
+    border-radius: 7px;
+  }
+
+  .exitButton {
+    background-color: #FF6157;
+  }
+
+  .exitButton:active {
+    background: #c14645;
+  }
+
+  .minimizeButton {
+    background-color: #FFC12F;
+    margin-left: 8px;
+  }
+
+  .minimizeButton:active {
+    background-color: #c08e38;
+  }
+
 </style>