Upgrade graphic of the chat

front/src/Components/Chat/Chat.svelte

@@ -32,7 +32,7 @@
 
 <aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
     <section class="chatWindowTitle">
-        <h3>Here is your chat history <button on:click={closeChat}>❌</button></h3>
+        <h3>Here is your chat history <span class="float-right" on:click={closeChat}>&times</span></h3>
 
     </section>
     <section class="messagesList">
@@ -50,7 +50,15 @@
 <style lang="scss">
     h3 {
       font-family: 'Whiteney';
+
+      span.float-right {
+        font-size: 30px;
+        line-height: 25px;
+        font-weight: bold;
+        float: right;
+      }
     }
+
     aside.chatWindow {
       z-index:100;
       pointer-events: auto;
@@ -60,7 +68,7 @@
       height: 100vh;
       width:30vw;
       min-width: 350px;
-      background: #051f33;
+      background: rgb(5, 31, 51, 0.9);
       color: whitesmoke;
       display: flex;
       flex-direction: column;

front/src/Components/Chat/ChatElement.svelte

@@ -25,9 +25,9 @@
 <div class="chatElement">
     <div class="messagePart">
         {#if message.type === ChatMessageTypes.userIncoming}
-            ➡️: {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} ({renderDate(message.date)})
+            &gt;&gt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} enter ({renderDate(message.date)})
         {:else if message.type === ChatMessageTypes.userOutcoming}
-            ⬅️: {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} ({renderDate(message.date)})
+            &lt;&lt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} left ({renderDate(message.date)})
         {:else if message.type === ChatMessageTypes.me}
             <h4>Me: ({renderDate(message.date)})</h4>
             {#each texts as text}

front/src/Components/Chat/ChatMessageForm.svelte

@@ -39,6 +39,8 @@
           border: none;
           font-size: 22px;
           font-family: Whiteney;
+          min-width: 0; //Needed so that the input doesn't overflow the container in firefox
+          outline: none;
         }
         
         button {

front/src/WebRtc/ColorGenerator.ts

@@ -1,5 +1,9 @@
 export function getRandomColor(): string {
-    return hsv_to_rgb(Math.random(), 0.5, 0.95);
+    const golden_ratio_conjugate = 0.618033988749895;
+    let hue = Math.random();
+    hue += golden_ratio_conjugate;
+    hue %= 1;
+    return hsv_to_rgb(hue, 0.5, 0.95);
 }
 
 //todo: test this.