responsive multi-devices

blackholecore · Jul 27, 2022 · 925c512 · 925c512
1 parent d360b42
commit 925c512
Show file tree

Hide file tree

Showing 18 changed files with 70 additions and 48 deletions.
diff --git a/src/components/ChatContent/Header.jsx b/src/components/ChatContent/Header.jsx
@@ -1,11 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useStore } from '../../store';
-import { MdInfo } from 'react-icons/md';
+import { MdInfo, MdArrowBackIosNew } from 'react-icons/md';
+import { useNavigate } from 'react-router-dom';
 
 function Header({ roomInfo, setDisplaySetting, displaySetting }) {
     const { roomName, avatarBgColor, chatType, members, theme, chatAvatar } =
         roomInfo;
 
+    const navigate = useNavigate();
+
     const user = useStore((state) => state.user);
     const [friend, setFriend] = useState({});
 
@@ -19,6 +22,13 @@ function Header({ roomInfo, setDisplaySetting, displaySetting }) {
     return (
         <header className='w-full flex-between pb-2'>
             <div className='flex-center gap-3'>
+                <span
+                    className='text-2xl md:hidden'
+                    style={{ color: theme }}
+                    onClick={() => navigate('/')}
+                >
+                    <MdArrowBackIosNew />
+                </span>
                 <div
                     className='rounded-full w-12 aspect-square overflow-hidden flex-center'
                     style={{ backgroundColor: avatarBgColor }}

diff --git a/src/components/ChatContent/Input/FileMedia.jsx b/src/components/ChatContent/Input/FileMedia.jsx
@@ -34,7 +34,7 @@ function FileMedia({ theme, roomId, uid }) {
     };
 
     return (
-        <ul className='flex-center gap-2 text-xl' style={{ color: theme }}>
+        <ul className='flex-center gap-2 text-xl mr-3' style={{ color: theme }}>
             <li className='flex-center relative'>
                 <ImAttachment />
                 <input

diff --git a/src/components/ChatContent/Input/index.jsx b/src/components/ChatContent/Input/index.jsx
@@ -43,7 +43,7 @@ function Input({ roomId, theme, emoji, reply, setDisplayReply, setReply }) {
                 )}
                 <input
                     type='text'
-                    className='input-dark'
+                    className='input-dark pl-0'
                     placeholder='Message'
                     value={chatContent}
                     onChange={(e) => setChatContent(e.target.value)}

diff --git a/src/components/ChatContent/Message/MyMessage.jsx b/src/components/ChatContent/Message/MyMessage.jsx
@@ -35,7 +35,7 @@ function MyMessage({ message, theme, setLink }) {
                     {replyMessage ? replyMessage : 'Removed Message'}
                 </p>
             )}
-            <div className='flex justify-end group mt-0.5'>
+            <div className='flex justify-end group mt-0.5 max-w-[90%] ml-auto'>
                 {chatContent !== '' && (
                     <div className='flex-center gap-2 text-lg mr-1 message-option dark:text-white'>
                         <span
@@ -88,7 +88,7 @@ function MyMessage({ message, theme, setLink }) {
                     />
                 ) : type === 'files' ? (
                     <div
-                        className='my-message flex flex-col items-end'
+                        className='my-message flex flex-col items-end w-max'
                         style={{ backgroundColor: theme }}
                     >
                         <time className='text-xs dark:text-gray-300 text-200'>

diff --git a/src/components/ChatContent/Modals/ModalRemoveMessage.jsx b/src/components/ChatContent/Modals/ModalRemoveMessage.jsx
@@ -9,7 +9,7 @@ function ModalRemoveMessage({ messageId, setDisplayRemoveMessage }) {
             </h1>
             <div className='flex-center gap-3 mt-4'>
                 <button
-                    className='modal-btn'
+                    className='modal-btn modal-btn text-black dark:text-white dark:bg-gray-700 dark:hover:bg-gray-800 bg-gray-300 hover:bg-gray-400'
                     onClick={() => setDisplayRemoveMessage(false)}
                 >
                     Cancel

diff --git a/src/components/ChatContent/Modals/ModalRenameGroupChat.jsx b/src/components/ChatContent/Modals/ModalRenameGroupChat.jsx
@@ -28,7 +28,7 @@ function ModalRenameGroupChat({ roomId, roomName }) {
             <div className='flex items-center justify-end gap-1 mt-2'>
                 <button
                     type='button'
-                    className='modal-btn'
+                    className='modal-btn text-black'
                     onClick={() => setModalName('')}
                 >
                     Cancel

diff --git a/src/components/ChatContent/Modals/ModalShowMedia.jsx b/src/components/ChatContent/Modals/ModalShowMedia.jsx
@@ -15,15 +15,15 @@ function ModalShowImage({ link }) {
             {link.type === 'video' ? (
                 <video
                     src={link.link}
-                    className='h-full mx-auto rounded-lg'
+                    className='w-full md:h-full mx-auto rounded-lg'
                     controls
                     autoPlay
                 />
             ) : (
                 <img
                     src={link.link}
                     alt=''
-                    className='h-full mx-auto rounded-lg'
+                    className='w-full md:h-full mx-auto rounded-lg'
                 />
             )}
         </div>

diff --git a/src/components/ChatContent/Setting/SettingButtons.jsx b/src/components/ChatContent/Setting/SettingButtons.jsx
@@ -101,7 +101,7 @@ function SettingButtons({ theme, chatType, roomId, emoji }) {
 
                     <button
                         type='button'
-                        className='setting-btn text-red-500'
+                        className='setting-btn dark:text-red-500 text-red-500'
                         onClick={() => setModalName('leave-group')}
                     >
                         <TbLogout />
@@ -119,7 +119,7 @@ function SettingButtons({ theme, chatType, roomId, emoji }) {
                     emoji=''
                     sheetSize={32}
                     recent={['']}
-                    style={{ border: 'none' }}
+                    style={{ border: 'none', width: '100%' }}
                     onClick={(emoji) => updateEmoji(roomId, { ...emoji })}
                 />
             )}

diff --git a/src/components/ChatContent/Setting/index.jsx b/src/components/ChatContent/Setting/index.jsx
@@ -13,7 +13,7 @@ function Setting({ setDisplaySetting, roomInfo, setLink }) {
 
     return (
         <>
-            <div className='dark:text-white absolute inset-x-2'>
+            <div className='dark:text-white absolute inset-4 md:inset-x-2'>
                 <div className='flex-between dark:text-gray-400 text-gray-600'>
                     <span>Chat Details</span>
                     <span

diff --git a/src/components/ChatContent/index.jsx b/src/components/ChatContent/index.jsx
@@ -33,7 +33,7 @@ function ChatContent() {
 
     return (
         <ReplyContext.Provider value={{ setReply, setDisplayReply }}>
-            <div className='h-full flex gap-3'>
+            <div className='h-full flex gap-3 relative'>
                 <div className='flex flex-col flex-1'>
                     <Header
                         roomInfo={roomInfo}
@@ -68,7 +68,7 @@ function ChatContent() {
                     />
                 </div>
                 {displaySetting && (
-                    <div className='max-w-[300px] h-full flex-1 relative overflow-auto'>
+                    <div className='lg:max-w-[300px] h-full flex-1 lg:relative overflow-auto fixed inset-0 dark:bg-dark bg-white md:absolute'>
                         <Setting
                             setDisplaySetting={setDisplaySetting}
                             roomInfo={roomInfo}

diff --git a/src/components/ChatList/Header.jsx b/src/components/ChatList/Header.jsx
@@ -8,14 +8,15 @@ import { useDarkMode } from '../../hooks';
 function Header({ user }) {
     const setModalName = useStore((state) => state.setModalName);
 
-    const [setTheme, colorTheme] = useDarkMode();
+    const [theme, setCurrentTheme] = useDarkMode();
     const [darkMode, setDarkMode] = useState(true);
     const [displaySetting, setDisplaySetting] = useState(false);
 
     const toggleTheme = (e) => {
         e.stopPropagation();
         setDarkMode(!darkMode);
-        setTheme(colorTheme);
+        setCurrentTheme(theme);
+        localStorage.theme = theme;
     };
 
     return (

diff --git a/src/components/ChatList/Modals/ModalInfo.jsx b/src/components/ChatList/Modals/ModalInfo.jsx
@@ -13,13 +13,13 @@ function ModalInfo({ user }) {
 
     return (
         <ModalTemplate>
-            <div className='flex-center gap-5'>
+            <div className='md:flex-center gap-5'>
                 <img
                     src={photoURL}
                     alt={displayName}
-                    className='rounded-full'
+                    className='rounded-full mx-auto mb-4 md:m-0'
                 />
-                <div>
+                <div className='w-max mx-auto'>
                     <p className='text-sm'>
                         <strong className='text-base'>Name: </strong>
                         {displayName ?? 'N/A'}
@@ -32,7 +32,7 @@ function ModalInfo({ user }) {
                         <strong className='text-base'>Phone: </strong>
                         {phoneNumber ?? 'N/A'}
                     </p>
-                    <p className='text-sm flex-center gap-x-1'>
+                    <p className='text-sm flex items-center gap-x-1'>
                         <strong className='text-base'>ID: </strong>
                         {uid ?? 'N/A'}
                         <span

diff --git a/src/components/ChatList/index.jsx b/src/components/ChatList/index.jsx
@@ -34,7 +34,7 @@ function ChatList() {
         <>
             <Header user={user} />
             <SearchInput />
-            <ul className='grid gap-1 text-white pr-2 overflow-auto'>
+            <ul className='grid gap-1 text-white md:pr-2 overflow-auto'>
                 {listRoomsId?.map((roomId) => (
                     <ChatItem key={roomId} roomId={roomId} />
                 ))}

diff --git a/src/components/ModalTemplate.jsx b/src/components/ModalTemplate.jsx
@@ -1,20 +1,20 @@
 import { MdClose } from 'react-icons/md';
 import { useStore } from '../store';
 
-function Modal({ children }) {
+function Modal({ children, setDisplayRemoveMessage }) {
     const setModalName = useStore((state) => state.setModalName);
 
+    const handleCloseModal = () => {
+        setModalName('');
+        setDisplayRemoveMessage && setDisplayRemoveMessage(false);
+    };
+
     return (
-        <div className='fixed inset-0 bg-[rgba(0,0,0,0.75)] z-20 flex-center dark:text-white'>
-            <span
-                className='dark:bg-[#171616] dark:hover:bg-lightDark bg-gray-300 hover:bg-gray-100 absolute top-2 right-2 text-3xl p-2 rounded-full cursor-pointer duration-100'
-                onClick={() => {
-                    setModalName('');
-                }}
-            >
+        <div className='fixed inset-0 bg-[rgba(0,0,0,0.75)] z-20 flex-center dark:text-white p-4'>
+            <span className='close-modal' onClick={handleCloseModal}>
                 <MdClose />
             </span>
-            <div className='dark:bg-dark p-8 rounded-xl w-[448px] bg-white'>
+            <div className='dark:bg-dark p-5 md:p-8 rounded-xl w-[448px] bg-white'>
                 {children}
             </div>
         </div>

diff --git a/src/hooks/useDarkMode.jsx b/src/hooks/useDarkMode.jsx
@@ -1,16 +1,24 @@
 import { useState, useEffect } from 'react';
 
 function useDarkMode() {
-    const [theme, setTheme] = useState('dark');
-    const colorTheme = theme === 'light' ? 'dark' : 'light';
+    const [currentTheme, setCurrentTheme] = useState(
+        localStorage.theme ?? 'dark'
+    );
+    const theme = currentTheme === 'light' ? 'dark' : 'light';
 
     useEffect(() => {
-        const root = window.document.body;
-        root.classList.add(theme);
-        root.classList.remove(colorTheme);
-    }, [theme, colorTheme]);
+        if (!localStorage.theme) {
+            localStorage.theme = 'dark';
+        }
+    }, []);
 
-    return [setTheme, colorTheme];
+    useEffect(() => {
+        const bodyEle = document.body;
+        bodyEle.classList.add(currentTheme);
+        bodyEle.classList.remove(theme);
+    }, [theme, currentTheme]);
+
+    return [theme, setCurrentTheme];
 }
 
 export default useDarkMode;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -2,11 +2,11 @@ import ChatList from '../components/ChatList';
 
 function Home() {
     return (
-        <div className='w-screen h-screen dark:bg-dark flex-center p-4 gap-6 duration-200'>
-            <div className='max-w-[340px] h-full flex flex-col flex-1'>
+        <div className='grid w-screen h-screen dark:bg-dark md:flex-center p-4 gap-6 duration-200'>
+            <div className='md:max-w-[340px] h-full flex flex-col flex-1'>
                 <ChatList />
             </div>
-            <div className='flex-center dark:text-gray-300 text-xl flex-1'>
+            <div className='hidden md:flex-center dark:text-gray-300 text-xl flex-1 text-center'>
                 <h1>Select a conversation and start chatting now!</h1>
             </div>
         </div>

diff --git a/src/pages/RoomId.jsx b/src/pages/RoomId.jsx
@@ -3,11 +3,11 @@ import ChatContent from '../components/ChatContent';
 
 function RoomId() {
     return (
-        <div className='w-screen h-screen dark:bg-dark flex-center p-4 gap-6 duration-200'>
-            <div className='max-w-[340px] h-full flex flex-col flex-1'>
+        <div className='w-screen h-screen dark:bg-dark md:flex-center p-4 gap-6 duration-200'>
+            <div className='md:max-w-[340px] h-full flex-col flex-1 hidden md:block'>
                 <ChatList />
             </div>
-            <div className='flex-1 h-full'>
+            <div className='flex-1 h-full fixed inset-0 p-3 md:static'>
                 <ChatContent />
             </div>
         </div>

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -19,16 +19,16 @@
         @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 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-max md:max-w-lg text-[15px] break-all;
     }
     .my-message {
-        @apply rounded-xl text-white p-2 px-3 w-max max-w-lg text-[15px] break-all flex flex-col items-end;
+        @apply rounded-xl text-white p-2 px-3 w-full md:max-w-lg text-[15px] break-all flex flex-col items-end;
     }
     .chat-image {
-        @apply max-w-xs rounded-xl cursor-pointer w-fit bg-gray-300;
+        @apply rounded-xl cursor-pointer w-fit bg-gray-300 max-w-[65%];
     }
     .chat-video {
-        @apply max-w-xs rounded-xl cursor-pointer;
+        @apply rounded-xl cursor-pointer max-w-[65%];
     }
     .dark-hover {
         @apply rounded-xl hover:bg-gray-300 dark:hover:bg-lightDark;
@@ -46,6 +46,9 @@
         @apply invisible group-hover:visible opacity-0 group-hover:opacity-100 duration-100;
     }
     .files {
-        @apply flex-between underline hover:bg-lightDark rounded-lg px-3 py-2 duration-200 cursor-pointer gap-1 w-full;
+        @apply flex-between underline dark:hover:bg-lightDark hover:bg-gray-300 rounded-lg px-3 py-2 duration-200 cursor-pointer gap-1 w-full;
+    }
+    .close-modal {
+        @apply dark:bg-[#171616] dark:hover:bg-lightDark bg-gray-300 hover:bg-gray-100 absolute top-2 right-2 text-3xl p-2 rounded-full cursor-pointer duration-100;
     }
 }