add modal for user

client/src/components/AppHeader.tsx

@@ -2,6 +2,7 @@ import logo from '@assets/images/logo-only.svg';
 import { useQuery } from '@tanstack/react-query';
 import { useCookies } from 'react-cookie';
 import Avatar from '@components/Avatar';
+import User from './User';
 import { getMeInfo } from '@controllers/UserController';
 import { FiLogOut } from 'react-icons/fi';
 
@@ -31,9 +32,7 @@ const AppHeader = () => {
           <div className="flex items-center gap-2 sm:gap-4">
             {meInfo.data && <Avatar user={meInfo.data} />}
             <div className="app-header__user__name">
-              <span className="text-white">
-                {meInfo.isLoading ? '' : meInfo.data ? meInfo.data.firstName + ' ' + meInfo.data.lastName : ''}
-              </span>
+              {meInfo.data && <User author={meInfo.data} />}
             </div>
             <button
               className="group relative flex w-auto justify-center rounded-md border border-red bg-red py-2 px-2 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"

client/src/components/Message.tsx

@@ -4,7 +4,7 @@ import Like from '@components/Like';
 import { getMeInfo } from '@controllers/UserController';
 import { useQuery } from '@tanstack/react-query';
 import { toastError } from '@controllers/Toasts';
-import { useState } from 'react';
+import User from './User';
 
 const Image = ({ image }: { image: string }) => {
   if (image === '' || image === null) {
@@ -44,9 +44,7 @@ const Message = ({ message }: any) => {
         {message.author && <Avatar user={message.author} />}
         <div className="flex flex-col gap-2 relative flex-grow">
           <div className="flex justify-between">
-            <div className="text-red-light text-xl username">
-              {message.author.firstName} {message.author.lastName}
-            </div>
+            {message.author && <User author={message.author} />}
             {(me.data?.id === message.author.id) || (me.data?.role === 'ADMIN') ? (
               <PopupMenu message={message} />
             ) : null}

client/src/components/MessageWrapper.tsx

@@ -20,8 +20,8 @@ const MessageWrapper = () => {
   }
 
   return (
-    <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col flex-shrink relative overflow-y-scroll">
-      <ScrollToBottom className="message-container flex flex-col gap-4 w-full max-w-3xl pt-4 pb-6 -mb-3 px-2 md:px-0">
+    <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col flex-shrink relative overflow-y-hidden">
+      <ScrollToBottom className="message-container flex flex-col gap-4 w-full max-w-3xl overflow-scroll pt-4 pb-6 px-2 md:px-0">
         {isLoading
           ? ''
           : isError

client/src/components/ScrollToBottom.tsx

@@ -33,15 +33,15 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
       <div className={className}>
         {children}
         <div className="scroll-bottom" ref={bottom}></div>
-        <button
-          onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
-          className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -bottom-10')}
-        >
-          <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
-            <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
-          </div>
-        </button>
       </div>
+      <button
+        onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
+        className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -bottom-10')}
+      >
+        <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
+          <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
+        </div>
+      </button>
     </>
   );
 };

client/src/components/User.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import Modal from './Modal';
+
+const User = ({ author }: any) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <button className="text-red-light text-xl username" onClick={() => setShow(true)}>
+        {author.firstName} {author.lastName}
+      </button>
+      <Modal show={show}>
+        <div className="flex flex-col gap-5">
+          <div className="flex flex-col gap-2">
+            <div className="text-2xl text-white">User info</div>
+            <div className="text-white">First name: {author.firstName}</div>
+            <div className="text-white">Last name: {author.lastName}</div>
+            <div className="text-white">Email: {author.email}</div>
+          </div>
+          <button className="btn" onClick={() => setShow(false)}>
+            Close
+          </button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default User;