fix: improve overall rendering v2 (#15)
Follow-up of #10 Co-authored-by: Walidoux <ma.walidkorchi@icloud.com>
This commit is contained in:
Divlo
GitHub
parent
780788d682
commit
8f74263daa
@ -1,5 +1,7 @@
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import { Loader } from '../../design/Loader'
|
||||
|
||||
@ -9,47 +11,58 @@ export interface ConfirmGuildJoinProps {
|
||||
handleNo: () => void | Promise<void>
|
||||
}
|
||||
|
||||
export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = (props) => {
|
||||
const { className, handleYes, handleNo } = props
|
||||
|
||||
export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
|
||||
...props
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const handleYesLoading = async (): Promise<void> => {
|
||||
setIsLoading((isLoading) => !isLoading)
|
||||
await handleYes()
|
||||
await props.handleYes()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{isLoading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<>
|
||||
<Image
|
||||
src='/images/svg/design/join-guild.svg'
|
||||
alt='Join Guild Illustration'
|
||||
height={150}
|
||||
width={150}
|
||||
/>
|
||||
<div className='mt-8 flex flex-col'>
|
||||
<h1 className='mb-6 text-center text-xl'>Rejoindre la guild ?</h1>
|
||||
<div className='flex gap-7'>
|
||||
<button
|
||||
className='rounded-3xl bg-success px-8 py-2 transition hover:opacity-50'
|
||||
onClick={handleYesLoading}
|
||||
>
|
||||
Oui
|
||||
</button>
|
||||
<button
|
||||
className='rounded-3xl bg-error px-8 py-2 transition hover:opacity-50'
|
||||
onClick={handleNo}
|
||||
>
|
||||
Non
|
||||
</button>
|
||||
</div>
|
||||
<div className={props.className}>
|
||||
<Loader
|
||||
className={classNames('absolute scale-0 transition', {
|
||||
'scale-100': isLoading
|
||||
})}
|
||||
/>
|
||||
<div
|
||||
className={classNames(
|
||||
'visible flex flex-col items-center opacity-100 transition-all',
|
||||
{
|
||||
'invisible opacity-0': isLoading
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
src='/images/svg/design/join-guild.svg'
|
||||
alt='Join Guild Illustration'
|
||||
height={150}
|
||||
width={150}
|
||||
/>
|
||||
<div className='mt-8 flex flex-col'>
|
||||
<h1 className='mb-6 text-center text-xl'>
|
||||
{t('application:join-the-guild')} ?
|
||||
</h1>
|
||||
<div className='flex gap-7'>
|
||||
<button
|
||||
className='rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
|
||||
onClick={handleYesLoading}
|
||||
>
|
||||
{t('common:yes')}
|
||||
</button>
|
||||
<button
|
||||
className='rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
|
||||
onClick={props.handleNo}
|
||||
>
|
||||
{t('common:no')}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<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='relative h-80 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 h-full cursor-pointer flex-col items-center justify-center p-4 pt-8 transition duration-200 ease-in-out',
|
||||
@ -83,9 +83,9 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
|
||||
{guild.description != null ? (
|
||||
guild.description
|
||||
) : (
|
||||
<span className='flex h-full items-center justify-center opacity-25'>
|
||||
<span className='flex h-full items-center justify-center opacity-40 dark:opacity-20'>
|
||||
<Emoji value=':eyes:' size={25} />
|
||||
<span className='ml-2'>Nothing's here...</span>
|
||||
<span className='ml-2'>{t('application:nothing-here')}</span>
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
@ -52,12 +52,12 @@ export const JoinGuildsPublic: React.FC = () => {
|
||||
/>
|
||||
<div className='w-full p-12'>
|
||||
<InfiniteScroll
|
||||
className='guilds-public-list mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible'
|
||||
className='guilds-public-list relative 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'
|
||||
hasMore={hasMore}
|
||||
loader={<Loader />}
|
||||
loader={<Loader className='absolute left-1/2 -translate-x-1/2' />}
|
||||
>
|
||||
{items.map((guild) => {
|
||||
return <GuildPublic guild={guild} key={guild.id} />
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useState, useRef } from 'react'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import TextareaAutosize from 'react-textarea-autosize'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import { GuildsChannelsPath } from '..'
|
||||
import { useAuthentication } from '../../../tools/authentication'
|
||||
@ -77,50 +78,57 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isVisibleEmojiPicker && <EmojiPicker onClick={handleEmojiPicker} />}
|
||||
<div className='p-6 pb-4'>
|
||||
<div className='flex h-full w-full rounded-lg bg-gray-200 py-1 text-gray-600 dark:bg-gray-800 dark:text-gray-200'>
|
||||
<form
|
||||
className='flex h-full w-full items-center'
|
||||
onSubmit={handleSubmit}
|
||||
onKeyDown={handleTextareaKeyDown}
|
||||
<div className='relative p-6 pb-4'>
|
||||
<div
|
||||
className={classNames(
|
||||
'absolute bottom-24 right-20 z-50 w-fit transition-all duration-100',
|
||||
{
|
||||
'invisible translate-y-5 opacity-0': !isVisibleEmojiPicker
|
||||
}
|
||||
)}
|
||||
>
|
||||
<EmojiPicker onClick={handleEmojiPicker} />
|
||||
</div>
|
||||
<div className='flex h-full w-full rounded-lg bg-gray-200 py-1 text-gray-600 dark:bg-gray-800 dark:text-gray-200'>
|
||||
<form
|
||||
className='flex h-full w-full items-center'
|
||||
onSubmit={handleSubmit}
|
||||
onKeyDown={handleTextareaKeyDown}
|
||||
>
|
||||
<TextareaAutosize
|
||||
className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 font-paragraph tracking-wide outline-none'
|
||||
placeholder={t('application:write-a-message')}
|
||||
wrap='soft'
|
||||
maxRows={6}
|
||||
name='message'
|
||||
onChange={handleTextareaChange}
|
||||
value={message}
|
||||
ref={textareaReference}
|
||||
autoFocus
|
||||
/>
|
||||
</form>
|
||||
<div className='flex h-full items-center justify-around pr-6'>
|
||||
<button
|
||||
className='flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1'
|
||||
onClick={handleVisibleEmojiPicker}
|
||||
>
|
||||
<TextareaAutosize
|
||||
className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 font-paragraph tracking-wide outline-none'
|
||||
placeholder={t('application:write-a-message')}
|
||||
wrap='soft'
|
||||
maxRows={6}
|
||||
name='message'
|
||||
onChange={handleTextareaChange}
|
||||
value={message}
|
||||
ref={textareaReference}
|
||||
autoFocus
|
||||
🙂
|
||||
</button>
|
||||
<button className='relative flex h-full w-full cursor-pointer items-center justify-center p-1 text-green-800 transition hover:-translate-y-1 dark:text-green-400'>
|
||||
<input
|
||||
type='file'
|
||||
className='absolute h-full w-full cursor-pointer opacity-0'
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</form>
|
||||
<div className='flex h-full items-center justify-around pr-6'>
|
||||
<button
|
||||
className='flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1'
|
||||
onClick={handleVisibleEmojiPicker}
|
||||
>
|
||||
🙂
|
||||
</button>
|
||||
<button className='relative flex h-full w-full cursor-pointer items-center justify-center p-1 text-green-800 transition hover:-translate-y-1 dark:text-green-400'>
|
||||
<input
|
||||
type='file'
|
||||
className='absolute h-full w-full cursor-pointer opacity-0'
|
||||
onChange={handleFileChange}
|
||||
<svg width='25' height='25' viewBox='0 0 22 22'>
|
||||
<path
|
||||
d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z'
|
||||
fill='currentColor'
|
||||
/>
|
||||
<svg width='25' height='25' viewBox='0 0 22 22'>
|
||||
<path
|
||||
d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z'
|
||||
fill='currentColor'
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import date from 'date-and-time'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
@ -22,8 +22,8 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
const { user, guilds } = props
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [showPopup, setShowPopup] = useState<boolean>(false)
|
||||
const [confirmation, setConfirmation] = useState<boolean>(false)
|
||||
const [showPopup, setShowPopup] = useState(false)
|
||||
const [confirmation, setConfirmation] = useState(false)
|
||||
|
||||
const handleConfirmationState = (): void => {
|
||||
setConfirmation((confirmation) => !confirmation)
|
||||
@ -60,7 +60,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
<div className='ml-10 flex flex-col'>
|
||||
<div className='mb-2 flex items-center'>
|
||||
<p
|
||||
className='space text-3xl font-bold tracking-wide text-white'
|
||||
className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
|
||||
data-cy='user-name'
|
||||
>
|
||||
{user.name}
|
||||
@ -125,12 +125,11 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TODO: We might want to remove this code */}
|
||||
<div
|
||||
className={classNames(
|
||||
'pointer-events-none absolute top-0 flex h-full w-full items-center justify-center bg-zinc-900/75 opacity-0 transition',
|
||||
'pointer-events-none invisible absolute top-0 flex h-full w-full items-center justify-center bg-zinc-900/75 opacity-0 transition',
|
||||
{
|
||||
'pointer-events-auto visible opacity-100': showPopup
|
||||
'pointer-events-auto !visible !opacity-100': showPopup
|
||||
}
|
||||
)}
|
||||
>
|
||||
@ -161,8 +160,8 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
</div>
|
||||
<XIcon
|
||||
height={40}
|
||||
onClick={() => setShowPopup(false)}
|
||||
className='absolute top-8 right-8 cursor-pointer transition hover:rotate-180'
|
||||
onClick={handlePopupVisibility}
|
||||
className='absolute top-8 right-8 cursor-pointer text-white transition hover:rotate-90'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,18 +1,22 @@
|
||||
import Image from 'next/image'
|
||||
import { LoginIcon } from '@heroicons/react/solid'
|
||||
import classNames from 'classnames'
|
||||
|
||||
export interface UserProfileGuildProps {
|
||||
className?: string
|
||||
handleConfirmationState: () => void
|
||||
}
|
||||
|
||||
export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
|
||||
const { handleConfirmationState } = props
|
||||
|
||||
export const UserProfileGuild: React.FC<UserProfileGuildProps> = ({
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className='group relative flex w-full cursor-pointer transition'
|
||||
onClick={handleConfirmationState}
|
||||
className={classNames(
|
||||
'group relative flex w-full cursor-pointer transition',
|
||||
props.className
|
||||
)}
|
||||
onClick={props.handleConfirmationState}
|
||||
>
|
||||
<div className='relative w-full px-8 py-5 transition group-hover:-translate-x-20'>
|
||||
<div className='flex transition group-hover:opacity-40'>
|
||||
@ -28,7 +32,7 @@ export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<h1 className='text-xl font-bold'>Guild Name</h1>
|
||||
<p className='mt-2 text-gray-300'>
|
||||
<p className='mt-2 text-gray-900 dark:text-gray-300'>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
|
||||
nam.
|
||||
</p>
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
export interface LoaderProps {
|
||||
width?: number
|
||||
height?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
export const Loader: React.FC<LoaderProps> = (props) => {
|
||||
const { width = 50, height = 50 } = props
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={props.className}>
|
||||
<div data-testid='progress-spinner' className='progress-spinner'>
|
||||
<svg className='progress-spinner-svg' viewBox='25 25 50 50'>
|
||||
<circle
|
||||
@ -29,7 +30,6 @@ export const Loader: React.FC<LoaderProps> = (props) => {
|
||||
margin: 0 auto;
|
||||
width: ${width}px;
|
||||
height: ${height}px;
|
||||
display: inline-block;
|
||||
}
|
||||
.progress-spinner::before {
|
||||
content: '';
|
||||
@ -76,6 +76,6 @@ export const Loader: React.FC<LoaderProps> = (props) => {
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
"create-a-guild": "Create a Guild",
|
||||
"create-a-guild-description": "Create your own guild and manage everything.",
|
||||
"join-a-guild": "Join a Guild",
|
||||
"join-the-guild": "Join the guild",
|
||||
"join-a-guild-description": "Talk, collaborate, share and have fun with your friends by joining an already existing guild!",
|
||||
"members": "member(s)",
|
||||
"search": "Search",
|
||||
@ -12,5 +13,6 @@
|
||||
"biography": "Biography",
|
||||
"label-checkbox-email": "Show your email to everyone.",
|
||||
"label-checkbox-guilds": "Show the list of guilds to everyone.",
|
||||
"private-user-guilds-list": "List of private guilds"
|
||||
"private-user-guilds-list": "List of private guilds",
|
||||
"nothing-here": "Nothing's here..."
|
||||
}
|
||||
|
||||
@ -3,5 +3,7 @@
|
||||
"french": "French",
|
||||
"all-rights-reserved": "All rights reserved",
|
||||
"description": "Stay close with your friends and communities, talk, chat, collaborate, share, and have fun.",
|
||||
"name": "Name"
|
||||
"name": "Name",
|
||||
"yes": "Yes",
|
||||
"no": "No"
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
"create-a-guild": "Créer une Guilde",
|
||||
"create-a-guild-description": "Créez votre propre guilde et gérez tout.",
|
||||
"join-a-guild": "Rejoindre une Guilde",
|
||||
"join-the-guild": "Rejoindre la guilde",
|
||||
"join-a-guild-description": "Discutez, collaborez, partagez et amusez-vous avec vos amis en rejoignant une guilde déjà existante!",
|
||||
"members": "membre(s)",
|
||||
"search": "Rechercher",
|
||||
@ -12,5 +13,6 @@
|
||||
"biography": "Biographie",
|
||||
"label-checkbox-email": "Afficher votre email au public.",
|
||||
"label-checkbox-guilds": "Afficher la liste des guildes au public.",
|
||||
"private-user-guilds-list": "Liste des guildes privées"
|
||||
"private-user-guilds-list": "Liste des guildes privées",
|
||||
"nothing-here": "Il n'y a rien ici..."
|
||||
}
|
||||
|
||||
@ -3,5 +3,7 @@
|
||||
"french": "Français",
|
||||
"all-rights-reserved": "Tous droits réservés",
|
||||
"description": "Restez proche de vos amis et de vos communautés, parlez, collaborez, partagez et amusez-vous.",
|
||||
"name": "Nom"
|
||||
"name": "Nom",
|
||||
"yes": "Yes",
|
||||
"no": "Non"
|
||||
}
|
||||
|
||||
@ -45,5 +45,5 @@ body,
|
||||
.scrollbar-firefox-support {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
|
||||
z-index: 1000;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user