From d62561f6e8878ca7983805abbded665a62c887ce Mon Sep 17 00:00:00 2001
From: Andrew Gundersen <gundersena@xavier.edu>
Date: Sat, 20 Feb 2021 10:47:28 -0600
Subject: [PATCH 1/3] factored out window styling to app.vue and other style
 improvments

---
 src/App.vue               | 79 +++++++++++++++++++++++++++++++++++----
 src/background/run.ts     |  2 +-
 src/background/session.ts |  4 +-
 src/background/window.ts  |  3 ++
 src/views/home.vue        | 14 +++----
 src/views/login.vue       | 53 +++++++++++++++++++-------
 6 files changed, 124 insertions(+), 31 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 13dae39..d3e2d89 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/background/run.ts b/src/background/run.ts
index d3ab521..eeafe21 100644
--- a/src/background/run.ts
+++ b/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
     });
 
diff --git a/src/background/session.ts b/src/background/session.ts
index 5959e2e..7ca7f36 100644
--- a/src/background/session.ts
+++ b/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;
diff --git a/src/background/window.ts b/src/background/window.ts
index 8967dea..036999a 100644
--- a/src/background/window.ts
+++ b/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
diff --git a/src/views/home.vue b/src/views/home.vue
index 677474b..0551f88 100644
--- a/src/views/home.vue
+++ b/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>
diff --git a/src/views/login.vue b/src/views/login.vue
index 25f9bbf..a5b9eed 100644
--- a/src/views/login.vue
+++ b/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>

From 8ff21026a5ae3c619e46b832e7e9c5f4593aec88 Mon Sep 17 00:00:00 2001
From: Andrew Gundersen <gundersena@xavier.edu>
Date: Sat, 20 Feb 2021 15:39:00 -0600
Subject: [PATCH 2/3] ui enhancements, transparent title bar and custom exit
 buttons

---
 src/App.vue                                 |  22 ++-
 src/components/messageView/index.vue        |  24 ++-
 src/components/messageView/mockMessages.ts  | 161 ++++++++++++++++++++
 src/components/taInput/textDetails/text.vue |   2 +-
 src/views/home.vue                          |   8 +-
 src/views/login.vue                         |  28 +++-
 src/views/splash.vue                        |   9 +-
 7 files changed, 227 insertions(+), 27 deletions(-)
 create mode 100644 src/components/messageView/mockMessages.ts

diff --git a/src/App.vue b/src/App.vue
index d3e2d89..8f6d51d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,15 +3,13 @@
 
     <button class="titlebar">
 
-      <!-- Menu -->
-      <span class="menu">
-        <button class="menuButton exitButton"></button>
-        <button class="menuButton minimizeButton"></button>
-      </span>
-
     </button>
 
-
+        <!-- Menu -->
+    <span class="menu">
+      <button class="menuButton exitButton"></button>
+      <button class="menuButton minimizeButton"></button>
+    </span>
 
     <!-- Windows -->
     <router-view/>
@@ -27,7 +25,6 @@
   }
 
   #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
@@ -43,15 +40,15 @@
   .titlebar {
     position: fixed;
 
-    display: flex;
-
     width: 100vw;
     height: 54px;
 
     -webkit-user-select: none;
     -webkit-app-region: drag;
 
-    background-color: #EBEBEB;
+    background-color: red;
+
+    opacity: 0.0;
 
     border: none;
     outline:none;
@@ -59,7 +56,8 @@
   }
 
   .menu {
-    margin-left: 13px;
+    position: fixed;
+    margin-left: 20px;
     margin-top: 20px;
   }
 
diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue
index 261e718..d75ef73 100644
--- a/src/components/messageView/index.vue
+++ b/src/components/messageView/index.vue
@@ -4,6 +4,7 @@
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :viewBox="scrollView"
+    @click="emittMessage"
   >
     <g id="messageView" transform="translate(0, 20)">
       <g v-for="(item, index) in renderArr" :key="index" preserverAspectRatio="none">
@@ -21,6 +22,12 @@
 </template>
 
 <script lang="ts">
+
+
+// mock messages
+import Messages from "./mockMessages";
+
+
 import TextBubble from "@/components/textBubble/index.vue";
 import { Message } from "@/types/message/index";
 import useTransitions from "./viewDetails/transitions";
@@ -28,11 +35,12 @@ import useScrollView from "@/modules/scrollView";
 import useMitt from "@/modules/mitt";
 import { useIpc } from "@/modules/ipc";
 import { Queue } from '@/modules/queue';
-import { defineComponent, reactive, onMounted, onUnmounted, watch } from "vue";
+import { defineComponent, reactive, onMounted, onUnmounted, watch, ref } from "vue";
 
 export default defineComponent({
   name: "MessageView",
   components: { TextBubble },
+  
   setup() {
     const { emitter } = useMitt();
     const renderArr: Message[] = reactive([]);
@@ -44,6 +52,19 @@ export default defineComponent({
       targetId: "messageView",
     });
 
+
+    const messages = Messages;
+    const count = ref(0);
+
+    function emittMessage() {
+      console.log("emitting mock message")
+      if (count.value < messages.length) {
+        emitter.emit("render-message", messages[count.value]);
+        count.value++;
+        return;
+      }
+    }
+
     const render = (m: Message) => {
       if (rendering.value) {
         renderQ.enqueue(m);
@@ -86,6 +107,7 @@ export default defineComponent({
       enter,
       afterEnter,
       scrollView,
+      emittMessage,
     };
   },
 });
diff --git a/src/components/messageView/mockMessages.ts b/src/components/messageView/mockMessages.ts
new file mode 100644
index 0000000..6284c82
--- /dev/null
+++ b/src/components/messageView/mockMessages.ts
@@ -0,0 +1,161 @@
+import { Message } from "@/types/message/index";
+
+const Messages: Message[] = [
+    {
+        content: "Welcome",
+        context: "ai",
+        subContext: "",
+        modifier: "ai",
+        id: "2",
+        time: ""
+    },
+    {
+        content:
+            "add friend",
+        context: "launch",
+        subContext: "",
+        modifier: "sf",
+        id: "1",
+        time: ""
+    },
+    {
+        content: "Did you mean to addcontact?",
+        context: "addcontact",
+        subContext: "",
+        modifier: "ai",
+        id: "5",
+        time: ""
+    },
+    {
+        content: "yes",
+        context: "fulfill",
+        subContext: "",
+        modifier: "sf",
+        id: "6",
+        time: ""
+    },
+
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Mesage from Tommy McConville",
+        subContext: "New Conversation",
+        modifier: "ai",
+        id: "3",
+        time: ""
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        context: "Message from Crimata",
+        subContext: "",
+        modifier: "ai",
+        id: "7",
+        time: ""
+    },
+
+    {
+        content: "Yes posting it online soon.",
+        context: "You to Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "4",
+        time: ""
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        context: "Message from Crimata",
+        subContext: "",
+        modifier: "ai",
+        id: "8",
+        time: ""
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "9",
+        time: ""
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "10",
+        time: ""
+    },
+    {
+        content: "Yes posting it online soon.",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "11",
+        time: ""
+    },
+    {
+        content:
+            "I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
+        context: "You to Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "12",
+        time: ""
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "13",
+        time: ""
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "14",
+        time: ""
+    },
+    {
+        content: "Yes posting it online soon.",
+        context: "You to Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "15",
+        time: ""
+    },
+    {
+        content: "Sweet, thanks!",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "16",
+        time: ""
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        context: "Message from Crimata AI",
+        subContext: "",
+        modifier: "ai",
+        id: "17",
+        time: ""
+    },
+    {
+        content: "Yes posting it online soon.",
+        context: "You to Tommy McConville",
+        subContext: "",
+        modifier: "sf",
+        id: "18",
+        time: ""
+    },
+    {
+        content: "Sweet, thanks!",
+        context: "Message from Tommy McConville",
+        subContext: "",
+        modifier: "ai",
+        id: "19",
+        time: ""
+    },
+];
+export default Messages;
\ No newline at end of file
diff --git a/src/components/taInput/textDetails/text.vue b/src/components/taInput/textDetails/text.vue
index 488aa35..886633e 100644
--- a/src/components/taInput/textDetails/text.vue
+++ b/src/components/taInput/textDetails/text.vue
@@ -1,7 +1,7 @@
 <template>
   <foreignObject class="inputContainer" :x="textXoffset" y="450" width="55%" height="50%">
     <div xmlns="http://www.w3.org/1999/xhtml">
-      <div class="inputBubble" contenteditable v-show="input.length > 0">
+      <div class="inputBubble" contenteditable v-show="input.length > 0" font-family="SF Pro">
         <p>{{ input }}</p>
       </div>
     </div>
diff --git a/src/views/home.vue b/src/views/home.vue
index 0551f88..341a81a 100644
--- a/src/views/home.vue
+++ b/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,6 +12,7 @@
 </template>
 
 <script lang="ts">
+
 import MessageView from "@/components/messageView/index.vue";
 import TextAudioInput from "@/components/taInput/index.vue";
 import { defineComponent } from "vue";
@@ -24,9 +26,9 @@ export default defineComponent({
 <style lang="scss" scoped>
 
   #messenger {
-    width: 350px;
-    height: 500px;
-    background-color: #e6e6e6;
+    width: 100vw;
+    height: 100vh;
+    background-color: #EBEBEB;
   }
 
 </style>
diff --git a/src/views/login.vue b/src/views/login.vue
index a5b9eed..4dc887b 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -26,10 +26,10 @@
     <label for="checkbox">Remember Me</label> -->
 
     <!-- submit button; position: fixed -->
-    <button class="submitButton" @click.prevent="submit">Submit</button>
+    <button class="submitButton button" @click.prevent="submit">Submit</button>
 
     <!-- back to login button: position: fixed  -->
-    <button class="createAccountButton" @click.prevent="switchView">Create account</button>
+    <button class="createAccountButton button" @click.prevent="switchView">Create account</button>
   </form>
 </template>
 
@@ -98,6 +98,7 @@ export default defineComponent({
 }
 
 #loginTitle {
+  font-family: "SF Pro Text";
   min-width: 181px;
   font-size: 24px;
   font-weight: bold;
@@ -106,6 +107,7 @@ export default defineComponent({
 }
 
 #loginBox {
+  font-family: "SF Compact Display";
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -118,11 +120,13 @@ export default defineComponent({
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin-bottom: 10px;
 }
 
 .input {
   background-color: #B9B9B9;
   border: none;
+  outline: none;
   padding: 16px;
   text-decoration: none;
   margin: 4px 2px;
@@ -139,18 +143,21 @@ export default defineComponent({
 }
 
 .submitButton {
+  font-family: "SF Compact Display";
   position: fixed;
   margin-top: 141px;
   background-color: #58C4FD;
-  border: none;
   color: white;
   padding: 10px 30px;
-  text-decoration: none;
   border-radius: 20px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
 }
 
+.submitButton:active {
+  background-color: #4296C3;
+}
+
 .createAccountButton {
   position: absolute;
   border: none;
@@ -161,4 +168,15 @@ export default defineComponent({
   bottom: 20px;
   right: 20px;
 }
+
+.button {
+  border: none;
+  outline: none;
+  text-decoration: none;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
 </style>
diff --git a/src/views/splash.vue b/src/views/splash.vue
index cb47283..d30173d 100644
--- a/src/views/splash.vue
+++ b/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>
\ No newline at end of file

From af47f884d1e17804eeae1e1f82b55e1efdcf3c74 Mon Sep 17 00:00:00 2001
From: Andrew Gundersen <gundersena@xavier.edu>
Date: Sun, 21 Feb 2021 20:42:02 -0600
Subject: [PATCH 3/3] frontend ui enhacements

---
 src/App.vue                                   |  14 +-
 src/components/messageView/index.vue          |  44 ++---
 src/components/messageView/mockMessages.ts    | 161 ------------------
 .../viewDetails/offsetCalculator.ts           |   2 +-
 .../messageView/viewDetails/transitions.ts    |   4 +
 src/components/taInput/index.vue              |  28 ++-
 src/components/taInput/inputController.ts     |  14 +-
 src/components/taInput/textDetails/text.vue   |  36 ++--
 .../taInput/textDetails/textVisualizer.ts     |   5 +
 .../textBubble/bubbleDetails/computed.ts      |   3 +-
 src/components/textBubble/index.vue           |   2 +-
 src/modules/scrollView.ts                     |  28 ++-
 src/views/home.vue                            |   3 +
 13 files changed, 128 insertions(+), 216 deletions(-)
 delete mode 100644 src/components/messageView/mockMessages.ts

diff --git a/src/App.vue b/src/App.vue
index 8f6d51d..99315a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,11 +25,11 @@
   }
 
   #app {
+    font-family: "SF Pro Text";
+
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
-    color: #2c3e50;
-
     height: 100vh;
     width: 100vw;
 
@@ -43,15 +43,15 @@
     width: 100vw;
     height: 54px;
 
+    opacity: 0.75;
+
+    background-color: #EBEBEB;
+
     -webkit-user-select: none;
     -webkit-app-region: drag;
 
-    background-color: red;
-
-    opacity: 0.0;
-
     border: none;
-    outline:none;
+    outline: none;
 
   }
 
diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue
index d75ef73..58d19e8 100644
--- a/src/components/messageView/index.vue
+++ b/src/components/messageView/index.vue
@@ -23,21 +23,21 @@
 
 <script lang="ts">
 
-
-// mock messages
-import Messages from "./mockMessages";
-
-
 import TextBubble from "@/components/textBubble/index.vue";
+
 import { Message } from "@/types/message/index";
-import useTransitions from "./viewDetails/transitions";
-import useScrollView from "@/modules/scrollView";
-import useMitt from "@/modules/mitt";
 import { useIpc } from "@/modules/ipc";
 import { Queue } from '@/modules/queue';
+
+import useTransitions from "./viewDetails/transitions";
+import useScrollView from "@/modules/scrollView";
+
+import useMitt from "@/modules/mitt";
+
 import { defineComponent, reactive, onMounted, onUnmounted, watch, ref } from "vue";
 
 export default defineComponent({
+  
   name: "MessageView",
   components: { TextBubble },
   
@@ -47,24 +47,13 @@ export default defineComponent({
     const renderQ = new Queue();
 
     const { invoke } = useIpc("message");
+
+    // Each method will be called on their respective lifecycle event.
     const { beforeEnter, enter, afterEnter, rendering } = useTransitions();
     const { scrollView } = useScrollView({
       targetId: "messageView",
     });
 
-
-    const messages = Messages;
-    const count = ref(0);
-
-    function emittMessage() {
-      console.log("emitting mock message")
-      if (count.value < messages.length) {
-        emitter.emit("render-message", messages[count.value]);
-        count.value++;
-        return;
-      }
-    }
-
     const render = (m: Message) => {
       if (rendering.value) {
         renderQ.enqueue(m);
@@ -81,6 +70,8 @@ export default defineComponent({
     })
 
     onMounted(() => {
+
+      // Call render function on event "render-message."
       window.ipcRenderer.on("render-message", (event, payload) => {
         const m = payload.message;
         if (m.content) render(m);
@@ -107,8 +98,17 @@ export default defineComponent({
       enter,
       afterEnter,
       scrollView,
-      emittMessage,
     };
   },
 });
 </script>
+
+<style lang="scss" scoped>
+
+  #messageView {
+    width: 1000px;
+    height: 100vh;
+    color: red;
+  }
+
+</style>
diff --git a/src/components/messageView/mockMessages.ts b/src/components/messageView/mockMessages.ts
deleted file mode 100644
index 6284c82..0000000
--- a/src/components/messageView/mockMessages.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { Message } from "@/types/message/index";
-
-const Messages: Message[] = [
-    {
-        content: "Welcome",
-        context: "ai",
-        subContext: "",
-        modifier: "ai",
-        id: "2",
-        time: ""
-    },
-    {
-        content:
-            "add friend",
-        context: "launch",
-        subContext: "",
-        modifier: "sf",
-        id: "1",
-        time: ""
-    },
-    {
-        content: "Did you mean to addcontact?",
-        context: "addcontact",
-        subContext: "",
-        modifier: "ai",
-        id: "5",
-        time: ""
-    },
-    {
-        content: "yes",
-        context: "fulfill",
-        subContext: "",
-        modifier: "sf",
-        id: "6",
-        time: ""
-    },
-
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Mesage from Tommy McConville",
-        subContext: "New Conversation",
-        modifier: "ai",
-        id: "3",
-        time: ""
-    },
-    {
-        content: "Hey do you know Enrique Hernandez?",
-        context: "Message from Crimata",
-        subContext: "",
-        modifier: "ai",
-        id: "7",
-        time: ""
-    },
-
-    {
-        content: "Yes posting it online soon.",
-        context: "You to Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "4",
-        time: ""
-    },
-    {
-        content: "Hey do you know Enrique Hernandez?",
-        context: "Message from Crimata",
-        subContext: "",
-        modifier: "ai",
-        id: "8",
-        time: ""
-    },
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "9",
-        time: ""
-    },
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "10",
-        time: ""
-    },
-    {
-        content: "Yes posting it online soon.",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "11",
-        time: ""
-    },
-    {
-        content:
-            "I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
-        context: "You to Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "12",
-        time: ""
-    },
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "13",
-        time: ""
-    },
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "14",
-        time: ""
-    },
-    {
-        content: "Yes posting it online soon.",
-        context: "You to Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "15",
-        time: ""
-    },
-    {
-        content: "Sweet, thanks!",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "16",
-        time: ""
-    },
-    {
-        content: "Hey do you know Enrique Hernandez?",
-        context: "Message from Crimata AI",
-        subContext: "",
-        modifier: "ai",
-        id: "17",
-        time: ""
-    },
-    {
-        content: "Yes posting it online soon.",
-        context: "You to Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "18",
-        time: ""
-    },
-    {
-        content: "Sweet, thanks!",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "19",
-        time: ""
-    },
-];
-export default Messages;
\ No newline at end of file
diff --git a/src/components/messageView/viewDetails/offsetCalculator.ts b/src/components/messageView/viewDetails/offsetCalculator.ts
index a04e5ab..01be800 100644
--- a/src/components/messageView/viewDetails/offsetCalculator.ts
+++ b/src/components/messageView/viewDetails/offsetCalculator.ts
@@ -5,7 +5,7 @@ import { ref } from "vue";
 export default function useOffsetCalculator() {
     const xOffset = ref(0);
     const yOffset = ref(0);
-    const firstChildMarginTop = 0;
+    const firstChildMarginTop = 45;
     let previousMessageHeight = 0;
     const messagePadding = 15;
 
diff --git a/src/components/messageView/viewDetails/transitions.ts b/src/components/messageView/viewDetails/transitions.ts
index 8d85701..493725e 100644
--- a/src/components/messageView/viewDetails/transitions.ts
+++ b/src/components/messageView/viewDetails/transitions.ts
@@ -33,9 +33,12 @@ export default function useTransitions() {
 
     const animateMessage = async (el: SVGGElement) => {
 
+        // Where the message gets translated to.
         const elTransform = `translate(${messageOffset.x} ${messageOffset.y})`;
+
         const viewTransform = `translate(0 ${-vB})`;
 
+        // Shift of view height > window height.
         if (shift) {
             await shiftAnimate(el, elTransform, messageView, viewTransform);
         } else {
@@ -44,6 +47,7 @@ export default function useTransitions() {
         rendering.value = false;
     }
 
+    // Get height of messageView.
     const beforeEnter: VueTransitionCallback = () => {
         rendering.value = true;
         // query DOM for messageView element
diff --git a/src/components/taInput/index.vue b/src/components/taInput/index.vue
index 91fb570..b0f3a28 100644
--- a/src/components/taInput/index.vue
+++ b/src/components/taInput/index.vue
@@ -1,17 +1,33 @@
 <template>
-  <audio-stream v-if="visualizeStream" :bubbleWidth="audioBubbleWidth" :paths="paths" />
-  <text-input v-else :input="input" :textXoffset="textInputXoffset" />
+
+  <!-- render audio or text input-->
+  <AudioStream 
+    v-if="visualizeStream" 
+    :bubbleWidth="audioBubbleWidth" 
+    :paths="paths" 
+  />
+
+  <TextInput 
+    v-else 
+    :input="input" 
+    :textXoffset="textInputXoffset"
+    :textYoffset="textInputYoffset"
+  />
+
 </template>
 
 <script lang="ts">
-// input child components
+
+// import child components
 import TextInput from "./textDetails/text.vue";
 import AudioStream from "./audioDetails/audio.vue";
 
 import useInputController from "./inputController";
 
 import { defineComponent } from "vue";
+
 export default defineComponent({
+  
   name: "TextAudioInput",
   components: { TextInput, AudioStream },
   setup() {
@@ -24,14 +40,20 @@ export default defineComponent({
     const {
       input,
       visualizeStream,
+
       textInputXoffset,
+      textInputYoffset,
+
       audioBubbleWidth,
       paths,
     } = useInputController();
 
     return {
       input,
+      
       textInputXoffset,
+      textInputYoffset,
+
       visualizeStream,
       audioBubbleWidth,
       paths,
diff --git a/src/components/taInput/inputController.ts b/src/components/taInput/inputController.ts
index e7eda4c..20bf438 100644
--- a/src/components/taInput/inputController.ts
+++ b/src/components/taInput/inputController.ts
@@ -32,9 +32,18 @@ export default function useInputController() {
         emitter.emit("user-message", message);
     }
 
-    const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream);
+    const { 
+        visualizeStreamAsPaths, 
+        expandBubble 
+    } = useAudioVisualizer(visualizeStream);
+
     const { keyDownHandler, input } = useKeyDownHandler(enterCallback);
-    const { textInputXoffset, renderTextInput } = useTextVisualizer(input);
+
+    const { 
+        textInputXoffset, 
+        textInputYoffset,
+        renderTextInput 
+    } = useTextVisualizer(input);
 
     // stops stream recording on space key up
     function keyupHandler(e: any) {
@@ -83,6 +92,7 @@ export default function useInputController() {
         input,
         visualizeStream,
         textInputXoffset,
+        textInputYoffset,
         audioBubbleWidth,
         paths
     }
diff --git a/src/components/taInput/textDetails/text.vue b/src/components/taInput/textDetails/text.vue
index 886633e..eb16b77 100644
--- a/src/components/taInput/textDetails/text.vue
+++ b/src/components/taInput/textDetails/text.vue
@@ -1,38 +1,52 @@
 <template>
-  <foreignObject class="inputContainer" :x="textXoffset" y="450" width="55%" height="50%">
+
+  <foreignObject 
+    class="inputContainer" 
+    :x="textXoffset" 
+    :y="textYoffset" 
+    width="55%" 
+    height="50%"
+  >
     <div xmlns="http://www.w3.org/1999/xhtml">
-      <div class="inputBubble" contenteditable v-show="input.length > 0" font-family="SF Pro">
+      <div class="inputBubble" v-show="input.length > 0">
         <p>{{ input }}</p>
       </div>
     </div>
+
   </foreignObject>
+
 </template>
 
 <script lang="ts">
+
 import { defineComponent } from "vue";
+
 export default defineComponent({
+
   name: "TextInput",
   props: {
     input: String,
     textXoffset: String,
+    textYoffset: String,
   },
 });
+
 </script>
 
 <style lang="scss" scoped>
-div[contenteditable] {
-  width: auto;
+.inputBubble {
+
   max-width: 180px;
-  height: auto;
-  min-height: 36px;
+  min-height: 32px;
+
   display: table;
   justify-items: center;
-  border: 0;
+
   border-radius: 10px;
-  color: #000;
-  background-color: #b9b9b9;
-  font-size: 14;
-  text-align: left;
+  background-color: #B9B9B9;
+
+  font-size: 14px;
+
   p {
     max-width: 150px;
     overflow-wrap: break-word;
diff --git a/src/components/taInput/textDetails/textVisualizer.ts b/src/components/taInput/textDetails/textVisualizer.ts
index 4b3c89c..e41da04 100644
--- a/src/components/taInput/textDetails/textVisualizer.ts
+++ b/src/components/taInput/textDetails/textVisualizer.ts
@@ -50,8 +50,13 @@ export default function useTextVisualizer(input: Ref<string>) {
         return `calc(50% - ${inputWidth.value / 2})`;
     });
 
+    const textInputYoffset = computed(() => {
+        return `calc(97% - ${inputHeight.value})`;
+    });
+
     return {
         textInputXoffset,
+        textInputYoffset,
         renderTextInput
     }
 }
diff --git a/src/components/textBubble/bubbleDetails/computed.ts b/src/components/textBubble/bubbleDetails/computed.ts
index c3b4769..a2e9fa2 100644
--- a/src/components/textBubble/bubbleDetails/computed.ts
+++ b/src/components/textBubble/bubbleDetails/computed.ts
@@ -6,6 +6,7 @@ import { computed, onMounted, ref } from "vue";
 export default function useComputedBubble(m: string, id: string) {
     const x = ref(0)
     const paddingLeft = 30;
+
     const winW = 350;
     const messageWidth = ref(0);
     const messageMarginTop = 75;
@@ -39,7 +40,7 @@ export default function useComputedBubble(m: string, id: string) {
     const calculateXoffset = async () => {
         switch (m) {
             case "sf":
-                x.value = winW - messageWidth.value - selfMessageMarginRight;
+                x.value = 800 - messageWidth.value - selfMessageMarginRight;
                 break;
             default:
                 x.value = paddingLeft;
diff --git a/src/components/textBubble/index.vue b/src/components/textBubble/index.vue
index a19ac84..5ac976f 100644
--- a/src/components/textBubble/index.vue
+++ b/src/components/textBubble/index.vue
@@ -1,7 +1,7 @@
 <template>
   <g :id="item.id" :class="item.modifier" :transform="startingOffset">
     <rect ref="messageRect" x="30" y="10" width="196" height="63" rx="10" :fill="bubbleFill" />
-    <text font-size="14" font-family="SF Pro" ref="messageText" :fill="textFill">
+    <text font-size="14" font-family="SF Pro Text" ref="messageText" :fill="textFill">
       <tspan dy="16" x="0" v-for="(item, index) in textArr" :key="index">{{ item }}</tspan>
     </text>
     <g :transform="signatureTranslate">
diff --git a/src/modules/scrollView.ts b/src/modules/scrollView.ts
index 3032667..7184f72 100644
--- a/src/modules/scrollView.ts
+++ b/src/modules/scrollView.ts
@@ -12,30 +12,44 @@ export default function useScrollView({ targetId }: { targetId: string }) {
   let topBound: number;
   const scrollStartHeight = 445;
 
-  const clampedScroll = computed(() => {
-    if (targetHeight.value === 0) { return 0; }
-    topBound = -targetHeight.value + 450;
-    return Math.max(topBound, Math.min(scroll.value, 0)) as number;
-  })
-
   const scrollView = computed(() => {
+
     if (clampedScroll.value === 0) {
       scroll.value = 0;
     } else if (clampedScroll.value === topBound) {
       scroll.value = topBound;
     }
+
+    // x, y, width, height
+    // width and height should be dynamic
     return `0 ${clampedScroll.value} 350 500`;
   });
 
+  const clampedScroll = computed(() => {
+    if (targetHeight.value === 0) { return 0; }
+    topBound = -targetHeight.value + 450;
+    return Math.max(topBound, Math.min(scroll.value, 0)) as number;
+  })
+
   const getHeight = () => {
     if (scrollTarget) {
       return scrollTarget.getBoundingClientRect().height as number;
     }
   }
 
-  const updateView = (verticalScroll: number) => {
+  const getWidth = () => {
     if (scrollTarget) {
+      return scrollTarget.getBoundingClientRect().width as number;
+    }
+  }
+
+  const updateView = (verticalScroll: number) => {
+
+    if (scrollTarget) {
+
       const heightResult = getHeight();
+      const widthResult = getWidth();
+
       if (heightResult) {
         // only scroll if renderer scrollStart
         if (heightResult > scrollStartHeight) {
diff --git a/src/views/home.vue b/src/views/home.vue
index 341a81a..401b35a 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -13,14 +13,17 @@
 
 <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>