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

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

@ -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,22 +11,32 @@ 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 />
) : (
<>
<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'
@ -32,24 +44,25 @@ export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = (props) => {
width={150}
/>
<div className='mt-8 flex flex-col'>
<h1 className='mb-6 text-center text-xl'>Rejoindre la guild ?</h1>
<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 transition hover:opacity-50'
className='rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
onClick={handleYesLoading}
>
Oui
{t('common:yes')}
</button>
<button
className='rounded-3xl bg-error px-8 py-2 transition hover:opacity-50'
onClick={handleNo}
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}
>
Non
{t('common:no')}
</button>
</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 (
<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&apos;s here...</span>
<span className='ml-2'>{t('application:nothing-here')}</span>
</span>
)}
</p>

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

@ -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} />

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

@ -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,9 +78,17 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
}
return (
<>
{isVisibleEmojiPicker && <EmojiPicker onClick={handleEmojiPicker} />}
<div className='p-6 pb-4'>
<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'
@ -121,6 +130,5 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
</div>
</div>
</div>
</>
)
}

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

@ -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>

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

@ -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>

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

@ -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>
)
}

4
locales/en/application.json
View File

@ -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..."
}

4
locales/en/common.json
View File

@ -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"
}

4
locales/fr/application.json
View File

@ -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..."
}

4
locales/fr/common.json
View File

@ -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"
}

2
styles/global.css
View File

@ -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;
}