update UI

blackholecore · Jul 28, 2022 · f03190b · f03190b
1 parent 133369e
commit f03190b
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 20 deletions.
diff --git a/src/components/ChatContent/Input/FileMedia.jsx b/src/components/ChatContent/Input/FileMedia.jsx
@@ -5,7 +5,6 @@ import { getDownloadURL, ref, uploadBytesResumable } from '@firebase/storage';
 import { storage } from '../../../firebase/config';
 import { addMessage } from '../../../firebase/functionHandler';
 import moment from 'moment';
-import GiphyEmoji from './GiphyEmoji';
 
 function FileMedia({ theme, roomId, uid }) {
     const uploadFile = (file, type) => {
@@ -34,7 +33,7 @@ function FileMedia({ theme, roomId, uid }) {
     };
 
     return (
-        <ul className='flex-center gap-2 text-xl mr-3' style={{ color: theme }}>
+        <>
             <li className='flex-center relative'>
                 <ImAttachment />
                 <input
@@ -62,8 +61,7 @@ function FileMedia({ theme, roomId, uid }) {
                     onChange={(e) => uploadFile(e.target.files[0], 'images')}
                 />
             </li>
-            <GiphyEmoji roomId={roomId} uid={uid} />
-        </ul>
+        </>
     );
 }
 

diff --git a/src/components/ChatContent/Input/GiphyEmoji.jsx b/src/components/ChatContent/Input/GiphyEmoji.jsx
@@ -45,7 +45,7 @@ function GiphyEmoji({ roomId, uid }) {
             >
                 <BiFace />
                 {displayStickers && (
-                    <div className='absolute aspect-square h-72 bottom-12 left-0 flex flex-col overflow-auto gap-1 dark:bg-lightDark bg-gray-300 rounded-md'>
+                    <div className='md:absolute aspect-square h-72 bottom-12 md:-left-2 flex flex-col overflow-auto gap-1 dark:bg-lightDark bg-gray-300 rounded-md fixed inset-x-0 mb-2 mx-auto'>
                         <input
                             type='text'
                             value={stickersQuery}
@@ -83,7 +83,7 @@ function GiphyEmoji({ roomId, uid }) {
             >
                 <AiOutlineGif />
                 {displayGifs && (
-                    <div className='absolute aspect-square h-72 bottom-12 left-0 flex flex-col overflow-auto gap-1 dark:bg-lightDark bg-gray-300 rounded-md'>
+                    <div className='md:absolute aspect-square h-72 bottom-12 md:-left-10 flex flex-col overflow-auto gap-1 dark:bg-lightDark bg-gray-300 rounded-md fixed inset-x-0 mb-2 mx-auto'>
                         <input
                             type='text'
                             ref={gifInputRef}

diff --git a/src/components/ChatContent/Input/index.jsx b/src/components/ChatContent/Input/index.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { IoSend } from 'react-icons/io5';
 import { MdEmojiEmotions } from 'react-icons/md';
 import { useStore } from '../../../store';
@@ -7,11 +7,13 @@ import moment from 'moment';
 import { Picker, Emoji } from 'emoji-mart';
 import 'emoji-mart/css/emoji-mart.css';
 import FileMedia from './FileMedia';
+import GiphyEmoji from './GiphyEmoji';
 
 function Input({ roomId, theme, emoji, reply, setDisplayReply, setReply }) {
     const [displayEmoji, setDisplayEmoji] = useState(false);
     const [chatContent, setChatContent] = useState('');
 
+    const inputRef = useRef();
     const { uid } = useStore((state) => state.user) ?? '';
 
     const handleSendMessage = (e, chatContent) => {
@@ -29,6 +31,7 @@ function Input({ roomId, theme, emoji, reply, setDisplayReply, setReply }) {
             setChatContent('');
             setDisplayReply(false);
             setReply({});
+            inputRef.current.focus();
         }
     };
 
@@ -39,14 +42,21 @@ function Input({ roomId, theme, emoji, reply, setDisplayReply, setReply }) {
         >
             <div className='flex-center input-dark py-0'>
                 {!chatContent && (
-                    <FileMedia theme={theme} roomId={roomId} uid={uid} />
+                    <ul
+                        className='flex-center gap-2 text-xl mr-3'
+                        style={{ color: theme }}
+                    >
+                        <FileMedia theme={theme} roomId={roomId} uid={uid} />
+                        <GiphyEmoji roomId={roomId} uid={uid} />
+                    </ul>
                 )}
                 <input
                     type='text'
                     className='input-dark pl-0'
                     placeholder='Message'
                     value={chatContent}
                     onChange={(e) => setChatContent(e.target.value)}
+                    ref={inputRef}
                 />
                 <span
                     className='text-xl cursor-pointer relative'
@@ -56,7 +66,7 @@ function Input({ roomId, theme, emoji, reply, setDisplayReply, setReply }) {
                     <MdEmojiEmotions />
                     {displayEmoji && (
                         <span
-                            className='absolute right-0 bottom-12'
+                            className='md:absolute right-0 bottom-14 fixed flex-center w-full'
                             onClick={(e) => e.stopPropagation()}
                         >
                             <Picker

diff --git a/src/components/ChatContent/Message/FriendMessage.jsx b/src/components/ChatContent/Message/FriendMessage.jsx
@@ -5,7 +5,14 @@ import { ReplyContext } from '../index';
 import { useReply } from '../../../hooks';
 import { useStore } from '../../../store';
 
-function FriendMessage({ message, members, index, listMessages, setLink }) {
+function FriendMessage({
+    message,
+    members,
+    index,
+    listMessages,
+    setLink,
+    theme,
+}) {
     const { chatContent, fileName, type, time, replyId, uid } = message;
     const { setReply, setDisplayReply } = useContext(ReplyContext);
     const replyMessage = replyId ? useReply(replyId) : null;
@@ -43,7 +50,10 @@ function FriendMessage({ message, members, index, listMessages, setLink }) {
                     </div>
                 )}
                 {replyMessage !== null && (
-                    <p className='px-3 py-2 rounded-lg w-max max-w-md truncate dark:text-gray-400 text-gray-600 border-2 border-gray-400 dark:border-gray-300 mb-0.5'>
+                    <p
+                        className='px-3 py-2 rounded-lg w-max max-w-md truncate dark:text-gray-400 text-gray-600 border-2 mb-0.5'
+                        style={{ borderColor: theme }}
+                    >
                         {replyMessage ? replyMessage : 'Removed Message'}
                     </p>
                 )}

diff --git a/src/components/ChatContent/Message/MyMessage.jsx b/src/components/ChatContent/Message/MyMessage.jsx
@@ -29,13 +29,13 @@ function MyMessage({ message, theme, setLink }) {
         <>
             {replyMessage !== null && (
                 <p
-                    className='px-3 py-2 rounded-lg w-max max-w-md truncate dark:text-gray-200 text-black bg-gray-200 dark:bg-lightDark border-2 ml-auto mt-0.5'
+                    className='px-3 py-2 rounded-lg w-56 md:max-w-md truncate dark:text-gray-200 text-black bg-gray-200 dark:bg-lightDark border-2 ml-auto mt-0.5'
                     style={{ borderColor: theme }}
                 >
                     {replyMessage ? replyMessage : 'Removed Message'}
                 </p>
             )}
-            <div className='flex justify-end group mt-0.5 max-w-[90%] ml-auto'>
+            <div className='flex justify-end group mt-0.5 max-w-[80%] ml-auto'>
                 {chatContent !== '' && (
                     <div className='flex-center gap-2 text-lg mr-1 message-option dark:text-white'>
                         <span

diff --git a/src/components/ChatContent/Message/index.jsx b/src/components/ChatContent/Message/index.jsx
@@ -37,6 +37,7 @@ function Message({ members, theme, setLink }) {
                             index={index}
                             message={message}
                             setLink={setLink}
+                            theme={theme}
                         />
                     )}
                 </div>

diff --git a/src/components/ChatContent/Modals/ModalNickname.jsx b/src/components/ChatContent/Modals/ModalNickname.jsx
@@ -7,7 +7,7 @@ function ModalNickname({ members }) {
             <h2 className='text-center text-xl font-semibold border-b border-gray-600 pb-2'>
                 Nicknames
             </h2>
-            <ul className='h-[360px] w-96 overflow-auto flex flex-col gap-2 mt-4'>
+            <ul className='h-[360px] md:w-96 overflow-auto flex flex-col gap-2 mt-4'>
                 {members.map((member) => (
                     <NicknameItem key={member.uid} member={member} />
                 ))}

diff --git a/src/components/ChatContent/Modals/NicknameItem.jsx b/src/components/ChatContent/Modals/NicknameItem.jsx
@@ -49,7 +49,7 @@ function NicknameItem({ member }) {
                 </>
             ) : (
                 <>
-                    <div className='flex flex-col justify-center flex-1'>
+                    <div className='flex flex-col justify-center w-full'>
                         <p className='text-sm'>
                             {nickname ? nickname : displayName}
                         </p>

diff --git a/src/components/ChatContent/Setting/SettingButtons.jsx b/src/components/ChatContent/Setting/SettingButtons.jsx
@@ -117,7 +117,7 @@ function SettingButtons({ theme, chatType, roomId, emoji }) {
                     useButton={false}
                     title=''
                     emoji=''
-                    sheetSize={32}
+                    sheetSize={64}
                     recent={['']}
                     style={{ border: 'none', width: '100%' }}
                     onClick={(emoji) => updateEmoji(roomId, { ...emoji })}

diff --git a/src/components/ChatList/ChatItem.jsx b/src/components/ChatList/ChatItem.jsx
@@ -49,7 +49,7 @@ function ChatItem({ roomId }) {
         >
             <a className='flex items-center gap-3'>
                 <div
-                    className='rounded-full w-16 aspect-square overflow-hidden flex-center'
+                    className='rounded-full w-14 md:w-16 aspect-square overflow-hidden flex-center'
                     style={{ backgroundColor: avatarBgColor }}
                 >
                     {chatType === 'friend' ? (

diff --git a/src/components/ModalTemplate.jsx b/src/components/ModalTemplate.jsx
@@ -14,7 +14,7 @@ function Modal({ children, setDisplayRemoveMessage }) {
             <span className='close-modal' onClick={handleCloseModal}>
                 <MdClose />
             </span>
-            <div className='dark:bg-dark p-5 md:p-8 rounded-xl w-[448px] bg-white'>
+            <div className='dark:bg-dark p-5 md:p-8 rounded-xl w-full max-w-[448px] bg-white'>
                 {children}
             </div>
         </div>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -7,7 +7,7 @@ img {
 }
 
 ::-webkit-scrollbar {
-    width: 8px;
+    width: 6px;
 }
 
 ::-webkit-scrollbar-thumb {

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -19,7 +19,7 @@
         @apply dark:bg-lightDark bg-gray-300;
     }
     .friend-message {
-        @apply flex flex-col bg-gray-300 dark:bg-lightDark rounded-xl dark:text-white p-2 px-3 w-max md:max-w-lg text-[15px] break-all;
+        @apply flex flex-col bg-gray-300 dark:bg-lightDark rounded-xl dark:text-white p-2 px-3 w-full md:max-w-lg text-[15px] break-words;
     }
     .my-message {
         @apply rounded-xl text-white p-2 px-3 w-full md:max-w-lg text-[15px] break-all flex flex-col items-end;