UI improvements

client/src/components/chat/AddGroupMember.tsx

@@ -120,7 +120,7 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
     <>
       <div>
         <button
-          className="m-2 p-1 rounded-md hover:bg-gray-800"
+          className="m-2 p-1 rounded-xl hover:bg-gray-800 border"
           onClick={() =>
             (
               document.getElementById('addMemberModal') as HTMLDialogElement

client/src/components/chat/AttachmentPreview.tsx

@@ -57,7 +57,7 @@ const AttachmentPreview = ({ url }: { url: string }) => {
   }
 
   return (
-    <div className="relative min-h-64 w-full">
+    <div className="relative min-h-64 w-full ">
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 rounded">
           <LoadingWheel />

client/src/components/chat/ContactForm.tsx

@@ -120,7 +120,7 @@ function ContactForm({ InitializeContact, setContactsList }: ContactFormProps) {
       <div className="text-center">
         <form onSubmit={handleSubmit(submitContact)}>
           <input
-            className="text-black bg-green-50 pl-2 shadow-lg rounded-md h-8 mb-2 mt-2"
+            className="text-white bg-gray-800 pl-2 shadow-lg rounded-xl h-8 mb-2 mt-2 placeholder:text-gray-400 outline-none border-gray-600 focus:outline-none focus:ring-0"
             type="text"
             placeholder="Search for user"
             onKeyDown={handleKeyDown}

client/src/components/chat/ContactProfile.tsx

@@ -2,6 +2,7 @@ import profile from '../../../assets/profile.svg';
 import CreateGroupButton from './CreateGroupButton.tsx';
 import AddGroupMember from './AddGroupMember.tsx';
 import { ContactsProps } from '../../pages/Chat.tsx';
+import { UsersRound } from 'lucide-react';
 
 type ContactProfileProps = {
   contact: ContactsProps | null;
@@ -11,10 +12,13 @@ function ContactProfile({ contact }: ContactProfileProps) {
   return (
     <div className="flex items-center">
       <div className="flex items-center p-2">
-        <img className="w-4 mr-2 invert" src={profile} alt="profile img" />
+        {contact?.type === 'group' ? (
-        <p>
+          <UsersRound className="w-5 mr-2" />
-          {contact?.user_id} {contact ? contact.username : null}
+        ) : (
-        </p>
+          <img className="w-4 mr-2 invert" src={profile} alt="profile img" />
+        )}
+
+        <p>{contact ? contact.username : null}</p>
       </div>
       <div className="flex-grow"></div>
 

client/src/components/chat/ContactsList.tsx

@@ -102,7 +102,7 @@ function ContactsList({
 
   const ContactItem = ({ contact }: { contact: ContactsProps }) => (
     <li
-      className="flex hover:bg-green-700 p-2 rounded cursor-pointer justify-between items-center min-h-[40px]"
+      className=" flex hover:bg-slate-700 p-2 rounded-2xl cursor-pointer justify-between items-center min-h-[40px]"
       onClick={() => {
         initializeContact(contact);
         updateContactStatus(contact, true);

client/src/components/chat/CreateGroupButton.tsx

@@ -40,7 +40,7 @@ function CreateGroupButton() {
     <>
       <div>
         <button
-          className="m-2 border p-1 rounded-md"
+          className="m-2 border p-1 rounded-xl"
           onClick={() =>
             (
               document.getElementById('createGroupModal') as HTMLDialogElement

client/src/components/chat/MessageForm.tsx

@@ -259,7 +259,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
                   ref(e);
                   textareaRef.current = e;
                 }}
-                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
+                className={`ml-2 w-full overflow-y-hidden resize-none bg-gray-800 border-none text-white rounded-2xl p-2 min-h-[40px] max-h-96 placeholder:text-gray-400 focus:outline-none focus:ring-0
                 ${isOverLimit ? 'border-2 border-red-500' : isNearLimit ? 'border-2 border-yellow-500' : ''} mx-auto`}
                 autoFocus={!!contact}
                 disabled={!contact}
@@ -268,7 +268,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
                 rows={1}
               />
               <span
-                className={`absolute right-2 bottom-1 text-sm ${
+                className={`absolute right-2 bottom-1 text-sm text-gray-400 ${
                   isOverLimit
                     ? 'text-red-500 font-bold'
                     : isNearLimit

client/src/components/chat/ParticipantsBar.tsx

@@ -11,7 +11,7 @@ import {
 } from '@/components/ui/context-menu';
 import { UsernameType } from '@/utils/ProtectedRoutes.tsx';
 import { useOutletContext } from 'react-router-dom';
-
+import zdjecie from '../../../assets/turtleProfileImg3.webp';
 type ParticipantsProps = {
   user_id: string;
   username: string;
@@ -239,8 +239,16 @@ function ParticipantsBar({
     (participant: ParticipantsProps) => (
       <ContextMenu key={participant.user_id}>
         <ContextMenuTrigger>
-          <li className="p-2 hover:bg-gray-700 rounded-md flex items-center justify-between group">
+          <li className="p-2 hover:bg-slate-600 rounded-2xl flex items-center justify-between group bg-slate-700 m-2">
             <span className="flex items-center gap-2">
+              <div className="flex items-center justify-center w-8 h-8  overflow-hidden rounded-full bg-gray-100">
+                <img
+                  src={zdjecie}
+                  alt="Profile image"
+                  className="h-full w-full object-cover"
+                />
+              </div>
+
               {participant.username}
               {participant.isowner ? (
                 <span className="flex items-center text-yellow-400 text-xs">

client/src/components/chat/UserProfile.tsx

@@ -1,4 +1,4 @@
-import zdjecie from '../../../assets/profile.svg';
+import zdjecie from '../../../assets/turtleProfileImg3.webp';
 import logoutIcon from '../../../assets/logout.svg';
 import Cookies from 'js-cookie';
 import { useOutletContext } from 'react-router-dom';
@@ -19,10 +19,13 @@ function UserProfile() {
         className="flex items-center cursor-pointer"
         role="button"
       >
-        <div className="flex items-center justify-center m-3 w-12 h-12 overflow-hidden">
+        <div className="flex items-center justify-center m-3 w-10 h-10 overflow-hidden rounded-full bg-gray-100">
-          <img src={zdjecie} alt="Profile image" className="w-8 h-8 invert" />
+          <img
+            src={zdjecie}
+            alt="Profile image"
+            className="h-full w-full object-cover"
+          />
         </div>
-
         <div className="text-gray-200">
           <p>{user.username}</p>
         </div>

client/src/pages/404.tsx

@@ -1,7 +1,7 @@
-import gif from "../../assets/404.gif";
+import gif from '../../assets/404.gif';
 function Lost() {
   return (
-    <div className="flex items-center justify-center h-screen ">
+    <div className="flex items-center justify-center h-screen bg-[#121212]">
       <img src={gif} alt="Lost" draggable="false" />
     </div>
   );