fix: improve overall rendering (#10)

components/Application/Application.tsx

@@ -171,7 +171,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
           visible={visibleSidebars.left}
           isMobile={isMobile}
         >
-          <div className='flex flex-col min-w-[92px] top-0 left-0 z-50 bg-gray-200 dark:bg-gray-800 border-r-2 border-gray-500 dark:border-white/20 py-2 space-y-2'>
+          <div className='flex flex-col min-w-[92px] top-0 left-0 z-50 bg-gray-200 dark:bg-gray-800 border-r-2 border-gray-500 dark:border-white/20 py-2 space-y-4'>
             <IconLink
               href={`/application/users/${user.id}/settings`}
               selected={path === `/application/users/${user.id}/settings`}

components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx

@@ -0,0 +1,38 @@
+import Image from 'next/image'
+
+export interface ConfirmGuildJoinProps {
+  className?: string
+  handleJoinGuild: () => void
+}
+
+export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = (props) => {
+  const { className, handleJoinGuild } = props
+
+  return (
+    <div className={className}>
+      <Image
+        src='/images/svg/design/join-guild.svg'
+        alt='Joing Guild Illustration'
+        height={150}
+        width={150}
+      />
+      <div className='flex flex-col mt-8'>
+        <h1 className='text-xl mb-6 text-center'>Rejoindre la guild ?</h1>
+        <div className='flex gap-7'>
+          <button
+            className='px-8 py-2 rounded-3xl bg-success hover:opacity-50 transition'
+            onClick={handleJoinGuild}
+          >
+            Oui
+          </button>
+          <button
+            className='px-8 py-2 rounded-3xl bg-error hover:opacity-50 transition'
+            onClick={handleJoinGuild}
+          >
+            Non
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

components/Application/ConfirmGuildJoin/index.ts

@@ -0,0 +1 @@
+export * from './ConfirmGuildJoin'

components/Application/Guilds/Guilds.tsx

@@ -17,7 +17,7 @@ export const Guilds: React.FC<GuildsProps> = (props) => {
   return (
     <div
       id='guilds-list'
-      className='min-w-[92px] mt-[130px] pt-2 h-full border-r-2 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'
+      className='min-w-[92px] mt-[130px] pt-2 h-full border-r-1 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'
     >
       <InfiniteScroll
         className='guilds-list'

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.stories.tsx

@@ -1,21 +0,0 @@
-import { Meta, Story } from '@storybook/react'
-
-import { GuildPublic as Component, GuildPublicProps } from './GuildPublic'
-import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
-
-const Stories: Meta = {
-  title: 'GuildPublic',
-  component: Component
-}
-
-export default Stories
-
-export const GuildPublic: Story<GuildPublicProps> = (arguments_) => {
-  return <Component {...arguments_} />
-}
-GuildPublic.args = {
-  guild: {
-    ...guildExample,
-    membersCount: 1
-  }
-}

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.test.tsx

@@ -1,18 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { GuildPublic } from './GuildPublic'
-import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
-
-describe('<GuildPublic />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <GuildPublic
-        guild={{
-          ...guildExample,
-          membersCount: 1
-        }}
-      />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx

@@ -1,5 +1,10 @@
+import { useState } from 'react'
 import Image from 'next/image'
 import useTranslation from 'next-translate/useTranslation'
+import classNames from 'classnames'
+
+import { Emoji } from 'components/Emoji'
+import { ConfirmGuildJoin } from 'components/Application/ConfirmGuildJoin'
 
 import { GuildPublic as GuildPublicType } from '../../../../models/Guild'
 
@@ -9,27 +14,59 @@ export interface GuildPublicProps {
 
 export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
   const { guild } = props
+  const [isConfirmed, setIsConfirmed] = useState(false)
 
   const { t } = useTranslation()
 
   return (
-    <div className='max-w-sm flex flex-col items-center justify-center border-gray-500 dark:border-gray-700 p-4 cursor-pointer rounded shadow-lg border transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none'>
+    <div className='relative overflow-hidden rounded border border-gray-500 dark:border-gray-700 hover:-translate-y-2 hover:shadow-none shadow-lg transition duration-200 ease-in-out'>
-      <Image
+      <div
-        className='rounded-full'
+        className={classNames(
-        src={guild.icon != null ? guild.icon : '/images/data/guild-default.png'}
+          'flex flex-col items-center h-full justify-center cursor-pointer p-4 pt-8 transition duration-200 ease-in-out',
-        alt='logo'
+          { '-translate-x-full': isConfirmed }
-        width={80}
+        )}
-        height={80}
+        onClick={() => setIsConfirmed(!isConfirmed)}
-      />
+      >
-      <div className='m-2 text-center mt-3'>
+        <Image
-        <h3 data-cy='guild-name' className='font-bold text-xl mb-2'>
+          className='rounded-full'
-          {guild.name}
+          src={
-        </h3>
+            guild.icon != null ? guild.icon : '/images/data/guild-default.png'
-        <p className='text-base w-11/12 mx-auto'>{guild.description}</p>
+          }
+          alt='logo'
+          width={80}
+          height={80}
+        />
+        <div className='w-full px-4 m-2 text-center mt-6'>
+          <h3
+            data-cy='guild-name'
+            className='w-full center font-bold text-xl mb-2 truncate'
+          >
+            {guild.name}
+          </h3>
+          <p className='break-words'>
+            {guild.description != null ? (
+              guild.description
+            ) : (
+              <span className='flex h-full opacity-25 justify-center items-center'>
+                <Emoji value=':eyes:' size={25} />
+                <span className='ml-2'>Nothing&apos;s here...</span>
+              </span>
+            )}
+          </p>
+        </div>
+        <p className='flex flex-col text-green-800 dark:text-green-400 mt-auto'>
+          {guild.membersCount} {t('application:members')}
+        </p>
       </div>
-      <p className='flex flex-col text-green-800 dark:text-green-400 mt-4'>
+      <ConfirmGuildJoin
-        {guild.membersCount} {t('application:members')}
+        className={classNames(
-      </p>
+          'absolute w-full h-full flex flex-col w-ful h-ful top-1/2 -translate-y-1/2 left-full translate-x- rounded-2xl justify-center items-center transition-all',
+          {
+            '!left-0': isConfirmed
+          }
+        )}
+        handleJoinGuild={() => setIsConfirmed(!isConfirmed)}
+      />
     </div>
   )
 }

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

@@ -10,6 +10,7 @@ import { usePagination } from '../../../hooks/usePagination'
 
 export const JoinGuildsPublic: React.FC = () => {
   const [search, setSearch] = useState('')
+
   const { authentication } = useAuthentication()
   const { t } = useTranslation()
 
@@ -29,7 +30,7 @@ export const JoinGuildsPublic: React.FC = () => {
   }
 
   return (
-    <>
+    <div className='flex flex-col w-full h-full transition-all'>
       <input
         data-cy='search-guild-input'
         onChange={handleChange}
@@ -38,9 +39,9 @@ export const JoinGuildsPublic: React.FC = () => {
         name='search-guild'
         placeholder={`🔎  ${t('application:search')}...`}
       />
-      <div className='w-full flex items-center justify-center p-12'>
+      <div className='w-full p-12'>
         <InfiniteScroll
-          className='guilds-public-list max-w-[1600px] grid grid-cols-1 xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-8 !overflow-hidden'
+          className='guilds-public-list max-w-[1400px] mx-auto grid gap-8 grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] !overflow-visible'
           dataLength={items.length}
           next={nextPage}
           scrollableTarget='application-page-content'
@@ -52,6 +53,6 @@ export const JoinGuildsPublic: React.FC = () => {
           })}
         </InfiniteScroll>
       </div>
-    </>
+    </div>
   )
 }

components/Application/Members/Member/Member.tsx

@@ -14,7 +14,7 @@ export const Member: React.FC<MemberProps> = (props) => {
   return (
     <Link href={`/application/users/${member.user.id}`}>
       <a>
-        <div className='flex items-center cursor-pointer py-2 px-4 pr-10 rounded hover:bg-gray-300 dark:hover:bg-gray-900'>
+        <div className='flex items-center cursor-pointer py-2 px-6 pr-10 overflow-hidden hover:bg-gray-300 dark:hover:bg-gray-900'>
           <div className='min-w-[50px] flex rounded-full'>
             <Image
               src={
@@ -29,14 +29,13 @@ export const Member: React.FC<MemberProps> = (props) => {
               className='rounded-full'
             />
           </div>
-          <div className='max-w-[145px] ml-4'>
+          <div className='ml-5'>
-            <p
+            <p data-cy='member-user-name' className='truncate font-bold'>
-              data-cy='member-user-name'
-              className='overflow-hidden whitespace-nowrap overflow-ellipsis'
-            >
               {member.user.name}
             </p>
-            {member.user.status != null && <span>{member.user.status}</span>}
+            {member.user.status != null && (
+              <span className='block truncate w-44'>{member.user.status}</span>
+            )}
           </div>
         </div>
       </a>

components/Application/Sidebar/Sidebar.tsx

@@ -21,7 +21,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
         {
           'top-0 right-0 scrollbar-firefox-support overflow-y-auto flex-col space-y-1':
             direction === 'right',
-          'w-64': direction === 'right' && visible,
+          'w-72': direction === 'right' && visible,
           'w-0 opacity-0': !visible,
           'w-80': direction === 'left' && visible,
           'max-w-max': typeof path !== 'string' && direction === 'left',

components/Application/UserProfile/UserProfile.tsx

@@ -9,6 +9,7 @@ import { API_URL } from '../../../tools/api'
 import { UserPublic } from '../../../models/User'
 import { UserProfileGuilds } from './UserProfileGuilds'
 import { UserProfileGuild } from './UserProfileGuilds/UserProfileGuild'
+import { ConfirmGuildJoin } from '../ConfirmGuildJoin'
 
 export interface UserProfileProps {
   className?: string
@@ -137,36 +138,13 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
             />
           </div>
 
-          <div
+          <ConfirmGuildJoin
             className={classNames(
               'absolute w-full h-full flex flex-col justify-center items-center transition-all top-0 left-[150%]',
               { 'left-[0%]': confirmation }
             )}
-          >
+            handleJoinGuild={handleConfirmationState}
-            <Image
+          />
-              src='/images/svg/design/join-guild.svg'
-              alt='Joing Guild Illustration'
-              height={150}
-              width={150}
-            />
-            <div className='flex flex-col mt-8'>
-              <h1 className='text-xl mb-6 text-center'>Rejoindre la guild ?</h1>
-              <div className='flex gap-7'>
-                <button
-                  className='px-8 py-2 rounded-3xl bg-success hover:opacity-50 transition'
-                  onClick={handleConfirmationState}
-                >
-                  Oui
-                </button>
-                <button
-                  className='px-8 py-2 rounded-3xl bg-error hover:opacity-50 transition'
-                  onClick={handleConfirmationState}
-                >
-                  Non
-                </button>
-              </div>
-            </div>
-          </div>
         </div>
         <XIcon
           height={40}

models/Guild.ts

@@ -8,7 +8,7 @@ export const guildSchema = {
   id,
   name: Type.String({ minLength: 1, maxLength: 30 }),
   icon: Type.Union([Type.String({ format: 'uri-reference' }), Type.Null()]),
-  description: Type.Union([Type.String({ maxLength: 160 }), Type.Null()]),
+  description: Type.Union([Type.String({ maxLength: 120 }), Type.Null()]),
   createdAt: date.createdAt,
   updatedAt: date.updatedAt
 }