From 28583ad9c03ec750105ecf75e4a9d44913bf9fa0 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Tue, 20 Jul 2021 21:17:54 +0200
Subject: [PATCH] update chat

---
 front/src/Components/Chat/Chat.svelte         | 11 +++-----
 front/src/Components/Chat/ChatElement.svelte  | 19 +++++--------
 .../Components/Chat/ChatMessageForm.svelte    | 27 ++-----------------
 front/style/fonts.scss                        |  2 +-
 4 files changed, 12 insertions(+), 47 deletions(-)

diff --git a/front/src/Components/Chat/Chat.svelte b/front/src/Components/Chat/Chat.svelte
index e39d1a59..6af93d86 100644
--- a/front/src/Components/Chat/Chat.svelte
+++ b/front/src/Components/Chat/Chat.svelte
@@ -29,7 +29,7 @@
 <svelte:window on:keydown={onKeyDown}/>
 
 
-<aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
+<aside class="chatWindow nes-container is-rounded is-dark" transition:fly="{{ x: -1000, duration: 500 }}">
     <p class="close-icon" on:click={closeChat}>&times</p>
     <section class="messagesList" bind:this={listDom}>
         <ul>
@@ -60,7 +60,6 @@
       padding:6px;
       overflow-wrap: break-word;
       max-width: 100%;
-      background: gray;
       display: inline-block;
     }
 
@@ -73,16 +72,12 @@
       height: 100vh;
       width:30vw;
       min-width: 350px;
-      background: rgb(5, 31, 51, 0.9);
       color: whitesmoke;
       display: flex;
       flex-direction: column;
-
+      margin: 0;
       padding: 10px;
-      
-      border-bottom-right-radius: 16px;
-      border-top-right-radius: 16px;
-      
+            
       .messagesList {
         margin-top: 35px;
         overflow-y: auto;
diff --git a/front/src/Components/Chat/ChatElement.svelte b/front/src/Components/Chat/ChatElement.svelte
index 66ed724b..25a3b485 100644
--- a/front/src/Components/Chat/ChatElement.svelte
+++ b/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;
           }
         }
       }
diff --git a/front/src/Components/Chat/ChatMessageForm.svelte b/front/src/Components/Chat/ChatMessageForm.svelte
index cd2ea66e..b6dd50dc 100644
--- a/front/src/Components/Chat/ChatMessageForm.svelte
+++ b/front/src/Components/Chat/ChatMessageForm.svelte
@@ -18,8 +18,8 @@
 </script>
 
 <form on:submit|preventDefault={saveMessage}>
-    <input type="text" bind:value={newMessageText} placeholder="Enter your message..." on:focus={onFocus} on:blur={onBlur} >
-    <button type="submit">
+    <input class="nes-input is-dark" type="text" bind:value={newMessageText} placeholder="Enter your message..." on:focus={onFocus} on:blur={onBlur} >
+    <button class="nes-btn is-dark" type="submit">
         <img src="/static/images/send.png" alt="Send" width="20">
     </button>
 </form>
@@ -29,28 +29,5 @@
         display: flex;
         padding-left: 4px;
         padding-right: 4px;
-      
-        input {
-          flex: auto;
-          background-color: #254560;
-          color: white;
-          border-bottom-left-radius: 4px;
-          border-top-left-radius: 4px;
-          border: none;
-          font-size: 22px;
-          font-family: Lato;
-          padding-left: 6px;
-          min-width: 0; //Needed so that the input doesn't overflow the container in firefox
-          outline: none;
-        }
-        
-        button {
-          background-color: #254560;
-          border-bottom-right-radius: 4px;
-          border-top-right-radius: 4px;
-          border: none;
-          border-left: solid white 1px;
-          font-size: 16px;
-        }
     }
 </style>
\ No newline at end of file
diff --git a/front/style/fonts.scss b/front/style/fonts.scss
index 61657154..7cade427 100644
--- a/front/style/fonts.scss
+++ b/front/style/fonts.scss
@@ -6,5 +6,5 @@
 }
 
 *{
-  font-family: "twemoji","Press Start 2P",monospace;
+  font-family: "Press Start 2P",monospace;
 }