UI improvements

client/index.html

@@ -5,9 +5,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/turtle.svg"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Turtel chat 🐢</title>
 
     <style>
       body{

client/public/turtle.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 512 512" xml:space="preserve">
+<polygon style="fill:#84D993;" points="350.609,320 512,320 512,286.609 457.461,247.096 "/>
+    <path style="fill:#B9F291;" d="M456.348,230.957c-30.736,0-55.652,24.917-55.652,55.652H512
+	C512,255.873,487.083,230.957,456.348,230.957z"/>
+    <rect y="286.609" style="fill:#84D993;" width="87.93" height="33.391"/>
+    <rect x="81.252" y="303.861" style="fill:#F6D76F;" width="274.922" height="49.53"/>
+    <rect x="33.391" y="303.304" style="fill:#B9F291;" width="89.043" height="105.739"/>
+    <rect x="311.652" y="302.191" style="fill:#84D993;" width="89.043" height="106.852"/>
+    <polygon style="fill:#578C76;" points="149.148,211.478 217.043,320 400.696,320 400.696,286.609 "/>
+    <g>
+	<polygon style="fill:#50BF94;" points="217.043,320 217.043,234.852 33.391,286.609 33.391,320 	"/>
+        <path style="fill:#50BF94;" d="M162.504,146.922l54.539,139.687h183.652c0-56.221-25.264-106.552-65.059-140.23
+		C292.73,146.379,216.98,146.922,162.504,146.922z"/>
+</g>
+    <g>
+	<path style="fill:#84D993;" d="M335.637,146.379c-31.99-27.088-73.381-43.422-118.594-43.422l-67.896,58.435l67.896,67.827
+		C271.519,229.218,317.938,194.715,335.637,146.379z"/>
+        <path style="fill:#84D993;" d="M217.043,286.609v-140.8c-54.476,0-80.139,0.57-118.594,0.57
+		c-39.795,33.678-65.058,84.009-65.058,140.23H217.043z"/>
+</g>
+    <path style="fill:#B9F291;" d="M217.043,229.218V102.957c-45.213,0-86.604,16.334-118.594,43.422
+	C116.149,194.715,162.568,229.218,217.043,229.218z"/>
+</svg>

client/src/components/chat/MessageForm.tsx

@@ -4,9 +4,8 @@ import type { KeyboardEventHandler } from 'react';
 import { socket } from '../../socket/socket.tsx';
 import { ChatMessagesProps, ContactsProps } from '../../pages/Chat.tsx';
 import { axiosClient } from '../../App.tsx';
-import { File, Paperclip, X } from 'lucide-react';
+import { File, Paperclip, Send, X } from 'lucide-react';
 import LoadingWheel from '@/components/chat/LoadingWheel.tsx';
-
 type Input = {
   message: string;
   attachments: FileList | null;
@@ -260,7 +259,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
                   ref(e);
                   textareaRef.current = e;
                 }}
-                className={`w-full overflow-y-hidden resize-none bg-green-50 text-black rounded-md p-2 min-h-[40px] max-h-96
+                className={`ml-2 w-full overflow-y-hidden resize-none bg-gray-700 border-none text-white rounded-2xl p-2 min-h-[40px] max-h-96 placeholder:text-gray-400 placeholder:pl-2 focus:outline-none focus:ring-0
                 ${isOverLimit ? 'border-2 border-red-500' : isNearLimit ? 'border-2 border-yellow-500' : ''} mx-auto`}
                 autoFocus={!!contact}
                 disabled={!contact}
@@ -274,7 +273,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
                     ? 'text-red-500 font-bold'
                     : isNearLimit
                       ? 'text-yellow-600'
-                      : 'text-gray-500'
+                      : 'text-gray-200'
                 }`}
               >
                 {charCount}/2000
@@ -282,7 +281,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
             </div>
           </div>
           {errorMessage ? <p className="text-red-200">{errorMessage}</p> : null}
-          <div className="flex gap-2">
+          <div className="flex mr-2">
             <label
               htmlFor="attachments"
               className="flex items-center justify-center hover:cursor-pointer p-1 rounded-full hover:bg-gray-800"
@@ -304,11 +303,11 @@ const MessageForm = ({ contact }: MessageFormProps) => {
               <span className="text-gray-500 text-sm">Uploading...</span>
             )}
             <button
-              className="text-black bg-green-500 hover:bg-green-400 font-bold py-2 px-4 rounded w-24 shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="text-white hover:bg-gray-800 p-1 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed h-10 w-10"
               type="submit"
               disabled={isOverLimit || isSending || isUploading}
             >
-              {isSending ? <LoadingWheel /> : <p>send</p>}
+              {isSending ? <LoadingWheel /> : <Send />}
             </button>
           </div>
         </div>

server/socket/socket.js

@@ -17,7 +17,7 @@ function initializeSocket(io) {
     const token = socket.handshake.auth.token;
     if (!token) {
       console.log("(socket) Not logged in");
-      return next(new Error("(socket) Not logged in"));
+      return next(new Error("Not logged in"));
     }
 
     try {