alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-26 00:23:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: improvements

Browse source
This commit is contained in:
Jing Hua 2023-03-05 01:33:46 +08:00
parent 9bc839917e
commit 5d11cfa343
4 changed files with 38 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Chat/ChatContent/ChatContent.tsx
View file

@ -66,7 +66,7 @@ const ChatContent = () => {
Submit Submit
</button> </button>
</div> </div>
<div className='w-full h-32 md:h-48 flex-shrink-0'></div> <div className='w-full h-10'></div>
</div> </div>
</ScrollToBottom> </ScrollToBottom>
</div> </div>

8
src/components/Chat/ChatContent/ScrollToBottomButton.tsx
View file

@ -1,13 +1,17 @@
import React from 'react'; import React from 'react';
import { useScrollToBottom } from 'react-scroll-to-bottom'; import { useAtBottom, useScrollToBottom } from 'react-scroll-to-bottom';
import DownArrow from '@icon/DownArrow'; import DownArrow from '@icon/DownArrow';
const ScrollToBottomButton = () => { const ScrollToBottomButton = () => {
const scrollToBottom = useScrollToBottom(); const scrollToBottom = useScrollToBottom();
const [atBottom] = useAtBottom();
return ( return (
<button <button
className='cursor-pointer absolute right-6 bottom-[60px] md:bottom-[60px] z-10 rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200' className={`cursor-pointer absolute right-6 bottom-[60px] md:bottom-[60px] z-10 rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 ${
atBottom ? 'hidden' : ''
}`}
onClick={scrollToBottom} onClick={scrollToBottom}
> >
<DownArrow /> <DownArrow />

9
src/components/Menu/Menu.tsx
View file

@ -7,9 +7,10 @@ import CrossIcon2 from '@icon/CrossIcon2';
const Menu = () => { const Menu = () => {
return ( return (
<>
<div <div
id='menu' id='menu'
className='dark bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col max-md:translate-x-[-100%] max-md:fixed max-md:transition-transform max-md:z-[999] max-md:top-0 max-md:left-0 max-md:h-full' className='dark bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col max-md:translate-x-[-100%] max-md:fixed max-md:transition-transform max-md:z-[999] max-md:top-0 max-md:left-0 max-md:h-full max-md:w-3/4'
> >
<div className='flex h-full min-h-0 flex-col '> <div className='flex h-full min-h-0 flex-col '>
<div className='scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20'> <div className='scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20'>
@ -28,11 +29,17 @@ const Menu = () => {
.getElementById('menu') .getElementById('menu')
?.classList.remove('max-md:translate-x-[0%]'); ?.classList.remove('max-md:translate-x-[0%]');
document.getElementById('menu-close')?.classList.add('hidden'); document.getElementById('menu-close')?.classList.add('hidden');
document.getElementById('menu-backdrop')?.classList.add('hidden');
}} }}
> >
<CrossIcon2 /> <CrossIcon2 />
</div> </div>
</div> </div>
<div
id='menu-backdrop'
className='hidden md:hidden fixed top-0 left-0 h-full w-full z-[60] bg-gray-900/70'
/>
</>
); );
}; };

1
src/components/MobileBar/MobileBar.tsx
View file

@ -20,6 +20,7 @@ const MobileBar = () => {
.getElementById('menu') .getElementById('menu')
?.classList.add('max-md:translate-x-[0%]'); ?.classList.add('max-md:translate-x-[0%]');
document.getElementById('menu-close')?.classList.remove('hidden'); document.getElementById('menu-close')?.classList.remove('hidden');
document.getElementById('menu-backdrop')?.classList.remove('hidden');
}} }}
> >
<span className='sr-only'>Open sidebar</span> <span className='sr-only'>Open sidebar</span>