added is typing placeholder animation

updated welcome ui added emojis dialog option minor ui tweaks
lizardkingLK · Oct 28, 2023 · 6ca2af7 · 6ca2af7
1 parent 8c757c1
commit 6ca2af7
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 43 deletions.
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
@@ -6,7 +6,7 @@ const Badge = (props: IBadgeProps) => {
   return (
     <span
       title={tooltip}
-      className="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300"
+      className="bg-green-100 text-white text-xs font-medium px-2.5 py-0.5 rounded dark:bg-green-900"
     >
       {text}
     </span>

diff --git a/components/cards/message/index.tsx b/components/cards/message/index.tsx
@@ -59,11 +59,7 @@ export default function MessageCard(props: IMessageCardProps) {
           </div>
         ) : (
           <button
-            onClick={() =>
-              type === messageTypes.SENT && handleOpenMessageOptions()
-            }
-            title={messageTime}
-            className={`my-2 md:my-4 min-w-max rounded-lg md:rounded-xl cursor-pointer ${
+            className={`my-2 md:my-4 mx-2 min-w-max rounded-xl cursor-pointer ${
               isImage(content)
                 ? 'bg-transparent'
                 : 'p-2 md:p-4 bg-gradient-to-r'
@@ -72,6 +68,10 @@ export default function MessageCard(props: IMessageCardProps) {
                 ? 'bg-black text-white rounded-tl-none'
                 : 'bg-white text-black rounded-tr-none'
             }`}
+            title={messageTime}
+            onClick={() =>
+              type === messageTypes.SENT && handleOpenMessageOptions()
+            }
           >
             <MessageMedia content={content} />
           </button>

diff --git a/components/dialog/index.tsx b/components/dialog/index.tsx
@@ -13,7 +13,7 @@ const Dialog = (props: IDialogProps) => {
     } = props;
     return (
       <div
-        className={`rounded-2xl bg-gradient-to-r from-stone-200 to-stone-200  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">

diff --git a/components/forms/message/index.tsx b/components/forms/message/index.tsx
@@ -11,7 +11,8 @@ import SubmitButton from './buttons/Submit';
 import useWidth from '@/components/hooks/useWidth';
 
 const MessageEditor = (props: IMessageEditorProps) => {
-  const [mediaModal, setMediaModal] = useState(false);
+  const [attachmentModal, setAttachmentModal] = useState(false);
+  const [emojiModal, setEmojiModal] = useState(false);
   const [files, setFiles] = useState(null);
   const [file, setFile] = useState(null);
   const [type, setType] = useState(null);
@@ -36,7 +37,7 @@ const MessageEditor = (props: IMessageEditorProps) => {
       context,
     } = props;
 
-    const mediaHandler = (event: any) => {
+    const attachmentHandler = (event: any) => {
       if (event?.target?.files) {
         const files = event.target.files,
           file = files[0];
@@ -52,27 +53,40 @@ const MessageEditor = (props: IMessageEditorProps) => {
       setType(null);
     };
 
-    const mediaCloseHandler = () => {
+    const dialogCloseHandler = () => {
       clearInputs();
-      setMediaModal(false);
+      setEmojiModal(false);
+      setAttachmentModal(false);
     };
 
-    const mediaSubmitHandler = () => {
+    const attachmentSubmitHandler = () => {
       if (files) {
         onMediaHandler(files);
-        mediaCloseHandler();
+        dialogCloseHandler();
       }
     };
 
     return (
       group && (
         <Fragment>
-          {mediaModal && (
+          {emojiModal && (
+            <Dialog
+              dialogTitle={'Send Emojis'}
+              dialogSubtitle={'Select'}
+              dialogCloseTitle={'Cancel Emoji'}
+              dialogCloseHandler={dialogCloseHandler}
+            >
+              <div className="flex justify-start items-center p-4">
+                <h1>hello</h1>
+              </div>
+            </Dialog>
+          )}
+          {attachmentModal && (
             <Dialog
               dialogTitle={'Send Attachment'}
               dialogSubtitle={'Attachment'}
               dialogCloseTitle={'Cancel Attachment'}
-              dialogCloseHandler={mediaCloseHandler}
+              dialogCloseHandler={dialogCloseHandler}
             >
               {file && type ? (
                 <Fragment>
@@ -98,7 +112,7 @@ const MessageEditor = (props: IMessageEditorProps) => {
                     <button
                       className="text-black hover:text-black"
                       title="Send"
-                      onClick={mediaSubmitHandler}
+                      onClick={attachmentSubmitHandler}
                     >
                       <Send size={ui.iconSize} />
                     </button>
@@ -109,14 +123,14 @@ const MessageEditor = (props: IMessageEditorProps) => {
                   <div className="flex justify-center items-center pb-8">
                     <label
                       htmlFor="inputFiles"
-                      className="w-40 h-40 m-8 rounded-full p-2 md:p-4 bg-gradient-to-r from-stone-300 to-stone-400 hover:bg-gradient-to-r hover:from-green-300 hover:to-green-400 text-black cursor-pointer flex flex-col justify-center items-center text-xl"
+                      className="w-40 h-40 m-8 rounded-full p-2 md:p-4 bg-stone-300 hover:bg-green-400 text-black cursor-pointer flex flex-col justify-center items-center text-xl"
                       title="Upload Files"
                     >
                       <Upload />
                     </label>
                     <input
                       id="inputFiles"
-                      onChange={mediaHandler}
+                      onChange={attachmentHandler}
                       type="file"
                       name="file"
                       hidden={true}
@@ -130,6 +144,10 @@ const MessageEditor = (props: IMessageEditorProps) => {
             <button
               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"
+              onClick={() => {
+                setAttachmentModal(false);
+                setEmojiModal(!emojiModal);
+              }}
             >
               <Emoji size={ui.iconSize} />
             </button>
@@ -145,10 +163,13 @@ const MessageEditor = (props: IMessageEditorProps) => {
             />
             <button
               className={`p-2 md:p-4 bg-stone-300 ${
-                mediaModal ? 'text-green-500' : 'text-stone-600'
+                attachmentModal ? 'text-green-500' : 'text-stone-600'
               } hover:text-green-500`}
-              title="Send Media"
-              onClick={() => setMediaModal(!mediaModal)}
+              title="Send Attachment"
+              onClick={() => {
+                setEmojiModal(false);
+                setAttachmentModal(!attachmentModal);
+              }}
             >
               <Attachment size={ui.iconSize} />
             </button>

diff --git a/components/links/message/index.tsx b/components/links/message/index.tsx
@@ -86,10 +86,16 @@ const MessageLink = (props: IMessageLinkProps) => {
                   }
                 >
                   {active?.groupId === messageId && active?.value ? (
-                    <span className="text-green-500">typing...</span>
+                    <span className="text-green-500 font-bold animate-pulse">
+                      typing...
+                    </span>
                   ) : (
                     <span
-                      className={messageContentIsActive ? 'text-green-500' : ''}
+                      className={
+                        messageContentIsActive
+                          ? 'text-green-500 font-bold '
+                          : ''
+                      }
                       title={isImage(messageContent) ? 'Image' : messageContent}
                     >
                       {getBriefContent(messageContent)}

diff --git a/components/lists/message/MessageList.tsx b/components/lists/message/MessageList.tsx
@@ -3,6 +3,7 @@ import Dialog from '@/components/dialog';
 import { IGroupProps, IMessageListProps } from '@/types';
 import { Fragment, useEffect, useState } from 'react';
 import MessageLinkList from './MessageLinkList';
+import MessagePlaceholder from '@/components/placeholder/message';
 
 const MessageList = (props: IMessageListProps) => {
   const { group, groups } = props;
@@ -55,12 +56,8 @@ const MessageList = (props: IMessageListProps) => {
               />
             </Fragment>
           ))}
+        {active?.groupId === group?.id && <MessagePlaceholder />}
         <div ref={lastMessageRef}></div>
-        {active?.groupId === group?.id && (
-          <div className="absolute bottom-5 md:bottom-12 m-8 z-10">
-            <p className="text-xs text-stone-500">{`${active.name} is typing...`}</p>
-          </div>
-        )}
         {forward && (
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96">
             <Dialog

diff --git a/components/navs/user/index.tsx b/components/navs/user/index.tsx
@@ -23,9 +23,7 @@ const UserNavbar = (props: IUserNavbarProps) => {
     return (
       <nav
         className={`fixed top-0 left-0 h-screen w-3/4 md:w-1/4 shadow-green-400 shadow-2xl z-10
-            ${
-              navbar ? 'flex flex-col' : 'hidden'
-            } bg-gradient-to-r from-green-400 to-green-700`}
+            ${navbar ? 'flex flex-col' : 'hidden'} bg-green-500`}
       >
         <div className="flex justify-center items-center p-4">
           {isSignedIn ? (
@@ -54,32 +52,32 @@ const UserNavbar = (props: IUserNavbarProps) => {
         {isSignedIn ? (
           <Fragment>
             <button
-              className="text-xl text-center p-4 hover:text-black hover:bg-stone-400 font-medium flex items-center justify-start"
+              className="text-xl text-center p-4 hover:bg-green-300 font-medium flex items-center justify-start"
               onClick={() =>
                 handleSelection(newUser ? sections.home : sections.introduction)
               }
             >
               <Home />
-              &nbsp;&nbsp;&nbsp;Home
+              <span className="ml-4">Home</span>
             </button>
             <button
-              className="text-xl text-center p-4 hover:text-black hover:bg-stone-400 font-medium flex items-center justify-start"
+              className="text-xl text-center p-4 hover:bg-green-300 font-medium flex items-center justify-start"
               onClick={() => handleSelection(sections.addFriend)}
             >
               <Invitation />
-              &nbsp;&nbsp;&nbsp;Add Friend
+              <span className="ml-4">Add Friend</span>
             </button>
             <button
-              className="text-xl text-center p-4 hover:text-black hover:bg-stone-400 font-medium flex items-center justify-start"
+              className="text-xl text-center p-4 hover:bg-green-300 font-medium flex items-center justify-start"
               onClick={() => handleSelection(sections.feeds)}
             >
               <Feeds />
-              &nbsp;&nbsp;&nbsp;Feeds
+              <span className="ml-4">Feeds</span>
             </button>
           </Fragment>
         ) : (
           <Link
-            className="text-xl text-center p-4 hover:text-black hover:bg-stone-400 font-medium"
+            className="text-xl text-center p-4 hover:bg-green-300 font-medium"
             href="/sign-in"
           >
             Login

diff --git a/components/placeholder/message/index.tsx b/components/placeholder/message/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const MessagePlaceholder = () => {
+  return (
+    <button
+      className={`flex my-2 md:my-4 mx-2 min-w-max rounded-xl cursor-pointer p-2 md:p-4 bg-gradient-to-r bg-black text-white rounded-tl-none`}
+      title={'typing...'}
+    >
+      <span className="max-w-xs text-sm md:text-md font-semibold md:font-bold text-ellipsis overflow-hidden animate-bounce mr-1">
+        .
+      </span>
+      <span className="max-w-xs text-sm md:text-md font-semibold md:font-bold text-ellipsis overflow-hidden animate-bounce mr-1">
+        .
+      </span>
+      <span className="max-w-xs text-sm md:text-md font-semibold md:font-bold text-ellipsis overflow-hidden animate-bounce">
+        .
+      </span>
+    </button>
+  );
+};
+
+export default MessagePlaceholder;
diff --git a/components/sections/dashboard/index.tsx b/components/sections/dashboard/index.tsx
@@ -62,7 +62,7 @@ const Dashboard = (props: IDashboardProps) => {
         <div className="p-4">
           <div className="flex justify-between items-center w-full">
             <h1 className="text-2xl text-black font-bold" id="textGreeting">
-              Hello <span className="text-green-400">{name}</span>
+              Hello <span className="text-green-500">{name}</span>
             </h1>
           </div>
           <div

diff --git a/components/sections/friends/add/index.tsx b/components/sections/friends/add/index.tsx
@@ -108,7 +108,7 @@ const AddFriend = (props: IAddFriendProps) => {
           />
           <button
             type="submit"
-            className="text-black bg-stone-300 hover:bg-stone-300 focus:outline-none focus:ring-4 focus:ring-stone-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-stone-400 dark:hover:bg-stone-500 dark:hover:text-white dark:focus:ring-stone-700 dark:border-stone-700 w-full md:w-auto"
+            className="text-white bg-stone-300 hover:bg-stone-300 focus:outline-none focus:ring-4 focus:ring-stone-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-stone-400 dark:hover:bg-stone-500 dark:hover:text-white dark:focus:ring-stone-700 dark:border-stone-700 w-full md:w-auto"
             title="Search"
           >
             Search

diff --git a/components/welcome/index.tsx b/components/welcome/index.tsx
@@ -8,17 +8,19 @@ const Welcome = () => {
       id="divWelcome"
     >
       <div className="text-black font-black text-center">
-        <span className="text-transparent text-8xl md:text-9xl bg-clip-text bg-gradient-to-r from-green-600 to-green-900">
+        <span className="text-transparent text-8xl md:text-9xl bg-clip-text bg-green-600">
           OREO
         </span>
         <br />
-        <span className="text-2xl tracking-normal md:tracking-widest text-black">
+        <span className="text-xl tracking-normal md:tracking-widest text-stone-600">
           A Chat Application
         </span>
         <br />
         <div className="mt-4 flex justify-evenly">
           <Link href="/sign-up">
-            <button className="bg-green-600 px-4 py-2 rounded-lg">JOIN</button>
+            <button className="bg-green-600 text-white px-4 py-2 rounded-lg">
+              JOIN
+            </button>
           </Link>
         </div>
       </div>