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

fix: improve overall rendering v2 (#15)

Browse Source 
Follow-up of #10

Co-authored-by: Walidoux <ma.walidkorchi@icloud.com>
This commit is contained in:
Divlo 2022-03-16 11:25:44 +01:00 committed by GitHub
parent 780788d682
commit 8f74263daa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 133 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx
View File

@ -1,5 +1,7 @@
import Image from 'next/image' import Image from 'next/image'
import { useState } from 'react' import { useState } from 'react'
import useTranslation from 'next-translate/useTranslation'
import classNames from 'classnames'
import { Loader } from '../../design/Loader' import { Loader } from '../../design/Loader'
@ -9,47 +11,58 @@ export interface ConfirmGuildJoinProps {
handleNo: () => void | Promise<void> handleNo: () => void | Promise<void>
} }
export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = (props) => { export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
const { className, handleYes, handleNo } = props ...props
}) => {
const { t } = useTranslation()
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const handleYesLoading = async (): Promise<void> => { const handleYesLoading = async (): Promise<void> => {
setIsLoading((isLoading) => !isLoading) setIsLoading((isLoading) => !isLoading)
await handleYes() await props.handleYes()
} }
return ( return (
<div className={className}> <div className={props.className}>
{isLoading ? ( <Loader
<Loader /> className={classNames('absolute scale-0 transition', {
) : ( 'scale-100': isLoading
<> })}
<Image />
src='/images/svg/design/join-guild.svg' <div
alt='Join Guild Illustration' className={classNames(
height={150} 'visible flex flex-col items-center opacity-100 transition-all',
width={150} {
/> 'invisible opacity-0': isLoading
<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 <Image
className='rounded-3xl bg-success px-8 py-2 transition hover:opacity-50' src='/images/svg/design/join-guild.svg'
onClick={handleYesLoading} alt='Join Guild Illustration'
> height={150}
Oui width={150}
</button> />
<button <div className='mt-8 flex flex-col'>
className='rounded-3xl bg-error px-8 py-2 transition hover:opacity-50' <h1 className='mb-6 text-center text-xl'>
onClick={handleNo} {t('application:join-the-guild')} ?
> </h1>
Non <div className='flex gap-7'>
</button> <button
</div> 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>
</div> </div>
) )
} }

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

@ -53,7 +53,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
} }
return ( 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 <div
className={classNames( className={classNames(
'flex h-full cursor-pointer flex-col items-center justify-center 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',
@ -83,9 +83,9 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
{guild.description != null ? ( {guild.description != null ? (
guild.description 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} /> <Emoji value=':eyes:' size={25} />
<span className='ml-2'>Nothing&apos;s here...</span> <span className='ml-2'>{t('application:nothing-here')}</span>
</span> </span>
)} )}
</p> </p>

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

@ -52,12 +52,12 @@ export const JoinGuildsPublic: React.FC = () => {
/> />
<div className='w-full p-12'> <div className='w-full p-12'>
<InfiniteScroll <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} dataLength={items.length}
next={nextPage} next={nextPage}
scrollableTarget='application-page-content' scrollableTarget='application-page-content'
hasMore={hasMore} hasMore={hasMore}
loader={<Loader />} loader={<Loader className='absolute left-1/2 -translate-x-1/2' />}
> >
{items.map((guild) => { {items.map((guild) => {
return <GuildPublic guild={guild} key={guild.id} /> return <GuildPublic guild={guild} key={guild.id} />

88
components/Application/SendMessage/SendMessage.tsx
View File

@ -1,6 +1,7 @@
import { useState, useRef } from 'react' import { useState, useRef } from 'react'
import useTranslation from 'next-translate/useTranslation' import useTranslation from 'next-translate/useTranslation'
import TextareaAutosize from 'react-textarea-autosize' import TextareaAutosize from 'react-textarea-autosize'
import classNames from 'classnames'
import { GuildsChannelsPath } from '..' import { GuildsChannelsPath } from '..'
import { useAuthentication } from '../../../tools/authentication' import { useAuthentication } from '../../../tools/authentication'
@ -77,50 +78,57 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
} }
return ( return (
<> <div className='relative p-6 pb-4'>
{isVisibleEmojiPicker && <EmojiPicker onClick={handleEmojiPicker} />} <div
<div className='p-6 pb-4'> className={classNames(
<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'> 'absolute bottom-24 right-20 z-50 w-fit transition-all duration-100',
<form {
className='flex h-full w-full items-center' 'invisible translate-y-5 opacity-0': !isVisibleEmojiPicker
onSubmit={handleSubmit} }
onKeyDown={handleTextareaKeyDown} )}
>
<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' </button>
placeholder={t('application:write-a-message')} <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'>
wrap='soft' <input
maxRows={6} type='file'
name='message' className='absolute h-full w-full cursor-pointer opacity-0'
onChange={handleTextareaChange} onChange={handleFileChange}
value={message}
ref={textareaReference}
autoFocus
/> />
</form> <svg width='25' height='25' viewBox='0 0 22 22'>
<div className='flex h-full items-center justify-around pr-6'> <path
<button 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'
className='flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1' fill='currentColor'
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'> </svg>
<path </button>
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>
</div> </div>
</div> </div>
</> </div>
) )
} }

17
components/Application/UserProfile/UserProfile.tsx
View File

@ -1,5 +1,5 @@
import Image from 'next/image' import Image from 'next/image'
import { useState } from 'react' import React, { useState } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import date from 'date-and-time' import date from 'date-and-time'
import useTranslation from 'next-translate/useTranslation' import useTranslation from 'next-translate/useTranslation'
@ -22,8 +22,8 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
const { user, guilds } = props const { user, guilds } = props
const { t } = useTranslation() const { t } = useTranslation()
const [showPopup, setShowPopup] = useState<boolean>(false) const [showPopup, setShowPopup] = useState(false)
const [confirmation, setConfirmation] = useState<boolean>(false) const [confirmation, setConfirmation] = useState(false)
const handleConfirmationState = (): void => { const handleConfirmationState = (): void => {
setConfirmation((confirmation) => !confirmation) setConfirmation((confirmation) => !confirmation)
@ -60,7 +60,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
<div className='ml-10 flex flex-col'> <div className='ml-10 flex flex-col'>
<div className='mb-2 flex items-center'> <div className='mb-2 flex items-center'>
<p <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' data-cy='user-name'
> >
{user.name} {user.name}
@ -125,12 +125,11 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
</div> </div>
</div> </div>
{/* TODO: We might want to remove this code */}
<div <div
className={classNames( 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> </div>
<XIcon <XIcon
height={40} height={40}
onClick={() => setShowPopup(false)} onClick={handlePopupVisibility}
className='absolute top-8 right-8 cursor-pointer transition hover:rotate-180' className='absolute top-8 right-8 cursor-pointer text-white transition hover:rotate-90'
/> />
</div> </div>
</div> </div>

16
components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx
View File

@ -1,18 +1,22 @@
import Image from 'next/image' import Image from 'next/image'
import { LoginIcon } from '@heroicons/react/solid' import { LoginIcon } from '@heroicons/react/solid'
import classNames from 'classnames'
export interface UserProfileGuildProps { export interface UserProfileGuildProps {
className?: string className?: string
handleConfirmationState: () => void handleConfirmationState: () => void
} }
export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => { export const UserProfileGuild: React.FC<UserProfileGuildProps> = ({
const { handleConfirmationState } = props ...props
}) => {
return ( return (
<div <div
className='group relative flex w-full cursor-pointer transition' className={classNames(
onClick={handleConfirmationState} '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='relative w-full px-8 py-5 transition group-hover:-translate-x-20'>
<div className='flex transition group-hover:opacity-40'> <div className='flex transition group-hover:opacity-40'>
@ -28,7 +32,7 @@ export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
</div> </div>
<div className='flex flex-col'> <div className='flex flex-col'>
<h1 className='text-xl font-bold'>Guild Name</h1> <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, Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
nam. nam.
</p> </p>

6
components/design/Loader/Loader.tsx
View File

@ -1,13 +1,14 @@
export interface LoaderProps { export interface LoaderProps {
width?: number width?: number
height?: number height?: number
className?: string
} }
export const Loader: React.FC<LoaderProps> = (props) => { export const Loader: React.FC<LoaderProps> = (props) => {
const { width = 50, height = 50 } = props const { width = 50, height = 50 } = props
return ( return (
<> <div className={props.className}>
<div data-testid='progress-spinner' className='progress-spinner'> <div data-testid='progress-spinner' className='progress-spinner'>
<svg className='progress-spinner-svg' viewBox='25 25 50 50'> <svg className='progress-spinner-svg' viewBox='25 25 50 50'>
<circle <circle
@ -29,7 +30,6 @@ export const Loader: React.FC<LoaderProps> = (props) => {
margin: 0 auto; margin: 0 auto;
width: ${width}px; width: ${width}px;
height: ${height}px; height: ${height}px;
display: inline-block;
} }
.progress-spinner::before { .progress-spinner::before {
content: ''; content: '';
@ -76,6 +76,6 @@ export const Loader: React.FC<LoaderProps> = (props) => {
} }
`} `}
</style> </style>
</> </div>
) )
} }

4
locales/en/application.json
View File

@ -5,6 +5,7 @@
"create-a-guild": "Create a Guild", "create-a-guild": "Create a Guild",
"create-a-guild-description": "Create your own guild and manage everything.", "create-a-guild-description": "Create your own guild and manage everything.",
"join-a-guild": "Join a Guild", "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!", "join-a-guild-description": "Talk, collaborate, share and have fun with your friends by joining an already existing guild!",
"members": "member(s)", "members": "member(s)",
"search": "Search", "search": "Search",
@ -12,5 +13,6 @@
"biography": "Biography", "biography": "Biography",
"label-checkbox-email": "Show your email to everyone.", "label-checkbox-email": "Show your email to everyone.",
"label-checkbox-guilds": "Show the list of guilds 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..."
} }

4
locales/en/common.json
View File

@ -3,5 +3,7 @@
"french": "French", "french": "French",
"all-rights-reserved": "All rights reserved", "all-rights-reserved": "All rights reserved",
"description": "Stay close with your friends and communities, talk, chat, collaborate, share, and have fun.", "description": "Stay close with your friends and communities, talk, chat, collaborate, share, and have fun.",
"name": "Name" "name": "Name",
"yes": "Yes",
"no": "No"
} }

4
locales/fr/application.json
View File

@ -5,6 +5,7 @@
"create-a-guild": "Créer une Guilde", "create-a-guild": "Créer une Guilde",
"create-a-guild-description": "Créez votre propre guilde et gérez tout.", "create-a-guild-description": "Créez votre propre guilde et gérez tout.",
"join-a-guild": "Rejoindre une Guilde", "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!", "join-a-guild-description": "Discutez, collaborez, partagez et amusez-vous avec vos amis en rejoignant une guilde déjà existante!",
"members": "membre(s)", "members": "membre(s)",
"search": "Rechercher", "search": "Rechercher",
@ -12,5 +13,6 @@
"biography": "Biographie", "biography": "Biographie",
"label-checkbox-email": "Afficher votre email au public.", "label-checkbox-email": "Afficher votre email au public.",
"label-checkbox-guilds": "Afficher la liste des guildes 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..."
} }

4
locales/fr/common.json
View File

@ -3,5 +3,7 @@
"french": "Français", "french": "Français",
"all-rights-reserved": "Tous droits réservés", "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.", "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"
} }

2
styles/global.css
View File

@ -45,5 +45,5 @@ body,
.scrollbar-firefox-support { .scrollbar-firefox-support {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color); scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
z-index: 1000; z-index: 0;
} }