Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

feat: interact with user settings/profile (#9)

Browse Source
This commit is contained in:
Divlo
2022-02-19 23:20:33 +01:00
committed by GitHub
parent 48debe8638
commit 7ac4f86cd5
101 changed files with 6705 additions and 9777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx
View File

@ -19,10 +19,10 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
const { t } = useTranslation()
return (
<div className='relative overflow-hidden rounded border border-gray-500 dark:border-gray-700 hover:-translate-y-2 hover:shadow-none shadow-lg transition duration-200 ease-in-out'>
<div className='relative overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700'>
<div
className={classNames(
'flex flex-col items-center h-full justify-center cursor-pointer p-4 pt-8 transition duration-200 ease-in-out',
'flex h-full cursor-pointer flex-col items-center justify-center p-4 pt-8 transition duration-200 ease-in-out',
{ '-translate-x-full': isConfirmed }
)}
onClick={() => setIsConfirmed(!isConfirmed)}
@ -36,10 +36,10 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
width={80}
height={80}
/>
<div className='w-full px-4 m-2 text-center mt-6'>
<div className='m-2 mt-6 w-full px-4 text-center'>
<h3
data-cy='guild-name'
className='w-full center font-bold text-xl mb-2 truncate'
className='center mb-2 w-full truncate text-xl font-bold'
>
{guild.name}
</h3>
@ -47,20 +47,20 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
{guild.description != null ? (
guild.description
) : (
<span className='flex h-full opacity-25 justify-center items-center'>
<span className='flex h-full items-center justify-center opacity-25'>
<Emoji value=':eyes:' size={25} />
<span className='ml-2'>Nothing&apos;s here...</span>
</span>
)}
</p>
</div>
<p className='flex flex-col text-green-800 dark:text-green-400 mt-auto'>
<p className='mt-auto flex flex-col text-green-800 dark:text-green-400'>
{guild.membersCount} {t('application:members')}
</p>
</div>
<ConfirmGuildJoin
className={classNames(
'absolute w-full h-full flex flex-col w-ful h-ful top-1/2 -translate-y-1/2 left-full translate-x- rounded-2xl justify-center items-center transition-all',
'w-ful h-ful translate-x- absolute top-1/2 left-full flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
{
'!left-0': isConfirmed
}

6
components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx
View File

@ -30,18 +30,18 @@ export const JoinGuildsPublic: React.FC = () => {
}
return (
<div className='flex flex-col w-full h-full transition-all'>
<div className='flex h-full w-full flex-col transition-all'>
<input
data-cy='search-guild-input'
onChange={handleChange}
className='w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 bg-white dark:bg-[#3B3B3B] border-gray-500 dark:border-gray-700 p-3 my-6 mt-16 mx-auto rounded-md border'
className='my-6 mx-auto mt-16 w-10/12 rounded-md border border-gray-500 bg-white p-3 dark:border-gray-700 dark:bg-[#3B3B3B] sm:w-8/12 md:w-6/12 lg:w-5/12'
type='search'
name='search-guild'
placeholder={`🔎 ${t('application:search')}...`}
/>
<div className='w-full p-12'>
<InfiniteScroll
className='guilds-public-list max-w-[1400px] mx-auto grid gap-8 grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] !overflow-visible'
className='guilds-public-list mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible'
dataLength={items.length}
next={nextPage}
scrollableTarget='application-page-content'