Merge remote-tracking branch 'origin/main' into main

src/views/home.vue

@@ -4,6 +4,7 @@
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
+    @click="emittMessage"
   >
     <MessageView />
     <TextAudioInput />
@@ -11,22 +12,26 @@
 </template>
 
 <script lang="ts">
+
+// Home consists on MessageView and Text/Audio imput component.
 import MessageView from "@/components/messageView/index.vue";
 import TextAudioInput from "@/components/taInput/index.vue";
+
 import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "Messenger",
   components: { MessageView, TextAudioInput },
 });
+
 </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: 100vw;
+    height: 100vh;
+    background-color: #EBEBEB;
+  }
+
 </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,19 +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 button" @click.prevent="submit">Submit</button>
 
     <!-- back to login button: position: fixed  -->
+    <button class="createAccountButton button" @click.prevent="switchView">Create account</button>
   </form>
 </template>
 
@@ -80,33 +89,44 @@ 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 {
+  font-family: "SF Pro Text";
   min-width: 181px;
   font-size: 24px;
   font-weight: bold;
   text-align: left;
+  padding-bottom: 10px;
 }
 
 #loginBox {
+  font-family: "SF Compact Display";
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-bottom: 30px;
+}
+
+.inputBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
 }
 
 .input {
   background-color: #B9B9B9;
   border: none;
-  color: white;
+  outline: none;
   padding: 16px;
   text-decoration: none;
   margin: 4px 2px;
@@ -114,25 +134,49 @@ export default defineComponent({
   border-radius: 10px;
 }
 
-.button {
+.inputModifier {
+  min-width: 181px;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: left;
+  margin-left: 15px;
+}
+
+.submitButton {
+  font-family: "SF Compact Display";
   position: fixed;
   margin-top: 141px;
   background-color: #58C4FD;
-  border: none;
   color: white;
-  padding: 10px 20px;
-  text-decoration: none;
+  padding: 10px 30px;
   border-radius: 20px;
+  font-size: 14px;
   font-weight: bold;
 }
 
-.button2 {
-  position: fixed;
-  margin-top: 225px;
+.submitButton:active {
+  background-color: #4296C3;
+}
+
+.createAccountButton {
+  position: absolute;
   border: none;
-  background-color: #e6e6e6;
+  background-color: #EBEBEB;
   text-decoration: none;
   color: #58C4FD;
   font-weight: bold;
+  bottom: 20px;
+  right: 20px;
 }
+
+.button {
+  border: none;
+  outline: none;
+  text-decoration: none;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
 </style>

src/views/splash.vue

@@ -59,14 +59,13 @@ export default defineComponent({
 <style lang="scss" scoped>
 
   #splash {
-    width: 350px;
-    height: 500px;
+    width: 100vw;
+    height: 100vh;
+
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #EBEBEB;
-    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
-    // border-radius: 20px;
+
   }
 
 </style>