feat: interact with user settings/profile (#9)

components/Application/Application.tsx

@@ -24,7 +24,7 @@ export type ApplicationPath =
   | '/application/guilds/join'
   | '/application/guilds/create'
   | `/application/users/${number}`
-  | `/application/users/${number}/settings`
+  | `/application/users/settings`
   | GuildsChannelsPath
 
 export interface ApplicationProps {
@@ -135,16 +135,16 @@ export const Application: React.FC<ApplicationProps> = (props) => {
 
   return (
     <>
-      <header className='flex bg-gray-200 dark:bg-gray-800 h-16 px-2 py-3 justify-between items-center shadow-lg z-50'>
+      <header className='z-50 flex h-16 items-center justify-between bg-gray-200 px-2 py-3 shadow-lg dark:bg-gray-800'>
         <IconButton
-          className='p-2 h-10 w-10'
+          className='h-10 w-10 p-2'
           onClick={() => handleToggleSidebars('left')}
         >
           {!visibleSidebars.left ? <MenuIcon /> : <XIcon />}
         </IconButton>
         <div
           data-cy='application-title'
-          className='text-md text-green-800 dark:text-green-400 font-semibold'
+          className='text-md font-semibold text-green-800 dark:text-green-400'
         >
           {title}
         </div>
@@ -152,7 +152,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
           {title.startsWith('#') && (
             <IconButton
               data-cy='icon-button-right-sidebar-members'
-              className='p-2 h-10 w-10'
+              className='h-10 w-10 p-2'
               onClick={() => handleToggleSidebars('right')}
             >
               {!visibleSidebars.right ? <UsersIcon /> : <XIcon />}
@@ -162,7 +162,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
       </header>
 
       <main
-        className='relative flex h-full-without-header overflow-hidden'
+        className='h-full-without-header relative flex overflow-hidden'
         onClick={handleCloseSidebars}
         {...swipeableHandlers}
       >
@@ -171,10 +171,10 @@ 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-4'>
+          <div className='top-0 left-0 z-50 flex min-w-[92px] flex-col space-y-4 border-r-2 border-gray-500 bg-gray-200 py-2 dark:border-white/20 dark:bg-gray-800'>
             <IconLink
-              href={`/application/users/${user.id}/settings`}
-              selected={path === `/application/users/${user.id}/settings`}
+              href={`/application/users/settings`}
+              selected={path === `/application/users/settings`}
               title='Settings'
             >
               <Image
@@ -195,7 +195,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
               selected={path === '/application'}
               title='Join or create a Guild'
             >
-              <PlusIcon className='w-12 h-12 text-green-800 dark:text-green-400' />
+              <PlusIcon className='h-12 w-12 text-green-800 dark:text-green-400' />
             </IconLink>
             <Divider />
             <Guilds path={path} />
@@ -206,7 +206,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
         <div
           id='application-page-content'
           className={classNames(
-            'top-0 h-full-without-header w-full flex flex-col flex-1 z-0 overflow-y-auto transition',
+            'h-full-without-header top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition',
             {
               'absolute opacity-20':
                 isMobile && (visibleSidebars.left || visibleSidebars.right)

components/Application/Channels/Channel/Channel.tsx

@@ -17,9 +17,9 @@ export const Channel: React.FC<ChannelProps> = (props) => {
     <Link href={`/application/${path.guildId}/${channel.id}`}>
       <a
         className={classNames(
-          'hover:bg-gray-100 group flex items-center justify-between text-sm py-2 my-3 mx-3 transition-colors dark:hover:bg-gray-600 duration-200 rounded-lg',
+          'group my-3 mx-3 flex items-center justify-between rounded-lg py-2 text-sm transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
           {
-            'text-green-800 dark:text-green-400 font-semibold': selected
+            'font-semibold text-green-800 dark:text-green-400': selected
           }
         )}
       >

components/Application/Channels/Channels.tsx

@@ -17,10 +17,10 @@ export const Channels: React.FC<ChannelsProps> = (props) => {
   return (
     <div
       id='channels'
-      className='scrollbar-firefox-support overflow-y-auto flex-1 flex flex-col'
+      className='scrollbar-firefox-support flex flex-1 flex-col overflow-y-auto'
     >
       <InfiniteScroll
-        className='w-full channels-list'
+        className='channels-list w-full'
         scrollableTarget='channels'
         dataLength={channels.length}
         next={nextPage}

components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx

@@ -16,17 +16,17 @@ export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = (props) => {
         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='mt-8 flex flex-col'>
+        <h1 className='mb-6 text-center text-xl'>Rejoindre la guild ?</h1>
         <div className='flex gap-7'>
           <button
-            className='px-8 py-2 rounded-3xl bg-success hover:opacity-50 transition'
+            className='rounded-3xl bg-success px-8 py-2 transition hover:opacity-50'
             onClick={handleJoinGuild}
           >
             Oui
           </button>
           <button
-            className='px-8 py-2 rounded-3xl bg-error hover:opacity-50 transition'
+            className='rounded-3xl bg-error px-8 py-2 transition hover:opacity-50'
             onClick={handleJoinGuild}
           >
             Non

components/Application/CreateGuild/CreateGuild.tsx

@@ -18,10 +18,11 @@ export const CreateGuild: React.FC = () => {
 
   const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
     useForm({
-      validateSchemaObject: {
+      validateSchema: {
         name: guildSchema.name,
         description: guildSchema.description
-      }
+      },
+      resetOnSuccess: true
     })
 
   const { authentication } = useAuthentication()
@@ -59,7 +60,7 @@ export const CreateGuild: React.FC = () => {
           placeholder='Description'
           id='description'
         />
-        <Button className='w-full mt-6' type='submit' data-cy='submit'>
+        <Button className='mt-6 w-full' type='submit' data-cy='submit'>
           {t('application:create')}
         </Button>
       </Form>

components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx

@@ -2,7 +2,7 @@ import { CogIcon, PlusIcon } from '@heroicons/react/solid'
 
 import { useGuildMember } from '../../../contexts/GuildMember'
 import { Divider } from '../../design/Divider'
-import { Channels } from '../../Application/Channels'
+import { Channels } from '../Channels'
 import { IconButton } from '../../design/IconButton'
 import { GuildsChannelsPath } from '..'
 
@@ -16,8 +16,8 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
   const { guild } = useGuildMember()
 
   return (
-    <div className='flex flex-col justify-between w-full mt-2'>
-      <div className='text-center p-2 mx-8 mt-2'>
+    <div className='mt-2 flex w-full flex-col justify-between'>
+      <div className='mx-8 mt-2 p-2 text-center'>
         <h2 data-cy='guild-left-sidebar-title' className='text-xl'>
           {guild.name}
         </h2>
@@ -25,7 +25,7 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
       <Divider />
       <Channels path={path} />
       <Divider />
-      <div className='flex justify-center items-center p-2 mb-1 space-x-6'>
+      <div className='mb-1 flex items-center justify-center space-x-6 p-2'>
         <IconButton className='h-10 w-10' title='Add a Channel'>
           <PlusIcon />
         </IconButton>

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-1 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'
+      className='border-r-1 scrollbar-firefox-support mt-[130px] h-full min-w-[92px] space-y-2 overflow-y-auto border-gray-500 pt-2 dark:border-white/20'
     >
       <InfiniteScroll
         className='guilds-list'

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx

@@ -19,10 +19,10 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
   const { t } = useTranslation()
 
   return (
-    <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'>
+    <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={classNames(
-          'flex flex-col items-center h-full justify-center cursor-pointer 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',
           { '-translate-x-full': isConfirmed }
         )}
         onClick={() => setIsConfirmed(!isConfirmed)}
@@ -36,10 +36,10 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
           width={80}
           height={80}
         />
-        <div className='w-full px-4 m-2 text-center mt-6'>
+        <div className='m-2 mt-6 w-full px-4 text-center'>
           <h3
             data-cy='guild-name'
-            className='w-full center font-bold text-xl mb-2 truncate'
+            className='center mb-2 w-full truncate text-xl font-bold'
           >
             {guild.name}
           </h3>
@@ -47,20 +47,20 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
             {guild.description != null ? (
               guild.description
             ) : (
-              <span className='flex h-full opacity-25 justify-center items-center'>
+              <span className='flex h-full items-center justify-center opacity-25'>
                 <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'>
+        <p className='mt-auto flex flex-col text-green-800 dark:text-green-400'>
           {guild.membersCount} {t('application:members')}
         </p>
       </div>
       <ConfirmGuildJoin
         className={classNames(
-          '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',
+          'w-ful h-ful translate-x- absolute top-1/2 left-full flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
           {
             '!left-0': isConfirmed
           }

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

@@ -30,18 +30,18 @@ export const JoinGuildsPublic: React.FC = () => {
   }
 
   return (
-    <div className='flex flex-col w-full h-full transition-all'>
+    <div className='flex h-full w-full flex-col transition-all'>
       <input
         data-cy='search-guild-input'
         onChange={handleChange}
-        className='w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 bg-white dark:bg-[#3B3B3B] border-gray-500 dark:border-gray-700 p-3 my-6 mt-16 mx-auto rounded-md border'
+        className='my-6 mx-auto mt-16 w-10/12 rounded-md border border-gray-500 bg-white p-3 dark:border-gray-700 dark:bg-[#3B3B3B] sm:w-8/12 md:w-6/12 lg:w-5/12'
         type='search'
         name='search-guild'
         placeholder={`🔎  ${t('application:search')}...`}
       />
       <div className='w-full p-12'>
         <InfiniteScroll
-          className='guilds-public-list max-w-[1400px] mx-auto grid gap-8 grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] !overflow-visible'
+          className='guilds-public-list 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'

components/Application/Members/Member/Member.tsx

@@ -14,8 +14,8 @@ 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-6 pr-10 overflow-hidden hover:bg-gray-300 dark:hover:bg-gray-900'>
-          <div className='min-w-[50px] flex rounded-full'>
+        <div className='flex cursor-pointer items-center overflow-hidden py-2 px-6 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
+          <div className='flex min-w-[50px] rounded-full'>
             <Image
               src={
                 member.user.logo == null
@@ -34,7 +34,7 @@ export const Member: React.FC<MemberProps> = (props) => {
               {member.user.name}
             </p>
             {member.user.status != null && (
-              <span className='block truncate w-44'>{member.user.status}</span>
+              <span className='block w-44 truncate'>{member.user.status}</span>
             )}
           </div>
         </div>

components/Application/Members/Members.tsx

@@ -15,7 +15,7 @@ export const Members: React.FC = () => {
   return (
     <>
       <div className='mb-2'>
-        <h1 data-cy='members-title' className='text-center pt-2 my-2 text-xl'>
+        <h1 data-cy='members-title' className='my-2 pt-2 text-center text-xl'>
           {capitalize(t('application:members'))}
         </h1>
         <Divider />

components/Application/Messages/Message/Message.tsx

@@ -17,13 +17,13 @@ export const Message: React.FC<MessageProps> = (props) => {
 
   return (
     <div
-      className='p-4 flex transition hover:bg-gray-200 dark:hover:bg-gray-900'
+      className='flex p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
       data-cy={`message-${message.id}`}
     >
       <Link href={`/application/users/${message.member.user.id}`}>
         <a>
-          <div className='w-12 h-12 mr-4 flex flex-shrink-0 items-center justify-center'>
-            <div className='w-10 h-10 drop-shadow-md'>
+          <div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
+            <div className='h-10 w-10 drop-shadow-md'>
               <Image
                 className='rounded-full'
                 src={
@@ -41,7 +41,7 @@ export const Message: React.FC<MessageProps> = (props) => {
         </a>
       </Link>
       <div className='w-full'>
-        <div className='w-max flex items-center'>
+        <div className='flex w-max items-center'>
           <Link href={`/application/users/${message.member.user.id}`}>
             <a>
               <span
@@ -54,7 +54,7 @@ export const Message: React.FC<MessageProps> = (props) => {
           </Link>
           <span
             data-cy='message-date'
-            className='text-gray-500 dark:text-gray-200 text-xs ml-4 select-none'
+            className='ml-4 select-none text-xs text-gray-500 dark:text-gray-200'
           >
             {date.format(new Date(message.createdAt), 'DD/MM/YYYY - HH:mm:ss')}
           </span>

components/Application/Messages/Message/MessageFile/FileIcon.tsx

@@ -1,7 +1,7 @@
 export const FileIcon: React.FC = () => {
   return (
     <svg
-      className='dark:text-white text-black fill-current'
+      className='fill-current text-black dark:text-white'
       width='21'
       height='26'
       viewBox='0 0 21 26'

components/Application/Messages/Message/MessageFile/MessageFile.tsx

@@ -49,7 +49,7 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
       <a href={file.url} target='_blank' rel='noreferrer'>
         <img
           data-cy={`message-file-image-${message.id}`}
-          className='sm:max-w-xs max-h-80'
+          className='max-h-80 sm:max-w-xs'
           src={file.url}
           alt={message.value}
         />
@@ -66,7 +66,7 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
   if (message.mimetype.startsWith('video/')) {
     return (
       <video
-        className='max-w-xs max-h-80'
+        className='max-h-80 max-w-xs'
         controls
         data-cy={`message-file-video-${message.id}`}
       >
@@ -86,7 +86,7 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
             <p className='mt-1'>{prettyBytes(file.blob.size)}</p>
           </div>
         </div>
-        <DownloadIcon className='ml-4 w-8 h-8' />
+        <DownloadIcon className='ml-4 h-8 w-8' />
       </div>
     </a>
   )

components/Application/Messages/Messages.tsx

@@ -12,7 +12,7 @@ export const Messages: React.FC = () => {
     return (
       <div
         id='messages'
-        className='w-full scrollbar-firefox-support overflow-y-auto transition-all flex-1 flex flex-col text-center mt-8 text-lg'
+        className='scrollbar-firefox-support mt-8 flex w-full flex-1 flex-col overflow-y-auto text-center text-lg transition-all'
       >
         <p>
           Nothing to show here! <Emoji value=':ghost:' size={20} />
@@ -25,7 +25,7 @@ export const Messages: React.FC = () => {
   return (
     <div
       id='messages'
-      className='w-full scrollbar-firefox-support overflow-y-auto transition-all flex-1 flex flex-col-reverse'
+      className='scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all'
     >
       <InfiniteScroll
         scrollableTarget='messages'

components/Application/PopupGuild/PopupGuild.tsx

@@ -17,7 +17,7 @@ export const PopupGuild: React.FC<PopupGuildProps> = (props) => {
     <div
       className={classNames(
         className,
-        'flex p-8 flex-wrap justify-center items-center overflow-y-auto h-full-without-header min-w-full'
+        'h-full-without-header flex min-w-full flex-wrap items-center justify-center overflow-y-auto p-8'
       )}
     >
       <PopupGuildCard
@@ -32,7 +32,7 @@ export const PopupGuild: React.FC<PopupGuildProps> = (props) => {
         }
         description={t('application:create-a-guild-description')}
         link={{
-          icon: <PlusSmIcon className='w-8 h-8 mr-2' />,
+          icon: <PlusSmIcon className='mr-2 h-8 w-8' />,
           text: t('application:create-a-guild'),
           href: '/application/guilds/create'
         }}
@@ -49,7 +49,7 @@ export const PopupGuild: React.FC<PopupGuildProps> = (props) => {
         }
         description={t('application:join-a-guild-description')}
         link={{
-          icon: <ArrowDownIcon className='w-6 h-6 mr-2' />,
+          icon: <ArrowDownIcon className='mr-2 h-6 w-6' />,
           text: t('application:join-a-guild'),
           href: '/application/guilds/join'
         }}

components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.stories.tsx

@@ -29,7 +29,7 @@ PopupGuildCard.args = {
   description:
     'Create your own guild and manage everything within a few clicks !',
   link: {
-    icon: <PlusSmIcon className='w-8 h-8 mr-2' />,
+    icon: <PlusSmIcon className='mr-2 h-8 w-8' />,
     text: 'Create a server',
     href: '/application/guilds/create'
   }

components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.test.tsx

@@ -18,7 +18,7 @@ describe('<PopupGuildCard />', () => {
         }
         description='Create your own guild and manage everything within a few clicks !'
         link={{
-          icon: <PlusSmIcon className='w-8 h-8 mr-2' />,
+          icon: <PlusSmIcon className='mr-2 h-8 w-8' />,
           text: 'Create a server',
           href: '/application/guilds/create'
         }}

components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import Link from 'next/link'
 
 export interface PopupGuildCardProps {
@@ -14,16 +15,16 @@ export const PopupGuildCard: React.FC<PopupGuildCardProps> = (props) => {
   const { image, description, link } = props
 
   return (
-    <div className='w-80 h-96 m-8 rounded-2xl bg-gray-800'>
-      <div className='flex justify-center items-center h-1/2 w-full'>
+    <div className='m-8 h-96 w-80 rounded-2xl bg-gray-800'>
+      <div className='flex h-1/2 w-full items-center justify-center'>
         {image}
       </div>
-      <div className='flex justify-between flex-col h-1/2 w-full bg-gray-700 rounded-b-2xl mt-2 shadow-sm'>
-        <p className='text-gray-200 text-sm mt-6 text-center px-8'>
+      <div className='mt-2 flex h-1/2 w-full flex-col justify-between rounded-b-2xl bg-gray-700 shadow-sm'>
+        <p className='mt-6 px-8 text-center text-sm text-gray-200'>
           {description}
         </p>
         <Link href={link.href}>
-          <a className='flex justify-center items-center w-4/5 h-10 rounded-2xl transition duration-200 ease-in-out text-white font-bold tracking-wide bg-green-400 self-center mb-6 hover:bg-green-600'>
+          <a className='mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600'>
             {link.icon}
             {link.text}
           </a>

components/Application/SendMessage/SendMessage.tsx

@@ -80,14 +80,14 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
     <>
       {isVisibleEmojiPicker && <EmojiPicker onClick={handleEmojiPicker} />}
       <div className='p-6 pb-4'>
-        <div className='w-full h-full py-1 flex rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-200'>
+        <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='w-full h-full flex items-center'
+            className='flex h-full w-full items-center'
             onSubmit={handleSubmit}
             onKeyDown={handleTextareaKeyDown}
           >
             <TextareaAutosize
-              className='w-full scrollbar-firefox-support p-2 px-6 my-2 bg-transparent outline-none font-paragraph tracking-wide resize-none'
+              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}
@@ -98,17 +98,17 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
               autoFocus
             />
           </form>
-          <div className='h-full flex items-center justify-around pr-6'>
+          <div className='flex h-full items-center justify-around pr-6'>
             <button
-              className='w-full h-full flex items-center justify-center p-1 text-2xl transition hover:-translate-y-1'
+              className='flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1'
               onClick={handleVisibleEmojiPicker}
             >
               🙂
             </button>
-            <button className='cursor-pointer relative w-full h-full flex items-center justify-center p-1 text-green-800 dark:text-green-400 transition hover:-translate-y-1'>
+            <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 w-full h-full opacity-0 cursor-pointer'
+                className='absolute h-full w-full cursor-pointer opacity-0'
                 onChange={handleFileChange}
               />
               <svg width='25' height='25' viewBox='0 0 22 22'>

components/Application/Sidebar/Sidebar.tsx

@@ -17,9 +17,9 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
   return (
     <nav
       className={classNames(
-        'h-full-without-header flex z-50 drop-shadow-2xl bg-gray-200 dark:bg-gray-800 transition-all',
+        'h-full-without-header z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
         {
-          'top-0 right-0 scrollbar-firefox-support overflow-y-auto flex-col space-y-1':
+          'scrollbar-firefox-support top-0 right-0 flex-col space-y-1 overflow-y-auto':
             direction === 'right',
           'w-72': direction === 'right' && visible,
           'w-0 opacity-0': !visible,

components/Application/UserProfile/UserProfile.stories.tsx

@@ -1,5 +1,9 @@
 import { Meta, Story } from '@storybook/react'
 
+import {
+  guildExample,
+  guildExample2
+} from '../../../cypress/fixtures/guilds/guild'
 import {
   userExample,
   userSettingsExample
@@ -20,5 +24,6 @@ UserProfile.args = {
   user: {
     ...userExample,
     settings: userSettingsExample
-  }
+  },
+  guilds: [guildExample, guildExample2]
 }

components/Application/UserProfile/UserProfile.test.tsx

@@ -1,5 +1,9 @@
 import { render } from '@testing-library/react'
 
+import {
+  guildExample,
+  guildExample2
+} from '../../../cypress/fixtures/guilds/guild'
 import {
   userExample,
   userSettingsExample
@@ -9,7 +13,10 @@ import { UserProfile } from './UserProfile'
 describe('<UserProfile />', () => {
   it('should render successfully', () => {
     const { baseElement } = render(
-      <UserProfile user={{ ...userExample, settings: userSettingsExample }} />
+      <UserProfile
+        user={{ ...userExample, settings: userSettingsExample }}
+        guilds={[guildExample, guildExample2]}
+      />
     )
     expect(baseElement).toBeTruthy()
   })

components/Application/UserProfile/UserProfile.tsx

@@ -9,15 +9,17 @@ import { API_URL } from '../../../tools/api'
 import { UserPublic } from '../../../models/User'
 import { UserProfileGuilds } from './UserProfileGuilds'
 import { UserProfileGuild } from './UserProfileGuilds/UserProfileGuild'
+import { Guild } from '../../../models/Guild'
 import { ConfirmGuildJoin } from '../ConfirmGuildJoin'
 
 export interface UserProfileProps {
   className?: string
   user: UserPublic
+  guilds: Guild[]
 }
 
 export const UserProfile: React.FC<UserProfileProps> = (props) => {
-  const { user } = props
+  const { user, guilds } = props
   const { t } = useTranslation()
 
   const [showPopup, setShowPopup] = useState<boolean>(false)
@@ -32,16 +34,16 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
   }
 
   return (
-    <div className='relative h-full flex flex-col items-center justify-center'>
+    <div className='relative flex h-full flex-col items-center justify-center'>
       <div
         className={classNames('transition', {
-          'blur-3xl select-none': showPopup
+          'select-none blur-3xl': showPopup
         })}
       >
         <div className='max-w-[1000px] px-12'>
-          <div className='flex justify-between items-center'>
-            <div className='w-max flex items-center'>
-              <div className='relative flex justify-center items-center rounded-full overflow-hidden transition-all shadow-lg'>
+          <div className='flex items-center justify-between'>
+            <div className='flex w-max items-center'>
+              <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
                 <Image
                   className='rounded-full'
                   src={
@@ -55,24 +57,31 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
                   width={125}
                 />
               </div>
-              <div className='flex flex-col ml-10'>
-                <div className='flex items-center mb-2'>
-                  <p className='text-3xl font-bold space tracking-wide text-white'>
+              <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'
+                    data-cy='user-name'
+                  >
                     {user.name}
                   </p>
-                  <p className='ml-8 text-sm tracking-widest text-white opacity-40 select-none'>
+                  <p
+                    className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
+                    data-cy='user-createdAt'
+                  >
                     {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
                   </p>
                 </div>
-                <div className='text-left my-2'>
+                <div className='my-2 text-left'>
                   {user.email != null && (
                     <p className='font-bold'>
                       Email:{' '}
                       <a
                         href={`mailto:${user.email}`}
                         target='_blank'
-                        className='relative ml-2 opacity-80 hover:opacity-100 transition-all no-underline font-normal tracking-wide after:absolute after:left-0 after:bottom-[-1px] after:bg-black dark:after:bg-white after:h-[1px] after:w-0 after:transition-all hover:after:w-full'
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
                         rel='noreferrer'
+                        data-cy='user-email'
                       >
                         {user.email}
                       </a>
@@ -83,7 +92,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
                       {t('application:website')}:{' '}
                       <a
                         href={user.website}
-                        className='relative ml-2 opacity-80 hover:opacity-100 transition-all no-underline font-normal tracking-wide after:absolute after:left-0 after:bottom-[-2px] after:bg-black dark:after:bg-white after:h-[1px] after:w-0 after:transition-all hover:after:w-full'
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
                       >
                         {user.website}
                       </a>
@@ -104,6 +113,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
             <div className='py-8 px-4' onClick={handlePopupVisibility}>
               <UserProfileGuilds
                 isPublicGuilds={user.settings.isPublicGuilds}
+                guilds={guilds}
               />
             </div>
           </div>
@@ -114,22 +124,24 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
           </div>
         </div>
       </div>
+
+      {/* TODO: We might want to remove this code */}
       <div
         className={classNames(
-          'absolute flex justify-center items-center top-0 h-full w-full bg-zinc-900/75 transition opacity-0 pointer-events-none',
+          'pointer-events-none absolute top-0 flex h-full w-full items-center justify-center bg-zinc-900/75 opacity-0 transition',
           {
-            'opacity-100 visible pointer-events-auto': showPopup
+            'pointer-events-auto visible opacity-100': showPopup
           }
         )}
       >
         <div
           className={classNames(
-            'relative h-[400px] w-[400px] py-2 rounded-2xl shadow-xl bg-gray-200 dark:bg-gray-800 scale-0 transition overflow-y-auto overflow-x-hidden',
+            'relative h-[400px] w-[400px] scale-0 overflow-y-auto overflow-x-hidden rounded-2xl bg-gray-200 py-2 shadow-xl transition dark:bg-gray-800',
             { 'scale-100': showPopup }
           )}
         >
           <div
-            className={classNames('relative transition h-full', {
+            className={classNames('relative h-full transition', {
               '-translate-x-[150%]': confirmation
             })}
           >
@@ -140,7 +152,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
 
           <ConfirmGuildJoin
             className={classNames(
-              'absolute w-full h-full flex flex-col justify-center items-center transition-all top-0 left-[150%]',
+              'absolute top-0 left-[150%] flex h-full w-full flex-col items-center justify-center transition-all',
               { 'left-[0%]': confirmation }
             )}
             handleJoinGuild={handleConfirmationState}
@@ -149,7 +161,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
         <XIcon
           height={40}
           onClick={() => setShowPopup(false)}
-          className='absolute top-8 right-8 cursor-pointer hover:rotate-180 transition'
+          className='absolute top-8 right-8 cursor-pointer transition hover:rotate-180'
         />
       </div>
     </div>

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

@@ -11,12 +11,12 @@ export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
 
   return (
     <div
-      className='relative flex w-full cursor-pointer transition group'
+      className='group relative flex w-full cursor-pointer transition'
       onClick={handleConfirmationState}
     >
-      <div className='relative group-hover:-translate-x-20 px-8 py-5 w-full transition'>
-        <div className='flex group-hover:opacity-40 transition'>
-          <div className='flex justify-center rounded-full filter drop-shadow-lg mr-8 min-w-[60px] min-h-[60px] select-none'>
+      <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='mr-8 flex min-h-[60px] min-w-[60px] select-none justify-center rounded-full drop-shadow-lg filter'>
             <Image
               className='rounded-full'
               src='/images/guilds/Guild_1.svg'
@@ -28,13 +28,13 @@ export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
           </div>
           <div className='flex flex-col'>
             <h1 className='text-xl font-bold'>Guild Name</h1>
-            <p className='text-gray-300 mt-2'>
+            <p className='mt-2 text-gray-300'>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
               nam.
             </p>
           </div>
         </div>
-        <div className='absolute top-0 right-[-80px] flex justify-center items-center w-[80px] h-full'>
+        <div className='absolute top-0 right-[-80px] flex h-full w-[80px] items-center justify-center'>
           <LoginIcon
             height={40}
             className='fill-green-600 drop-shadow-[0_0_15px_rgba(22,163,74,0.50)]'

components/Application/UserProfile/UserProfileGuilds/UserProfileGuilds.tsx

@@ -3,8 +3,11 @@ import classNames from 'classnames'
 import { EyeOffIcon } from '@heroicons/react/solid'
 import useTranslation from 'next-translate/useTranslation'
 
+import { Guild } from '../../../../models/Guild'
+
 export interface UserProfileGuildsProps {
   isPublicGuilds?: boolean
+  guilds: Guild[]
 }
 
 export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
@@ -19,10 +22,10 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
     >
       <div
         className={classNames('flex -space-x-7', {
-          'blur-lg select-none': !isPublicGuilds
+          'select-none blur-lg': !isPublicGuilds
         })}
       >
-        <div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
+        <div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
           <Image
             className='rounded-full'
             src='/images/guilds/Guild_1.svg'
@@ -32,7 +35,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
             width={60}
           />
         </div>
-        <div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
+        <div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
           <Image
             className='rounded-full'
             src='/images/guilds/Guild_2.svg'
@@ -42,7 +45,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
             width={60}
           />
         </div>
-        <div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
+        <div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
           <Image
             className='rounded-full'
             src='/images/guilds/Guild_3.svg'
@@ -52,7 +55,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
             width={60}
           />
         </div>
-        <div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
+        <div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
           <Image
             className='rounded-full'
             src='/images/guilds/Guild_4.svg'
@@ -62,7 +65,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
             width={60}
           />
         </div>
-        <div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
+        <div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
           <Image
             className='rounded-full'
             src='/images/guilds/Guild_5.svg'
@@ -72,7 +75,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
             width={60}
           />
         </div>
-        <div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
+        <div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
           <Image
             className='rounded-full'
             src='/images/guilds/Guild_6.svg'
@@ -82,20 +85,20 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
             width={60}
           />
         </div>
-        <div className='w-[60px] h-[60px] flex justify-center items-center rounded-full filter drop-shadow-lg bg-gray-300 dark:bg-gray-800 z-10'>
-          <span className='font-bold text-black dark:text-white text-xl select-none'>
+        <div className='z-10 flex h-[60px] w-[60px] items-center justify-center rounded-full bg-gray-300 drop-shadow-lg filter dark:bg-gray-800'>
+          <span className='select-none text-xl font-bold text-black dark:text-white'>
             +4
           </span>
         </div>
       </div>
       <div
         className={classNames(
-          'absolute flex items-center top-1/2 -translate-y-1/2',
+          'absolute top-1/2 flex -translate-y-1/2 items-center',
           { hidden: isPublicGuilds }
         )}
       >
         <EyeOffIcon height={25} />
-        <p className='drop-shadow-2xl ml-4'>
+        <p className='ml-4 drop-shadow-2xl'>
           {t('application:private-user-guilds-list')}
         </p>
       </div>

components/Application/UserSettings/UserSettings.stories.tsx

@@ -1,19 +0,0 @@
-import { Meta, Story } from '@storybook/react'
-
-import {
-  userExample,
-  userSettingsExample
-} from '../../../cypress/fixtures/users/user'
-import { UserSettings as Component, UserSettingsProps } from './UserSettings'
-
-const Stories: Meta = {
-  title: 'UserSettings',
-  component: Component
-}
-
-export default Stories
-
-export const UserSettings: Story<UserSettingsProps> = (arguments_) => {
-  return <Component {...arguments_} />
-}
-UserSettings.args = { user: { ...userExample, settings: userSettingsExample } }

components/Application/UserSettings/UserSettings.test.tsx

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react'
-
-import {
-  userExample,
-  userSettingsExample
-} from '../../../cypress/fixtures/users/user'
-import { UserSettings } from './UserSettings'
-
-describe('<UserSettings />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <UserSettings user={{ ...userExample, settings: userSettingsExample }} />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/UserSettings/UserSettings.tsx

@@ -1,9 +1,12 @@
 import Image from 'next/image'
-import { PhotographIcon } from '@heroicons/react/solid'
 import useTranslation from 'next-translate/useTranslation'
+import { useState } from 'react'
+import { Form } from 'react-component-form'
+import { PhotographIcon } from '@heroicons/react/solid'
+import { Type } from '@sinclair/typebox'
+import axios from 'axios'
 
 import { API_URL } from '../../../tools/api'
-import { UserPublic } from '../../../models/User'
 import { UserProfileGuilds } from '../UserProfile/UserProfileGuilds'
 import { Input } from '../../design/Input'
 import { Checkbox } from '../../design/Checkbox'
@@ -11,32 +14,169 @@ import { Textarea } from '../../design/Textarea'
 import { SocialMediaButton } from '../../design/SocialMediaButton'
 import { SwitchTheme } from '../../Header/SwitchTheme'
 import { Language } from '../../Header/Language'
+import { useAuthentication } from '../../../tools/authentication'
+import { Button } from '../../design/Button'
+import { FormState } from '../../design/FormState'
+import { useForm, HandleSubmitCallback } from '../../../hooks/useForm'
+import { userCurrentSchema, userSchema } from '../../../models/User'
+import { userSettingsSchema } from '../../../models/UserSettings'
+import { useGuilds } from '../../../contexts/Guilds'
 
-export interface UserSettingsProps {
-  user: UserPublic
-}
-
-export const UserSettings: React.FC<UserSettingsProps> = (props) => {
-  const { user } = props
+export const UserSettings: React.FC = () => {
+  const { user, setUser, authentication } = useAuthentication()
+  const { guilds } = useGuilds()
   const { t } = useTranslation()
+  const [inputValues, setInputValues] = useState({
+    name: user.name,
+    status: user.status,
+    email: user.email,
+    website: user.website,
+    biography: user.biography,
+    isPublicGuilds: user.settings.isPublicGuilds,
+    isPublicEmail: user.settings.isPublicEmail
+  })
+
+  const {
+    fetchState,
+    setFetchState,
+    message,
+    setMessageTranslationKey,
+    errors,
+    getErrorTranslation,
+    handleSubmit
+  } = useForm({
+    validateSchema: {
+      name: userSchema.name,
+      status: Type.Optional(userSchema.status),
+      email: Type.Optional(userCurrentSchema.email),
+      website: Type.Optional(userSchema.website),
+      biography: Type.Optional(userSchema.biography),
+      isPublicGuilds: userSettingsSchema.isPublicGuilds,
+      isPublicEmail: userSettingsSchema.isPublicEmail
+    },
+    replaceEmptyStringToNull: true,
+    resetOnSuccess: false
+  })
+
+  const onSubmit: HandleSubmitCallback = async (formData) => {
+    try {
+      const { isPublicGuilds, isPublicEmail, ...userData } = formData
+      const userSettings = { isPublicEmail, isPublicGuilds }
+      const { data: userCurrentData } = await authentication.api.put(
+        `/users/current?redirectURI=${window.location.origin}/authentication/signin`,
+        userData
+      )
+      const { data: userCurrentSettings } = await authentication.api.put(
+        '/users/current/settings',
+        userSettings
+      )
+      setUser((oldUser) => {
+        return {
+          ...oldUser,
+          ...userCurrentData,
+          settings: userCurrentSettings.settings
+        }
+      })
+      setInputValues(formData as any)
+      return {
+        type: 'success',
+        value: 'common:name'
+      }
+    } catch (error) {
+      if (axios.isAxiosError(error) && error.response?.status === 400) {
+        const message = error.response.data.message as string
+        if (message.endsWith('already taken.')) {
+          return {
+            type: 'error',
+            value: 'authentication:already-used'
+          }
+        } else if (message.endsWith('email to sign in.')) {
+          return {
+            type: 'error',
+            value: 'authentication:email-required-to-sign-in'
+          }
+        }
+        return {
+          type: 'error',
+          value: 'errors:server-error'
+        }
+      }
+      return {
+        type: 'error',
+        value: 'errors:server-error'
+      }
+    }
+  }
+
+  const onChange: React.ChangeEventHandler<
+    HTMLInputElement | HTMLTextAreaElement
+  > = (event) => {
+    setInputValues((oldInputValues) => {
+      return {
+        ...oldInputValues,
+        [event.target.name]: event.target.value
+      }
+    })
+  }
+
+  const onChangeCheckbox: React.ChangeEventHandler<HTMLInputElement> = (
+    event
+  ) => {
+    setInputValues((oldInputValues) => {
+      return {
+        ...oldInputValues,
+        [event.target.name]: event.target.checked
+      }
+    })
+  }
+
+  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
+    event
+  ) => {
+    const files = event?.target?.files
+    if (files != null && files.length === 1) {
+      const file = files[0]
+      const formData = new FormData()
+      formData.append('logo', file)
+      try {
+        const { data } = await authentication.api.put(
+          `/users/current/logo`,
+          formData
+        )
+        setUser((oldUser) => {
+          return {
+            ...oldUser,
+            logo: data.user.logo
+          }
+        })
+      } catch (error) {
+        setFetchState('error')
+        setMessageTranslationKey('errors:server-error')
+      }
+    }
+  }
 
   return (
-    <div className='my-auto lg:min-w-[875px] py-12 justify-center items-center flex flex-col'>
-      <div className='flex flex-col w-full justify-center items-center lg:flex-row sm:w-fit'>
-        <div className=' flex justify-center items-center flex-wrap px-6 w-full sm:w-max'>
+    <Form
+      onSubmit={handleSubmit(onSubmit)}
+      className='my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]'
+    >
+      <div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
+        <div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
           <div className='relative'>
-            <div className='absolute w-full h-full z-50'>
-              <button className='relative w-full h-full flex items-center justify-center transition hover:scale-110'>
+            <div className='absolute z-50 h-full w-full'>
+              <button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
                 <input
                   type='file'
-                  className='absolute w-full h-full opacity-0 cursor-pointer'
+                  className='absolute h-full w-full cursor-pointer opacity-0'
+                  onChange={handleFileChange}
                 />
-                <PhotographIcon color='white' className='w-8 h-8' />
+                <PhotographIcon color='white' className='h-8 w-8' />
               </button>
             </div>
-            <div className='flex justify-center items-center rounded-full shadow-xl bg-black'>
+            <div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
               <Image
-                className='opacity-50 rounded-full'
+                className='rounded-full opacity-50'
                 src={
                   user.logo != null
                     ? API_URL + user.logo
@@ -49,53 +189,78 @@ export const UserSettings: React.FC<UserSettingsProps> = (props) => {
               />
             </div>
           </div>
-          <div className='flex flex-col mx-12'>
+          <div className='mx-12 flex flex-col'>
             <Input
+              name='name'
               label={t('common:name')}
               placeholder={t('common:name')}
               className='!mt-0'
-              defaultValue={user.name}
+              onChange={onChange}
+              value={inputValues.name ?? ''}
+              error={getErrorTranslation(errors.name)}
             />
             <Input
+              name='status'
               label={t('application:status')}
               placeholder={t('application:status')}
               className='!mt-4'
-              defaultValue={user.status ?? ''}
+              onChange={onChange}
+              value={inputValues.status ?? ''}
+              error={getErrorTranslation(errors.status)}
             />
           </div>
         </div>
-        <div className='flex mt-10 flex-col items-center ml-0 lg:ml-24 lg:mt-0'>
-          <UserProfileGuilds isPublicGuilds={user.settings.isPublicGuilds} />
+        <div className='mt-10 ml-0 flex flex-col items-center lg:ml-24 lg:mt-0'>
+          <UserProfileGuilds
+            isPublicGuilds={inputValues.isPublicGuilds}
+            guilds={guilds}
+          />
           <Checkbox
+            name='isPublicGuilds'
             label={t('application:label-checkbox-guilds')}
-            defaultChecked={user.settings.isPublicGuilds}
+            onChange={onChangeCheckbox}
+            checked={inputValues.isPublicGuilds}
             id='checkbox-public-guilds'
             className='px-8'
           />
         </div>
       </div>
-      <div className='flex flex-col w-full justify-between items-center mt-12 lg:flex-row sm:w-fit'>
-        <div className='w-4/5 sm:w-[450px] pr-0 lg:pr-12 lg:border-r-[1px] lg:border-neutral-700'>
-          <Input label='Email' defaultValue={user.email ?? ''} />
+      <div className='mt-12 flex w-full flex-col items-center justify-between sm:w-fit lg:flex-row'>
+        <div className='w-4/5 pr-0 sm:w-[450px] lg:border-r-[1px] lg:border-neutral-700 lg:pr-12'>
+          <Input
+            name='email'
+            label='Email'
+            placeholder='Email'
+            onChange={onChange}
+            value={inputValues.email ?? ''}
+            error={getErrorTranslation(errors.email)}
+          />
           <Checkbox
+            name='isPublicEmail'
             label={t('application:label-checkbox-email')}
             id='checkbox-email-visibility'
-            defaultChecked={user.settings.isPublicEmail}
+            onChange={onChangeCheckbox}
+            checked={inputValues.isPublicEmail}
           />
           <Input
+            name='website'
             label={t('application:website')}
             placeholder={t('application:website')}
-            defaultValue={user.website ?? ''}
+            onChange={onChange}
+            value={inputValues.website ?? ''}
+            error={getErrorTranslation(errors.website)}
           />
           <Textarea
+            name='biography'
             label={t('application:biography')}
             placeholder={t('application:biography')}
             id='textarea-biography'
-            defaultValue={user.biography ?? ''}
+            onChange={onChange}
+            value={inputValues.biography ?? ''}
           />
         </div>
-        <div className='flex flex-col justify-between items-center w-4/5 sm:w-[415px] h-full pr-0 lg:pl-12'>
-          <div className='flex w-full flex-col gap-4 mt-14'>
+        <div className='flex h-full w-4/5 flex-col items-center justify-between pr-0 sm:w-[415px] lg:pl-12'>
+          <div className='mt-14 flex w-full flex-col gap-4'>
             <SocialMediaButton
               socialMedia='Google'
               className='w-full justify-center'
@@ -109,12 +274,17 @@ export const UserSettings: React.FC<UserSettingsProps> = (props) => {
               className='w-full justify-center'
             />
           </div>
-          <div className='flex justify-between w-full pt-14'>
+          <div className='flex w-full justify-between pt-14'>
             <Language />
             <SwitchTheme />
           </div>
         </div>
       </div>
-    </div>
+
+      <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
+        <Button type='submit'>Sauvegarder</Button>
+        <FormState state={fetchState} message={message} />
+      </div>
+    </Form>
   )
 }

components/Authentication/Authentication.tsx

@@ -9,7 +9,7 @@ import { Main } from '../design/Main'
 import { Input } from '../design/Input'
 import { Button } from '../design/Button'
 import { FormState } from '../design/FormState'
-import { AuthenticationForm } from './'
+import { AuthenticationForm } from '.'
 import { userSchema } from '../../models/User'
 import { api } from '../../tools/api'
 import {
@@ -31,11 +31,12 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
 
   const { errors, fetchState, message, getErrorTranslation, handleSubmit } =
     useForm({
-      validateSchemaObject: {
+      validateSchema: {
         ...(mode === 'signup' && { name: userSchema.name }),
         email: userSchema.email,
         password: userSchema.password
-      }
+      },
+      resetOnSuccess: true
     })
 
   const onSubmit: HandleSubmitCallback = async (formData) => {
@@ -51,9 +52,16 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
         }
       } catch (error) {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
+          const message = error.response.data.message as string
+          if (message.endsWith('already taken.')) {
+            return {
+              type: 'error',
+              value: 'authentication:already-used'
+            }
+          }
           return {
             type: 'error',
-            value: 'authentication:alreadyUsed'
+            value: 'errors:server-error'
           }
         }
         return {
@@ -85,14 +93,14 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
 
   return (
     <Main>
-      <div className='flex flex-col sm:items-center sm:w-full'>
+      <div className='flex flex-col sm:w-full sm:items-center'>
         <div className='flex flex-col items-center justify-center space-y-6 sm:w-4/6 sm:flex-row sm:space-x-6 sm:space-y-0'>
           <SocialMediaButton socialMedia='Google' />
           <SocialMediaButton socialMedia='GitHub' />
           <SocialMediaButton socialMedia='Discord' />
         </div>
       </div>
-      <div className='text-center text-lg font-paragraph pt-8'>
+      <div className='pt-8 text-center font-paragraph text-lg'>
         {t('authentication:or')}
       </div>
       <AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
@@ -120,10 +128,10 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           showForgotPassword={mode === 'signin'}
           error={getErrorTranslation(errors.password)}
         />
-        <Button data-cy='submit' className='w-full mt-6' type='submit'>
+        <Button data-cy='submit' className='mt-6 w-full' type='submit'>
           {t('authentication:submit')}
         </Button>
-        <p className='mt-3 font-headline text-sm text-green-800 dark:text-green-400 hover:underline'>
+        <p className='mt-3 font-headline text-sm text-green-800 hover:underline dark:text-green-400'>
           <Link
             href={
               mode === 'signup'

components/ErrorPage/ErrorPage.test.tsx

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react'
 
-import { ErrorPage } from '../ErrorPage'
+import { ErrorPage } from '.'
 
 describe('<ErrorPage />', () => {
-  it('should render the message and statusCode', async () => {
+  it('should render the message and statusCode', () => {
     const messageContent = 'message content'
     const statusCode = 404
     const { getByText } = render(

components/ErrorPage/ErrorPage.tsx

@@ -12,7 +12,7 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
 
   return (
     <>
-      <h1 className='my-6 font-semibold text-4xl'>
+      <h1 className='my-6 text-4xl font-semibold'>
         {t('errors:error')}{' '}
         <span
           className='text-green-800 dark:text-green-400'
@@ -24,7 +24,7 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
       <p className='text-center text-lg'>
         {message}{' '}
         <Link href='/'>
-          <a className='text-green-800 dark:text-green-400 hover:underline'>
+          <a className='text-green-800 hover:underline dark:text-green-400'>
             {t('errors:return-to-home-page')}
           </a>
         </Link>

components/Footer/Footer.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react'
 
-import { Footer as Component, FooterProps } from './'
+import { Footer as Component, FooterProps } from '.'
 
 const Stories: Meta = {
   title: 'Footer',

components/Footer/Footer.test.tsx

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react'
 
-import { Footer } from './'
+import { Footer } from '.'
 
 describe('<Footer />', () => {
-  it('should render with appropriate link tag version', async () => {
+  it('should render with appropriate link tag version', () => {
     const version = '1.0.0'
     const { getByText } = render(<Footer version={version} />)
     const versionLink = getByText(`website v${version}`) as HTMLAnchorElement

components/Footer/Footer.tsx

@@ -13,10 +13,10 @@ export const Footer: React.FC<FooterProps> = (props) => {
   const { version } = props
 
   return (
-    <footer className='bg-white flex flex-col items-center justify-center py-6 text-lg border-t-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
+    <footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
       <p>
         <Link href='/'>
-          <a className='hover:underline text-green-800 dark:text-green-400'>
+          <a className='text-green-800 hover:underline dark:text-green-400'>
             Thream
           </a>
         </Link>{' '}

components/Footer/VersionLink.tsx

@@ -8,7 +8,7 @@ export const VersionLink: React.FC<VersionLinkProps> = (props) => {
 
   return (
     <a
-      className='hover:underline text-green-800 dark:text-green-400'
+      className='text-green-800 hover:underline dark:text-green-400'
       href={`https://github.com/Thream/${repository}/releases/tag/v${version}`}
       target='_blank'
       rel='noopener noreferrer'

components/Header/Header.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react'
 
-import { Header as Component } from './'
+import { Header as Component } from '.'
 
 const Stories: Meta = {
   title: 'Header',

components/Header/Header.test.tsx

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react'
 
-import { Header } from './'
+import { Header } from '.'
 
 describe('<Header />', () => {
-  it('should render', async () => {
+  it('should render', () => {
     const { getByText } = render(<Header />)
     expect(getByText('Thream')).toBeInTheDocument()
   })

components/Header/Header.tsx

@@ -6,7 +6,7 @@ import { SwitchTheme } from './SwitchTheme'
 
 export const Header: React.FC = () => {
   return (
-    <header className='bg-white flex justify-center sticky top-0 z-50 w-full px-6 py-2 border-b-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
+    <header className='sticky top-0 z-50 flex w-full justify-center border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
       <div className='container flex justify-between'>
         <Link href='/'>
           <a>
@@ -17,7 +17,7 @@ export const Header: React.FC = () => {
                 src='/images/icons/Thream.png'
                 alt='Thream'
               />
-              <span className='ml-1 font-medium font-headline hidden xs:block text-green-800 dark:text-green-400'>
+              <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
                 Thream
               </span>
             </div>

components/Header/Language/index.tsx

@@ -33,10 +33,10 @@ export const Language: React.FC = () => {
   }
 
   return (
-    <div className='relative flex flex-col justify-center items-center cursor-pointer'>
+    <div className='relative flex cursor-pointer flex-col items-center justify-center'>
       <div
         data-cy='language-click'
-        className='flex items-center mr-5'
+        className='mr-5 flex items-center'
         onClick={handleHiddenMenu}
       >
         <LanguageFlag language={currentLanguage} />
@@ -46,7 +46,7 @@ export const Language: React.FC = () => {
       <ul
         data-cy='languages-list'
         className={classNames(
-          'flex flex-col justify-center items-center absolute p-0 -bottom-16 z-10 w-24 mt-3 mr-4 rounded-lg list-none shadow-light dark:shadow-dark bg-white dark:bg-black',
+          'absolute -bottom-16 z-10 mt-3 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-light dark:bg-black dark:shadow-dark',
           { hidden: hiddenMenu }
         )}
       >
@@ -57,7 +57,7 @@ export const Language: React.FC = () => {
           return (
             <li
               key={index}
-              className='flex items-center justify-center w-full h-12 hover:bg-[#4f545c] hover:bg-opacity-20 pl-2'
+              className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
               onClick={async () => await handleLanguage(language)}
             >
               <LanguageFlag language={language} />

components/Header/SwitchTheme/SwitchTheme.tsx

@@ -24,13 +24,13 @@ export const SwitchTheme: React.FC = () => {
         data-cy='switch-theme-click'
         onClick={handleClick}
       >
-        <div className='toggle-theme-button relative cursor-pointer bg-transparent inline-block'>
+        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
           <div className='toggle-track'>
             <div
               data-cy='switch-theme-dark'
               className='toggle-track-check absolute'
             >
-              <span className='toggle_Dark flex justify-center items-center relative'>
+              <span className='toggle_Dark relative flex items-center justify-center'>
                 🌜
               </span>
             </div>
@@ -38,7 +38,7 @@ export const SwitchTheme: React.FC = () => {
               data-cy='switch-theme-light'
               className='toggle-track-x absolute'
             >
-              <span className='toggle_Light flex justify-center items-center relative'>
+              <span className='toggle_Light relative flex items-center justify-center'>
                 🌞
               </span>
             </div>

components/design/Button/Button.test.tsx

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react'
 
-import { Button } from './'
+import { Button } from '.'
 
 describe('<Button />', () => {
-  it('should render', async () => {
+  it('should render', () => {
     const { getByText } = render(<Button>Submit</Button>)
     expect(getByText('Submit')).toBeInTheDocument()
   })

components/design/Checkbox/Checkbox.tsx

@@ -8,15 +8,15 @@ export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
 export const Checkbox: React.FC<CheckboxProps> = (props) => {
   const { label, id, className } = props
   return (
-    <div className={classNames('flex items-center mt-4', className)}>
+    <div className={classNames('mt-4 flex items-center', className)}>
       <input
         {...props}
         type='checkbox'
         id={id}
-        className='relative appearance-none min-h-[25px] min-w-[25px] bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] dark:from-[#1f2937] dark:to-[#273547] mr-3 cursor-pointer rounded-md after:absolute before:absolute after:w-[2px] before:w-[2px] after:bg-black before:bg-black dark:after:bg-white dark:before:bg-white transition-all after:transition-all before:transition-all after:top-[62.5%] after:left-[36%] after:h-[7px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:duration-200 before:top-[50%] before:left-[59%] before:h-[12px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 checked:after:scale-100 checked:before:scale-100'
+        className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:top-[50%] before:left-[59%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:top-[62.5%] after:left-[36%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
       />
       <label
-        className='cursor-pointer opacity-80 hover:opacity-100 transition duration-400 select-none '
+        className='duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 '
         htmlFor={id}
       >
         {label}

components/design/Divider/Divider.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react'
 
-import { Divider as Component } from './'
+import { Divider as Component } from '.'
 
 const Stories: Meta = {
   title: 'Divider',

components/design/Divider/Divider.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 
-import { Divider } from './'
+import { Divider } from '.'
 
 describe('<Divider />', () => {
   it('should render successfully', () => {

components/design/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 export const Divider: React.FC = () => {
   return (
-    <div className='relative flex justify-center h-[2px] w-full mb-3'>
-      <div className='absolute h-[2px] w-8/12 bg-gray-600 dark:bg-white/20 rounded-full'></div>
+    <div className='relative mb-3 flex h-[2px] w-full justify-center'>
+      <div className='absolute h-[2px] w-8/12 rounded-full bg-gray-600 dark:bg-white/20'></div>
     </div>
   )
 }

components/design/FormState/FormState.test.tsx

@@ -1,24 +1,24 @@
 import { render } from '@testing-library/react'
 
-import { FormState } from './'
+import { FormState } from '.'
 
 describe('<FormState />', () => {
-  it('should return nothing if the state is idle', async () => {
+  it('should return nothing if the state is idle', () => {
     const { container } = render(<FormState state='idle' />)
     expect(container.innerHTML.length).toEqual(0)
   })
 
-  it('should return nothing if the message is null', async () => {
+  it('should return nothing if the message is null', () => {
     const { container } = render(<FormState state='error' />)
     expect(container.innerHTML.length).toEqual(0)
   })
 
-  it('should render the <Loader /> if state is loading', async () => {
+  it('should render the <Loader /> if state is loading', () => {
     const { getByTestId } = render(<FormState state='loading' />)
     expect(getByTestId('loader')).toBeInTheDocument()
   })
 
-  it('should render the success message if state is success', async () => {
+  it('should render the success message if state is success', () => {
     const message = 'Success Message'
     const { getByText } = render(
       <FormState state='success' message={message} />
@@ -26,7 +26,7 @@ describe('<FormState />', () => {
     expect(getByText(message)).toBeInTheDocument()
   })
 
-  it('should render the error message if state is error', async () => {
+  it('should render the error message if state is error', () => {
     const message = 'Error Message'
     const { getByText } = render(<FormState state='error' message={message} />)
     expect(getByText(message)).toBeInTheDocument()

components/design/FormState/FormState.tsx

@@ -30,14 +30,14 @@ export const FormState: React.FC<FormStateProps> = (props) => {
     <>
       <div
         className={classNames(
-          'mt-6 relative flex flex-row items-center font-medium text-center max-w-xl',
+          'relative mt-6 flex max-w-xl flex-row items-center text-center font-medium',
           {
             'text-red-800 dark:text-red-400': state === 'error',
             'text-green-800 dark:text-green-400': state === 'success'
           }
         )}
       >
-        <div className='thumbnail bg-cover absolute top-0 inline-block font-headline'></div>
+        <div className='thumbnail absolute top-0 inline-block bg-cover font-headline'></div>
         <span id={id} className={classNames({ 'pl-6': state === 'error' })}>
           <b>{t(`errors:${state}`)}:</b> {message}
         </span>

components/design/IconButton/IconButton.tsx

@@ -9,7 +9,7 @@ export const IconButton: React.FC<IconButtonProps> = (props) => {
   return (
     <button
       className={classNames(
-        'text-center flex items-center justify-center text-green-800 dark:text-green-400 focus:outline-none focus:animate-pulse hover:animate-pulse',
+        'flex items-center justify-center text-center text-green-800 hover:animate-pulse focus:animate-pulse focus:outline-none dark:text-green-400',
         className
       )}
       {...rest}

components/design/IconLink/IconLink.tsx

@@ -13,15 +13,15 @@ export const IconLink: React.FC<IconLinkProps> = (props) => {
 
   return (
     <Link href={href}>
-      <a className='w-full flex justify-center relative group' title={title}>
+      <a className='group relative flex w-full justify-center' title={title}>
         <div
-          className={classNames('w-full flex justify-center group', className)}
+          className={classNames('group flex w-full justify-center', className)}
         >
           {children}
-          <div className='absolute flex items-center w-3 h-12 left-0'>
+          <div className='absolute left-0 flex h-12 w-3 items-center'>
             <span
               className={classNames(
-                'absolute w-4/12 bg-green-700 rounded-r-lg group-hover:h-5',
+                'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
                 {
                   'h-full': selected
                 }

components/design/Input/Input.test.tsx

@@ -1,15 +1,15 @@
 import { render, fireEvent } from '@testing-library/react'
 
-import { Input, getInputType } from './'
+import { Input, getInputType } from '.'
 
 describe('<Input />', () => {
-  it('should render the label', async () => {
+  it('should render the label', () => {
     const labelContent = 'label content'
     const { getByText } = render(<Input label={labelContent} />)
     expect(getByText(labelContent)).toBeInTheDocument()
   })
 
-  it('should not render forgot password link', async () => {
+  it('should not render forgot password link', () => {
     const { queryByTestId } = render(
       <Input type='text' label='content' showForgotPassword />
     )
@@ -17,7 +17,7 @@ describe('<Input />', () => {
     expect(forgotPasswordLink).not.toBeInTheDocument()
   })
 
-  it('should render forgot password link', async () => {
+  it('should render forgot password link', () => {
     const { queryByTestId } = render(
       <Input type='password' label='content' showForgotPassword />
     )
@@ -25,7 +25,7 @@ describe('<Input />', () => {
     expect(forgotPasswordLink).toBeInTheDocument()
   })
 
-  it('should not render the eye icon if the input is not of type "password"', async () => {
+  it('should not render the eye icon if the input is not of type "password"', () => {
     const { queryByTestId } = render(<Input type='text' label='content' />)
     const passwordEye = queryByTestId('password-eye')
     expect(passwordEye).not.toBeInTheDocument()
@@ -42,11 +42,11 @@ describe('<Input />', () => {
 })
 
 describe('getInputType', () => {
-  it('should return `text`', async () => {
+  it('should return `text`', () => {
     expect(getInputType('password')).toEqual('text')
   })
 
-  it('should return `password`', async () => {
+  it('should return `password`', () => {
     expect(getInputType('text')).toEqual('password')
   })
 })

components/design/Input/Input.tsx

@@ -38,7 +38,7 @@ export const Input: React.FC<InputProps> = (props) => {
     <>
       <div className='flex flex-col'>
         <div
-          className={classNames('flex justify-between mt-6 mb-2', className)}
+          className={classNames('mt-6 mb-2 flex justify-between', className)}
         >
           <label className='pl-1' htmlFor={name}>
             {label}
@@ -46,7 +46,7 @@ export const Input: React.FC<InputProps> = (props) => {
           {type === 'password' && showForgotPassword ? (
             <Link href='/authentication/forgot-password'>
               <a
-                className='font-headline text-center text-xs sm:text-sm text-green-800 dark:text-green-400 hover:underline'
+                className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
                 data-testid='forgot-password-link'
               >
                 {t('authentication:forgot-password')}
@@ -54,11 +54,11 @@ export const Input: React.FC<InputProps> = (props) => {
             </Link>
           ) : null}
         </div>
-        <div className='mt-0 relative'>
+        <div className='relative mt-0'>
           <input
             data-testid='input'
             data-cy={`input-${name ?? 'name'}`}
-            className='h-11 leading-10 px-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] border border-transparent caret-green-600 font-paragraph w-full focus:border focus:outline-none focus:shadow-green'
+            className='h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
             {...rest}
             id={name}
             name={name}
@@ -68,7 +68,7 @@ export const Input: React.FC<InputProps> = (props) => {
             <div
               data-testid='password-eye'
               onClick={handlePassword}
-              className='password-eye absolute cursor-pointer bg-cover bg-[#f1f1f1]'
+              className='password-eye absolute cursor-pointer bg-[#f1f1f1] bg-cover'
             />
           )}
           <FormState

components/design/Loader/Loader.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 
-import { Loader } from './'
+import { Loader } from '.'
 
 describe('<Loader />', () => {
   it('should render with correct width and height', async () => {

components/design/Main/Main.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 
-import { Main } from './'
+import { Main } from '.'
 
 describe('<Main />', () => {
   it('should render successfully', () => {

components/design/Main/Main.tsx

@@ -10,7 +10,7 @@ export const Main: React.FC<MainProps> = (props) => {
   return (
     <main
       className={classNames(
-        'flex flex-1 flex-col justify-center items-center py-8',
+        'flex flex-1 flex-col items-center justify-center py-8',
         className
       )}
     >

components/design/SocialMediaButton/SocialMediaButton.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 
-import { SocialMedia, SocialMediaButton } from './'
+import { SocialMedia, SocialMediaButton } from '.'
 
 describe('<SocialMediaButton />', () => {
   it('should render the social media', async () => {

components/design/Textarea/Textarea.tsx

@@ -11,14 +11,14 @@ export const Textarea: React.FC<TextareaProps> = (props) => {
 
   return (
     <div className='flex flex-col'>
-      <div className='flex justify-between mt-6 mb-2'>
+      <div className='mt-6 mb-2 flex justify-between'>
         <label className='pl-1' htmlFor={id}>
           {label}
         </label>
       </div>
-      <div className='mt-0 relative'>
+      <div className='relative mt-0'>
         <TextareaAutosize
-          className='p-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] caret-green-600 font-paragraph w-full focus:border focus:outline-none resize-none focus:shadow-green overflow-hidden'
+          className='w-full resize-none overflow-hidden rounded-lg bg-[#f1f1f1] p-3 font-paragraph text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
           wrap='soft'
           id={id}
           name={id}