fix Message UI and other bugs

src/app/(withLayout)/layout.tsx

@@ -57,7 +57,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           <LeftNavbar />
         </div>
       </div>
-      <div className="lg:w-3/5 w-full ">{children}</div>
+      <div className="lg:w-3/5 w-full">{children}</div>
       <div className="w-1/5 hidden lg:block ">
         <div className="fixed w-1/5 right-0 z-10 overflow-y-auto ">
           <Card className="h-with-navbar overflow-y-auto px-4">

src/components/atoms/LogoNavbar/index.tsx

@@ -91,7 +91,7 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
                     height={40}
                     objectFit="cover"
                     className="w-[40px] h-[40px] rounded-full"
-                    src={userProfileData.cover_dp?.imageUrl || avatar}
+                    src={userProfileData?.profile_dp?.imageUrl || avatar}
                     alt="profile.png"
                   />
                   <FaAngleDown />
@@ -160,12 +160,12 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
   }
 
   return (
-    <div className="w-full h-[68px]">
+    <div className="w-full h-[68px] ">
       <div className="fixed w-full top-0 left-0 z-50">
         <div
           className={`${
             shouldPadding ? 'px-4 lg:px-28' : 'px-4'
-          } w-ful w-full h-[68px]  mx-auto py-3 flex items-center justify-between bg-white fixed top-0`}
+          } w-ful w-full h-[68px]  mx-auto py-3 flex items-center justify-between bg-white fixed top-0 border-b-[1px] border-neutral-200`}
         >
           <div>
             <Link className="flex gap-4 center-v" href="/">

src/components/atoms/PostCardImagesGrid/index.tsx

@@ -47,7 +47,7 @@ const DynamicImageContainer = ({ images, setImageCarasol }: props) => {
   }
 
   return (
-    <div className={`grid gap-2 ${getGridTemplate()} w-full h-80  px-4 mx-auto`}>
+    <div className={`grid gap-2 ${getGridTemplate()} w-full h-80 mx-auto py-4`}>
       {images?.slice(0, 4).map((src, index) => (
         <div
           key={index}

src/components/communityUniversity/GroupSelectors.tsx

@@ -1,40 +1,40 @@
 import { useRouter } from 'next/navigation'
 import React from 'react'
-import { FaStar } from 'react-icons/fa'
+import { FaStar, FaUniversity } from 'react-icons/fa'
 import { IoMdSettings } from 'react-icons/io'
+import { PiStudentFill } from 'react-icons/pi'
 
 const GroupSelectors = ({ setCurrSelectedGroup, currSelectedGroup, data, setAssignUsers, userId, paramGroupId, SetcurrClickedID }: any) => {
   const router = useRouter()
   const handleGroupNavigate = () => {
     setCurrSelectedGroup(data)
     router.push(`/community/${data?.communityId}/${data?._id}`)
   }
+  const isSelected = paramGroupId && paramGroupId[1] == data?._id
+  console.log(paramGroupId, data?._idect)
   return (
     <div
-      className={`flex items-center ${
-        paramGroupId && paramGroupId == data?._id
-          ? 'bg-[#F3F2FF] max-md:bg-white max-md:after:h-[4px] after:rounded-full'
-          : 'border-t-2 max-md:border-0 border-neutral-300'
+      className={`flex items-center cursor-pointer hover:bg-secondary ${
+        isSelected ? 'bg-secondary max-md:bg-white max-md:after:h-[4px] after:rounded-full' : 'max-md:border-0 border-neutral-300'
       }  `}
     >
       <div
         onClick={() => handleGroupNavigate()}
-        className={`flex w-full   items-center gap-1 py-2 px-3 first-of-type:border-0  relative after:content-[''] after:absolute after:left-3 after:z-30 after:top-[calc(90%+10px)]  after:w-[calc(60%)]  after:bg-[#6647FF] `}
+        className={`flex w-full   items-center gap-3 py-2 px-4 first-of-type:border-0  relative after:content-[''] after:absolute after:left-3 after:z-30 after:top-[calc(90%+10px)]  after:w-[calc(60%)]  after:bg-[#6647FF] `}
       >
         {data?.communityGroupLogoUrl?.imageUrl ? (
           <img className="w-10 h-10 object-cover rounded-full" src={data?.communityGroupLogoUrl.imageUrl} alt="dp" />
         ) : (
-          <div className="w-10 h-10 object-cover rounded-full bg-green-500 z-10"></div>
+          <PiStudentFill className="w-10 h-10 p-2 rounded-full text-primary bg-white shadow-lg " />
         )}
-        <label className=" max-md:hidden font-medium text-xs ">{data?.title}</label>
-        {/* <FaStar className="max-md:hidden" size={24} color="#F59E0B" /> */}
+        <label className={`text-xs  text-neutral-700 ${isSelected ? 'font-semibold' : 'font-medium'} `}>{data?.title}</label>
       </div>
       {data?.adminUserId._id == userId && (
         <button
           onClick={() => {
             setAssignUsers(true), SetcurrClickedID({ id: data?._id, group: true })
           }}
-          className="text-[#6647FF]  font-medium bg-[#F3F2FF] px-2 py-2 w-max h-max  rounded-full   max-lg:text-sm max-md:mr-0"
+          className="text-[#6647FF]  font-medium bg-[#F3F2FF] px-2 py-2 w-max h-max mr-4 rounded-full   max-lg:text-sm max-md:mr-0"
         >
           <IoMdSettings />
         </button>

src/components/molecules/MessageTopBar/index.tsx

@@ -1,4 +1,6 @@
 'use client'
+import LoginButton from '@/components/atoms/LoginButton'
+import LoginButtons from '@/components/atoms/LoginButtons'
 import React, { useState } from 'react'
 import { IoIosSearch } from 'react-icons/io'
 import CreateGroupChat from '../CreateGroupChat'
@@ -18,17 +20,17 @@ const MessageTopBar = ({ currTab, setCurrTab, unreadNotAcceptedChatsCount, setSe
 
   return (
     <>
-      <div className=" px-14 pt-12 pb-8 font-medium text-[20px] flex flex-col gap-9 relative">
-        <div className=" flex gap-8 items-center">
+      <div className=" px-4 py-4 font-medium text-[20px] flex flex-col gap-9 relative border-b-[1px] border-neutral-200 font-poppins">
+        <div className=" flex gap-8 items-center text-sm">
           <div
             onClick={() => {
               setCurrTab('Inbox'), setSelectedChat(undefined)
             }}
-            className={`${currTab == 'Inbox' ? 'text-primary-500' : 'text-neutral-500'} flex items-center gap-2 cursor-pointer`}
+            className={`${currTab == 'Inbox' ? 'text-primary-500 font-semibold' : 'text-neutral-500'} flex items-center gap-2 cursor-pointer `}
           >
-            Inbox{' '}
+            Inbox
             {unreadChatsCount > 0 && (
-              <p className="bg-destructive-600 w-6 h-6 rounded-full text-white flex items-center justify-center  text-2xs font-semibold ">
+              <p className="bg-destructive-600 w-4 h-4 rounded-full text-white flex items-center justify-center  text-2xs font-semibold ">
                 {unreadChatsCount}
               </p>
             )}
@@ -41,7 +43,7 @@ const MessageTopBar = ({ currTab, setCurrTab, unreadNotAcceptedChatsCount, setSe
           >
             Message Requests{' '}
             {unreadNotAcceptedChatsCount > 0 && (
-              <p className="bg-destructive-600 w-6 h-6 rounded-full text-white flex items-center justify-center  text-2xs font-semibold ">
+              <p className="bg-destructive-600 w-4 h-4 rounded-full text-white flex items-center justify-center  text-2xs font-semibold ">
                 {unreadNotAcceptedChatsCount}
               </p>
             )}
@@ -55,9 +57,13 @@ const MessageTopBar = ({ currTab, setCurrTab, unreadNotAcceptedChatsCount, setSe
             Starred
           </p>
 
-          <button onClick={() => setShowOneToOne(true)} className="bg-primary-500 px-3 py-2 text-xs font-medium text-white rounded-lg">
+          <LoginButtons size="extra_small" onClick={() => setShowOneToOne(true)}>
+            {' '}
             Start a Chat
-          </button>
+          </LoginButtons>
+          {/*<button className="bg-primary-500 px-3 py-2 text-xs font-medium text-white rounded-lg">
+            Start a Chat
+          </button>*/}
         </div>
       </div>
       {showCreateGroup && <CreateGroupChat setShowCreateGroup={setShowCreateGroup} setShowOneToOne={setShowOneToOne} />}

src/components/molecules/MessageUserStickyBar/index.tsx

@@ -74,34 +74,34 @@ const MessageUserStickyBar = ({
   }
 
   return (
-    <div className="sticky top-16 z-10 flex justify-between border-y border-neutral-300 px-10 py-5 shadow-medium bg-white">
+    <div className="fixed w-full top-0 z-10 flex justify-between border-b border-neutral-300 rounded-t-2xl bg-white py-2 px-4">
       <div className="flex items-center gap-4">
         <p onClick={() => setSelectedChat(undefined)}>
-          <IoIosArrowBack className="w-8 h-8 text-[#6744FF]" />
+          <IoIosArrowBack className="w-8 h-8 text-[#6744FF] cursor-pointer" />
         </p>
         <div className="relative">
-          <Image src={profileCover || avatar} alt="dp" width={44} height={44} className="w-14 h-14 rounded-full" />
+          <Image src={profileCover || avatar} alt="dp" width={44} height={44} className="w-12 h-12 rounded-full" />
           <p
             className={`w-4 h-4 ${
               userName?.some((item) => item?.isOnline) ? 'bg-success-500' : 'bg-neutral-300'
             } rounded-full border-2 border-white absolute bottom-0 right-0 `}
           ></p>
         </div>
         <div>
-          <h3 className="text-sm font-medium text-neutral-700">{name}</h3>
+          <h3 className="text-sm font-semibold text-neutral-700">{name}</h3>
           {isGroupChat ? (
             <p className="text-2xs font-normal text-neutral-500">{description}</p>
           ) : (
             <>
               <p className="text-2xs font-normal text-neutral-500">{universitry}</p>
-              <p className="text-2xs font-normal text-neutral-500">
+              {/*<p className="text-2xs font-normal text-neutral-500">
                 {studyYear} Yr. {degree}
-              </p>
+              </p>*/}
             </>
           )}
         </div>
       </div>
-      <div className="flex gap-2 items-center">
+      <div className="flex gap-4 items-center">
         {isRequestNotAccepted && (
           <button
             onClick={() => handleMoveToInbox()}
@@ -111,9 +111,9 @@ const MessageUserStickyBar = ({
           </button>
         )}
         {YourDetails[0]?.isStarred ? (
-          <FaStar onClick={() => handleStarred()} className={` w-8 h-8 text-yellow-300`} />
+          <FaStar onClick={() => handleStarred()} className={`w-6 h-6 text-yellow-300`} />
         ) : (
-          <CiStar onClick={() => handleStarred()} className={` w-8 h-8 `} />
+          <CiStar onClick={() => handleStarred()} className={`w-6 h-6 `} />
         )}
         <Popover>
           <PopoverTrigger>