ui enhancements, transparent title bar and custom exit buttons

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;
   }
 

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,
     };
   },
 });

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;

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>

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;
+    width: 100vw;
-    height: 500px;
+    height: 100vh;
-    background-color: #e6e6e6;
+    background-color: #EBEBEB;
   }
 
 </style>

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>

src/views/splash.vue

@@ -59,14 +59,13 @@ export default defineComponent({
 <style lang="scss" scoped>
 
   #splash {
-    width: 350px;
+    width: 100vw;
-    height: 500px;
+    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>