From 62ad4f40e89e47347a2a1642af2572ef0b2e9b94 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Tue, 3 Nov 2020 21:38:42 +0100
Subject: [PATCH] message align left on oversize

---
 src/components/error.vue          |  9 +++++----
 src/components/message.vue        | 13 ++++++++++---
 src/components/messageReceive.vue |  6 +++---
 src/components/newMessage.vue     |  2 +-
 src/main.js                       |  2 +-
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/error.vue b/src/components/error.vue
index 8610b8e..1511f62 100644
--- a/src/components/error.vue
+++ b/src/components/error.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="errorBox" class="errorBox">
-    <icon class="errorBtn" onclick="this.parentNode.style.display = 'none'" ic="/sym/ic_close_white_24px.svg" />
+    <icon class="errorBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
     <div id="errorMessage" class="btnText">
       {{msg}}
     </div>
@@ -30,6 +30,7 @@ name: "error",
     width: 16rem;
     background-color: #E53935;
     border-radius: 15px;
+    box-shadow: 3px 3px 10px #111;
   }
   #errorBox{
     display: none;
@@ -39,14 +40,14 @@ name: "error",
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     color: #fff;
     font-family:Arial, "lucida console", sans-serif;
   }
   .errorBtn{
     position: absolute;
-    top: 0rem;
-    right: 0rem;
+    top: 0;
+    right: 0;
     background-color: #0000;
     box-shadow: none;
   }
diff --git a/src/components/message.vue b/src/components/message.vue
index da4d6e6..f30ad70 100644
--- a/src/components/message.vue
+++ b/src/components/message.vue
@@ -18,7 +18,7 @@ export default {
 <style scoped>
   .messageContainer{
     position: relative;
-    margin-top: 0.5rem;
+    margin-top: 0.25rem;
     width: calc(100% - 2rem);
     left: 1rem;
   }
@@ -28,10 +28,17 @@ export default {
     width: max-content;
     min-width: 5rem;
     max-width: calc(100% - 3rem);
-    padding: 1rem;
+    padding: 0.7rem 1rem 0.45rem 1rem;
     right: 0;
-    background-color: #42b983;
+    background-color: #42a7b9;
     border-radius: 1rem 1rem 0 1rem;
     text-align: left;
   }
+
+  @media (min-width: 45rem){
+    .message{
+      margin-left: 0; margin-right: auto;
+      border-radius: 1rem 1rem 1rem 0;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/messageReceive.vue b/src/components/messageReceive.vue
index 2cb14f7..5c4e5ea 100644
--- a/src/components/messageReceive.vue
+++ b/src/components/messageReceive.vue
@@ -18,7 +18,7 @@ export default {
 <style scoped>
   .messageContainer{
     position: relative;
-    margin-top: 0.5rem;
+    margin-top: 0.25rem;
     width: calc(100% - 2rem);
     left: 1rem;
   }
@@ -27,9 +27,9 @@ export default {
     width: max-content;
     min-width: 5rem;
     max-width: calc(100% - 3rem);
-    padding: 1rem;
+    padding: 0.7rem 1rem 0.45rem 1rem;
     left: 0;
-    background-color: #42a7b9;
+    background-color: #42b983;
     border-radius: 1rem 1rem 1rem 0;
     text-align: left;
   }
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 5343116..3127aec 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="newMessageBanner">
     <label for="newMessageInput"></label><textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="content" />
-    <icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" />
+    <icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
   </div>
 </template>
 
diff --git a/src/main.js b/src/main.js
index d852562..aeb6c82 100644
--- a/src/main.js
+++ b/src/main.js
@@ -34,7 +34,7 @@ socket.onopen = () => {
 socket.onerror = (error) => {
   console.log(`WebSocket error: ${error}`)
 }
-socket.onclose = () => show_error('session timed out (refresh)')
+socket.onclose = () => show_error('session ended (refresh)')
 socket.onmessage = (e) => {
   console.log(`data received => ${e.data}`)
   let msg = JSON.parse(e.data)