style: fixed lightmode color

This commit is contained in:
원더 2021-01-25 22:16:51 +09:00
parent 4bfd7467e3
commit 8f132d42f8
3 changed files with 16 additions and 16 deletions

View File

@ -4,29 +4,29 @@ const Paginator = ({ currentPage, totalPage }:PaginatorProps):JSX.Element => {
return <div className='flex flex-col items-center my-12 text-center justify-center'> return <div className='flex flex-col items-center my-12 text-center justify-center'>
<div className='flex text-gray-700 dark:text-gray-400'> <div className='flex text-gray-700 dark:text-gray-400'>
<Link href={{ pathname: '/list/votes', query: { page: currentPage - 1} }}> <Link href={{ pathname: '/list/votes', query: { page: currentPage - 1} }}>
<a className={`${currentPage === 1 ? 'hidden' : ''} h-12 w-12 mr-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-400 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}> <a className={`${currentPage === 1 ? 'hidden' : ''} h-12 w-12 mr-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
<i className='fas fa-chevron-left'></i> <i className='fas fa-chevron-left'></i>
</a> </a>
</Link> </Link>
<div className='flex h-12 font-medium rounded-full bg-gray-200 dark:bg-discord-black'> <div className='flex h-12 font-medium rounded-full bg-gray-200 dark:bg-discord-black'>
<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-l-full ${pages[0] === currentPage ? 'bg-gray-400 dark:bg-discord-dark-hover' : ' hover:bg-gray-400 dark:hover:bg-discord-dark-hover'}`}>{pages[0]}</a> <a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-l-full ${pages[0] === currentPage ? 'bg-gray-300 dark:bg-discord-dark-hover' : ' hover:bg-gray-300 dark:hover:bg-discord-dark-hover'}`}>{pages[0]}</a>
{ {
pages[1] - pages[0] <= 1 ? '' : <> pages[1] - pages[0] <= 1 ? '' : <>
<a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in'>...</a> <a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in'>...</a>
<a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-400 dark:hover:bg-discord-dark-hover'>{pages[1]}</a> <a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 dark:hover:bg-discord-dark-hover'>{pages[1]}</a>
</> </>
} }
<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${currentPage === 1 || currentPage === totalPage ? 'hover:bg-gray-400 dark:hover:bg-discord-dark-hover' : 'bg-gray-400 dark:bg-discord-dark-hover '}`}>{pages[2] === pages[4] ? pages[4] - 1 : pages[2]}</a> <a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${currentPage === 1 || currentPage === totalPage ? 'hover:bg-gray-300 dark:hover:bg-discord-dark-hover' : 'bg-gray-300 dark:bg-discord-dark-hover '}`}>{pages[2] === pages[4] ? pages[4] - 1 : pages[2]}</a>
{ {
pages[4] - pages[3] <= 1 ? '' : <> pages[4] - pages[3] <= 1 ? '' : <>
<a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-400 dark:hover:bg-discord-dark-hover'>{pages[3]}</a> <a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 dark:hover:bg-discord-dark-hover'>{pages[3]}</a>
<a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in'>...</a> <a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in'>...</a>
</> </>
} }
<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-r-full ${pages[4] === currentPage ? 'bg-gray-400 dark:bg-discord-dark-hover' : ' hover:bg-gray-400 dark:hover:bg-discord-dark-hover'}`}>{pages[4]}</a> <a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-r-full ${pages[4] === currentPage ? 'bg-gray-300 dark:bg-discord-dark-hover' : ' hover:bg-gray-300 dark:hover:bg-discord-dark-hover'}`}>{pages[4]}</a>
</div> </div>
<Link href={{ pathname: '/list/votes', query: { page: currentPage + 1} }}> <Link href={{ pathname: '/list/votes', query: { page: currentPage + 1} }}>
<a className={`${currentPage === totalPage ? 'hidden' : '' } h-12 w-12 ml-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-400 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}> <a className={`${currentPage === totalPage ? 'hidden' : '' } h-12 w-12 ml-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
<i className='fas fa-chevron-right'></i> <i className='fas fa-chevron-right'></i>
</a> </a>
</Link> </Link>

View File

@ -20,13 +20,13 @@ const Tag = ({
dark dark
? blurple ? blurple
? 'bg-discord-blurple' ? 'bg-discord-blurple'
: 'bg-little-white-hover dark:bg-very-black' : 'bg-little-white-hover hover:bg-little-white dark:bg-very-black'
: github : github
? 'bg-gray-900 text-white' ? 'bg-gray-900 text-white'
: 'bg-little-white dark:bg-discord-black' : 'bg-little-white dark:bg-discord-black hover:bg-little-white-hover'
} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${ } ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1' circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'
} mr-1 mb-${marginBottom} hover:bg-little-white-hover dark:hover:bg-discord-dark-hover`} } mr-1 mb-${marginBottom} dark:hover:bg-discord-dark-hover transition duration-100 ease-in`}
> >
{text} {text}
</a> </a>
@ -38,13 +38,13 @@ const Tag = ({
dark dark
? blurple ? blurple
? 'bg-discord-blurple' ? 'bg-discord-blurple'
: 'bg-little-white-hover dark:bg-very-black' : 'bg-little-white-hover hover:bg-little-white dark:bg-very-black'
: github : github
? 'bg-gray-900 text-white' ? 'bg-gray-900 text-white'
: 'bg-little-white dark:bg-discord-black' : 'bg-little-white dark:bg-discord-black hover:bg-little-white-hover'
} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${ } ${!blurple && !github ? 'text-black dark:text-gray-400' : 'hover:bg-little-white-hover'} ${
circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1' circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'
} mr-1 mb-${marginBottom} hover:bg-little-white-hover dark:hover:bg-discord-dark-hover`} } mr-1 mb-${marginBottom} dark:hover:bg-discord-dark-hover transition duration-100 ease-in`}
> >
{text} {text}
</a> </a>

View File

@ -22,9 +22,9 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
</h1> </h1>
<Search /> <Search />
<h2 className='text-xl font-bold mt-10 mb-1 text-black dark:text-gray-100'> </h2> <h2 className='text-xl font-bold mt-10 mb-1 text-gray-100'> </h2>
<div className='flex flex-wrap '> <div className='flex flex-wrap '>
{ cats.map(t=> <Tag key={t} text={t} dark href={`/categories/${t}`}/>) } { cats.map(t=> <Tag key={t} text={t} dark href={`/categories/${t}`} />) }
</div> </div>
</Container> </Container>
</div> </div>