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>

src/background/run.ts

@@ -14,7 +14,7 @@ export async function main() {
     // create main window.
     await createWindow({
         width: 350,
-        height: 525,
+        height: 500,
         resizable: true
     });
 

src/background/session.ts

@@ -23,8 +23,8 @@ interface TextMessage {
     content: string;
 }
 
-const ip = 'ws://127.0.0.1';
-const port = 8081;
+const ip = 'ws://localhost';
+const port = 8760;
 const reconnectTimeout = 3000; //ms
 let socket: WebSocket;
 let success = false;

src/background/window.ts

@@ -55,6 +55,9 @@ export const createWindow = async (options: WindowSettings): Promise<void> => {
       width: options.width,
       height: options.height,
       resizable: options.resizable,
+      frame: false,
+      minWidth: 350,
+      minHeight: 500,
       webPreferences: {
         // Use pluginOptions.nodeIntegration, leave this alone
         // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info

src/views/home.vue

@@ -22,11 +22,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-#messenger {
-  width: 350px;
-  height: 500px;
-  background-color: #e6e6e6;
-  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
-  // border-radius: 20px;
-}
+
+  #messenger {
+    width: 350px;
+    height: 500px;
+    background-color: #e6e6e6;
+  }
+
 </style>

src/views/login.vue

@@ -1,5 +1,6 @@
 <template>
   <form id="login" @submit.prevent="submit">
+
     <!-- login title -->
     <div id="loginTitle">
       <div>Login</div>
@@ -8,20 +9,27 @@
     <!-- username and password forms -->
     <div id="loginBox">
       <!-- username -->
-      <input class="input" type="text" v-model="email" placeholder="username" />
+      <div class="inputBox">
+        <input class="input" type="text" v-model="email" />
+        <div class="inputModifier">Email</div>
+      </div>
+      
 
       <!-- password -->
-      <input class="input" type="password" v-model="password" placeholder="Password" />
+      <div class="inputBox">
+        <input class="input" type="password" v-model="password" />
+        <div class="inputModifier">Password</div>
+      </div>
     </div>
 
 <!--     <input type="checkbox" id="checkbox" v-model="rememberMe" />
     <label for="checkbox">Remember Me</label> -->
 
     <!-- submit button; position: fixed -->
-    <button class="button" @click.prevent="submit">Submit</button>
+    <button class="submitButton" @click.prevent="submit">Submit</button>
 
     <!-- back to login button: position: fixed  -->
-    <button class="button2" @click.prevent="switchView">Create an account</button>
+    <button class="createAccountButton" @click.prevent="switchView">Create account</button>
   </form>
 </template>
 
@@ -81,13 +89,12 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #login {
-  width: 350px;
-  height: 500px;
+  width: 100vw;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: #e6e6e6;
 }
 
 #loginTitle {
@@ -95,6 +102,7 @@ export default defineComponent({
   font-size: 24px;
   font-weight: bold;
   text-align: left;
+  padding-bottom: 10px;
 }
 
 #loginBox {
@@ -102,12 +110,19 @@ export default defineComponent({
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-bottom: 30px;
+}
+
+.inputBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .input {
   background-color: #B9B9B9;
   border: none;
-  color: white;
   padding: 16px;
   text-decoration: none;
   margin: 4px 2px;
@@ -115,25 +130,35 @@ export default defineComponent({
   border-radius: 10px;
 }
 
-.button {
+.inputModifier {
+  min-width: 181px;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: left;
+  margin-left: 15px;
+}
+
+.submitButton {
   position: fixed;
   margin-top: 141px;
   background-color: #58C4FD;
   border: none;
   color: white;
-  padding: 10px 20px;
+  padding: 10px 30px;
   text-decoration: none;
   border-radius: 20px;
+  font-size: 16px;
   font-weight: bold;
 }
 
-.button2 {
-  position: fixed;
-  margin-top: 225px;
+.createAccountButton {
+  position: absolute;
   border: none;
-  background-color: #e6e6e6;
+  background-color: #EBEBEB;
   text-decoration: none;
   color: #58C4FD;
   font-weight: bold;
+  bottom: 20px;
+  right: 20px;
 }
 </style>