UI Tweaks, supabase changes, removed presence

components/avatar/index.tsx

@@ -9,7 +9,7 @@ const Avatar = (props: IAvatarProps) => {
     return (
       <Fragment>
         <div
-          className={`flex justify-center items-center flex-wrap rounded-full ml-2
+          className={`flex justify-center items-center flex-wrap rounded-full
         ${loading ? 'blur-xl' : 'blur-0'}
         ${isStatus ? 'p-1 border-2 border-stone-500' : ''}
         ${size === 50 ? 'w-10' : 'w-12'}`}

components/cards/message/index.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import Avatar from '@/components/avatar';
 import { messageTypes } from '@/utils/enums';
 import { IMessageCardProps } from '@/types';
 import MessageMedia from '@/components/media/message';
-import VerticalEllipsis from '@/components/svgs/ellipsis/vertical';
 import MessageMenu from '@/components/menus/message';
 import Close from '@/components/svgs/close';
 import { isImage } from '@/utils/helpers';
@@ -23,9 +21,7 @@ export default function MessageCard(props: IMessageCardProps) {
     const {
       referenceId,
       type,
-      messageAuthorName,
       messageTime,
-      messageImagePath,
       content,
       onDeleteHandler,
       onCopyHandler,
@@ -44,64 +40,51 @@ export default function MessageCard(props: IMessageCardProps) {
 
     return (
       <div className={`flex ${type === messageTypes.SENT && 'justify-end'}`}>
-        {messageAuthorName && type === messageTypes.RECEIVED ? (
-          <div className="hidden md:flex flex-col justify-start items-center mt-4">
-            <Avatar
-              name={messageAuthorName}
-              imagePath={messageImagePath}
-              size={60}
+        {options ? (
+          <div className="mt-6">
+            <MessageMenu
+              messageTime={messageTime}
+              referenceId={referenceId}
+              options={options}
+              setOptions={setOptions}
+              onDeleteHandler={onDeleteHandler}
+              onCopyHandler={onCopyHandler}
+              onForwardHandler={onForwardHandler}
+              onEditHandler={onEditHandler}
+              onViewHandler={onViewHandler}
+              loading={loading}
+              isImage={isImage(content)}
+              setForward={setForward}
             />
           </div>
-        ) : null}
-        {options ? (
-          <MessageMenu
-            messageTime={messageTime}
-            referenceId={referenceId}
-            options={options}
-            setOptions={setOptions}
-            onDeleteHandler={onDeleteHandler}
-            onCopyHandler={onCopyHandler}
-            onForwardHandler={onForwardHandler}
-            onEditHandler={onEditHandler}
-            onViewHandler={onViewHandler}
-            loading={loading}
-            isImage={isImage(content)}
-            setForward={setForward}
-          />
         ) : (
-          <div
+          <button
+            onClick={() =>
+              type === messageTypes.SENT && handleOpenMessageOptions()
+            }
             title={messageTime}
-            className={`my-2 md:my-4 min-w-max rounded-lg md:rounded-xl ${
+            className={`my-2 md:my-4 min-w-max rounded-lg md:rounded-xl cursor-pointer ${
               isImage(content)
                 ? 'bg-transparent'
                 : 'p-2 md:p-4 bg-gradient-to-r'
             } ${
               type === messageTypes.RECEIVED
-                ? 'from-green-400 ml-2 to-green-500 rounded-tl-none cursor-pointer'
-                : 'from-stone-400 to-stone-500 rounded-tr-none cursor-pointer text-right'
+                ? 'bg-black text-white rounded-tl-none'
+                : 'bg-white text-black rounded-tr-none'
             }`}
           >
             <MessageMedia content={content} />
-          </div>
+          </button>
+        )}
+        {type === messageTypes.SENT && options && (
+          <button
+            className="flex h-min mt-8 text-white hover:text-white bg-black rounded-full"
+            title="Close Message Options"
+            onClick={() => setOptions((prev) => !prev)}
+          >
+            <Close size={6} />
+          </button>
         )}
-        {type === messageTypes.SENT &&
-          (options ? (
-            <button
-              className="flex h-min mt-4 text-stone-100 hover:text-white"
-              title="Close Message Options"
-              onClick={() => setOptions((prev) => !prev)}
-            >
-              <Close size={6} />
-            </button>
-          ) : (
-            <button
-              className="flex h-min mt-4 text-stone-900 hover:text-white"
-              title="Message Options"
-              onClick={handleOpenMessageOptions}
-            >
-              <VerticalEllipsis />
-            </button>
-          ))}
       </div>
     );
   } else return null;

components/cards/user/index.tsx

@@ -13,10 +13,10 @@ const UserCard = (props: IUserCardProps) => {
     }
 
     return (
-      <div className="w-full bg-s rounded-lg shadow">
-        <div className="block md:flex justify-between items-center py-4">
+      <div className="w-full rounded-lg py-2">
+        <div className="block md:flex justify-between items-center">
           <div className="flex items-center">
-            <div className="mr-4">
+            <div className="mr-2">
               <Avatar
                 imagePath={user.imageUrl ?? resourcePaths.imageFavicon}
                 name="default one"
@@ -34,7 +34,7 @@ const UserCard = (props: IUserCardProps) => {
               </span>
             </div>
           </div>
-          <div className="flex mt-4">
+          <div className="flex">
             <button
               className="focus:outline-none text-black bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 flex justify-center items-center w-full"
               onClick={handleInvitation}
@@ -44,7 +44,7 @@ const UserCard = (props: IUserCardProps) => {
                   <Spinner size={6} />
                 </div>
               )}
-              <span>Message</span>
+              <span className="text-white">Message</span>
             </button>
           </div>
         </div>

components/dialog/index.tsx

@@ -13,7 +13,7 @@ const Dialog = (props: IDialogProps) => {
     } = props;
     return (
       <div
-        className={`rounded-2xl bg-gradient-to-r from-stone-400 to-stone-500 shadow-stone-500 shadow-2xl w-full mb-4`}
+        className={`rounded-2xl bg-gradient-to-r from-stone-200 to-stone-200  w-full mb-4`}
       >
         <div className="flex justify-between items-center p-4">
           <h1 className="hidden md:block text-black text-md md:text-xl font-bold">

components/forms/message/buttons/Submit.tsx

@@ -14,7 +14,7 @@ const SubmitButton = (props: {
     return (
       <button
         type="submit"
-        className="p-2 md:p-4 rounded-r-full bg-green-500 hover:bg-green-600 text-black"
+        className="p-2 md:p-4 rounded-r-full text-stone-600 hover:text-green-600"
         title="Send Message"
         onClick={() => onSubmitHandler(context)}
       >
@@ -25,7 +25,7 @@ const SubmitButton = (props: {
     return (
       <button
         type="submit"
-        className="p-2 md:p-4 rounded-r-full bg-green-500 hover:bg-green-600 text-black"
+        className="p-2 md:p-4 rounded-r-full text-stone-600 hover:text-green-600"
         title="Cancel Edit"
         onClick={() => onSubmitHandler(context)}
       >

components/forms/message/index.tsx

@@ -128,14 +128,14 @@ const MessageEditor = (props: IMessageEditorProps) => {
           )}
           <div className="flex items-center justify-center w-full">
             <button
-              className="py-2 md:py-4 pl-2 md:pl-4 rounded-l-full bg-stone-400 text:md md:text-xl text-black hover:text-green-500 flex items-center justify-center"
+              className="py-2 md:py-4 pl-2 md:pl-4 rounded-l-full bg-stone-300 text:md md:text-xl text-stone-600 hover:text-green-500 flex items-center justify-center"
               title="Insert Emoji"
             >
               <Emoji size={ui.iconSize} />
             </button>
             <input
               ref={textInputRef}
-              className="basis-0 w-60 md:basis-11/12 p-2 md:p-4 outline-none text-md md:text-xl font-semibold bg-stone-400 text-black placeholder-stone-600"
+              className="basis-0 w-60 md:basis-11/12 p-2 md:p-4 outline-none text-md md:text-xl font-semibold bg-stone-300 text-black placeholder-stone-600"
               placeholder="Type a message"
               value={input}
               onBlur={onBlurHandler}
@@ -144,8 +144,8 @@ const MessageEditor = (props: IMessageEditorProps) => {
               title="Type Message Here"
             />
             <button
-              className={`p-2 md:p-4 bg-stone-400 ${
-                mediaModal ? 'text-green-500' : 'text-black'
+              className={`p-2 md:p-4 bg-stone-300 ${
+                mediaModal ? 'text-green-500' : 'text-stone-600'
               } hover:text-green-500`}
               title="Send Media"
               onClick={() => setMediaModal(!mediaModal)}

components/links/message/index.tsx

@@ -3,8 +3,6 @@ import Avatar from '@/components/avatar';
 import { IMessageLinkProps } from '@/types';
 import { getBriefContent, isImage } from '@/utils/helpers';
 import { strings } from '@/utils/enums';
-import VerticalEllipsis from '@/components/svgs/ellipsis/vertical';
-import Close from '@/components/svgs/close';
 import GroupMenu from '@/components/menus/group';
 
 const MessageLink = (props: IMessageLinkProps) => {
@@ -51,18 +49,20 @@ const MessageLink = (props: IMessageLinkProps) => {
               groupId={messageId}
               options={options}
               isUnread={messageUnread > 0}
+              requireOptions={requireOptions}
+              setOptions={setOptions}
             />
           </div>
         ) : (
-          <a
-            href={void 0}
+          <button
             className="cursor-pointer min-w-full"
             title={messageAuthorName ?? ''}
             onClick={() => messageOnClick(messageId, strings.groupId)}
+            onDoubleClick={handleOpenGroupOptions}
           >
             <div
-              className={`flex justify-center items-start mb-4 py-4 rounded-2xl hover:bg-stone-400 ${
-                messageIsActive ? 'bg-stone-400' : null
+              className={`flex justify-center items-start py-4 rounded-xl ${
+                messageIsActive ? 'bg-stone-300' : null
               }`}
             >
               <Avatar
@@ -72,13 +72,17 @@ const MessageLink = (props: IMessageLinkProps) => {
                 isStatus={messageAuthorIsStatus}
                 isOnline={messageAuthorIsOnline}
               />
-              <div className="basis-2/4 ml-4 font-bold truncate">
-                <h1 className="text-md md:text-xl text-black truncate max-w-xs">
+              <div className="basis-2/4 ml-4 font-normal truncate">
+                <h1
+                  className={`${
+                    messageIsActive ? 'bg-black text-white' : 'text-black'
+                  } text-md md:text-xl truncate max-w-xs text-left`}
+                >
                   {messageAuthorName}
                 </h1>
                 <p
                   className={
-                    'text-sm md:text-md text-stone-700 truncate max-w-xs'
+                    'text-sm md:text-md text-stone-700 truncate max-w-xs text-left'
                   }
                 >
                   {active?.groupId === messageId && active?.value ? (
@@ -105,28 +109,7 @@ const MessageLink = (props: IMessageLinkProps) => {
                 )}
               </div>
             </div>
-          </a>
-        )}
-        {requireOptions && (
-          <div className="mx-2 mb-4 z-10">
-            {options ? (
-              <button
-                className="flex h-min text-stone-100"
-                title="Close Group Options"
-                onClick={() => setOptions((prev) => !prev)}
-              >
-                <Close size={6} />
-              </button>
-            ) : (
-              <button
-                className="flex h-min text-stone-900 hover:text-white"
-                title="Group Options"
-                onClick={handleOpenGroupOptions}
-              >
-                <VerticalEllipsis />
-              </button>
-            )}
-          </div>
+          </button>
         )}
       </div>
     );

components/media/message/index.tsx

@@ -19,7 +19,7 @@ const MessageMedia = (props: { content: string }) => {
     }
     return (
       <h1
-        className="max-w-xs text-sm md:text-md text-white font-semibold md:font-bold text-ellipsis overflow-hidden"
+        className="max-w-xs text-sm md:text-md font-semibold md:font-bold text-ellipsis overflow-hidden"
         title={content}
       >
         {content}

components/menus/group/index.tsx

@@ -1,15 +1,16 @@
+import Close from '@/components/svgs/close';
 import MarkAsRead from '@/components/svgs/markAsRead';
 import MarkAsUnread from '@/components/svgs/markAsUnread';
 import { IGroupMenuProps } from '@/types';
 import React from 'react';
 
 const GroupMenu = (props: IGroupMenuProps) => {
   if (props) {
-    const { options, name, isUnread } = props;
+    const { options, name, isUnread, requireOptions, setOptions } = props;
     if (options) {
       return (
-        <div className="flex justify-between items-center py-4 mb-4 pl-4 border-solid border-stone-400 border-2 rounded-xl">
-          <h1 className="text-sm font-medium rounded-lg p-2 mr-2 bg-stone-300 text-black">
+        <div className="flex justify-between items-center py-4 mb-4">
+          <h1 className="text-md font-medium rounded-lg p-2 mr-2 text-black">
             {name}
           </h1>
           <ul className="rounded-xl flex justify-end items-center">
@@ -25,6 +26,17 @@ const GroupMenu = (props: IGroupMenuProps) => {
                 {isUnread ? <MarkAsRead size={6} /> : <MarkAsUnread size={6} />}
               </button>
             </li>
+            <li className="pr-2">
+              {requireOptions && options && (
+                <button
+                  className="flex h-min text-white hover:text-white bg-black rounded-full"
+                  title="Close Group Options"
+                  onClick={() => setOptions((prev: boolean) => !prev)}
+                >
+                  <Close size={6} />
+                </button>
+              )}
+            </li>
           </ul>
         </div>
       );

components/menus/message/index.tsx

@@ -29,8 +29,8 @@ const MessageMenu = (props: IMessageMenuProps) => {
 
     if (options) {
       return (
-        <div className="flex justify-between items-center pt-2">
-          <h1 className="text-sm font-medium rounded-lg px-2 mr-2 bg-stone-300 text-black">
+        <div className="flex justify-between items-center bg-black rounded-lg mr-2">
+          <h1 className="font-medium mx-2 px-2 bg-black rounded-lg text-white">
             You at {messageTime}
           </h1>
           <ul className="rounded-xl flex justify-end items-center">

components/sections/group/index.tsx

@@ -58,7 +58,7 @@ const Group = (props: IGroupSectionProps) => {
           </div>
         </div>
         <div
-          className="md:ml-8 overflow-scroll h-[calc(100vh-8rem)] md:h-[calc(100vh-12rem)]"
+          className="md:ml-4 overflow-scroll h-[calc(100vh-8rem)] md:h-[calc(100vh-12rem)]"
           id="divMessageList"
         >
           <MessageList