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
12 changed files with 133 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>