From 8ab8f90017616dea1370b09a3e9b928b03e9e19d Mon Sep 17 00:00:00 2001
From: Pheuw1 <gabrieldelaflotte@gmail.com>
Date: Sat, 18 Mar 2023 14:19:44 +0100
Subject: [PATCH] minor frontend chat changes

---
 front/volume/src/components/Channels.svelte |  3 ++-
 front/volume/src/components/Chat.svelte     | 23 +++++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/front/volume/src/components/Channels.svelte b/front/volume/src/components/Channels.svelte
index 698abcd..9328a23 100644
--- a/front/volume/src/components/Channels.svelte
+++ b/front/volume/src/components/Channels.svelte
@@ -114,9 +114,10 @@
       return;
     }
     if (name) {
-      if (channelMode === 'protected')
+      if (channelMode === 'protected'){
         await show_popup("Enter a password for the new channel:")
         password = $content
+      }
         name = "🚪 " + name;
         const response = await fetch(API_URL + "/channels", {
         credentials: "include",
diff --git a/front/volume/src/components/Chat.svelte b/front/volume/src/components/Chat.svelte
index 288a1d2..c34ed82 100644
--- a/front/volume/src/components/Chat.svelte
+++ b/front/volume/src/components/Chat.svelte
@@ -25,7 +25,7 @@
     getMembers();
     usersInterval = setInterval(async () => {
       getMembers();
-    }, 5000);
+    }, 1000);
   });
 
   socket.on("messages", (msgs: Array<chatMessagesType>) => {
@@ -63,7 +63,6 @@
 
   const sendMessage = () => {
     if (newText !== "") {
-      chatMessages = [...chatMessages.slice(-5 + 1)];
       socket.emit("addMessage", {
         text: newText,
         UserId: $store.ftId,
@@ -370,11 +369,12 @@
       </div>
     {/if}
     <form on:submit|preventDefault={sendMessage}>
-      <input type="text" placeholder="Type a message..." bind:value={newText} />
-      <button>
-        <img src="img/send.png" alt="send" />
+      <input  type="text" placeholder="Type a message..." bind:value={newText} />
+      <button style="background:#dedede; margin:auto" >
+        <img  src="img/send.png" alt="send" />
       </button>
     </form>
+    <div>
     <button on:click={leaveChannel}>Leave</button>
     <button
       on:click|stopPropagation={toggleChatMembers}
@@ -382,9 +382,10 @@
     >
       Chat Members
     </button>
+  </div>
+
     {#if showChatMembers}
       <div
-        class="chatMembers"
         on:click|stopPropagation
         on:keydown|stopPropagation
       />
@@ -424,7 +425,8 @@
     border: 1px solid #dedede;
     border-radius: 5px;
     padding: 1rem;
-    width: 300px;
+    max-width: 90%; 
+    width: auto;
     display: flex;
     flex-direction: column;
   }
@@ -439,8 +441,11 @@
 
   .message {
     font-size: 14px;
+    max-width: 90%;
+    width: auto;
     line-height: 1.4;
     margin-bottom: 0.5rem;
+    word-wrap:break-word;
   }
 
   .message-name {
@@ -449,7 +454,7 @@
   }
 
   input[type="text"] {
-    width: 100%;
+    width: 80%;
     padding: 0.5rem;
     border: 1px solid #dedede;
     border-radius: 5px;
@@ -486,7 +491,7 @@
     border: 1px solid #dedede;
     border-radius: 5px;
     padding: 1rem;
-    max-height: 100px;
+    max-height: 70%;
     overflow-y: scroll;
     z-index: 1;
   }