style: compact side menu

This commit is contained in:
Jing Hua 2023-04-07 18:23:51 +08:00
parent a57dfce108
commit 6c12e67393
9 changed files with 11 additions and 11 deletions

View file

@ -10,7 +10,7 @@ const AboutMenu = () => {
return (
<>
<a
className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
onClick={() => {
setIsModalOpen(true);
}}

View file

@ -22,7 +22,7 @@ const ImportExportChat = () => {
return (
<>
<a
className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
onClick={() => {
setIsModalOpen(true);
}}

View file

@ -157,7 +157,7 @@ const ChatFolder = ({
style={{ background: color || '' }}
className={`${
color ? '' : 'hover:bg-gray-850'
} transition-colors flex py-3 pl-3 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer parent-sibling`}
} transition-colors flex py-2 pl-2 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer parent-sibling`}
onClick={toggleExpanded}
ref={folderRef}
onMouseEnter={() => {

View file

@ -11,9 +11,9 @@ import useStore from '@store/store';
const ChatHistoryClass = {
normal:
'flex py-3 px-3 items-center gap-3 relative rounded-md bg-gray-900 hover:bg-gray-850 break-all hover:pr-4 group transition-opacity',
'flex py-2 px-2 items-center gap-3 relative rounded-md bg-gray-900 hover:bg-gray-850 break-all hover:pr-4 group transition-opacity',
active:
'flex py-3 px-3 items-center gap-3 relative rounded-md break-all pr-14 bg-gray-800 hover:bg-gray-800 group transition-opacity',
'flex py-2 px-2 items-center gap-3 relative rounded-md break-all pr-14 bg-gray-800 hover:bg-gray-800 group transition-opacity',
normalGradient:
'absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-900 group-hover:from-gray-850',
activeGradient:

View file

@ -11,7 +11,7 @@ const Config = () => {
return (
<>
<a
className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
id='api-menu'
onClick={() => setIsModalOpen(true)}
>

View file

@ -22,7 +22,7 @@ const ClearConversation = () => {
return (
<>
<a
className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
onClick={() => {
setIsModalOpen(true);
}}

View file

@ -7,7 +7,7 @@ const Me = () => {
const { t } = useTranslation();
return (
<a
className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
href='https://github.com/ztjhz/BetterChatGPT'
target='_blank'
>

View file

@ -20,7 +20,7 @@ const NewChat = ({ folder }: { folder?: string }) => {
} ${
folder
? 'justify-start'
: 'py-3 px-3 gap-3 md:mb-2 md:border md:border-white/20'
: 'py-2 px-2 gap-3 md:mb-2 md:border md:border-white/20'
}`}
onClick={() => {
if (!generating) addChat(folder);
@ -28,7 +28,7 @@ const NewChat = ({ folder }: { folder?: string }) => {
title={folder ? String(t('newChat')) : ''}
>
{folder ? (
<div className='max-h-0 parent-sibling-hover:max-h-10 hover:max-h-10 parent-sibling-hover:py-3 hover:py-3 px-3 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'>
<div className='max-h-0 parent-sibling-hover:max-h-10 hover:max-h-10 parent-sibling-hover:py-2 hover:py-2 px-2 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'>
<PlusIcon /> {t('newChat')}
</div>
) : (

View file

@ -23,7 +23,7 @@ const SettingsMenu = () => {
return (
<>
<a
className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
onClick={() => {
setIsModalOpen(true);
}}