Skip to content

Commit

Permalink
update for better UX
Browse files Browse the repository at this point in the history
  • Loading branch information
pth-1641 committed Jul 29, 2022
1 parent 65cce65 commit fe37f4e
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 41 deletions.
26 changes: 16 additions & 10 deletions src/components/ChatContent/Message/FriendMessage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,16 +79,22 @@ function FriendMessage({
className='chat-video'
/>
) : type === 'files' ? (
<a
className='friend-message flex-center underline'
href={chatContent}
download
>
{fileName}
<span className='text-2xl ml-2'>
<MdFileDownload />
</span>
</a>
<div className='friend-message flex flex-col w-max'>
<time className='text-xs dark:text-gray-300 text-200'>
{formatDate(time)}
</time>
<a
className='flex-center underline'
href={chatContent}
download
target='_blank'
>
{fileName}
<span className='text-2xl ml-2'>
<MdFileDownload />
</span>
</a>
</div>
) : (
<div className='flex flex-col gap-0.5'>
<p className='friend-message'>
Expand Down
7 changes: 6 additions & 1 deletion src/components/ChatContent/Modals/ModalShowMedia.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ function ModalShowImage({ link }) {
const setModalName = useStore((state) => state.setModalName);

return (
<div className='fixed inset-0 z-20 dark:text-white bg-[rgba(0,0,0,0.75)] dark:bg-transparent backdrop-blur-lg flex-center p-7'>
<div
className='fixed inset-0 z-20 dark:text-white bg-[rgba(0,0,0,0.75)] dark:bg-transparent backdrop-blur-lg flex-center p-7'
onClick={() => setModalName('')}
>
<span
className='absolute top-2 right-2 text-3xl rounded-full dark:bg-[rgba(0,0,0,0.75)] p-1 cursor-pointer duration-200 dark:hover:bg-gray-700 bg-gray-300 hover:bg-gray-200'
onClick={() => setModalName('')}
Expand All @@ -18,10 +21,12 @@ function ModalShowImage({ link }) {
className='w-full md:w-auto md:h-full mx-auto rounded-lg'
controls
autoPlay
onClick={(e) => e.stopPropagation()}
/>
) : (
<img
src={link.link}
onClick={(e) => e.stopPropagation()}
alt=''
className='w-full md:w-auto md:h-full mx-auto rounded-lg'
/>
Expand Down
2 changes: 2 additions & 0 deletions src/components/ChatList/ChatItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,8 @@ function ChatItem({ roomId }) {
? ' sent an image'
: type === 'videos'
? ' sent a video'
? type === 'files'
: ' sent a file'
: type === 'gifs'
? ' sent a GIF from GIPHY'
: chatContent
Expand Down
63 changes: 35 additions & 28 deletions src/components/ChatList/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,35 +28,42 @@ function Header({ user }) {
>
<img src={user?.photoURL} alt='' className='rounded-full' />
{displaySetting && (
<div className='h-max absolute bg-white dark:bg-dark w-48 p-2 rounded-xl right-0 border-gray-600 border mt-3 grid gap-1 select-none'>
<div
className='flex items-center gap-2 dark-hover p-2'
onClick={() => setModalName('user-info')}
>
<span className='text-xl dark:bg-lightDark bg-gray-300 p-1 rounded-full'>
<FaUserCircle />
</span>
My Infomation
<>
<div className='fixed inset-0'></div>
<div className='h-max absolute bg-white dark:bg-dark w-48 p-2 rounded-xl right-0 border-gray-600 border mt-3 grid gap-1 select-none'>
<div
className='flex items-center gap-2 dark-hover p-2'
onClick={() => setModalName('user-info')}
>
<span className='text-xl dark:bg-lightDark bg-gray-300 p-1 rounded-full'>
<FaUserCircle />
</span>
My Infomation
</div>
<div
className='flex items-center gap-2 dark-hover p-2'
onClick={toggleTheme}
>
<span className='text-xl dark:bg-lightDark p-1 bg-gray-300 rounded-full'>
{darkMode ? (
<MdLightMode />
) : (
<MdDarkMode />
)}
</span>
{darkMode ? 'Light' : 'Dark'} Mode
</div>
<div
className='flex items-center gap-2 dark-hover p-2'
onClick={() => setModalName('log-out')}
>
<span className='text-xl dark:bg-lightDark p-1 bg-gray-300 rounded-full'>
<IoLogOutOutline />
</span>
Log Out
</div>
</div>
<div
className='flex items-center gap-2 dark-hover p-2'
onClick={toggleTheme}
>
<span className='text-xl dark:bg-lightDark p-1 bg-gray-300 rounded-full'>
{darkMode ? <MdLightMode /> : <MdDarkMode />}
</span>
{darkMode ? 'Light' : 'Dark'} Mode
</div>
<div
className='flex items-center gap-2 dark-hover p-2'
onClick={() => setModalName('log-out')}
>
<span className='text-xl dark:bg-lightDark p-1 bg-gray-300 rounded-full'>
<IoLogOutOutline />
</span>
Log Out
</div>
</div>
</>
)}
</div>
</div>
Expand Down
10 changes: 8 additions & 2 deletions src/components/ModalTemplate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,17 @@ function Modal({ children, setDisplayRemoveMessage }) {
};

return (
<div className='fixed inset-0 bg-[rgba(0,0,0,0.75)] z-20 flex-center dark:text-white p-4'>
<div
className='fixed inset-0 bg-[rgba(0,0,0,0.75)] z-20 flex-center dark:text-white p-4'
onClick={handleCloseModal}
>
<span className='close-modal' onClick={handleCloseModal}>
<MdClose />
</span>
<div className='dark:bg-dark p-5 md:p-8 rounded-xl w-full max-w-[448px] bg-white'>
<div
className='dark:bg-dark p-5 md:p-8 rounded-xl w-full max-w-[448px] bg-white'
onClick={(e) => e.stopPropagation()}
>
{children}
</div>
</div>
Expand Down

1 comment on commit fe37f4e

@vercel
Copy link

@vercel vercel bot commented on fe37f4e Jul 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

chat-app – ./

chat-app-git-main-pth-1641.vercel.app
messenger-v02.vercel.app
chat-app-pth-1641.vercel.app

Please sign in to comment.