From a099488c6a9b232c088d2bcf14c5bc13fdf82bfd Mon Sep 17 00:00:00 2001
From: Colin <roittcolin@gmail.com>
Date: Thu, 9 Jul 2020 21:59:47 +0100
Subject: [PATCH 1/9] Added send button to chat box

---
 client/src/components/ChatBox.vue           | 63 +++++++++++++++------
 client/src/styles/abstracts/_variables.scss |  3 +-
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/client/src/components/ChatBox.vue b/client/src/components/ChatBox.vue
index 861dda1..1f80933 100644
--- a/client/src/components/ChatBox.vue
+++ b/client/src/components/ChatBox.vue
@@ -1,37 +1,50 @@
 <template>
-    <form class="chatbox" @submit.prevent="sendMessage()">
-      <input v-model="message" class="chatbox__input" placeholder="Send a Message" />
-    </form>
+  <form class="chatbox" @submit.prevent="sendMessage()">
+    <input v-model="message" class="chatbox__input" placeholder="Send a Message" />
+    <button type="submit" class="like" name="foo" value="bar">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-send"
+      >
+        <line x1="22" y1="2" x2="11" y2="13" />
+        <polygon points="22 2 15 22 11 13 2 9 22 2" />
+      </svg>
+    </button>
+  </form>
 </template>
 
 <script>
-import { ref } from '@vue/composition-api';
-import { useState, useActions } from '@u3u/vue-hooks';
+import { ref } from "@vue/composition-api";
+import { useState, useActions } from "@u3u/vue-hooks";
 
 export default {
   setup() {
-    const message = ref('');
+    const message = ref("");
 
-    const { user } = useState('auth', [
-      'user',
-    ]);
+    const { user } = useState("auth", ["user"]);
 
-    const { createMessage } = useActions('messages', [
-      'createMessage',
-    ]);
+    const { createMessage } = useActions("messages", ["createMessage"]);
 
     const sendMessage = () => {
       createMessage({
-        text: message.value,
+        text: message.value
       });
-      message.value = '';
+      message.value = "";
     };
 
     return {
       sendMessage,
-      message,
+      message
     };
-  },
+  }
 };
 </script>
 
@@ -54,10 +67,26 @@ export default {
   color: $font_color;
   font-family: inherit;
   font-size: 1.75rem;
-  border-radius: 100px;
+  border-radius: 100px 0px 0px 100px;
 
   &::placeholder {
     color: transparentize(white, 0.6);
   }
+
+  .chatbox button {
+    background: $primary_accent;
+    padding: 0 2rem;
+    width: 8%;
+    height: 70%;
+    outline: none;
+    border: none;
+    color: $font_color;
+    border-radius: 0px 100px 100px 0px;
+  }
+
+  .chatbox button:hover {
+    background: lighten($primary_accent, 50%);
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/client/src/styles/abstracts/_variables.scss b/client/src/styles/abstracts/_variables.scss
index d71121a..9e5c73f 100644
--- a/client/src/styles/abstracts/_variables.scss
+++ b/client/src/styles/abstracts/_variables.scss
@@ -1,5 +1,6 @@
 $primary: #B6065A;
+$primary_accent: #571635;
 $bg: #26222C;
 $bg_dark: #211F28;
 $font_color: #fafafa;
-$font_family: 'Manrope', sans-serif;
\ No newline at end of file
+$font_family: 'Manrope', sans-serif;    
\ No newline at end of file

From b92c77722debfe77e9fd007be01f23cffea9ede1 Mon Sep 17 00:00:00 2001
From: Colin <9614541+ColinRoitt@users.noreply.github.com>
Date: Fri, 10 Jul 2020 16:53:28 +0100
Subject: [PATCH 2/9] Update ChatBox.vue

Use single quotes in JS
---
 client/src/components/ChatBox.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/ChatBox.vue b/client/src/components/ChatBox.vue
index 1f80933..060915e 100644
--- a/client/src/components/ChatBox.vue
+++ b/client/src/components/ChatBox.vue
@@ -22,22 +22,22 @@
 </template>
 
 <script>
-import { ref } from "@vue/composition-api";
-import { useState, useActions } from "@u3u/vue-hooks";
+import { ref } from '@vue/composition-api';
+import { useState, useActions } from '@u3u/vue-hooks';
 
 export default {
   setup() {
-    const message = ref("");
+    const message = ref('');
 
-    const { user } = useState("auth", ["user"]);
+    const { user } = useState('auth', ['user');
 
-    const { createMessage } = useActions("messages", ["createMessage"]);
+    const { createMessage } = useActions('messages', ['createMessage']);
 
     const sendMessage = () => {
       createMessage({
         text: message.value
       });
-      message.value = "";
+      message.value = '';
     };
 
     return {

From a2e6aefe354954542fbe852fe003840584f79b6b Mon Sep 17 00:00:00 2001
From: Colin <9614541+ColinRoitt@users.noreply.github.com>
Date: Fri, 10 Jul 2020 16:55:27 +0100
Subject: [PATCH 3/9] Update ChatBox.vue

---
 client/src/components/ChatBox.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ChatBox.vue b/client/src/components/ChatBox.vue
index 060915e..5bfa5bd 100644
--- a/client/src/components/ChatBox.vue
+++ b/client/src/components/ChatBox.vue
@@ -29,9 +29,13 @@ export default {
   setup() {
     const message = ref('');
 
-    const { user } = useState('auth', ['user');
+    const { user } = useState('auth', [
+      'user'
+     ]);
 
-    const { createMessage } = useActions('messages', ['createMessage']);
+    const { createMessage } = useActions('messages', [
+      'createMessage'
+    ]);
 
     const sendMessage = () => {
       createMessage({
@@ -42,9 +46,9 @@ export default {
 
     return {
       sendMessage,
-      message
+      message,
     };
-  }
+  },
 };
 </script>
 

From 794da07751dd33aed3d050416e722628fe16bffb Mon Sep 17 00:00:00 2001
From: Colin <9614541+ColinRoitt@users.noreply.github.com>
Date: Fri, 10 Jul 2020 16:56:05 +0100
Subject: [PATCH 4/9] Update ChatBox.vue

---
 client/src/components/ChatBox.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/ChatBox.vue b/client/src/components/ChatBox.vue
index 5bfa5bd..4106305 100644
--- a/client/src/components/ChatBox.vue
+++ b/client/src/components/ChatBox.vue
@@ -30,16 +30,16 @@ export default {
     const message = ref('');
 
     const { user } = useState('auth', [
-      'user'
+      'user',
      ]);
 
     const { createMessage } = useActions('messages', [
-      'createMessage'
+      'createMessage',
     ]);
 
     const sendMessage = () => {
       createMessage({
-        text: message.value
+        text: message.value,
       });
       message.value = '';
     };

From b47d4f42ad1136a662f3ae717e0e38d378deb0c9 Mon Sep 17 00:00:00 2001
From: Colin <9614541+ColinRoitt@users.noreply.github.com>
Date: Fri, 10 Jul 2020 16:56:25 +0100
Subject: [PATCH 5/9] Update ChatBox.vue

---
 client/src/components/ChatBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ChatBox.vue b/client/src/components/ChatBox.vue
index 4106305..736b765 100644
--- a/client/src/components/ChatBox.vue
+++ b/client/src/components/ChatBox.vue
@@ -31,7 +31,7 @@ export default {
 
     const { user } = useState('auth', [
       'user',
-     ]);
+    ]);
 
     const { createMessage } = useActions('messages', [
       'createMessage',

From 4e4702bbc777c54fc3fd85793f77127f67bb7db7 Mon Sep 17 00:00:00 2001
From: Colin <9614541+ColinRoitt@users.noreply.github.com>
Date: Fri, 10 Jul 2020 17:01:19 +0100
Subject: [PATCH 6/9] Update _variables.scss

remove weird linting artefacts
---
 client/src/styles/abstracts/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/styles/abstracts/_variables.scss b/client/src/styles/abstracts/_variables.scss
index 9e5c73f..4d4bb54 100644
--- a/client/src/styles/abstracts/_variables.scss
+++ b/client/src/styles/abstracts/_variables.scss
@@ -3,4 +3,4 @@ $primary_accent: #571635;
 $bg: #26222C;
 $bg_dark: #211F28;
 $font_color: #fafafa;
-$font_family: 'Manrope', sans-serif;    
\ No newline at end of file
+$font_family: 'Manrope', sans-serif;

From c77542b303cd7634da992a95738c27c9eecbeacd Mon Sep 17 00:00:00 2001
From: Colin <roittcolin@gmail.com>
Date: Tue, 14 Jul 2020 15:56:26 +0100
Subject: [PATCH 7/9] Use shidotmoe custom icons

---
 client/src/assets/icons/send.png  | Bin 0 -> 3237 bytes
 client/src/components/ChatBox.vue |  56 ++++++++++++------------------
 2 files changed, 23 insertions(+), 33 deletions(-)
 create mode 100644 client/src/assets/icons/send.png

diff --git a/client/src/assets/icons/send.png b/client/src/assets/icons/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb500214b2b5add37844f83d4f9c43671bf3cbaf
GIT binary patch
literal 3237
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
Xm^P4R9hbt>00000NkvXXu0mjft8D-%

literal 0
HcmV?d00001

diff --git a/client/src/components/ChatBox.vue b/client/src/components/ChatBox.vue
index 736b765..6e4ea38 100644
--- a/client/src/components/ChatBox.vue
+++ b/client/src/components/ChatBox.vue
@@ -1,22 +1,8 @@
 <template>
   <form class="chatbox" @submit.prevent="sendMessage()">
-    <input v-model="message" class="chatbox__input" placeholder="Send a Message" />
-    <button type="submit" class="like" name="foo" value="bar">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="feather feather-send"
-      >
-        <line x1="22" y1="2" x2="11" y2="13" />
-        <polygon points="22 2 15 22 11 13 2 9 22 2" />
-      </svg>
+    <input v-model="message" class="chatbox__input" placeholder="Send on hella Message" />
+    <button type="submit" class="chatbox__button" name="send">
+      <img src="@/assets/icons/send.png" alt="send">
     </button>
   </form>
 </template>
@@ -53,6 +39,26 @@ export default {
 </script>
 
 <style lang="scss">
+.chatbox__button {
+  background: $primary_accent;
+  padding: 0 2rem;
+  width: 8%;
+  height: 70%;
+  outline: none;
+  border: none;
+  color: $font_color;
+  border-radius: 0px 100px 100px 0px;
+}
+
+.chatbox_button:hover {
+  background: lighten($primary_accent, 50%);
+  cursor: pointer;
+}
+
+.chatbox__button img{
+  max-height: 70%;
+}
+
 .chatbox {
   width: 100%;
   height: 70px;
@@ -76,21 +82,5 @@ export default {
   &::placeholder {
     color: transparentize(white, 0.6);
   }
-
-  .chatbox button {
-    background: $primary_accent;
-    padding: 0 2rem;
-    width: 8%;
-    height: 70%;
-    outline: none;
-    border: none;
-    color: $font_color;
-    border-radius: 0px 100px 100px 0px;
-  }
-
-  .chatbox button:hover {
-    background: lighten($primary_accent, 50%);
-    cursor: pointer;
-  }
 }
 </style>

From f92c6596941ec059f9d19b11fc27eda202f07207 Mon Sep 17 00:00:00 2001
From: Colin <roittcolin@gmail.com>
Date: Tue, 14 Jul 2020 15:58:48 +0100
Subject: [PATCH 8/9] Fix typo

---
 client/src/components/ChatBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ChatBox.vue b/client/src/components/ChatBox.vue
index 6e4ea38..e8df73b 100644
--- a/client/src/components/ChatBox.vue
+++ b/client/src/components/ChatBox.vue
@@ -1,6 +1,6 @@
 <template>
   <form class="chatbox" @submit.prevent="sendMessage()">
-    <input v-model="message" class="chatbox__input" placeholder="Send on hella Message" />
+    <input v-model="message" class="chatbox__input" placeholder="Send a Message" />
     <button type="submit" class="chatbox__button" name="send">
       <img src="@/assets/icons/send.png" alt="send">
     </button>

From ee6756c128623070859c9d95341c42f6bb1d8819 Mon Sep 17 00:00:00 2001
From: Colin <roittcolin@gmail.com>
Date: Tue, 14 Jul 2020 16:06:10 +0100
Subject: [PATCH 9/9] Add hover style class

---
 client/src/components/ChatBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ChatBox.vue b/client/src/components/ChatBox.vue
index e8df73b..b7abba1 100644
--- a/client/src/components/ChatBox.vue
+++ b/client/src/components/ChatBox.vue
@@ -50,7 +50,7 @@ export default {
   border-radius: 0px 100px 100px 0px;
 }
 
-.chatbox_button:hover {
+.chatbox__button:hover {
   background: lighten($primary_accent, 50%);
   cursor: pointer;
 }