update chat

front/src/Components/Chat/ChatElement.svelte

@@ -35,21 +35,18 @@
         {:else if message.type === ChatMessageTypes.me}
             <h4>Me: <span class="date">({renderDate(message.date)})</span></h4>
             {#each texts as text}
-                <div><p class="my-text">{@html urlifyText(text)}</p></div>
+                <div><p class="my-text nes-balloon from-left is-dark">{@html urlifyText(text)}</p></div>
             {/each}
         {:else}
             <h4><ChatPlayerName player={author} line={line}></ChatPlayerName>: <span class="date">({renderDate(message.date)})</span></h4>
             {#each texts as text}
-                <div><p class="other-text">{@html urlifyText(text)}</p></div>
+                <div><p class="other-text nes-balloon from-right is-dark">{@html urlifyText(text)}</p></div>
             {/each}
         {/if}
     </div>
 </div>
 
 <style lang="scss">
-    h4, p {
-        font-family: Lato;
-    }
     div.chatElement {
       display: flex;
       margin-bottom: 20px;
@@ -64,18 +61,14 @@
         }
 
         div > p {
-          border-radius: 8px;
-          margin-bottom: 10px;
-          padding:6px;
           overflow-wrap: break-word;
           max-width: 100%;
           display: inline-block;
+          min-width: 75px;
+          padding: 5px;
+
           &.other-text {
-            background: gray; 
-          }
-          
-          &.my-text {
-            background: #6489ff;
+            float: right;
           }
         }
       }