fix: improve overall rendering v2 (#15)

Follow-up of #10

Co-authored-by: Walidoux <ma.walidkorchi@icloud.com>

components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx

@@ -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) => {
+export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
-  const { className, handleYes, handleNo } = props
+  ...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}>
+    <div className={props.className}>
-      {isLoading ? (
+      <Loader
-        <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'
+              className='rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
-                onClick={handleNo}
+              onClick={props.handleNo}
             >
-                Non
+              {t('common:no')}
             </button>
           </div>
         </div>
-        </>
+      </div>
-      )}
     </div>
   )
 }

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx

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

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

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

components/Application/SendMessage/SendMessage.tsx

@@ -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 (
-    <>
+    <div className='relative p-6 pb-4'>
-      {isVisibleEmojiPicker && <EmojiPicker onClick={handleEmojiPicker} />}
+      <div
-      <div className='p-6 pb-4'>
+        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>
-    </>
   )
 }

components/Application/UserProfile/UserProfile.tsx

@@ -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 [showPopup, setShowPopup] = useState(false)
-  const [confirmation, setConfirmation] = useState<boolean>(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)}
+          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>

components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx

@@ -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) => {
+export const UserProfileGuild: React.FC<UserProfileGuildProps> = ({
-  const { handleConfirmationState } = props
+  ...props
-
+}) => {
   return (
     <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='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>

components/design/Loader/Loader.tsx

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

locales/en/application.json

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

locales/en/common.json

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

locales/fr/application.json

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

locales/fr/common.json

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

styles/global.css

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