chore: better Prettier config for easier reviews

.devcontainer/compose.yaml

@@ -1,9 +1,9 @@
 services:
   workspace:
     build:
-      context: './'
-      dockerfile: './Dockerfile'
+      context: "./"
+      dockerfile: "./Dockerfile"
     volumes:
-      - '..:/workspace:cached'
-    command: 'sleep infinity'
-    network_mode: 'host'
+      - "..:/workspace:cached"
+    command: "sleep infinity"
+    network_mode: "host"

.github/ISSUE_TEMPLATE/BUG.md

@@ -1,8 +1,8 @@
 ---
-name: '🐛 Bug Report'
-about: 'Report an unexpected problem or unintended behavior.'
-title: '[Bug]'
-labels: 'bug'
+name: "🐛 Bug Report"
+about: "Report an unexpected problem or unintended behavior."
+title: "[Bug]"
+labels: "bug"
 ---
 
 <!--

.github/ISSUE_TEMPLATE/DOCUMENTATION.md

@@ -1,8 +1,8 @@
 ---
-name: '📜 Documentation'
-about: 'Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...).'
-title: '[Documentation]'
-labels: 'documentation'
+name: "📜 Documentation"
+about: "Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...)."
+title: "[Documentation]"
+labels: "documentation"
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,8 +1,8 @@
 ---
-name: '✨ Feature Request'
-about: 'Suggest a new feature idea.'
-title: '[Feature]'
-labels: 'feature request'
+name: "✨ Feature Request"
+about: "Suggest a new feature idea."
+title: "[Feature]"
+labels: "feature request"
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->

.github/ISSUE_TEMPLATE/IMPROVEMENT.md

@@ -1,8 +1,8 @@
 ---
-name: '🔧 Improvement'
-about: 'Improve structure/format/performance/refactor/tests of the code.'
-title: '[Improvement]'
-labels: 'improvement'
+name: "🔧 Improvement"
+about: "Improve structure/format/performance/refactor/tests of the code."
+title: "[Improvement]"
+labels: "improvement"
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->

.github/ISSUE_TEMPLATE/QUESTION.md

@@ -1,8 +1,8 @@
 ---
-name: '🙋 Question'
-about: 'Further information is requested.'
-title: '[Question]'
-labels: 'question'
+name: "🙋 Question"
+about: "Further information is requested."
+title: "[Question]"
+labels: "question"
 ---
 
 ### Question

.github/workflows/analyze.yml

@@ -1,4 +1,4 @@
-name: 'Analyze'
+name: "Analyze"
 
 on:
   push:
@@ -8,20 +8,20 @@ on:
 
 jobs:
   analyze:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
 
     strategy:
       fail-fast: false
       matrix:
-        language: ['javascript']
+        language: ["javascript"]
 
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Initialize CodeQL'
-        uses: 'github/codeql-action/init@v2'
+      - name: "Initialize CodeQL"
+        uses: "github/codeql-action/init@v2"
         with:
           languages: ${{ matrix.language }}
 
-      - name: 'Perform CodeQL Analysis'
-        uses: 'github/codeql-action/analyze@v2'
+      - name: "Perform CodeQL Analysis"
+        uses: "github/codeql-action/analyze@v2"

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: 'Build'
+name: "Build"
 
 on:
   push:
@@ -8,18 +8,18 @@ on:
 
 jobs:
   build:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'Build'
-        run: 'npm run build'
+      - name: "Build"
+        run: "npm run build"

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: 'Lint'
+name: "Lint"
 
 on:
   push:
@@ -8,30 +8,30 @@ on:
 
 jobs:
   lint:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'lint:commit'
+      - name: "lint:commit"
         run: 'npm run lint:commit -- --to "${{ github.sha }}"'
 
-      - name: 'lint:editorconfig'
-        run: 'npm run lint:editorconfig'
+      - name: "lint:editorconfig"
+        run: "npm run lint:editorconfig"
 
-      - name: 'lint:markdown'
-        run: 'npm run lint:markdown'
+      - name: "lint:markdown"
+        run: "npm run lint:markdown"
 
-      - name: 'lint:eslint'
-        run: 'npm run lint:eslint'
+      - name: "lint:eslint"
+        run: "npm run lint:eslint"
 
-      - name: 'lint:prettier'
-        run: 'npm run lint:prettier'
+      - name: "lint:prettier"
+        run: "npm run lint:prettier"

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: 'Release'
+name: "Release"
 
 on:
   push:
@@ -6,31 +6,31 @@ on:
 
 jobs:
   release:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.0.0"
         with:
           fetch-depth: 0
           persist-credentials: false
 
-      - name: 'Import GPG key'
-        uses: 'crazy-max/ghaction-import-gpg@v6.0.0'
+      - name: "Import GPG key"
+        uses: "crazy-max/ghaction-import-gpg@v6.0.0"
         with:
           gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
           git_user_signingkey: true
           git_commit_gpgsign: true
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'Release'
-        run: 'npm run release'
+      - name: "Release"
+        run: "npm run release"
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           GIT_COMMITTER_NAME: ${{ secrets.GIT_NAME }}

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: 'Test'
+name: "Test"
 
 on:
   push:
@@ -8,41 +8,41 @@ on:
 
 jobs:
   test-unit:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'Unit Test'
-        run: 'npm run test:unit'
+      - name: "Unit Test"
+        run: "npm run test:unit"
 
   test-e2e:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.0.0"
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v3.8.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'Build'
-        run: 'npm run build'
+      - name: "Build"
+        run: "npm run build"
 
-      - name: 'html-w3c-validator'
-        run: 'npm run test:html-w3c-validator'
+      - name: "html-w3c-validator"
+        run: "npm run test:html-w3c-validator"
 
-      - name: 'End To End (e2e) Test'
-        run: 'npm run test:e2e'
+      - name: "End To End (e2e) Test"
+        run: "npm run test:e2e"

.prettierrc.json

@@ -1,6 +1,3 @@
 {
-  "singleQuote": true,
-  "jsxSingleQuote": true,
-  "semi": false,
-  "trailingComma": "none"
+  "semi": false
 }

Dockerfile

@@ -1,16 +1,16 @@
-FROM node:20.6.1 AS builder-dependencies
+FROM node:20.9.0 AS builder-dependencies
 WORKDIR /usr/src/application
 COPY ./.npmrc ./
 COPY ./package*.json ./
 RUN npm clean-install
 
-FROM node:20.6.1 AS builder
+FROM node:20.9.0 AS builder
 WORKDIR /usr/src/application
 COPY --from=builder-dependencies /usr/src/application/node_modules ./node_modules
 COPY ./ ./
 RUN npm run build
 
-FROM gcr.io/distroless/nodejs20-debian11:latest AS runner
+FROM gcr.io/distroless/nodejs20-debian12:latest AS runner
 WORKDIR /usr/src/application
 ENV NODE_ENV=production
 ENV HOSTNAME=0.0.0.0

components/Application/Application.tsx

@@ -1,18 +1,18 @@
-import { useState, useEffect } from 'react'
-import Image from 'next/image'
-import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid'
-import classNames from 'clsx'
-import { useMediaQuery } from 'react-responsive'
-import { useSwipeable } from 'react-swipeable'
+import { useState, useEffect } from "react"
+import Image from "next/image"
+import { PlusIcon, MenuIcon, UsersIcon, XIcon } from "@heroicons/react/solid"
+import classNames from "clsx"
+import { useMediaQuery } from "react-responsive"
+import { useSwipeable } from "react-swipeable"
 
-import type { DirectionSidebar } from './Sidebar'
-import { Sidebar } from './Sidebar'
-import { IconButton } from '../design/IconButton'
-import { IconLink } from '../design/IconLink'
-import { Guilds } from './Guilds/Guilds'
-import { Divider } from '../design/Divider'
-import { Members } from './Members'
-import { useAuthentication } from '../../tools/authentication'
+import type { DirectionSidebar } from "./Sidebar"
+import { Sidebar } from "./Sidebar"
+import { IconButton } from "../design/IconButton"
+import { IconLink } from "../design/IconLink"
+import { Guilds } from "./Guilds/Guilds"
+import { Divider } from "../design/Divider"
+import { Members } from "./Members"
+import { useAuthentication } from "../../tools/authentication"
 
 export interface ChannelsPath {
   channelId: number
@@ -27,9 +27,9 @@ const isGuildsChannelsPath = (path: any): path is GuildsChannelsPath => {
 }
 
 export type ApplicationPath =
-  | '/application'
-  | '/application/guilds/join'
-  | '/application/guilds/create'
+  | "/application"
+  | "/application/guilds/join"
+  | "/application/guilds/create"
   | `/application/users/${number}`
   | `/application/users/settings`
   | GuildsChannelsPath
@@ -51,51 +51,51 @@ export const Application: React.FC<
   const [mounted, setMounted] = useState(false)
 
   const isMobile = useMediaQuery({
-    query: '(max-width: 900px)'
+    query: "(max-width: 900px)",
   })
 
   const [visibleSidebars, setVisibleSidebars] = useState({
     left: !isMobile,
-    right: false
+    right: false,
   })
 
   const handleToggleSidebars = (direction: DirectionSidebar): void => {
     if (!isMobile) {
-      if (direction === 'left') {
+      if (direction === "left") {
         return setVisibleSidebars({
           ...visibleSidebars,
-          left: !visibleSidebars.left
+          left: !visibleSidebars.left,
         })
       }
-      if (direction === 'right') {
+      if (direction === "right") {
         return setVisibleSidebars({
           ...visibleSidebars,
-          right: !visibleSidebars.right
+          right: !visibleSidebars.right,
         })
       }
     } else {
-      if (direction === 'right' && visibleSidebars.left) {
+      if (direction === "right" && visibleSidebars.left) {
         return setVisibleSidebars({
           left: false,
-          right: true
+          right: true,
         })
       }
-      if (direction === 'left' && visibleSidebars.right) {
+      if (direction === "left" && visibleSidebars.right) {
         return setVisibleSidebars({
           left: true,
-          right: false
+          right: false,
         })
       }
-      if (direction === 'left' && !visibleSidebars.right) {
+      if (direction === "left" && !visibleSidebars.right) {
         return setVisibleSidebars({
           ...visibleSidebars,
-          left: !visibleSidebars.left
+          left: !visibleSidebars.left,
         })
       }
-      if (direction === 'right' && !visibleSidebars.left) {
+      if (direction === "right" && !visibleSidebars.left) {
         return setVisibleSidebars({
           ...visibleSidebars,
-          right: !visibleSidebars.right
+          right: !visibleSidebars.right,
         })
       }
     }
@@ -105,7 +105,7 @@ export const Application: React.FC<
     if (isMobile && (visibleSidebars.left || visibleSidebars.right)) {
       return setVisibleSidebars({
         left: false,
-        right: false
+        right: false,
       })
     }
   }
@@ -120,7 +120,7 @@ export const Application: React.FC<
       }
       setVisibleSidebars({
         ...visibleSidebars,
-        left: true
+        left: true,
       })
     },
     onSwipedLeft: () => {
@@ -130,10 +130,10 @@ export const Application: React.FC<
         }
         setVisibleSidebars({
           ...visibleSidebars,
-          right: true
+          right: true,
         })
       }
-    }
+    },
   })
 
   useEffect(() => {
@@ -146,28 +146,28 @@ export const Application: React.FC<
 
   return (
     <>
-      <header className='z-50 flex h-16 items-center justify-between bg-gray-200 px-2 py-3 shadow-lg dark:bg-gray-800'>
+      <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='h-10 w-10 p-2'
+          className="h-10 w-10 p-2"
           onClick={() => {
-            return handleToggleSidebars('left')
+            return handleToggleSidebars("left")
           }}
         >
           {!visibleSidebars.left ? <MenuIcon /> : <XIcon />}
         </IconButton>
         <div
-          data-cy='application-title'
-          className='text-md font-semibold text-green-800 dark:text-green-400'
+          data-cy="application-title"
+          className="text-md font-semibold text-green-800 dark:text-green-400"
         >
           {title}
         </div>
-        <div className='flex space-x-2'>
-          {title.startsWith('#') && (
+        <div className="flex space-x-2">
+          {title.startsWith("#") && (
             <IconButton
-              data-cy='icon-button-right-sidebar-members'
-              className='h-10 w-10 p-2'
+              data-cy="icon-button-right-sidebar-members"
+              className="h-10 w-10 p-2"
               onClick={() => {
-                return handleToggleSidebars('right')
+                return handleToggleSidebars("right")
               }}
             >
               {!visibleSidebars.right ? <UsersIcon /> : <XIcon />}
@@ -177,26 +177,26 @@ export const Application: React.FC<
       </header>
 
       <main
-        className='h-full-without-header relative flex overflow-hidden'
+        className="h-full-without-header relative flex overflow-hidden"
         {...swipeableHandlers}
       >
         <Sidebar
-          direction='left'
+          direction="left"
           visible={visibleSidebars.left}
           isMobile={isMobile}
         >
-          <div className='left-0 top-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'>
+          <div className="left-0 top-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/settings`}
               selected={path === `/application/users/settings`}
-              title='Settings'
+              title="Settings"
             >
               <Image
                 quality={100}
-                className='rounded-full'
+                className="rounded-full"
                 src={
                   user.logo == null
-                    ? '/images/data/user-default.png'
+                    ? "/images/data/user-default.png"
                     : user.logo
                 }
                 alt={"Users's profil picture"}
@@ -206,11 +206,11 @@ export const Application: React.FC<
               />
             </IconLink>
             <IconLink
-              href='/application'
-              selected={path === '/application'}
-              title='Join or create a Guild'
+              href="/application"
+              selected={path === "/application"}
+              title="Join or create a Guild"
             >
-              <PlusIcon className='h-12 w-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} />
@@ -219,14 +219,14 @@ export const Application: React.FC<
         </Sidebar>
 
         <div
-          id='application-page-content'
+          id="application-page-content"
           onClick={handleCloseSidebars}
           className={classNames(
-            'h-full-without-header relative top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition',
+            "h-full-without-header relative top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition",
             {
-              'absolute opacity-20':
-                isMobile && (visibleSidebars.left || visibleSidebars.right)
-            }
+              "absolute opacity-20":
+                isMobile && (visibleSidebars.left || visibleSidebars.right),
+            },
           )}
         >
           {children}
@@ -234,7 +234,7 @@ export const Application: React.FC<
 
         {isGuildsChannelsPath(path) && (
           <Sidebar
-            direction='right'
+            direction="right"
             visible={visibleSidebars.right}
             isMobile={isMobile}
           >

components/Application/ChannelSettings/ChannelSettings.tsx

@@ -1,26 +1,26 @@
-import { useRouter } from 'next/router'
-import { useState } from 'react'
-import { Form, useForm } from 'react-component-form'
-import useTranslation from 'next-translate/useTranslation'
-import classNames from 'clsx'
-import axios from 'axios'
-import type { HandleUseFormCallback } from 'react-component-form'
+import { useRouter } from "next/router"
+import { useState } from "react"
+import { Form, useForm } from "react-component-form"
+import useTranslation from "next-translate/useTranslation"
+import classNames from "clsx"
+import axios from "axios"
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { FormState } from '../../design/FormState'
-import { useGuildMember } from '../../../contexts/GuildMember'
-import { Input } from '../../design/Input'
-import { Button } from '../../design/Button'
-import { useAuthentication } from '../../../tools/authentication'
+import { FormState } from "../../design/FormState"
+import { useGuildMember } from "../../../contexts/GuildMember"
+import { Input } from "../../design/Input"
+import { Button } from "../../design/Button"
+import { useAuthentication } from "../../../tools/authentication"
 import type {
   Channel,
-  ChannelWithDefaultChannelId
-} from '../../../models/Channel'
-import { channelSchema } from '../../../models/Channel'
-import { ConfirmPopup } from '../ConfirmPopup'
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+  ChannelWithDefaultChannelId,
+} from "../../../models/Channel"
+import { channelSchema } from "../../../models/Channel"
+import { ConfirmPopup } from "../ConfirmPopup"
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
-  name: channelSchema.name
+  name: channelSchema.name,
 }
 
 export interface ChannelSettingsProps {
@@ -36,7 +36,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
   const { channel } = props
 
   const [inputValues, setInputValues] = useState({
-    name: channel.name
+    name: channel.name,
   })
 
   const [confirmation, setConfirmation] = useState(false)
@@ -51,7 +51,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     message,
     errors,
     setFetchState,
-    setMessage
+    setMessage,
   } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
@@ -63,8 +63,8 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
       return null
     } catch (error) {
       return {
-        type: 'error',
-        message: 'errors:server-error'
+        type: "error",
+        message: "errors:server-error",
       }
     }
   }
@@ -75,7 +75,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     setInputValues((oldInputValues) => {
       return {
         ...oldInputValues,
-        [event.target.name]: event.target.value
+        [event.target.name]: event.target.value,
       }
     })
   }
@@ -84,15 +84,15 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     try {
       const { data } =
         await authentication.api.delete<ChannelWithDefaultChannelId>(
-          `/channels/${channel.id}`
+          `/channels/${channel.id}`,
         )
       await router.push(`/application/${guild.id}/${data.defaultChannelId}`)
     } catch (error) {
-      setFetchState('error')
+      setFetchState("error")
       if (axios.isAxiosError(error) && error.response?.status === 400) {
-        setMessage('application:delete-channel-only-one')
+        setMessage("application:delete-channel-only-one")
       } else {
-        setMessage('errors:server-error')
+        setMessage("errors:server-error")
       }
     }
   }
@@ -101,37 +101,37 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     <>
       <Form
         onSubmit={handleUseForm(onSubmit)}
-        className='my-auto flex flex-col items-center justify-center py-12'
+        className="my-auto flex flex-col items-center justify-center py-12"
       >
-        <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='mx-12 flex flex-col'>
+        <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="mx-12 flex flex-col">
               <Input
-                name='name'
-                label={t('common:name')}
-                placeholder={t('common:name')}
-                className='!mt-0'
+                name="name"
+                label={t("common:name")}
+                placeholder={t("common:name")}
+                className="!mt-0"
                 onChange={onChange}
                 value={inputValues.name}
                 error={getFirstErrorTranslation(errors.name)}
-                data-cy='channel-name-input'
+                data-cy="channel-name-input"
               />
             </div>
           </div>
         </div>
 
-        <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
-          <div className='space-x-6'>
-            <Button type='submit' data-cy='button-save-channel-settings'>
-              {t('application:save')}
+        <div className="mt-12 flex flex-col items-center justify-center sm:w-fit">
+          <div className="space-x-6">
+            <Button type="submit" data-cy="button-save-channel-settings">
+              {t("application:save")}
             </Button>
             <Button
-              type='button'
-              color='red'
+              type="button"
+              color="red"
               onClick={handleConfirmation}
-              data-cy='button-delete-channel-settings'
+              data-cy="button-delete-channel-settings"
             >
-              {t('application:delete')}
+              {t("application:delete")}
             </Button>
           </div>
           <FormState state={fetchState} message={message} />
@@ -139,17 +139,17 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
       </Form>
       <div
         className={classNames(
-          'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
-          { 'pointer-events-auto !visible !opacity-100': confirmation }
+          "pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all",
+          { "pointer-events-auto !visible !opacity-100": confirmation },
         )}
       >
         <ConfirmPopup
-          className={classNames('relative top-8 transition-all', {
-            '!top-0': confirmation
+          className={classNames("relative top-8 transition-all", {
+            "!top-0": confirmation,
           })}
           handleYes={handleDelete}
           handleNo={handleConfirmation}
-          title={`${t('application:delete-the-channel')} ?`}
+          title={`${t("application:delete-the-channel")} ?`}
         />
       </div>
     </>

components/Application/ChannelSettings/index.ts

@@ -1 +1 @@
-export * from './ChannelSettings'
+export * from "./ChannelSettings"

components/Application/Channels/Channel.tsx

@@ -1,13 +1,13 @@
-import { memo } from 'react'
-import classNames from 'clsx'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { CogIcon } from '@heroicons/react/solid'
+import { memo } from "react"
+import classNames from "clsx"
+import Link from "next/link"
+import { useRouter } from "next/router"
+import { CogIcon } from "@heroicons/react/solid"
 
-import type { GuildsChannelsPath } from '../Application'
-import type { Channel as ChannelType } from '../../../models/Channel'
-import { useGuildMember } from '../../../contexts/GuildMember'
-import { IconButton } from '../../design/IconButton'
+import type { GuildsChannelsPath } from "../Application"
+import type { Channel as ChannelType } from "../../../models/Channel"
+import { useGuildMember } from "../../../contexts/GuildMember"
+import { IconButton } from "../../design/IconButton"
 
 export interface ChannelProps {
   path: GuildsChannelsPath
@@ -25,24 +25,24 @@ const ChannelMemo: React.FC<ChannelProps> = (props) => {
     <Link
       href={`/application/${path.guildId}/${channel.id}`}
       className={classNames(
-        'group relative mx-3 my-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
+        "group relative mx-3 my-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600",
         {
-          'font-semibold text-green-800 dark:text-green-400': selected
-        }
+          "font-semibold text-green-800 dark:text-green-400": selected,
+        },
       )}
     >
-      <span className='max-[315px] ml-2 mr-4 break-all' data-cy='channel-name'>
+      <span className="max-[315px] ml-2 mr-4 break-all" data-cy="channel-name">
         # {channel.name}
       </span>
       {member.isOwner && (
         <IconButton
           onClick={async () => {
             await router.push(
-              `/application/${channel.guildId}/${channel.id}/settings`
+              `/application/${channel.guildId}/${channel.id}/settings`,
             )
           }}
-          className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
-          title='Settings'
+          className="bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600"
+          title="Settings"
         >
           <CogIcon height={20} width={20} />
         </IconButton>

components/Application/Channels/Channels.tsx

@@ -1,9 +1,9 @@
-import InfiniteScroll from 'react-infinite-scroll-component'
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { useChannels } from '../../../contexts/Channels'
-import type { GuildsChannelsPath } from '../Application'
-import { Loader } from '../../design/Loader'
-import { Channel } from './Channel'
+import { useChannels } from "../../../contexts/Channels"
+import type { GuildsChannelsPath } from "../Application"
+import { Loader } from "../../design/Loader"
+import { Channel } from "./Channel"
 
 export interface ChannelsProps {
   path: GuildsChannelsPath
@@ -16,12 +16,12 @@ export const Channels: React.FC<ChannelsProps> = (props) => {
 
   return (
     <div
-      id='channels'
-      className='scrollbar-firefox-support flex flex-1 flex-col overflow-y-auto'
+      id="channels"
+      className="scrollbar-firefox-support flex flex-1 flex-col overflow-y-auto"
     >
       <InfiniteScroll
-        className='channels-list w-full'
-        scrollableTarget='channels'
+        className="channels-list w-full"
+        scrollableTarget="channels"
         dataLength={channels.length}
         next={nextPage}
         hasMore={hasMore}

components/Application/Channels/index.ts

@@ -1 +1 @@
-export * from './Channels'
+export * from "./Channels"

components/Application/ConfirmPopup/ConfirmPopup.tsx

@@ -1,9 +1,9 @@
-import Image from 'next/image'
-import { useState } from 'react'
-import useTranslation from 'next-translate/useTranslation'
-import classNames from 'clsx'
+import Image from "next/image"
+import { useState } from "react"
+import useTranslation from "next-translate/useTranslation"
+import classNames from "clsx"
 
-import { Loader } from '../../design/Loader'
+import { Loader } from "../../design/Loader"
 
 export interface ConfirmPopupProps {
   className?: string
@@ -27,43 +27,43 @@ export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
     <div className={props.className}>
       <Loader
         className={classNames(
-          'absolute left-1/2 top-1/2 scale-0 transition-all',
+          "absolute left-1/2 top-1/2 scale-0 transition-all",
           {
-            'scale-100': isLoading
-          }
+            "scale-100": isLoading,
+          },
         )}
       />
       <div
         className={classNames(
-          'visible flex flex-col items-center opacity-100 transition-all',
+          "visible flex flex-col items-center opacity-100 transition-all",
           {
-            'invisible opacity-0': isLoading
-          }
+            "invisible opacity-0": isLoading,
+          },
         )}
       >
         <Image
           quality={100}
-          src='/images/svg/design/join-guild.svg'
-          alt='Illustration'
+          src="/images/svg/design/join-guild.svg"
+          alt="Illustration"
           height={150}
           width={150}
         />
-        <div className='mt-8 flex flex-col'>
-          <h1 className='mb-6 text-center text-xl'>{props.title}</h1>
-          <div className='flex gap-7'>
+        <div className="mt-8 flex flex-col">
+          <h1 className="mb-6 text-center text-xl">{props.title}</h1>
+          <div className="flex gap-7">
             <button
-              className='rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
+              className="rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
               onClick={handleYesLoading}
-              data-cy='confirm-popup-yes-button'
+              data-cy="confirm-popup-yes-button"
             >
-              {t('common:yes')}
+              {t("common:yes")}
             </button>
             <button
-              className='rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
+              className="rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
               onClick={props.handleNo}
-              data-cy='confirm-popup-no-button'
+              data-cy="confirm-popup-no-button"
             >
-              {t('common:no')}
+              {t("common:no")}
             </button>
           </div>
         </div>

components/Application/ConfirmPopup/index.ts

@@ -1 +1 @@
-export * from './ConfirmPopup'
+export * from "./ConfirmPopup"

components/Application/CreateChannel/CreateChannel.tsx

@@ -1,20 +1,20 @@
-import { useRouter } from 'next/router'
-import useTranslation from 'next-translate/useTranslation'
-import { Form, useForm } from 'react-component-form'
-import type { HandleUseFormCallback } from 'react-component-form'
+import { useRouter } from "next/router"
+import useTranslation from "next-translate/useTranslation"
+import { Form, useForm } from "react-component-form"
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { useAuthentication } from '../../../tools/authentication'
-import { Input } from '../../design/Input'
-import { Main } from '../../design/Main'
-import { Button } from '../../design/Button'
-import { FormState } from '../../design/FormState'
-import type { Channel } from '../../../models/Channel'
-import { channelSchema } from '../../../models/Channel'
-import { useGuildMember } from '../../../contexts/GuildMember'
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+import { useAuthentication } from "../../../tools/authentication"
+import { Input } from "../../design/Input"
+import { Main } from "../../design/Main"
+import { Button } from "../../design/Button"
+import { FormState } from "../../design/FormState"
+import type { Channel } from "../../../models/Channel"
+import { channelSchema } from "../../../models/Channel"
+import { useGuildMember } from "../../../contexts/GuildMember"
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
-  name: channelSchema.name
+  name: channelSchema.name,
 }
 
 export const CreateChannel: React.FC = () => {
@@ -31,38 +31,38 @@ export const CreateChannel: React.FC = () => {
     try {
       const { data: channel } = await authentication.api.post<Channel>(
         `/guilds/${guild.id}/channels`,
-        formData
+        formData,
       )
       await router.push(`/application/${guild.id}/${channel.id}`)
       return null
     } catch (error) {
       return {
-        type: 'error',
-        message: 'errors:server-error'
+        type: "error",
+        message: "errors:server-error",
       }
     }
   }
 
   return (
     <Main>
-      <Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
+      <Form className="w-4/6 max-w-xs" onSubmit={handleUseForm(onSubmit)}>
         <Input
-          type='text'
-          placeholder={t('common:name')}
-          name='name'
-          label={t('common:name')}
+          type="text"
+          placeholder={t("common:name")}
+          name="name"
+          label={t("common:name")}
           error={getFirstErrorTranslation(errors.name)}
-          data-cy='channel-name-input'
+          data-cy="channel-name-input"
         />
         <Button
-          className='mt-6 w-full'
-          type='submit'
-          data-cy='button-create-channel'
+          className="mt-6 w-full"
+          type="submit"
+          data-cy="button-create-channel"
         >
-          {t('application:create')}
+          {t("application:create")}
         </Button>
       </Form>
-      <FormState id='message' state={fetchState} message={message} />
+      <FormState id="message" state={fetchState} message={message} />
     </Main>
   )
 }

components/Application/CreateChannel/index.ts

@@ -1 +1 @@
-export * from './CreateChannel'
+export * from "./CreateChannel"

components/Application/CreateGuild/CreateGuild.tsx

@@ -1,22 +1,22 @@
-import { useRouter } from 'next/router'
-import useTranslation from 'next-translate/useTranslation'
-import { Form, useForm } from 'react-component-form'
-import type { AxiosResponse } from 'axios'
-import type { HandleUseFormCallback } from 'react-component-form'
+import { useRouter } from "next/router"
+import useTranslation from "next-translate/useTranslation"
+import { Form, useForm } from "react-component-form"
+import type { AxiosResponse } from "axios"
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { useAuthentication } from '../../../tools/authentication'
-import type { GuildComplete } from '../../../models/Guild'
-import { guildSchema } from '../../../models/Guild'
-import { Input } from '../../design/Input'
-import { Main } from '../../design/Main'
-import { Button } from '../../design/Button'
-import { FormState } from '../../design/FormState'
-import { Textarea } from '../../design/Textarea'
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+import { useAuthentication } from "../../../tools/authentication"
+import type { GuildComplete } from "../../../models/Guild"
+import { guildSchema } from "../../../models/Guild"
+import { Input } from "../../design/Input"
+import { Main } from "../../design/Main"
+import { Button } from "../../design/Button"
+import { FormState } from "../../design/FormState"
+import { Textarea } from "../../design/Textarea"
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
   name: guildSchema.name,
-  description: guildSchema.description
+  description: guildSchema.description,
 }
 
 export const CreateGuild: React.FC = () => {
@@ -33,44 +33,44 @@ export const CreateGuild: React.FC = () => {
       const { data } = await authentication.api.post<
         any,
         AxiosResponse<{ guild: GuildComplete }>
-      >('/guilds', { name: formData.name, description: formData.description })
+      >("/guilds", { name: formData.name, description: formData.description })
       const guildId = data.guild.id
       const channel = data.guild.channels[0]
       if (channel == null) {
-        throw new Error('No channel found')
+        throw new Error("No channel found")
       }
       const channelId = channel.id
       await router.push(`/application/${guildId}/${channelId}`)
       return null
     } catch (error) {
       return {
-        type: 'error',
-        message: 'errors:server-error'
+        type: "error",
+        message: "errors:server-error",
       }
     }
   }
 
   return (
     <Main>
-      <Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
+      <Form className="w-4/6 max-w-xs" onSubmit={handleUseForm(onSubmit)}>
         <Input
-          type='text'
-          placeholder={t('common:name')}
-          name='name'
-          label={t('common:name')}
+          type="text"
+          placeholder={t("common:name")}
+          name="name"
+          label={t("common:name")}
           error={getFirstErrorTranslation(errors.name)}
         />
         <Textarea
-          label='Description'
-          placeholder='Description'
-          id='description'
+          label="Description"
+          placeholder="Description"
+          id="description"
         />
-        <Button className='mt-6 w-full' type='submit' data-cy='submit'>
-          {t('application:create')}
+        <Button className="mt-6 w-full" type="submit" data-cy="submit">
+          {t("application:create")}
         </Button>
       </Form>
       <FormState
-        id='message'
+        id="message"
         state={fetchState}
         message={message != null ? t(message) : undefined}
       />

components/Application/CreateGuild/index.ts

@@ -1 +1 @@
-export * from './CreateGuild'
+export * from "./CreateGuild"

components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx

@@ -1,11 +1,11 @@
-import Link from 'next/link'
-import { CogIcon, PlusIcon } from '@heroicons/react/solid'
+import Link from "next/link"
+import { CogIcon, PlusIcon } from "@heroicons/react/solid"
 
-import { useGuildMember } from '../../../contexts/GuildMember'
-import { Divider } from '../../design/Divider'
-import { Channels } from '../Channels'
-import { IconButton } from '../../design/IconButton'
-import type { GuildsChannelsPath } from '..'
+import { useGuildMember } from "../../../contexts/GuildMember"
+import { Divider } from "../../design/Divider"
+import { Channels } from "../Channels"
+import { IconButton } from "../../design/IconButton"
+import type { GuildsChannelsPath } from ".."
 
 export interface GuildLeftSidebarProps {
   path: GuildsChannelsPath
@@ -17,23 +17,23 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
   const { guild, member } = useGuildMember()
 
   return (
-    <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'>
+    <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>
       </div>
       <Divider />
       <Channels path={path} />
       <Divider />
-      <div className='mb-1 flex items-center justify-center space-x-6 p-2'>
+      <div className="mb-1 flex items-center justify-center space-x-6 p-2">
         {member.isOwner && (
           <Link
             href={`/application/${path.guildId}/channels/create`}
             passHref
-            data-cy='link-add-channel'
+            data-cy="link-add-channel"
           >
-            <IconButton className='h-10 w-10' title='Add a Channel'>
+            <IconButton className="h-10 w-10" title="Add a Channel">
               <PlusIcon />
             </IconButton>
           </Link>
@@ -41,9 +41,9 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
         <Link
           href={`/application/${path.guildId}/settings`}
           passHref
-          data-cy='link-settings-guild'
+          data-cy="link-settings-guild"
         >
-          <IconButton className='h-7 w-7' title='Settings'>
+          <IconButton className="h-7 w-7" title="Settings">
             <CogIcon />
           </IconButton>
         </Link>

components/Application/GuildLeftSidebar/index.ts

@@ -1 +1 @@
-export * from './GuildLeftSidebar'
+export * from "./GuildLeftSidebar"

components/Application/GuildSettings/GuildSettings.tsx

@@ -1,26 +1,26 @@
-import Image from 'next/image'
-import { useRouter } from 'next/router'
-import { useState } from 'react'
-import { Type } from '@sinclair/typebox'
-import { PhotographIcon } from '@heroicons/react/solid'
-import { Form, useForm } from 'react-component-form'
-import useTranslation from 'next-translate/useTranslation'
-import classNames from 'clsx'
-import type { HandleUseFormCallback } from 'react-component-form'
+import Image from "next/image"
+import { useRouter } from "next/router"
+import { useState } from "react"
+import { Type } from "@sinclair/typebox"
+import { PhotographIcon } from "@heroicons/react/solid"
+import { Form, useForm } from "react-component-form"
+import useTranslation from "next-translate/useTranslation"
+import classNames from "clsx"
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { guildSchema } from '../../../models/Guild'
-import { FormState } from '../../design/FormState'
-import { useGuildMember } from '../../../contexts/GuildMember'
-import { Textarea } from '../../design/Textarea'
-import { Input } from '../../design/Input'
-import { Button } from '../../design/Button'
-import { useAuthentication } from '../../../tools/authentication'
-import { ConfirmPopup } from '../ConfirmPopup'
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+import { guildSchema } from "../../../models/Guild"
+import { FormState } from "../../design/FormState"
+import { useGuildMember } from "../../../contexts/GuildMember"
+import { Textarea } from "../../design/Textarea"
+import { Input } from "../../design/Input"
+import { Button } from "../../design/Button"
+import { useAuthentication } from "../../../tools/authentication"
+import { ConfirmPopup } from "../ConfirmPopup"
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
   name: guildSchema.name,
-  description: Type.Optional(guildSchema.description)
+  description: Type.Optional(guildSchema.description),
 }
 
 export const GuildSettings: React.FC = () => {
@@ -31,7 +31,7 @@ export const GuildSettings: React.FC = () => {
 
   const [inputValues, setInputValues] = useState({
     name: guild.name,
-    description: guild.description
+    description: guild.description,
   })
 
   const [confirmation, setConfirmation] = useState(false)
@@ -46,7 +46,7 @@ export const GuildSettings: React.FC = () => {
     message,
     errors,
     setFetchState,
-    setMessage
+    setMessage,
   } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
@@ -55,13 +55,13 @@ export const GuildSettings: React.FC = () => {
       await authentication.api.put(`/guilds/${guild.id}`, formData)
       setInputValues(formData as unknown as any)
       return {
-        type: 'success',
-        message: 'application:saved-information'
+        type: "success",
+        message: "application:saved-information",
       }
     } catch (error) {
       return {
-        type: 'error',
-        message: 'errors:server-error'
+        type: "error",
+        message: "errors:server-error",
       }
     }
   }
@@ -72,30 +72,30 @@ export const GuildSettings: React.FC = () => {
     setInputValues((oldInputValues) => {
       return {
         ...oldInputValues,
-        [event.target.name]: event.target.value
+        [event.target.name]: event.target.value,
       }
     })
   }
 
   const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
-    event
+    event,
   ) => {
-    setFetchState('loading')
+    setFetchState("loading")
     const files = event?.target?.files
     if (files != null && files.length === 1 && files[0] != null) {
       const file = files[0]
       const formData = new FormData()
-      formData.append('icon', file)
+      formData.append("icon", file)
       try {
         await authentication.api.put(`/guilds/${guild.id}/icon`, formData, {
           headers: {
-            'Content-Type': 'multipart/form-data'
-          }
+            "Content-Type": "multipart/form-data",
+          },
         })
-        setFetchState('idle')
+        setFetchState("idle")
       } catch (error) {
-        setFetchState('error')
-        setMessage('errors:server-error')
+        setFetchState("error")
+        setMessage("errors:server-error")
       }
     }
   }
@@ -104,18 +104,18 @@ export const GuildSettings: React.FC = () => {
     try {
       await authentication.api.delete(`/guilds/${guild.id}`)
     } catch (error) {
-      setFetchState('error')
-      setMessage('errors:server-error')
+      setFetchState("error")
+      setMessage("errors:server-error")
     }
   }
 
   const handleLeave = async (): Promise<void> => {
     try {
       await authentication.api.delete(`/guilds/${guild.id}/members/leave`)
-      await router.push('/application')
+      await router.push("/application")
     } catch (error) {
-      setFetchState('error')
-      setMessage('errors:server-error')
+      setFetchState("error")
+      setMessage("errors:server-error")
     }
   }
 
@@ -123,85 +123,85 @@ export const GuildSettings: React.FC = () => {
     <>
       <Form
         onSubmit={handleUseForm(onSubmit)}
-        className='my-auto flex flex-col items-center justify-center py-12'
+        className="my-auto flex flex-col items-center justify-center py-12"
       >
         {member.isOwner && (
-          <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 z-50 h-full w-full'>
-                  <button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
+          <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 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 h-full w-full cursor-pointer opacity-0'
+                      type="file"
+                      className="absolute h-full w-full cursor-pointer opacity-0"
                       onChange={handleFileChange}
                     />
-                    <PhotographIcon color='white' className='h-8 w-8' />
+                    <PhotographIcon color="white" className="h-8 w-8" />
                   </button>
                 </div>
-                <div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
+                <div className="flex items-center justify-center rounded-full bg-black shadow-xl">
                   <Image
                     quality={100}
-                    className='rounded-full opacity-50'
+                    className="rounded-full opacity-50"
                     src={
                       guild.icon == null
-                        ? '/images/data/guild-default.png'
+                        ? "/images/data/guild-default.png"
                         : guild.icon
                     }
-                    alt='Profil Picture'
-                    draggable='false'
+                    alt="Profil Picture"
+                    draggable="false"
                     height={125}
                     width={125}
                   />
                 </div>
               </div>
-              <div className='mx-12 flex flex-col'>
+              <div className="mx-12 flex flex-col">
                 <Input
-                  name='name'
-                  label={t('common:name')}
-                  placeholder={t('common:name')}
-                  className='!mt-0'
+                  name="name"
+                  label={t("common:name")}
+                  placeholder={t("common:name")}
+                  className="!mt-0"
                   onChange={onChange}
                   value={inputValues.name}
                   error={getFirstErrorTranslation(errors.name)}
-                  data-cy='guild-name-input'
+                  data-cy="guild-name-input"
                 />
                 <Textarea
-                  name='description'
-                  label={'Description'}
-                  placeholder={'Description'}
-                  id='textarea-description'
+                  name="description"
+                  label={"Description"}
+                  placeholder={"Description"}
+                  id="textarea-description"
                   onChange={onChange}
-                  value={inputValues.description ?? ''}
-                  data-cy='guild-description-input'
+                  value={inputValues.description ?? ""}
+                  data-cy="guild-description-input"
                 />
               </div>
             </div>
           </div>
         )}
-        <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
-          <div className='space-x-6'>
+        <div className="mt-12 flex flex-col items-center justify-center sm:w-fit">
+          <div className="space-x-6">
             {member.isOwner ? (
               <>
-                <Button type='submit' data-cy='button-save-guild-settings'>
-                  {t('application:save')}
+                <Button type="submit" data-cy="button-save-guild-settings">
+                  {t("application:save")}
                 </Button>
                 <Button
-                  type='button'
-                  color='red'
+                  type="button"
+                  color="red"
                   onClick={handleConfirmation}
-                  data-cy='button-delete-guild-settings'
+                  data-cy="button-delete-guild-settings"
                 >
-                  {t('application:delete')}
+                  {t("application:delete")}
                 </Button>
               </>
             ) : (
               <Button
-                color='red'
+                color="red"
                 onClick={handleLeave}
-                data-cy='button-leave-guild-settings'
+                data-cy="button-leave-guild-settings"
               >
-                {t('application:leave')} {guild.name}
+                {t("application:leave")} {guild.name}
               </Button>
             )}
           </div>
@@ -217,17 +217,17 @@ export const GuildSettings: React.FC = () => {
       </Form>
       <div
         className={classNames(
-          'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
-          { 'pointer-events-auto !visible !opacity-100': confirmation }
+          "pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all",
+          { "pointer-events-auto !visible !opacity-100": confirmation },
         )}
       >
         <ConfirmPopup
-          className={classNames('relative top-8 transition-all', {
-            '!top-0': confirmation
+          className={classNames("relative top-8 transition-all", {
+            "!top-0": confirmation,
           })}
           handleYes={handleDelete}
           handleNo={handleConfirmation}
-          title={`${t('application:delete-the-guild')} ?`}
+          title={`${t("application:delete-the-guild")} ?`}
         />
       </div>
     </>

components/Application/GuildSettings/index.ts

@@ -1 +1 @@
-export * from './GuildSettings'
+export * from "./GuildSettings"

components/Application/Guilds/Guild.tsx

@@ -1,8 +1,8 @@
-import { memo } from 'react'
-import Image from 'next/image'
+import { memo } from "react"
+import Image from "next/image"
 
-import type { GuildWithDefaultChannelId } from '../../../models/Guild'
-import { IconLink } from '../../design/IconLink'
+import type { GuildWithDefaultChannelId } from "../../../models/Guild"
+import { IconLink } from "../../design/IconLink"
 
 export interface GuildProps {
   guild: GuildWithDefaultChannelId
@@ -14,19 +14,19 @@ const GuildMemo: React.FC<GuildProps> = (props) => {
 
   return (
     <IconLink
-      className='mt-2'
+      className="mt-2"
       href={`/application/${guild.id}/${guild.defaultChannelId}`}
       selected={selected}
       title={guild.name}
     >
-      <div className='pl-[6px]'>
+      <div className="pl-[6px]">
         <Image
           quality={100}
-          className='rounded-full'
+          className="rounded-full"
           src={
-            guild.icon != null ? guild.icon : '/images/data/guild-default.png'
+            guild.icon != null ? guild.icon : "/images/data/guild-default.png"
           }
-          alt='logo'
+          alt="logo"
           width={48}
           height={48}
           draggable={false}

components/Application/Guilds/Guilds.tsx

@@ -1,9 +1,9 @@
-import InfiniteScroll from 'react-infinite-scroll-component'
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { Loader } from '../../design/Loader'
-import { useGuilds } from '../../../contexts/Guilds'
-import type { GuildsPath } from '..'
-import { Guild } from './Guild'
+import { Loader } from "../../design/Loader"
+import { useGuilds } from "../../../contexts/Guilds"
+import type { GuildsPath } from ".."
+import { Guild } from "./Guild"
 
 export interface GuildsProps {
   path: GuildsPath | string
@@ -16,19 +16,19 @@ export const Guilds: React.FC<GuildsProps> = (props) => {
 
   return (
     <div
-      id='guilds-list'
-      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'
+      id="guilds-list"
+      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'
+        className="guilds-list"
         dataLength={guilds.length}
         next={nextPage}
         hasMore={hasMore}
-        scrollableTarget='guilds-list'
+        scrollableTarget="guilds-list"
         loader={<Loader />}
       >
         {guilds.map((guild) => {
-          const selected = typeof path !== 'string' && path.guildId === guild.id
+          const selected = typeof path !== "string" && path.guildId === guild.id
           return <Guild key={guild.id} guild={guild} selected={selected} />
         })}
       </InfiniteScroll>

components/Application/Guilds/index.ts

@@ -1 +1 @@
-export * from './Guilds'
+export * from "./Guilds"

components/Application/JoinGuildsPublic/GuildPublic.tsx

@@ -1,17 +1,17 @@
-import Image from 'next/image'
-import { useRouter } from 'next/router'
-import { useState } from 'react'
-import useTranslation from 'next-translate/useTranslation'
-import classNames from 'clsx'
-import axios from 'axios'
+import Image from "next/image"
+import { useRouter } from "next/router"
+import { useState } from "react"
+import useTranslation from "next-translate/useTranslation"
+import classNames from "clsx"
+import axios from "axios"
 
-import { Emoji } from '../../Emoji'
-import { ConfirmPopup } from '../ConfirmPopup'
+import { Emoji } from "../../Emoji"
+import { ConfirmPopup } from "../ConfirmPopup"
 import type {
   GuildPublic as GuildPublicType,
-  GuildWithDefaultChannelId
-} from '../../../models/Guild'
-import { useAuthentication } from '../../../tools/authentication'
+  GuildWithDefaultChannelId,
+} from "../../../models/Guild"
+import { useAuthentication } from "../../../tools/authentication"
 
 export interface GuildPublicProps {
   guild: GuildPublicType
@@ -36,70 +36,70 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
         guild: GuildWithDefaultChannelId
       }>(`/guilds/${guild.id}/members/join`)
       await router.push(
-        `/application/${guild.id}/${data.guild.defaultChannelId}`
+        `/application/${guild.id}/${data.guild.defaultChannelId}`,
       )
     } catch (error) {
       if (
         axios.isAxiosError(error) &&
         error.response?.status === 400 &&
-        typeof error?.response?.data.defaultChannelId === 'number'
+        typeof error?.response?.data.defaultChannelId === "number"
       ) {
         const defaultChannelId = error.response.data.defaultChannelId as number
         await router.push(`/application/${guild.id}/${defaultChannelId}`)
       } else {
-        await router.push('/application')
+        await router.push("/application")
       }
     }
   }
 
   return (
-    <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="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',
-          { '-translate-x-full': isConfirmed }
+          "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={handleIsConfirmed}
       >
         <Image
           quality={100}
-          className='rounded-full'
+          className="rounded-full"
           src={
-            guild.icon != null ? guild.icon : '/images/data/guild-default.png'
+            guild.icon != null ? guild.icon : "/images/data/guild-default.png"
           }
-          alt='logo'
+          alt="logo"
           width={80}
           height={80}
         />
-        <div className='m-2 mt-6 w-full px-4 text-center'>
+        <div className="m-2 mt-6 w-full px-4 text-center">
           <h3
-            data-cy='guild-name'
-            className='center mb-2 w-full truncate text-xl font-bold'
+            data-cy="guild-name"
+            className="center mb-2 w-full truncate text-xl font-bold"
           >
             {guild.name}
           </h3>
-          <p className='break-words'>
+          <p className="break-words">
             {guild.description != null ? (
               guild.description
             ) : (
-              <span className='flex h-full items-center justify-center opacity-40 dark:opacity-20'>
-                <Emoji value=':eyes:' size={25} />
-                <span className='ml-2'>{t('application:nothing-here')}</span>
+              <span className="flex h-full items-center justify-center opacity-40 dark:opacity-20">
+                <Emoji value=":eyes:" size={25} />
+                <span className="ml-2">{t("application:nothing-here")}</span>
               </span>
             )}
           </p>
         </div>
-        <p className='mt-auto flex flex-col text-green-800 dark:text-green-400'>
-          {guild.membersCount} {t('application:members')}
+        <p className="mt-auto flex flex-col text-green-800 dark:text-green-400">
+          {guild.membersCount} {t("application:members")}
         </p>
       </div>
       <ConfirmPopup
-        title={`${t('application:join-the-guild')} ?`}
+        title={`${t("application:join-the-guild")} ?`}
         className={classNames(
-          'w-ful h-ful translate-x- absolute left-full top-1/2 flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
+          "w-ful h-ful translate-x- absolute left-full top-1/2 flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all",
           {
-            '!left-0': isConfirmed
-          }
+            "!left-0": isConfirmed,
+          },
         )}
         handleYes={handleYes}
         handleNo={handleIsConfirmed}

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

@@ -1,17 +1,17 @@
-import useTranslation from 'next-translate/useTranslation'
-import { useEffect, useState } from 'react'
-import InfiniteScroll from 'react-infinite-scroll-component'
+import useTranslation from "next-translate/useTranslation"
+import { useEffect, useState } from "react"
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { useAuthentication } from '../../../tools/authentication'
-import type { GuildPublic as GuildPublicType } from '../../../models/Guild'
-import { Loader } from '../../design/Loader'
-import { GuildPublic } from './GuildPublic'
-import { usePagination } from '../../../hooks/usePagination'
-import type { SocketData } from '../../../tools/handleSocketData'
-import { handleSocketData } from '../../../tools/handleSocketData'
+import { useAuthentication } from "../../../tools/authentication"
+import type { GuildPublic as GuildPublicType } from "../../../models/Guild"
+import { Loader } from "../../design/Loader"
+import { GuildPublic } from "./GuildPublic"
+import { usePagination } from "../../../hooks/usePagination"
+import type { SocketData } from "../../../tools/handleSocketData"
+import { handleSocketData } from "../../../tools/handleSocketData"
 
 export const JoinGuildsPublic: React.FC = () => {
-  const [search, setSearch] = useState('')
+  const [search, setSearch] = useState("")
 
   const { authentication } = useAuthentication()
   const { t } = useTranslation()
@@ -19,19 +19,19 @@ export const JoinGuildsPublic: React.FC = () => {
   const { items, hasMore, nextPage, resetPagination, setItems } =
     usePagination<GuildPublicType>({
       api: authentication.api,
-      url: '/guilds/public'
+      url: "/guilds/public",
     })
 
   useEffect(() => {
     authentication?.socket?.on(
-      'guilds',
+      "guilds",
       (data: SocketData<GuildPublicType>) => {
         handleSocketData({ data, setItems })
-      }
+      },
     )
 
     return () => {
-      authentication?.socket?.off('guilds')
+      authentication?.socket?.off("guilds")
     }
   }, [authentication.socket, setItems])
 
@@ -45,23 +45,23 @@ export const JoinGuildsPublic: React.FC = () => {
   }
 
   return (
-    <div className='flex h-full w-full flex-col transition-all'>
+    <div className="flex h-full w-full flex-col transition-all">
       <input
-        data-cy='search-guild-input'
+        data-cy="search-guild-input"
         onChange={handleChange}
-        className='mx-auto my-6 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')}...`}
+        className="mx-auto my-6 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'>
+      <div className="w-full p-12">
         <InfiniteScroll
-          className='guilds-public-list relative 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'
+          scrollableTarget="application-page-content"
           hasMore={hasMore}
-          loader={<Loader className='absolute left-1/2 -translate-x-1/2' />}
+          loader={<Loader className="absolute left-1/2 -translate-x-1/2" />}
         >
           {items.map((guild) => {
             return <GuildPublic guild={guild} key={guild.id} />

components/Application/JoinGuildsPublic/index.ts

@@ -1 +1 @@
-export * from './JoinGuildsPublic'
+export * from "./JoinGuildsPublic"

components/Application/Members/Member.tsx

@@ -1,9 +1,9 @@
-import { memo } from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
+import { memo } from "react"
+import Image from "next/image"
+import Link from "next/link"
 
-import type { MemberWithPublicUser } from '../../../models/Member'
-import { Emoji } from '../../Emoji'
+import type { MemberWithPublicUser } from "../../../models/Member"
+import { Emoji } from "../../Emoji"
 
 export interface MemberProps {
   member: MemberWithPublicUser
@@ -14,27 +14,27 @@ const MemberMemo: React.FC<MemberProps> = (props) => {
 
   return (
     <Link href={`/application/users/${member.user.id}`}>
-      <div className='flex cursor-pointer items-center overflow-hidden px-6 py-2 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
-        <div className='flex min-w-[50px] rounded-full'>
+      <div className="flex cursor-pointer items-center overflow-hidden px-6 py-2 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
-                ? '/images/data/user-default.png'
+                ? "/images/data/user-default.png"
                 : member.user.logo
             }
             alt={"Users's profil picture"}
             height={50}
             width={50}
             draggable={false}
-            className='rounded-full'
+            className="rounded-full"
           />
         </div>
-        <div className='ml-5'>
-          <p data-cy='member-user-name' className='flex truncate font-bold'>
+        <div className="ml-5">
+          <p data-cy="member-user-name" className="flex truncate font-bold">
             {member.user.name}
             {member.isOwner && (
-              <span className='ml-4'>
-                <Emoji value=':crown:' size={18} />
+              <span className="ml-4">
+                <Emoji value=":crown:" size={18} />
               </span>
             )}
           </p>

components/Application/Members/Members.tsx

@@ -1,11 +1,11 @@
-import useTranslation from 'next-translate/useTranslation'
-import InfiniteScroll from 'react-infinite-scroll-component'
+import useTranslation from "next-translate/useTranslation"
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { Divider } from '../../design/Divider'
-import { Loader } from '../../design/Loader'
-import { useMembers } from '../../../contexts/Members'
-import { Member } from './Member'
-import { capitalize } from '../../../tools/utils/capitalize'
+import { Divider } from "../../design/Divider"
+import { Loader } from "../../design/Loader"
+import { useMembers } from "../../../contexts/Members"
+import { Member } from "./Member"
+import { capitalize } from "../../../tools/utils/capitalize"
 
 export const Members: React.FC = () => {
   const { members, hasMore, nextPage } = useMembers()
@@ -14,14 +14,14 @@ export const Members: React.FC = () => {
 
   return (
     <>
-      <div className='mb-2'>
-        <h1 data-cy='members-title' className='my-2 pt-2 text-center text-xl'>
-          {capitalize(t('application:members'))}
+      <div className="mb-2">
+        <h1 data-cy="members-title" className="my-2 pt-2 text-center text-xl">
+          {capitalize(t("application:members"))}
         </h1>
         <Divider />
       </div>
       <InfiniteScroll
-        className='members-list'
+        className="members-list"
         dataLength={members.length}
         next={nextPage}
         hasMore={hasMore}

components/Application/Members/index.ts

@@ -1 +1 @@
-export * from './Members'
+export * from "./Members"

components/Application/Messages/Message/EditMessage/EditMessage.tsx

@@ -1,7 +1,7 @@
-import useTranslation from 'next-translate/useTranslation'
-import TextareaAutosize from 'react-textarea-autosize'
+import useTranslation from "next-translate/useTranslation"
+import TextareaAutosize from "react-textarea-autosize"
 
-import type { MessageProps } from '../Message'
+import type { MessageProps } from "../Message"
 
 export interface EditMessageProps extends MessageProps {
   handleEdit: () => Promise<void>
@@ -15,7 +15,7 @@ export const EditMessage: React.FC<
   const { t } = useTranslation()
 
   const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
-    event
+    event,
   ) => {
     event.preventDefault()
     await handleEdit()
@@ -23,23 +23,23 @@ export const EditMessage: React.FC<
 
   return (
     <form
-      className='flex h-full w-full items-center'
+      className="flex h-full w-full items-center"
       onSubmit={handleEditSubmit}
       onKeyDown={handleKeyDown}
     >
       <TextareaAutosize
-        className='scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none'
-        placeholder={t('application:write-a-message')}
-        wrap='soft'
+        className="scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none"
+        placeholder={t("application:write-a-message")}
+        wrap="soft"
         maxRows={6}
-        name='message'
+        name="message"
         defaultValue={message.value}
         ref={textareaRef}
         autoFocus
         onFocus={(event) => {
           event.currentTarget.setSelectionRange(
             event.currentTarget.value.length,
-            event.currentTarget.value.length
+            event.currentTarget.value.length,
           )
         }}
       />

components/Application/Messages/Message/EditMessage/index.ts

@@ -1 +1 @@
-export * from './EditMessage'
+export * from "./EditMessage"

components/Application/Messages/Message/Message.tsx

@@ -1,15 +1,15 @@
-import { useState, useRef } from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
-import date from 'date-and-time'
+import { useState, useRef } from "react"
+import Image from "next/image"
+import Link from "next/link"
+import date from "date-and-time"
 
-import type { MessageWithMember } from '../../../../models/Message'
-import { MessageText } from './MessageText'
-import { Loader } from '../../../design/Loader'
-import { MessageFile } from './MessageFile'
-import { useAuthentication } from '../../../../tools/authentication'
-import { MessageOptions } from './MessageOptions'
-import { EditMessage } from './EditMessage'
+import type { MessageWithMember } from "../../../../models/Message"
+import { MessageText } from "./MessageText"
+import { Loader } from "../../../design/Loader"
+import { MessageFile } from "./MessageFile"
+import { useAuthentication } from "../../../../tools/authentication"
+import { MessageOptions } from "./MessageOptions"
+import { EditMessage } from "./EditMessage"
 
 export interface MessageProps {
   message: MessageWithMember
@@ -23,12 +23,12 @@ export const Message: React.FC<MessageProps> = (props) => {
   const { authentication, user } = useAuthentication()
 
   const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
-    event
+    event,
   ) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
+    if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault()
       event.currentTarget.dispatchEvent(
-        new Event('submit', { cancelable: true, bubbles: true })
+        new Event("submit", { cancelable: true, bubbles: true }),
       )
     }
   }
@@ -36,13 +36,13 @@ export const Message: React.FC<MessageProps> = (props) => {
   const handleEdit = async (): Promise<void> => {
     const newMessage = textareaReference.current?.value ?? message.value
     if (
-      typeof newMessage === 'string' &&
+      typeof newMessage === "string" &&
       newMessage.length > 0 &&
       newMessage !== message.value
     ) {
       try {
         await authentication.api.put(`/messages/${message.id}`, {
-          value: newMessage
+          value: newMessage,
         })
       } catch {}
     }
@@ -58,17 +58,17 @@ export const Message: React.FC<MessageProps> = (props) => {
   return (
     <div
       data-cy={`message-${message.id}`}
-      className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
+      className="group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900"
     >
       <Link href={`/application/users/${message.member.user.id}`}>
-        <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'>
+        <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
               quality={100}
-              className='rounded-full'
+              className="rounded-full"
               src={
                 message.member.user.logo == null
-                  ? '/images/data/user-default.png'
+                  ? "/images/data/user-default.png"
                   : message.member.user.logo
               }
               alt={"Users's profil picture"}
@@ -79,33 +79,33 @@ export const Message: React.FC<MessageProps> = (props) => {
           </div>
         </div>
       </Link>
-      <div className='relative w-full whitespace-pre-wrap break-words break-all'>
-        <div className='flex w-max items-center'>
+      <div className="relative w-full whitespace-pre-wrap break-words break-all">
+        <div className="flex w-max items-center">
           <Link href={`/application/users/${message.member.user.id}`}>
             <span
-              data-cy='message-member-user-name'
-              className='font-bold text-gray-900 dark:text-gray-200'
+              data-cy="message-member-user-name"
+              className="font-bold text-gray-900 dark:text-gray-200"
             >
               {message.member.user.name}
             </span>
           </Link>
           <span
-            data-cy='message-date'
-            className='ml-4 select-none text-xs text-gray-500 dark:text-gray-200'
+            data-cy="message-date"
+            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')}
+            {date.format(new Date(message.createdAt), "DD/MM/YYYY - HH:mm:ss")}
           </span>
         </div>
 
         {message.member.userId === user.id && (
           <MessageOptions
             message={message}
-            editMode={isEditing ? ':white_check_mark:' : ':pencil2:'}
+            editMode={isEditing ? ":white_check_mark:" : ":pencil2:"}
             handleEdit={isEditing ? handleEdit : handleEditMode}
           />
         )}
 
-        {message.type === 'text' ? (
+        {message.type === "text" ? (
           <>
             {isEditing ? (
               <EditMessage
@@ -118,7 +118,7 @@ export const Message: React.FC<MessageProps> = (props) => {
               <MessageText message={message} />
             )}
           </>
-        ) : message.type === 'file' ? (
+        ) : message.type === "file" ? (
           <MessageFile message={message} />
         ) : (
           <Loader />

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

@@ -1,14 +1,14 @@
 export const FileIcon: React.FC = () => {
   return (
     <svg
-      className='fill-current text-black dark:text-white'
-      width='21'
-      height='26'
-      viewBox='0 0 21 26'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
+      className="fill-current text-black dark:text-white"
+      width="21"
+      height="26"
+      viewBox="0 0 21 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d='M2.625 0C1.92881 0 1.26113 0.273928 0.768845 0.761522C0.276562 1.24912 0 1.91044 0 2.6V23.4C0 24.0896 0.276562 24.7509 0.768845 25.2385C1.26113 25.7261 1.92881 26 2.625 26H18.375C19.0712 26 19.7389 25.7261 20.2312 25.2385C20.7234 24.7509 21 24.0896 21 23.4V7.8L13.125 0H2.625ZM13.125 9.1H11.8125V2.6L18.375 9.1H13.125Z' />
+      <path d="M2.625 0C1.92881 0 1.26113 0.273928 0.768845 0.761522C0.276562 1.24912 0 1.91044 0 2.6V23.4C0 24.0896 0.276562 24.7509 0.768845 25.2385C1.26113 25.7261 1.92881 26 2.625 26H18.375C19.0712 26 19.7389 25.7261 20.2312 25.2385C20.7234 24.7509 21 24.0896 21 23.4V7.8L13.125 0H2.625ZM13.125 9.1H11.8125V2.6L18.375 9.1H13.125Z" />
     </svg>
   )
 }

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

@@ -1,18 +1,18 @@
-import { useState, useEffect } from 'react'
-import axios from 'axios'
-import prettyBytes from 'pretty-bytes'
-import { DownloadIcon } from '@heroicons/react/solid'
+import { useState, useEffect } from "react"
+import axios from "axios"
+import prettyBytes from "pretty-bytes"
+import { DownloadIcon } from "@heroicons/react/solid"
 
-import type { MessageWithMember } from '../../../../../models/Message'
-import { Loader } from '../../../../design/Loader'
-import { FileIcon } from './FileIcon'
-import { api } from '../../../../../tools/api'
+import type { MessageWithMember } from "../../../../../models/Message"
+import { Loader } from "../../../../design/Loader"
+import { FileIcon } from "./FileIcon"
+import { api } from "../../../../../tools/api"
 
 const supportedImageMimetype = [
-  'image/png',
-  'image/jpg',
-  'image/jpeg',
-  'image/gif'
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
+  "image/gif",
 ]
 
 export interface FileData {
@@ -34,8 +34,8 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
 
     const fetchData = async (): Promise<void> => {
       const { data } = await api.get(message.value, {
-        responseType: 'blob',
-        cancelToken: ourRequest.token
+        responseType: "blob",
+        cancelToken: ourRequest.token,
       })
       const fileURL = URL.createObjectURL(data)
       setFile({ blob: data, url: fileURL })
@@ -52,27 +52,27 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
   }
   if (supportedImageMimetype.includes(message.mimetype)) {
     return (
-      <a href={file.url} target='_blank' rel='noreferrer'>
+      <a href={file.url} target="_blank" rel="noreferrer">
         <img
           data-cy={`message-file-image-${message.id}`}
-          className='max-h-80 sm:max-w-xs'
+          className="max-h-80 sm:max-w-xs"
           src={file.url}
           alt={message.value}
         />
       </a>
     )
   }
-  if (message.mimetype.startsWith('audio/')) {
+  if (message.mimetype.startsWith("audio/")) {
     return (
       <audio controls data-cy={`message-file-audio-${message.id}`}>
         <source src={file.url} type={message.mimetype} />
       </audio>
     )
   }
-  if (message.mimetype.startsWith('video/')) {
+  if (message.mimetype.startsWith("video/")) {
     return (
       <video
-        className='max-h-80 max-w-xs'
+        className="max-h-80 max-w-xs"
         controls
         data-cy={`message-file-video-${message.id}`}
       >
@@ -82,17 +82,17 @@ export const MessageFile: React.FC<MessageContentProps> = (props) => {
   }
   return (
     <a href={file.url} download data-cy={`message-file-download-${message.id}`}>
-      <div className='flex items-center'>
-        <div className='flex items-center'>
+      <div className="flex items-center">
+        <div className="flex items-center">
           <div>
             <FileIcon />
           </div>
-          <div className='ml-4'>
+          <div className="ml-4">
             <p>{file.blob.type}</p>
-            <p className='mt-1'>{prettyBytes(file.blob.size)}</p>
+            <p className="mt-1">{prettyBytes(file.blob.size)}</p>
           </div>
         </div>
-        <DownloadIcon className='ml-4 h-8 w-8' />
+        <DownloadIcon className="ml-4 h-8 w-8" />
       </div>
     </a>
   )

components/Application/Messages/Message/MessageFile/index.ts

@@ -1 +1 @@
-export * from './MessageFile'
+export * from "./MessageFile"

components/Application/Messages/Message/MessageOptions/MessageOptions.tsx

@@ -1,12 +1,12 @@
-import useTranslation from 'next-translate/useTranslation'
+import useTranslation from "next-translate/useTranslation"
 
-import { useAuthentication } from '../../../../../tools/authentication'
-import { Emoji } from '../../../../Emoji'
-import type { MessageProps } from '../Message'
+import { useAuthentication } from "../../../../../tools/authentication"
+import { Emoji } from "../../../../Emoji"
+import type { MessageProps } from "../Message"
 
 interface MessageOptionsProps extends MessageProps {
   handleEdit: () => void
-  editMode: ':white_check_mark:' | ':pencil2:'
+  editMode: ":white_check_mark:" | ":pencil2:"
 }
 
 export const MessageOptions: React.FC<
@@ -22,22 +22,22 @@ export const MessageOptions: React.FC<
   }
 
   return (
-    <div className='absolute -top-8 right-6 flex opacity-0 transition-opacity group-hover:opacity-100'>
-      {message.type === 'text' && (
+    <div className="absolute -top-8 right-6 flex opacity-0 transition-opacity group-hover:opacity-100">
+      {message.type === "text" && (
         <div
-          className='message-options rounded-l-lg border-l-slate-600'
-          title={t('application:edit')}
+          className="message-options rounded-l-lg border-l-slate-600"
+          title={t("application:edit")}
           onClick={handleEdit}
         >
           <Emoji value={editMode} size={18} />
         </div>
       )}
       <div
-        className='message-options rounded-r-lg border-r-slate-600'
-        title={t('application:delete')}
+        className="message-options rounded-r-lg border-r-slate-600"
+        title={t("application:delete")}
         onClick={handleDeleteMessage}
       >
-        <Emoji value=':wastebasket:' size={18} />
+        <Emoji value=":wastebasket:" size={18} />
       </div>
     </div>
   )

components/Application/Messages/Message/MessageOptions/index.ts

@@ -1 +1 @@
-export * from './MessageOptions'
+export * from "./MessageOptions"

components/Application/Messages/Message/MessageText/MessageText.tsx

@@ -1,16 +1,16 @@
-import { useMemo } from 'react'
-import ReactMarkdown from 'react-markdown'
-import gfm from 'remark-gfm'
-import remarkBreaks from 'remark-breaks'
-import remarkMath from 'remark-math'
-import rehypeKatex from 'rehype-katex'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+import { useMemo } from "react"
+import ReactMarkdown from "react-markdown"
+import gfm from "remark-gfm"
+import remarkBreaks from "remark-breaks"
+import remarkMath from "remark-math"
+import rehypeKatex from "rehype-katex"
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
+import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism"
 
-import 'katex/dist/katex.min.css'
+import "katex/dist/katex.min.css"
 
-import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from '../../../../Emoji'
-import type { MessageWithMember } from '../../../../../models/Message'
+import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from "../../../../Emoji"
+import type { MessageWithMember } from "../../../../../models/Message"
 
 export interface MessageContentProps {
   message: MessageWithMember
@@ -35,16 +35,16 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
 
   return (
     <ReactMarkdown
-      disallowedElements={['table']}
+      disallowedElements={["table"]}
       unwrapDisallowed
       remarkPlugins={[[gfm], [remarkBreaks], [remarkMath]]}
       rehypePlugins={[[emojiPlugin], [rehypeKatex]]}
-      linkTarget='_blank'
+      linkTarget="_blank"
       components={{
         a: (props) => {
           return (
             <a
-              className='text-green-800 hover:underline dark:text-green-400'
+              className="text-green-800 hover:underline dark:text-green-400"
               {...props}
             />
           )
@@ -55,22 +55,22 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
         },
         code: (properties) => {
           const { inline, className, children, ...props } = properties
-          const match = /language-(\w+)/.exec(className ?? '')
+          const match = /language-(\w+)/.exec(className ?? "")
           return !(inline as boolean) && match != null ? (
             <SyntaxHighlighter
               style={vscDarkPlus as any}
               language={match[1]}
-              PreTag='div'
+              PreTag="div"
               {...props}
             >
-              {String(children).replace(/\n$/, '')}
+              {String(children).replace(/\n$/, "")}
             </SyntaxHighlighter>
           ) : (
             <code className={className} {...props}>
               {children}
             </code>
           )
-        }
+        },
       }}
     >
       {message.value}

components/Application/Messages/Message/MessageText/index.ts

@@ -1 +1 @@
-export * from './MessageText'
+export * from "./MessageText"

components/Application/Messages/Message/index.ts

@@ -1 +1 @@
-export * from './Message'
+export * from "./Message"

components/Application/Messages/Messages.tsx

@@ -1,10 +1,10 @@
-import useTranslation from 'next-translate/useTranslation'
-import InfiniteScroll from 'react-infinite-scroll-component'
+import useTranslation from "next-translate/useTranslation"
+import InfiniteScroll from "react-infinite-scroll-component"
 
-import { Loader } from '../../design/Loader'
-import { Message } from './Message'
-import { useMessages } from '../../../contexts/Messages'
-import { Emoji } from '../../Emoji'
+import { Loader } from "../../design/Loader"
+import { Message } from "./Message"
+import { useMessages } from "../../../contexts/Messages"
+import { Emoji } from "../../Emoji"
 
 export const Messages: React.FC = () => {
   const { t } = useTranslation()
@@ -13,25 +13,25 @@ export const Messages: React.FC = () => {
   if (messages.length === 0) {
     return (
       <div
-        id='messages'
-        className='scrollbar-firefox-support mt-8 flex w-full flex-1 flex-col overflow-y-auto text-center text-lg transition-all'
+        id="messages"
+        className="scrollbar-firefox-support mt-8 flex w-full flex-1 flex-col overflow-y-auto text-center text-lg transition-all"
       >
         <p>
-          {t('application:nothing-here')} <Emoji value=':ghost:' size={20} />
+          {t("application:nothing-here")} <Emoji value=":ghost:" size={20} />
         </p>
-        <p>{t('application:start-chatting-kill-ghost')}</p>
+        <p>{t("application:start-chatting-kill-ghost")}</p>
       </div>
     )
   }
 
   return (
     <div
-      id='messages'
-      className='scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all'
+      id="messages"
+      className="scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all"
     >
       <InfiniteScroll
-        scrollableTarget='messages'
-        className='messages-list !overflow-x-hidden'
+        scrollableTarget="messages"
+        className="messages-list !overflow-x-hidden"
         dataLength={messages.length}
         next={nextPage}
         inverse

components/Application/Messages/index.ts

@@ -1 +1 @@
-export * from './Messages'
+export * from "./Messages"

components/Application/PopupGuild/PopupGuild.tsx

@@ -1,9 +1,9 @@
-import useTranslation from 'next-translate/useTranslation'
-import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
-import classNames from 'clsx'
-import Image from 'next/image'
+import useTranslation from "next-translate/useTranslation"
+import { PlusSmIcon, ArrowDownIcon } from "@heroicons/react/solid"
+import classNames from "clsx"
+import Image from "next/image"
 
-import { PopupGuildCard } from './PopupGuildCard'
+import { PopupGuildCard } from "./PopupGuildCard"
 
 export interface PopupGuildProps {
   className?: string
@@ -18,43 +18,43 @@ export const PopupGuild: React.FC<PopupGuildProps> = (props) => {
     <div
       className={classNames(
         className,
-        'h-full-without-header flex min-w-full flex-wrap items-center justify-center overflow-y-auto p-8'
+        "h-full-without-header flex min-w-full flex-wrap items-center justify-center overflow-y-auto p-8",
       )}
     >
       <PopupGuildCard
         image={
           <Image
             quality={100}
-            src='/images/svg/design/create-guild.svg'
-            alt={t('application:create-a-guild')}
-            draggable='false'
+            src="/images/svg/design/create-guild.svg"
+            alt={t("application:create-a-guild")}
+            draggable="false"
             width={230}
             height={230}
           />
         }
-        description={t('application:create-a-guild-description')}
+        description={t("application:create-a-guild-description")}
         link={{
-          icon: <PlusSmIcon className='mr-2 h-8 w-8' />,
-          text: t('application:create-a-guild'),
-          href: '/application/guilds/create'
+          icon: <PlusSmIcon className="mr-2 h-8 w-8" />,
+          text: t("application:create-a-guild"),
+          href: "/application/guilds/create",
         }}
       />
       <PopupGuildCard
         image={
           <Image
             quality={100}
-            src='/images/svg/design/join-guild.svg'
-            alt={t('application:join-a-guild')}
-            draggable='false'
+            src="/images/svg/design/join-guild.svg"
+            alt={t("application:join-a-guild")}
+            draggable="false"
             width={200}
             height={200}
           />
         }
-        description={t('application:join-a-guild-description')}
+        description={t("application:join-a-guild-description")}
         link={{
-          icon: <ArrowDownIcon className='mr-2 h-6 w-6' />,
-          text: t('application:join-a-guild'),
-          href: '/application/guilds/join'
+          icon: <ArrowDownIcon className="mr-2 h-6 w-6" />,
+          text: t("application:join-a-guild"),
+          href: "/application/guilds/join",
         }}
       />
     </div>

components/Application/PopupGuild/PopupGuildCard.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import Link from 'next/link'
+import React from "react"
+import Link from "next/link"
 
 export interface PopupGuildCardProps {
   image: JSX.Element
@@ -15,17 +15,17 @@ export const PopupGuildCard: React.FC<PopupGuildCardProps> = (props) => {
   const { image, description, link } = props
 
   return (
-    <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'>
+    <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='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'>
+      <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}
-          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'
+          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}

components/Application/PopupGuild/index.ts

@@ -1 +1 @@
-export * from './PopupGuild'
+export * from "./PopupGuild"

components/Application/SendMessage/SendMessage.tsx

@@ -1,12 +1,12 @@
-import { useState, useRef } from 'react'
-import useTranslation from 'next-translate/useTranslation'
-import TextareaAutosize from 'react-textarea-autosize'
-import classNames from 'clsx'
+import { useState, useRef } from "react"
+import useTranslation from "next-translate/useTranslation"
+import TextareaAutosize from "react-textarea-autosize"
+import classNames from "clsx"
 
-import type { GuildsChannelsPath } from '..'
-import { useAuthentication } from '../../../tools/authentication'
-import type { EmojiPickerOnClick } from '../../Emoji'
-import { EmojiPicker } from '../../Emoji'
+import type { GuildsChannelsPath } from ".."
+import { useAuthentication } from "../../../tools/authentication"
+import type { EmojiPickerOnClick } from "../../Emoji"
+import { EmojiPicker } from "../../Emoji"
 
 export interface SendMessageProps {
   path: GuildsChannelsPath
@@ -18,54 +18,54 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
   const { authentication } = useAuthentication()
 
   const [isVisibleEmojiPicker, setIsVisibleEmojiPicker] = useState(false)
-  const [message, setMessage] = useState('')
+  const [message, setMessage] = useState("")
   const textareaReference = useRef<HTMLTextAreaElement>(null)
 
   const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
-    event
+    event,
   ) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
+    if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault()
       event.currentTarget.dispatchEvent(
-        new Event('submit', { cancelable: true, bubbles: true })
+        new Event("submit", { cancelable: true, bubbles: true }),
       )
     }
   }
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (
-    event
+    event,
   ) => {
     event.preventDefault()
-    if (typeof message === 'string' && message.length > 0) {
+    if (typeof message === "string" && message.length > 0) {
       await authentication.api.post(`/channels/${path.channelId}/messages`, {
-        value: message
+        value: message,
       })
-      setMessage('')
+      setMessage("")
     }
   }
 
   const handleTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
-    event
+    event,
   ) => {
     setMessage(event.target.value)
   }
 
   const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
-    event
+    event,
   ) => {
     const files = event?.target?.files
     if (files != null && files.length === 1 && files[0] != null) {
       const file = files[0]
       const formData = new FormData()
-      formData.append('file', file)
+      formData.append("file", file)
       await authentication.api.post(
         `/channels/${path.channelId}/messages/uploads`,
         formData,
         {
           headers: {
-            'Content-Type': 'multipart/form-data'
-          }
-        }
+            "Content-Type": "multipart/form-data",
+          },
+        },
       )
     }
   }
@@ -77,7 +77,7 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
   }
 
   const handleEmojiPicker: EmojiPickerOnClick = (emoji) => {
-    const emojiColons = emoji.colons ?? ''
+    const emojiColons = emoji.colons ?? ""
     setMessage((oldMessage) => {
       return oldMessage + emojiColons
     })
@@ -86,51 +86,51 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
   }
 
   return (
-    <div className='relative p-6 pb-4'>
+    <div className="relative p-6 pb-4">
       <div
         className={classNames(
-          'absolute bottom-24 right-20 z-50 w-fit transition-all duration-100',
+          "absolute bottom-24 right-20 z-50 w-fit transition-all duration-100",
           {
-            'invisible translate-y-5 opacity-0': !isVisibleEmojiPicker
-          }
+            "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'>
+      <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'
+          className="flex h-full w-full items-center"
           onSubmit={handleSubmit}
           onKeyDown={handleTextareaKeyDown}
         >
           <TextareaAutosize
-            className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 tracking-wide outline-none'
-            placeholder={t('application:write-a-message')}
-            wrap='soft'
+            className="scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 tracking-wide outline-none"
+            placeholder={t("application:write-a-message")}
+            wrap="soft"
             maxRows={6}
-            name='message'
+            name="message"
             onChange={handleTextareaChange}
             value={message}
             ref={textareaReference}
           />
         </form>
-        <div className='flex h-full items-center justify-around pr-6'>
+        <div className="flex h-full items-center justify-around pr-6">
           <button
-            className='flex h-full w-full 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='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'>
+          <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 h-full w-full cursor-pointer opacity-0'
+              type="file"
+              className="absolute h-full w-full cursor-pointer opacity-0"
               onChange={handleFileChange}
             />
-            <svg width='25' height='25' viewBox='0 0 22 22'>
+            <svg width="25" height="25" viewBox="0 0 22 22">
               <path
-                d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z'
-                fill='currentColor'
+                d="M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z"
+                fill="currentColor"
               />
             </svg>
           </button>

components/Application/SendMessage/index.ts

@@ -1 +1 @@
-export * from './SendMessage'
+export * from "./SendMessage"

components/Application/Sidebar/Sidebar.tsx

@@ -1,8 +1,8 @@
-import classNames from 'clsx'
+import classNames from "clsx"
 
-import type { ApplicationProps } from '..'
+import type { ApplicationProps } from ".."
 
-export type DirectionSidebar = 'left' | 'right'
+export type DirectionSidebar = "left" | "right"
 
 export interface SidebarProps {
   direction: DirectionSidebar
@@ -12,24 +12,24 @@ export interface SidebarProps {
 }
 
 export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
-  props
+  props,
 ) => {
   const { direction, visible, children, path, isMobile } = props
 
   return (
     <nav
       className={classNames(
-        'h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
+        "h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800",
         {
-          'scrollbar-firefox-support right-0 top-0 flex-col space-y-1 overflow-y-auto':
-            direction === 'right',
-          'w-72': direction === 'right' && visible,
-          'invisible w-0 opacity-0': !visible,
-          'w-80': direction === 'left' && visible,
-          'max-w-max': typeof path !== 'string' && direction === 'left',
-          'right-0 top-0': direction === 'right' && isMobile,
-          absolute: isMobile
-        }
+          "scrollbar-firefox-support right-0 top-0 flex-col space-y-1 overflow-y-auto":
+            direction === "right",
+          "w-72": direction === "right" && visible,
+          "invisible w-0 opacity-0": !visible,
+          "w-80": direction === "left" && visible,
+          "max-w-max": typeof path !== "string" && direction === "left",
+          "right-0 top-0": direction === "right" && isMobile,
+          absolute: isMobile,
+        },
       )}
     >
       {children}

components/Application/Sidebar/index.ts

@@ -1 +1 @@
-export * from './Sidebar'
+export * from "./Sidebar"

components/Application/UserProfile/UserProfile.tsx

@@ -1,9 +1,9 @@
-import Image from 'next/image'
-import date from 'date-and-time'
-import useTranslation from 'next-translate/useTranslation'
+import Image from "next/image"
+import date from "date-and-time"
+import useTranslation from "next-translate/useTranslation"
 
-import type { UserPublic } from '../../../models/User'
-import type { Guild } from '../../../models/Guild'
+import type { UserPublic } from "../../../models/User"
+import type { Guild } from "../../../models/Guild"
 
 export interface UserProfileProps {
   className?: string
@@ -16,73 +16,73 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
   const { t } = useTranslation()
 
   return (
-    <div className='relative flex h-full flex-col items-center justify-center'>
-      <div className='transition'>
-        <div className='max-w-[1000px] px-12'>
-          <div className='flex items-center justify-between'>
-            <div className='flex w-max flex-col items-center gap-7 md:flex-row'>
-              <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
+    <div className="relative flex h-full flex-col items-center justify-center">
+      <div className="transition">
+        <div className="max-w-[1000px] px-12">
+          <div className="flex items-center justify-between">
+            <div className="flex w-max flex-col items-center gap-7 md:flex-row">
+              <div className="relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all">
                 <Image
                   quality={100}
-                  className='rounded-full'
+                  className="rounded-full"
                   src={
                     user.logo != null
                       ? user.logo
-                      : '/images/data/user-default.png'
+                      : "/images/data/user-default.png"
                   }
-                  alt='Profil Picture'
-                  draggable='false'
+                  alt="Profil Picture"
+                  draggable="false"
                   height={125}
                   width={125}
                 />
               </div>
-              <div className='ml-10 flex flex-col'>
-                <div className='mb-2 flex items-center'>
+              <div className="ml-10 flex flex-col">
+                <div className="mb-2 flex items-center">
                   <p
-                    className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
-                    data-cy='user-name'
+                    className="space text-dark text-3xl font-bold tracking-wide dark:text-white"
+                    data-cy="user-name"
                   >
                     {user.name}
                   </p>
                   <p
-                    className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
-                    data-cy='user-createdAt'
+                    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')}
+                    {date.format(new Date(user.createdAt), "DD/MM/YYYY")}
                   </p>
                 </div>
-                <div className='my-2 text-left'>
+                <div className="my-2 text-left">
                   {user.email != null && (
-                    <p className='font-bold'>
-                      Email:{' '}
+                    <p className="font-bold">
+                      Email:{" "}
                       <a
                         href={`mailto:${user.email}`}
-                        target='_blank'
-                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-1px] after:left-0 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'
+                        target="_blank"
+                        className="relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-1px] after:left-0 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>
                     </p>
                   )}
                   {user.website != null && (
-                    <p className='font-bold'>
-                      {t('application:website')}:{' '}
+                    <p className="font-bold">
+                      {t("application:website")}:{" "}
                       <a
-                        target='_blank'
-                        rel='noreferrer'
+                        target="_blank"
+                        rel="noreferrer"
                         href={user.website}
-                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-2px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                        className="relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-2px] after:left-0 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>
                     </p>
                   )}
                   {user.status != null && (
-                    <p className='flex font-bold'>
-                      {t('application:status')}:{' '}
-                      <span className='ml-2 font-normal tracking-wide'>
+                    <p className="flex font-bold">
+                      {t("application:status")}:{" "}
+                      <span className="ml-2 font-normal tracking-wide">
                         {user.status}
                       </span>
                     </p>
@@ -92,7 +92,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
             </div>
           </div>
           {user.biography != null && (
-            <div className='mt-7 text-center'>
+            <div className="mt-7 text-center">
               <p>{user.biography}</p>
             </div>
           )}

components/Application/UserProfile/index.ts

@@ -1 +1 @@
-export * from './UserProfile'
+export * from "./UserProfile"

components/Application/UserSettings/UserSettings.tsx

@@ -1,27 +1,27 @@
-import Image from 'next/image'
-import useTranslation from 'next-translate/useTranslation'
-import { useState, useMemo } from 'react'
-import { Form, useForm } from 'react-component-form'
-import { EyeIcon, PhotographIcon } from '@heroicons/react/solid'
-import { Type } from '@sinclair/typebox'
-import axios from 'axios'
-import Link from 'next/link'
-import type { HandleUseFormCallback } from 'react-component-form'
+import Image from "next/image"
+import useTranslation from "next-translate/useTranslation"
+import { useState, useMemo } from "react"
+import { Form, useForm } from "react-component-form"
+import { EyeIcon, PhotographIcon } from "@heroicons/react/solid"
+import { Type } from "@sinclair/typebox"
+import axios from "axios"
+import Link from "next/link"
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { Input } from '../../design/Input'
-import { Checkbox } from '../../design/Checkbox'
-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 { userSchema } from '../../../models/User'
-import { userSettingsSchema } from '../../../models/UserSettings'
-import type { ProviderOAuth } from '../../../models/OAuth'
-import { providers } from '../../../models/OAuth'
-import { useFormTranslation } from '../../../hooks/useFormTranslation'
+import { Input } from "../../design/Input"
+import { Checkbox } from "../../design/Checkbox"
+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 { userSchema } from "../../../models/User"
+import { userSettingsSchema } from "../../../models/UserSettings"
+import type { ProviderOAuth } from "../../../models/OAuth"
+import { providers } from "../../../models/OAuth"
+import { useFormTranslation } from "../../../hooks/useFormTranslation"
 
 const schema = {
   name: userSchema.name,
@@ -30,7 +30,7 @@ const schema = {
   website: Type.Optional(userSchema.website),
   biography: Type.Optional(userSchema.biography),
   isPublicGuilds: userSettingsSchema.isPublicGuilds,
-  isPublicEmail: userSettingsSchema.isPublicEmail
+  isPublicEmail: userSettingsSchema.isPublicEmail,
 }
 
 export const UserSettings: React.FC = () => {
@@ -43,7 +43,7 @@ export const UserSettings: React.FC = () => {
     website: user.website,
     biography: user.biography,
     isPublicGuilds: user.settings.isPublicGuilds,
-    isPublicEmail: user.settings.isPublicEmail
+    isPublicEmail: user.settings.isPublicEmail,
   })
 
   const {
@@ -52,7 +52,7 @@ export const UserSettings: React.FC = () => {
     setFetchState,
     message,
     setMessage,
-    errors
+    errors,
   } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
@@ -68,19 +68,19 @@ export const UserSettings: React.FC = () => {
       const userSettings = { isPublicEmail, isPublicGuilds }
       const { data: userCurrentData } = await authentication.api.put(
         `/users/current?redirectURI=${window.location.origin}/authentication/signin`,
-        userData
+        userData,
       )
       setInputValues(formData as unknown as any)
       const hasEmailChanged = user.email !== userCurrentData.user.email
       if (hasEmailChanged) {
         return {
-          type: 'success',
-          message: 'application:success-email-changed'
+          type: "success",
+          message: "application:success-email-changed",
         }
       }
       const { data: userCurrentSettings } = await authentication.api.put(
-        '/users/current/settings',
-        userSettings
+        "/users/current/settings",
+        userSettings,
       )
       setUser((oldUser) => {
         return {
@@ -88,36 +88,36 @@ export const UserSettings: React.FC = () => {
           ...userCurrentData,
           settings: {
             ...oldUser.settings,
-            ...userCurrentSettings.settings
-          }
+            ...userCurrentSettings.settings,
+          },
         }
       })
       return {
-        type: 'success',
-        message: 'application:saved-information'
+        type: "success",
+        message: "application:saved-information",
       }
     } catch (error) {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
         const message = error.response.data.message as string
-        if (message.endsWith('already taken.')) {
+        if (message.endsWith("already taken.")) {
           return {
-            type: 'error',
-            message: 'authentication:already-used'
+            type: "error",
+            message: "authentication:already-used",
           }
-        } else if (message.endsWith('email to sign in.')) {
+        } else if (message.endsWith("email to sign in.")) {
           return {
-            type: 'error',
-            message: 'authentication:email-required-to-sign-in'
+            type: "error",
+            message: "authentication:email-required-to-sign-in",
           }
         }
         return {
-          type: 'error',
-          message: 'errors:server-error'
+          type: "error",
+          message: "errors:server-error",
         }
       }
       return {
-        type: 'error',
-        message: 'errors:server-error'
+        type: "error",
+        message: "errors:server-error",
       }
     }
   }
@@ -128,95 +128,95 @@ export const UserSettings: React.FC = () => {
     setInputValues((oldInputValues) => {
       return {
         ...oldInputValues,
-        [event.target.name]: event.target.value
+        [event.target.name]: event.target.value,
       }
     })
   }
 
   const onChangeCheckbox: React.ChangeEventHandler<HTMLInputElement> = (
-    event
+    event,
   ) => {
     setInputValues((oldInputValues) => {
       return {
         ...oldInputValues,
-        [event.target.name]: event.target.checked
+        [event.target.name]: event.target.checked,
       }
     })
   }
 
   const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
-    event
+    event,
   ) => {
-    setFetchState('loading')
+    setFetchState("loading")
     const files = event?.target?.files
     if (files != null && files.length === 1 && files[0] != null) {
       const file = files[0]
       const formData = new FormData()
-      formData.append('logo', file)
+      formData.append("logo", file)
       try {
         const { data } = await authentication.api.put(
           `/users/current/logo`,
           formData,
           {
             headers: {
-              'Content-Type': 'multipart/form-data'
-            }
-          }
+              "Content-Type": "multipart/form-data",
+            },
+          },
         )
         setUser((oldUser) => {
           return {
             ...oldUser,
-            logo: data.user.logo
+            logo: data.user.logo,
           }
         })
-        setFetchState('idle')
+        setFetchState("idle")
       } catch (error) {
-        setFetchState('error')
-        setMessage('errors:server-error')
+        setFetchState("error")
+        setMessage("errors:server-error")
       }
     }
   }
 
   const handleSignout = async (): Promise<void> => {
-    setFetchState('loading')
+    setFetchState("loading")
     await authentication.signoutServerSide()
   }
 
   const handleSignoutAllDevices = async (): Promise<void> => {
-    setFetchState('loading')
+    setFetchState("loading")
     await authentication.signoutAllDevicesServerSide()
   }
 
   const handleDeletionProvider = (
-    provider: ProviderOAuth
+    provider: ProviderOAuth,
   ): (() => Promise<void>) => {
     return async () => {
       try {
-        setFetchState('loading')
+        setFetchState("loading")
         await authentication.api.delete(`/users/oauth2/${provider}`)
         setUser((oldUser) => {
           return {
             ...oldUser,
             strategies: oldUser.strategies.filter((strategy) => {
               return strategy !== provider
-            })
+            }),
           }
         })
-        setMessage('application:success-deleted-provider')
+        setMessage("application:success-deleted-provider")
       } catch (error) {
-        setFetchState('error')
-        setMessage('errors:server-error')
+        setFetchState("error")
+        setMessage("errors:server-error")
       }
     }
   }
 
   const handleAddProvider = (
-    provider: ProviderOAuth
+    provider: ProviderOAuth,
   ): (() => Promise<void>) => {
     return async () => {
-      const redirect = window.location.href.replace(location.search, '')
+      const redirect = window.location.href.replace(location.search, "")
       const { data: url } = await authentication.api.get(
-        `/users/oauth2/${provider.toLowerCase()}/add-strategy?redirectURI=${redirect}`
+        `/users/oauth2/${provider.toLowerCase()}/add-strategy?redirectURI=${redirect}`,
       )
       window.location.href = url
     }
@@ -225,116 +225,116 @@ export const UserSettings: React.FC = () => {
   return (
     <Form
       onSubmit={handleUseForm(onSubmit)}
-      className='my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]'
+      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 z-50 h-full w-full'>
-              <button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
+      <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 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 h-full w-full cursor-pointer opacity-0'
+                  type="file"
+                  className="absolute h-full w-full cursor-pointer opacity-0"
                   onChange={handleFileChange}
                 />
-                <PhotographIcon color='white' className='h-8 w-8' />
+                <PhotographIcon color="white" className="h-8 w-8" />
               </button>
             </div>
-            <div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
+            <div className="flex items-center justify-center rounded-full bg-black shadow-xl">
               <Image
                 quality={100}
-                className='rounded-full opacity-50'
+                className="rounded-full opacity-50"
                 src={
                   user.logo != null
                     ? user.logo
-                    : '/images/data/user-default.png'
+                    : "/images/data/user-default.png"
                 }
-                alt='Profil Picture'
-                draggable='false'
+                alt="Profil Picture"
+                draggable="false"
                 height={125}
                 width={125}
               />
             </div>
           </div>
-          <div className='mx-12 flex flex-col'>
+          <div className="mx-12 flex flex-col">
             <Input
-              name='name'
-              label={t('common:name')}
-              placeholder={t('common:name')}
-              className='!mt-0'
+              name="name"
+              label={t("common:name")}
+              placeholder={t("common:name")}
+              className="!mt-0"
               onChange={onChange}
-              value={inputValues.name ?? ''}
+              value={inputValues.name ?? ""}
               error={getFirstErrorTranslation(errors.name)}
             />
             <Input
-              name='status'
-              label={t('application:status')}
-              placeholder={t('application:status')}
-              className='!mt-4'
+              name="status"
+              label={t("application:status")}
+              placeholder={t("application:status")}
+              className="!mt-4"
               onChange={onChange}
-              value={inputValues.status ?? ''}
+              value={inputValues.status ?? ""}
               error={getFirstErrorTranslation(errors.status)}
             />
           </div>
         </div>
       </div>
-      <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'>
+      <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'
+            name="email"
+            label="Email"
+            placeholder="Email"
             onChange={onChange}
-            value={inputValues.email ?? ''}
+            value={inputValues.email ?? ""}
             error={getFirstErrorTranslation(errors.email)}
           />
           <Checkbox
-            name='isPublicEmail'
-            label={t('application:label-checkbox-email')}
-            id='checkbox-email-visibility'
+            name="isPublicEmail"
+            label={t("application:label-checkbox-email")}
+            id="checkbox-email-visibility"
             onChange={onChangeCheckbox}
             checked={inputValues.isPublicEmail}
           />
           <Input
-            name='website'
-            label={t('application:website')}
-            placeholder={t('application:website')}
+            name="website"
+            label={t("application:website")}
+            placeholder={t("application:website")}
             onChange={onChange}
-            value={inputValues.website ?? ''}
+            value={inputValues.website ?? ""}
             error={getFirstErrorTranslation(errors.website)}
           />
           <Textarea
-            name='biography'
-            label={t('application:biography')}
-            placeholder={t('application:biography')}
-            id='textarea-biography'
+            name="biography"
+            label={t("application:biography")}
+            placeholder={t("application:biography")}
+            id="textarea-biography"
             onChange={onChange}
-            value={inputValues.biography ?? ''}
+            value={inputValues.biography ?? ""}
           />
         </div>
-        <div className='flex h-full w-4/5 flex-col items-center justify-between pr-0 sm:w-[415px] lg:pl-12'>
-          <div className='flex w-full items-center pt-10 lg:pt-0'>
-            <Language className='!top-12' />
-            <div className='ml-auto flex'>
+        <div className="flex h-full w-4/5 flex-col items-center justify-between pr-0 sm:w-[415px] lg:pl-12">
+          <div className="flex w-full items-center pt-10 lg:pt-0">
+            <Language className="!top-12" />
+            <div className="ml-auto flex">
               <SwitchTheme />
               <Link
                 href={`/application/users/${user.id}`}
-                className='group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800'
-                title='Preview Public Profile'
+                className="group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800"
+                title="Preview Public Profile"
               >
                 <EyeIcon
                   height={20}
-                  className='opacity-50 transition-opacity group-hover:opacity-100'
+                  className="opacity-50 transition-opacity group-hover:opacity-100"
                 />
               </Link>
             </div>
           </div>
 
-          <div className='mt-14 flex w-full flex-col gap-4'>
+          <div className="mt-14 flex w-full flex-col gap-4">
             {!hasAllProviders ? (
-              <div className='flex w-full flex-col gap-4'>
-                <h3 className='text-center'>
-                  {t('application:signin-with-an-account')}
+              <div className="flex w-full flex-col gap-4">
+                <h3 className="text-center">
+                  {t("application:signin-with-an-account")}
                 </h3>
                 {providers.map((provider, index) => {
                   if (!user.strategies.includes(provider)) {
@@ -342,7 +342,7 @@ export const UserSettings: React.FC = () => {
                       <SocialMediaButton
                         key={index}
                         socialMedia={provider}
-                        className='w-full justify-center'
+                        className="w-full justify-center"
                         onClick={handleAddProvider(provider)}
                       />
                     )
@@ -352,9 +352,9 @@ export const UserSettings: React.FC = () => {
               </div>
             ) : null}
             {user.strategies.length !== 1 && (
-              <div className='mt-4 flex w-full flex-col gap-4'>
-                <h3 className='text-center'>
-                  {t('application:signout-with-an-account')}
+              <div className="mt-4 flex w-full flex-col gap-4">
+                <h3 className="text-center">
+                  {t("application:signout-with-an-account")}
                 </h3>
                 {providers.map((provider, index) => {
                   if (user.strategies.includes(provider)) {
@@ -362,7 +362,7 @@ export const UserSettings: React.FC = () => {
                       <SocialMediaButton
                         key={index}
                         socialMedia={provider}
-                        className='w-full justify-center'
+                        className="w-full justify-center"
                         onClick={handleDeletionProvider(provider)}
                       />
                     )
@@ -375,16 +375,16 @@ export const UserSettings: React.FC = () => {
         </div>
       </div>
 
-      <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
-        <div className='space-x-6'>
-          <Button type='submit'>{t('application:save')}</Button>
-          <Button type='button' color='red' onClick={handleSignout}>
-            {t('application:signout')}
+      <div className="mt-12 flex flex-col items-center justify-center sm:w-fit">
+        <div className="space-x-6">
+          <Button type="submit">{t("application:save")}</Button>
+          <Button type="button" color="red" onClick={handleSignout}>
+            {t("application:signout")}
           </Button>
         </div>
-        <div className='mt-4'>
-          <Button type='button' color='red' onClick={handleSignoutAllDevices}>
-            {t('application:signout-all-devices')}
+        <div className="mt-4">
+          <Button type="button" color="red" onClick={handleSignoutAllDevices}>
+            {t("application:signout-all-devices")}
           </Button>
         </div>
         <FormState

components/Application/UserSettings/index.ts

@@ -1 +1 @@
-export * from './UserSettings'
+export * from "./UserSettings"

components/Application/index.ts

@@ -1 +1 @@
-export * from './Application'
+export * from "./Application"

components/Authentication/Authentication.tsx

@@ -1,26 +1,26 @@
-import { useMemo } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import useTranslation from 'next-translate/useTranslation'
-import { useTheme } from 'next-themes'
-import axios from 'axios'
-import { useForm } from 'react-component-form'
-import type { HandleUseFormCallback } from 'react-component-form'
+import { useMemo } from "react"
+import { useRouter } from "next/router"
+import Link from "next/link"
+import useTranslation from "next-translate/useTranslation"
+import { useTheme } from "next-themes"
+import axios from "axios"
+import { useForm } from "react-component-form"
+import type { HandleUseFormCallback } from "react-component-form"
 
-import { Main } from '../design/Main'
-import { Input } from '../design/Input'
-import { Button } from '../design/Button'
-import { FormState } from '../design/FormState'
-import { AuthenticationForm } from '.'
-import { userSchema } from '../../models/User'
-import { api } from '../../tools/api'
-import type { Tokens } from '../../tools/authentication'
-import { Authentication as AuthenticationClass } from '../../tools/authentication'
-import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
-import { useFormTranslation } from '../../hooks/useFormTranslation'
+import { Main } from "../design/Main"
+import { Input } from "../design/Input"
+import { Button } from "../design/Button"
+import { FormState } from "../design/FormState"
+import { AuthenticationForm } from "."
+import { userSchema } from "../../models/User"
+import { api } from "../../tools/api"
+import type { Tokens } from "../../tools/authentication"
+import { Authentication as AuthenticationClass } from "../../tools/authentication"
+import { AuthenticationSocialMedia } from "./AuthenticationSocialMedia"
+import { useFormTranslation } from "../../hooks/useFormTranslation"
 
 export interface AuthenticationProps {
-  mode: 'signup' | 'signin'
+  mode: "signup" | "signin"
 }
 
 export const Authentication: React.FC<AuthenticationProps> = (props) => {
@@ -32,9 +32,9 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
 
   const schema = useMemo(() => {
     return {
-      ...(mode === 'signup' && { name: userSchema.name }),
+      ...(mode === "signup" && { name: userSchema.name }),
       email: userSchema.email,
-      password: userSchema.password
+      password: userSchema.password,
     }
   }, [mode])
 
@@ -43,55 +43,55 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
 
   const onSubmit: HandleUseFormCallback<typeof schema> = async (
     formData,
-    formElement
+    formElement,
   ) => {
-    if (mode === 'signup') {
+    if (mode === "signup") {
       try {
         await api.post(
           `/users/signup?redirectURI=${window.location.origin}/authentication/signin`,
-          { ...formData, language: lang, theme }
+          { ...formData, language: lang, theme },
         )
         formElement.reset()
         return {
-          type: 'success',
-          message: 'authentication:success-signup'
+          type: "success",
+          message: "authentication:success-signup",
         }
       } catch (error) {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
           const message = error.response.data.message as string
-          if (message.endsWith('already taken.')) {
+          if (message.endsWith("already taken.")) {
             return {
-              type: 'error',
-              message: 'authentication:already-used'
+              type: "error",
+              message: "authentication:already-used",
             }
           }
           return {
-            type: 'error',
-            message: 'errors:server-error'
+            type: "error",
+            message: "errors:server-error",
           }
         }
         return {
-          type: 'error',
-          message: 'errors:server-error'
+          type: "error",
+          message: "errors:server-error",
         }
       }
     } else {
       try {
-        const { data } = await api.post<Tokens>('/users/signin', formData)
+        const { data } = await api.post<Tokens>("/users/signin", formData)
         const authentication = new AuthenticationClass(data, true)
         authentication.signin()
-        await router.push('/application')
+        await router.push("/application")
         return null
       } catch (error) {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
           return {
-            type: 'error',
-            message: 'authentication:wrong-credentials'
+            type: "error",
+            message: "authentication:wrong-credentials",
           }
         }
         return {
-          type: 'error',
-          message: 'errors:server-error'
+          type: "error",
+          message: "errors:server-error",
         }
       }
     }
@@ -100,53 +100,53 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
   return (
     <Main>
       <AuthenticationSocialMedia />
-      <div className='pt-8 text-center font-paragraph text-lg'>
-        {t('authentication:or')}
+      <div className="pt-8 text-center font-paragraph text-lg">
+        {t("authentication:or")}
       </div>
       <AuthenticationForm onSubmit={handleUseForm(onSubmit)}>
-        {mode === 'signup' && (
+        {mode === "signup" && (
           <Input
-            type='text'
-            placeholder={t('common:name')}
-            name='name'
-            label={t('common:name')}
+            type="text"
+            placeholder={t("common:name")}
+            name="name"
+            label={t("common:name")}
             error={getFirstErrorTranslation(errors.name)}
           />
         )}
         <Input
-          type='email'
-          placeholder='Email'
-          name='email'
-          label='Email'
+          type="email"
+          placeholder="Email"
+          name="email"
+          label="Email"
           error={getFirstErrorTranslation(errors.email)}
         />
         <Input
-          type='password'
-          placeholder={t('authentication:password')}
-          name='password'
-          label={t('authentication:password')}
-          showForgotPassword={mode === 'signin'}
+          type="password"
+          placeholder={t("authentication:password")}
+          name="password"
+          label={t("authentication:password")}
+          showForgotPassword={mode === "signin"}
           error={getFirstErrorTranslation(errors.password)}
         />
-        <Button data-cy='submit' className='mt-6 w-full' type='submit'>
-          {t('authentication: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 hover:underline dark:text-green-400'>
+        <p className="mt-3 font-headline text-sm text-green-800 hover:underline dark:text-green-400">
           <Link
             href={
-              mode === 'signup'
-                ? '/authentication/signin'
-                : '/authentication/signup'
+              mode === "signup"
+                ? "/authentication/signin"
+                : "/authentication/signup"
             }
           >
-            {mode === 'signup'
-              ? t('authentication:already-have-an-account')
-              : t('authentication:dont-have-an-account')}
+            {mode === "signup"
+              ? t("authentication:already-have-an-account")
+              : t("authentication:dont-have-an-account")}
           </Link>
         </p>
       </AuthenticationForm>
       <FormState
-        id='message'
+        id="message"
         state={fetchState}
         message={message != null ? t(message) : undefined}
       />

components/Authentication/AuthenticationForm.tsx

@@ -1,13 +1,13 @@
-import classNames from 'clsx'
-import type { FormProps } from 'react-component-form'
-import { Form } from 'react-component-form'
+import classNames from "clsx"
+import type { FormProps } from "react-component-form"
+import { Form } from "react-component-form"
 
 export const AuthenticationForm: React.FC<FormProps> = (props) => {
   const { className, children, ...rest } = props
 
   return (
     <Form
-      className={classNames('w-4/6 max-w-xs', className)}
+      className={classNames("w-4/6 max-w-xs", className)}
       noValidate
       {...rest}
     >

components/Authentication/AuthenticationSocialMedia.tsx

@@ -1,22 +1,22 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
+import { useEffect } from "react"
+import { useRouter } from "next/router"
 
-import { api } from '../../tools/api'
-import { Authentication, isTokens } from '../../tools/authentication'
-import type { SocialMedia } from '../design/SocialMediaButton'
-import { SocialMediaButton } from '../design/SocialMediaButton'
-import { providers } from '../../models/OAuth'
+import { api } from "../../tools/api"
+import { Authentication, isTokens } from "../../tools/authentication"
+import type { SocialMedia } from "../design/SocialMediaButton"
+import { SocialMediaButton } from "../design/SocialMediaButton"
+import { providers } from "../../models/OAuth"
 
 export const AuthenticationSocialMedia: React.FC = () => {
   const router = useRouter()
 
   const handleAuthentication = (
-    socialMedia: SocialMedia
+    socialMedia: SocialMedia,
   ): (() => Promise<void>) => {
     return async () => {
-      const redirect = window.location.href.replace(location.search, '')
+      const redirect = window.location.href.replace(location.search, "")
       const { data: url } = await api.get(
-        `/users/oauth2/${socialMedia.toLowerCase()}/signin?redirectURI=${redirect}`
+        `/users/oauth2/${socialMedia.toLowerCase()}/signin?redirectURI=${redirect}`,
       )
       window.location.href = url
     }
@@ -27,13 +27,13 @@ export const AuthenticationSocialMedia: React.FC = () => {
     if (isTokens(data)) {
       const authentication = new Authentication(data, true)
       authentication.signin()
-      router.push('/application').catch(() => {})
+      router.push("/application").catch(() => {})
     }
   }, [router])
 
   return (
-    <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'>
+    <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">
         {providers.map((provider, index) => {
           return (
             <SocialMediaButton

components/Authentication/index.ts

@@ -1,2 +1,2 @@
-export * from './Authentication'
-export * from './AuthenticationForm'
+export * from "./Authentication"
+export * from "./AuthenticationForm"

components/Emoji/Emoji.tsx

@@ -1,6 +1,6 @@
-import { Emoji as EmojiMart } from 'emoji-mart'
+import { Emoji as EmojiMart } from "emoji-mart"
 
-import { EMOJI_SET } from './emojiPlugin'
+import { EMOJI_SET } from "./emojiPlugin"
 
 export interface EmojiProps {
   value: string

components/Emoji/EmojiPicker/EmojiPicker.tsx

@@ -1,13 +1,13 @@
-import 'emoji-mart/css/emoji-mart.css'
-import type { EmojiData } from 'emoji-mart'
-import { Picker } from 'emoji-mart'
-import { useTheme } from 'next-themes'
+import "emoji-mart/css/emoji-mart.css"
+import type { EmojiData } from "emoji-mart"
+import { Picker } from "emoji-mart"
+import { useTheme } from "next-themes"
 
-import { EMOJI_SET } from '../emojiPlugin'
+import { EMOJI_SET } from "../emojiPlugin"
 
 export type EmojiPickerOnClick = (
   emoji: EmojiData,
-  event: React.MouseEvent<HTMLElement, MouseEvent>
+  event: React.MouseEvent<HTMLElement, MouseEvent>,
 ) => void
 
 export interface EmojiPickerProps {
@@ -20,7 +20,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = (props) => {
   return (
     <Picker
       set={EMOJI_SET}
-      theme={theme as 'light' | 'dark' | 'auto'}
+      theme={theme as "light" | "dark" | "auto"}
       onClick={props.onClick}
       showPreview={false}
       showSkinTones={false}

components/Emoji/EmojiPicker/index.ts

@@ -1 +1 @@
-export * from './EmojiPicker'
+export * from "./EmojiPicker"

components/Emoji/emojiPlugin.ts

@@ -1,21 +1,21 @@
-import { visit } from 'unist-util-visit'
-import type { Plugin, Transformer } from 'unified'
-import type { Literal, Parent } from 'unist'
-import type { ElementContent } from 'hast'
-import type { EmojiSet } from 'emoji-mart'
+import { visit } from "unist-util-visit"
+import type { Plugin, Transformer } from "unified"
+import type { Literal, Parent } from "unist"
+import type { ElementContent } from "hast"
+import type { EmojiSet } from "emoji-mart"
 
-import { emojiRegex } from './isStringWithOnlyOneEmoji'
+import { emojiRegex } from "./isStringWithOnlyOneEmoji"
 
-export const EMOJI_SET: EmojiSet = 'twitter'
+export const EMOJI_SET: EmojiSet = "twitter"
 
 const extractText = (
   string: string,
   start: number,
-  end: number
+  end: number,
 ): ElementContent => {
   return {
-    type: 'text',
-    value: string.slice(start, end)
+    type: "text",
+    value: string.slice(start, end),
   }
 }
 
@@ -23,9 +23,9 @@ export const emojiPlugin: Plugin<[], Literal<string>> = () => {
   const transformer: Transformer<Literal<string>> = (tree) => {
     visit<Literal<string>, string>(
       tree,
-      'text',
+      "text",
       (node, position, parent: Parent<ElementContent> | null) => {
-        if (typeof node.value !== 'string') {
+        if (typeof node.value !== "string") {
           return
         }
         position = position ?? 0
@@ -38,15 +38,15 @@ export const emojiPlugin: Plugin<[], Literal<string>> = () => {
             definition.push(extractText(node.value, lastIndex, match.index))
           }
           definition.push({
-            type: 'element',
-            tagName: 'emoji',
+            type: "element",
+            tagName: "emoji",
             properties: { value },
-            children: []
+            children: [],
           })
           lastIndex = match.index + value.length
           if (lastIndex !== node.value.length) {
             definition.push(
-              extractText(node.value, lastIndex, node.value.length)
+              extractText(node.value, lastIndex, node.value.length),
             )
           }
           if (parent != null) {
@@ -56,7 +56,7 @@ export const emojiPlugin: Plugin<[], Literal<string>> = () => {
             parent.children = parent.children.concat(last)
           }
         }
-      }
+      },
     )
   }
   return transformer

components/Emoji/index.ts

@@ -1,4 +1,4 @@
-export * from './Emoji'
-export * from './EmojiPicker'
-export * from './emojiPlugin'
-export * from './isStringWithOnlyOneEmoji'
+export * from "./Emoji"
+export * from "./EmojiPicker"
+export * from "./emojiPlugin"
+export * from "./isStringWithOnlyOneEmoji"

components/ErrorPage.tsx

@@ -1,9 +1,9 @@
-import useTranslation from 'next-translate/useTranslation'
-import Link from 'next/link'
+import useTranslation from "next-translate/useTranslation"
+import Link from "next/link"
 
-import type { FooterProps } from './Footer'
-import { Footer } from './Footer'
-import { Header } from './Header'
+import type { FooterProps } from "./Footer"
+import { Footer } from "./Footer"
+import { Header } from "./Header"
 
 export interface ErrorPageProps extends FooterProps {
   statusCode: number
@@ -16,25 +16,25 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
 
   return (
     <>
-      <div className='flex h-screen flex-col pt-0'>
+      <div className="flex h-screen flex-col pt-0">
         <Header />
-        <main className='flex min-w-full flex-1 flex-col items-center justify-center'>
-          <h1 className='my-6 text-4xl font-semibold'>
-            {t('errors:error')}{' '}
+        <main className="flex min-w-full flex-1 flex-col items-center justify-center">
+          <h1 className="my-6 text-4xl font-semibold">
+            {t("errors:error")}{" "}
             <span
-              className='text-green-800 dark:text-green-400'
-              data-cy='status-code'
+              className="text-green-800 dark:text-green-400"
+              data-cy="status-code"
             >
               {statusCode}
             </span>
           </h1>
-          <p className='text-center text-lg'>
-            {message}{' '}
+          <p className="text-center text-lg">
+            {message}{" "}
             <Link
-              href='/'
-              className='text-green-800 hover:underline dark:text-green-400'
+              href="/"
+              className="text-green-800 hover:underline dark:text-green-400"
             >
-              {t('errors:return-to-home-page')}
+              {t("errors:return-to-home-page")}
             </Link>
           </p>
         </main>

components/Footer/Footer.tsx

@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import useTranslation from 'next-translate/useTranslation'
+import Link from "next/link"
+import useTranslation from "next-translate/useTranslation"
 
-import { API_VERSION } from '../../tools/api'
-import { VersionLink } from './VersionLink'
+import { API_VERSION } from "../../tools/api"
+import { VersionLink } from "./VersionLink"
 
 export interface FooterProps {
   version: string
@@ -13,19 +13,19 @@ export const Footer: React.FC<FooterProps> = (props) => {
   const { version } = props
 
   return (
-    <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'>
+    <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='/'
-          className='text-green-800 hover:underline dark:text-green-400'
+          href="/"
+          className="text-green-800 hover:underline dark:text-green-400"
         >
           Thream
-        </Link>{' '}
-        | {t('common:all-rights-reserved')}
+        </Link>{" "}
+        | {t("common:all-rights-reserved")}
       </p>
-      <p className='mt-1'>
-        <VersionLink repository='website' version={version} /> |{' '}
-        <VersionLink repository='api' version={API_VERSION} />
+      <p className="mt-1">
+        <VersionLink repository="website" version={version} /> |{" "}
+        <VersionLink repository="api" version={API_VERSION} />
       </p>
     </footer>
   )

components/Footer/VersionLink.tsx

@@ -1,6 +1,6 @@
 export interface VersionLinkProps {
   version: string
-  repository: 'website' | 'api'
+  repository: "website" | "api"
 }
 
 export const VersionLink: React.FC<VersionLinkProps> = (props) => {
@@ -9,10 +9,10 @@ export const VersionLink: React.FC<VersionLinkProps> = (props) => {
   return (
     <a
       data-cy={`version-link-${repository}`}
-      className='text-green-800 hover:underline 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'
+      target="_blank"
+      rel="noopener noreferrer"
     >
       {repository} v{version}
     </a>

components/Footer/index.ts

@@ -1 +1 @@
-export * from './Footer'
+export * from "./Footer"

components/Head.tsx

@@ -1,5 +1,5 @@
-import NextHead from 'next/head'
-import useTranslation from 'next-translate/useTranslation'
+import NextHead from "next/head"
+import useTranslation from "next-translate/useTranslation"
 
 interface HeadProps {
   title?: string
@@ -12,37 +12,37 @@ export const Head: React.FC<HeadProps> = (props) => {
   const { t } = useTranslation()
 
   const {
-    title = 'Thream',
-    image = 'https://thream.theoludwig.fr/images/icon-128x128.png',
-    description = t('common:description'),
-    url = 'https://thream.theoludwig.fr/'
+    title = "Thream",
+    image = "https://thream.theoludwig.fr/images/icon-128x128.png",
+    description = t("common:description"),
+    url = "https://thream.theoludwig.fr/",
   } = props
 
   return (
     <NextHead>
       <title>{title}</title>
-      <link rel='icon' type='image/png' href={image} />
+      <link rel="icon" type="image/png" href={image} />
 
       {/* Meta Tag */}
-      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-      <meta name='description' content={description} />
-      <meta name='Language' content='fr-FR, en-US' />
-      <meta name='theme-color' content='#27B05E' />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta name="description" content={description} />
+      <meta name="Language" content="fr-FR, en-US" />
+      <meta name="theme-color" content="#27B05E" />
 
       {/* Open Graph Metadata */}
-      <meta property='og:title' content={title} />
-      <meta property='og:type' content='website' />
-      <meta property='og:url' content={url} />
-      <meta property='og:image' content={image} />
-      <meta property='og:description' content={description} />
-      <meta property='og:locale' content='fr-FR, en-US' />
-      <meta property='og:site_name' content={title} />
+      <meta property="og:title" content={title} />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={url} />
+      <meta property="og:image" content={image} />
+      <meta property="og:description" content={description} />
+      <meta property="og:locale" content="fr-FR, en-US" />
+      <meta property="og:site_name" content={title} />
 
       {/* Twitter card Metadata */}
-      <meta name='twitter:card' content='summary' />
-      <meta name='twitter:description' content={description} />
-      <meta name='twitter:title' content={title} />
-      <meta name='twitter:image' content={image} />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:image" content={image} />
     </NextHead>
   )
 }

components/Header/Header.tsx

@@ -1,29 +1,29 @@
-import Link from 'next/link'
-import Image from 'next/image'
+import Link from "next/link"
+import Image from "next/image"
 
-import { Language } from './Language'
-import { SwitchTheme } from './SwitchTheme'
+import { Language } from "./Language"
+import { SwitchTheme } from "./SwitchTheme"
 
 export const Header: React.FC = () => {
   return (
-    <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='/'>
-          <div className='flex items-center justify-center'>
+    <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="/">
+          <div className="flex items-center justify-center">
             <Image
               priority
               quality={100}
               width={60}
               height={60}
-              src='/images/Thream.png'
-              alt='Thream'
+              src="/images/Thream.png"
+              alt="Thream"
             />
-            <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
+            <span className="ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block">
               Thream
             </span>
           </div>
         </Link>
-        <div className='flex justify-between'>
+        <div className="flex justify-between">
           <Language />
           <SwitchTheme />
         </div>

components/Header/Language/Arrow.tsx

@@ -1,15 +1,15 @@
 export const Arrow: React.FC = () => {
   return (
     <svg
-      width='12'
-      height='8'
-      viewBox='0 0 12 8'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
+      width="12"
+      height="8"
+      viewBox="0 0 12 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        className='fill-current text-black dark:text-white'
-        d='M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z'
+        className="fill-current text-black dark:text-white"
+        d="M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z"
       />
     </svg>
   )

components/Header/Language/Language.tsx

@@ -1,12 +1,12 @@
-import { useCallback, useState, useRef } from 'react'
-import useTranslation from 'next-translate/useTranslation'
-import setLanguage from 'next-translate/setLanguage'
-import classNames from 'clsx'
+import { useCallback, useState, useRef } from "react"
+import useTranslation from "next-translate/useTranslation"
+import setLanguage from "next-translate/setLanguage"
+import classNames from "clsx"
 
-import i18n from '../../../i18n.json'
-import { Arrow } from './Arrow'
-import { LanguageFlag } from './LanguageFlag'
-import { useClickOutsideAlerter } from '../../../hooks/useClickOutsideAlerter'
+import i18n from "../../../i18n.json"
+import { Arrow } from "./Arrow"
+import { LanguageFlag } from "./LanguageFlag"
+import { useClickOutsideAlerter } from "../../../hooks/useClickOutsideAlerter"
 
 export interface LanguageProps {
   className?: string
@@ -35,12 +35,12 @@ export const Language: React.FC<LanguageProps> = (props) => {
 
   return (
     <div
-      className='relative flex cursor-pointer flex-col items-center justify-center'
+      className="relative flex cursor-pointer flex-col items-center justify-center"
       ref={languageClickRef}
     >
       <div
-        data-cy='language-click'
-        className='mr-5 flex items-center'
+        data-cy="language-click"
+        className="mr-5 flex items-center"
         onClick={handleHiddenMenu}
       >
         <LanguageFlag language={currentLanguage} />
@@ -48,11 +48,11 @@ export const Language: React.FC<LanguageProps> = (props) => {
       </div>
 
       <ul
-        data-cy='languages-list'
+        data-cy="languages-list"
         className={classNames(
           className,
-          'absolute top-16 z-10 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag',
-          { hidden: hiddenMenu }
+          "absolute top-16 z-10 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag",
+          { hidden: hiddenMenu },
         )}
       >
         {i18n.locales.map((language, index) => {
@@ -62,7 +62,7 @@ export const Language: React.FC<LanguageProps> = (props) => {
           return (
             <li
               key={index}
-              className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
+              className="flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20"
               onClick={async () => {
                 return await handleLanguage(language)
               }}

components/Header/Language/LanguageFlag.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image"
 
 export interface LanguageFlagProps {
   language: string
@@ -16,7 +16,7 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
         src={`/images/svg/languages/${language}.svg`}
         alt={language}
       />
-      <p data-cy='language-flag-text' className='mx-2 text-base'>
+      <p data-cy="language-flag-text" className="mx-2 text-base">
         {language.toUpperCase()}
       </p>
     </>

components/Header/Language/index.ts

@@ -1 +1 @@
-export * from './Language'
+export * from "./Language"

components/Header/SwitchTheme.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react'
-import classNames from 'clsx'
-import { useTheme } from 'next-themes'
+import { useEffect, useState } from "react"
+import classNames from "clsx"
+import { useTheme } from "next-themes"
 
 export const SwitchTheme: React.FC = () => {
   const [mounted, setMounted] = useState(false)
@@ -15,61 +15,61 @@ export const SwitchTheme: React.FC = () => {
   }
 
   const handleClick = (): void => {
-    setTheme(theme === 'dark' ? 'light' : 'dark')
+    setTheme(theme === "dark" ? "light" : "dark")
   }
 
   return (
     <div
-      className='flex items-center'
-      data-cy='switch-theme-click'
+      className="flex items-center"
+      data-cy="switch-theme-click"
       onClick={handleClick}
     >
-      <div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
-        <div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
+      <div className="relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0">
+        <div className="h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out">
           <div
-            data-cy='switch-theme-dark'
+            data-cy="switch-theme-dark"
             className={classNames(
-              'absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              "absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out",
               {
-                'opacity-100': theme === 'dark',
-                'opacity-0': theme === 'light'
-              }
+                "opacity-100": theme === "dark",
+                "opacity-0": theme === "light",
+              },
             )}
           >
-            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+            <span className="relative flex h-[10px] w-[10px] items-center justify-center">
               🌜
             </span>
           </div>
           <div
-            data-cy='switch-theme-light'
+            data-cy="switch-theme-light"
             className={classNames(
-              'absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]',
+              "absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]",
               {
-                'opacity-100': theme === 'light',
-                'opacity-0': theme === 'dark'
-              }
+                "opacity-100": theme === "light",
+                "opacity-0": theme === "dark",
+              },
             )}
           >
-            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+            <span className="relative flex h-[10px] w-[10px] items-center justify-center">
               🌞
             </span>
           </div>
         </div>
         <div
           className={classNames(
-            'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
+            "absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out",
             {
-              'left-[27px]': theme === 'dark',
-              'left-0': theme === 'light'
-            }
+              "left-[27px]": theme === "dark",
+              "left-0": theme === "light",
+            },
           )}
-          style={{ border: '1px solid #4d4d4d' }}
+          style={{ border: "1px solid #4d4d4d" }}
         />
         <input
-          data-cy='switch-theme-input'
-          type='checkbox'
-          aria-label='Dark mode toggle'
-          className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
+          data-cy="switch-theme-input"
+          type="checkbox"
+          aria-label="Dark mode toggle"
+          className="absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0"
           defaultChecked
         />
       </div>

components/Header/index.ts

@@ -1 +1 @@
-export * from './Header'
+export * from "./Header"

components/design/Button/Button.tsx

@@ -1,18 +1,18 @@
-import { forwardRef } from 'react'
-import classNames from 'clsx'
+import { forwardRef } from "react"
+import classNames from "clsx"
 
 const className =
-  'py-2 px-6 font-paragraph rounded-lg bg-transparent border  hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black'
+  "py-2 px-6 font-paragraph rounded-lg bg-transparent border  hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black"
 
 const classNameGreen =
-  'border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 focus:bg-green-800 dark:focus:bg-green-400 dark:hover:bg-green-400'
+  "border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 focus:bg-green-800 dark:focus:bg-green-400 dark:hover:bg-green-400"
 
 const classNameRed =
-  'border-red-800 dark:border-red-400 text-red-800 dark:text-red-400 hover:bg-red-800 focus:bg-red-800 dark:focus:bg-red-400 dark:hover:bg-red-400'
+  "border-red-800 dark:border-red-400 text-red-800 dark:text-red-400 hover:bg-red-800 focus:bg-red-800 dark:focus:bg-red-400 dark:hover:bg-red-400"
 
-export type ButtonColor = 'green' | 'red'
+export type ButtonColor = "green" | "red"
 
-export interface ButtonLinkProps extends React.ComponentPropsWithRef<'a'> {
+export interface ButtonLinkProps extends React.ComponentPropsWithRef<"a"> {
   color?: ButtonColor
 }
 
@@ -21,7 +21,7 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
     const {
       children,
       className: givenClassName,
-      color = 'green',
+      color = "green",
       ...rest
     } = props
 
@@ -31,22 +31,22 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
         className={classNames(
           className,
           {
-            [classNameGreen]: color === 'green',
-            [classNameRed]: color === 'red'
+            [classNameGreen]: color === "green",
+            [classNameRed]: color === "red",
           },
-          givenClassName
+          givenClassName,
         )}
         {...rest}
       >
         {children}
       </a>
     )
-  }
+  },
 )
 
-ButtonLink.displayName = 'ButtonLink'
+ButtonLink.displayName = "ButtonLink"
 
-export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
   color?: ButtonColor
 }
 
@@ -54,7 +54,7 @@ export const Button: React.FC<ButtonProps> = (props) => {
   const {
     children,
     className: givenClassName,
-    color = 'green',
+    color = "green",
     ...rest
   } = props
 
@@ -63,10 +63,10 @@ export const Button: React.FC<ButtonProps> = (props) => {
       className={classNames(
         className,
         {
-          [classNameGreen]: color === 'green',
-          [classNameRed]: color === 'red'
+          [classNameGreen]: color === "green",
+          [classNameRed]: color === "red",
         },
-        givenClassName
+        givenClassName,
       )}
       {...rest}
     >

components/design/Button/index.ts

@@ -1 +1 @@
-export * from './Button'
+export * from "./Button"

components/design/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
-import classNames from 'clsx'
+import classNames from "clsx"
 
-export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
+export interface CheckboxProps extends React.ComponentPropsWithRef<"input"> {
   className?: string
   label: string
 }
@@ -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('mt-4 flex items-center', className)}>
+    <div className={classNames("mt-4 flex items-center", className)}>
       <input
         {...props}
-        type='checkbox'
+        type="checkbox"
         id={id}
-        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:left-[59%] before:top-[50%] 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:left-[36%] after:top-[62.5%] 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'
+        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:left-[59%] before:top-[50%] 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:left-[36%] after:top-[62.5%] 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='duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 '
+        className="duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 "
         htmlFor={id}
       >
         {label}

components/design/Checkbox/index.ts

@@ -1 +1 @@
-export * from './Checkbox'
+export * from "./Checkbox"

components/design/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 export const Divider: React.FC = () => {
   return (
-    <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 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/Divider/index.ts

@@ -1 +1 @@
-export * from './Divider'
+export * from "./Divider"

components/design/FormState/FormState.tsx

@@ -1,10 +1,10 @@
-import classNames from 'clsx'
-import useTranslation from 'next-translate/useTranslation'
-import type { FetchState as FormStateType } from 'react-component-form'
+import classNames from "clsx"
+import useTranslation from "next-translate/useTranslation"
+import type { FetchState as FormStateType } from "react-component-form"
 
-import { Loader } from '../Loader'
+import { Loader } from "../Loader"
 
-export interface FormStateProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface FormStateProps extends React.ComponentPropsWithoutRef<"div"> {
   state: FormStateType
   message?: string | null
   id?: string
@@ -14,15 +14,15 @@ export const FormState: React.FC<FormStateProps> = (props) => {
   const { state, message, id, ...rest } = props
   const { t } = useTranslation()
 
-  if (state === 'loading') {
+  if (state === "loading") {
     return (
-      <div data-cy='loader' className='mt-8 flex justify-center'>
+      <div data-cy="loader" className="mt-8 flex justify-center">
         <Loader />
       </div>
     )
   }
 
-  if (state === 'idle' || message == null) {
+  if (state === "idle" || message == null) {
     return null
   }
 
@@ -31,15 +31,15 @@ export const FormState: React.FC<FormStateProps> = (props) => {
       {...rest}
       className={classNames(
         props.className,
-        'mt-6 flex max-w-xl items-center text-center font-medium',
+        "mt-6 flex max-w-xl items-center text-center font-medium",
         {
-          'text-red-800 dark:text-red-400': state === 'error',
-          'text-green-800 dark:text-green-400': state === 'success'
-        }
+          "text-red-800 dark:text-red-400": state === "error",
+          "text-green-800 dark:text-green-400": state === "success",
+        },
       )}
     >
-      <div className='inline bg-cover font-headline' />
-      <span id={id} className='pl-2'>
+      <div className="inline bg-cover font-headline" />
+      <span id={id} className="pl-2">
         <b>{t(`errors:${state}`)}:</b> {message}
       </span>
     </div>

components/design/FormState/index.ts

@@ -1 +1 @@
-export * from './FormState'
+export * from "./FormState"

components/design/IconButton/IconButton.tsx

@@ -1,7 +1,7 @@
-import classNames from 'clsx'
+import classNames from "clsx"
 
 export interface IconButtonProps
-  extends React.ComponentPropsWithoutRef<'button'> {}
+  extends React.ComponentPropsWithoutRef<"button"> {}
 
 export const IconButton: React.FC<IconButtonProps> = (props) => {
   const { children, className, ...rest } = props
@@ -9,8 +9,8 @@ export const IconButton: React.FC<IconButtonProps> = (props) => {
   return (
     <button
       className={classNames(
-        'flex items-center justify-center text-center text-green-800 hover:animate-pulse focus:animate-pulse focus:outline-none dark:text-green-400',
-        className
+        "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/IconButton/index.ts

@@ -1 +1 @@
-export * from './IconButton'
+export * from "./IconButton"

components/design/IconLink/IconLink.tsx

@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import classNames from 'clsx'
+import Link from "next/link"
+import classNames from "clsx"
 
 export interface IconLinkProps {
   selected?: boolean
@@ -9,27 +9,27 @@ export interface IconLinkProps {
 }
 
 export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
-  props
+  props,
 ) => {
   const { children, selected, href, title, className } = props
 
   return (
     <Link
       href={href}
-      className='group relative flex w-full justify-center'
+      className="group relative flex w-full justify-center"
       title={title}
     >
       <div
-        className={classNames('group flex w-full justify-center', className)}
+        className={classNames("group flex w-full justify-center", className)}
       >
         {children}
-        <div className='absolute left-0 flex h-12 w-3 items-center'>
+        <div className="absolute left-0 flex h-12 w-3 items-center">
           <span
             className={classNames(
-              'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
+              "absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5",
               {
-                'h-full': selected
-              }
+                "h-full": selected,
+              },
             )}
           ></span>
         </div>

components/design/IconLink/index.ts

@@ -1 +1 @@
-export * from './IconLink'
+export * from "./IconLink"

components/design/Input/Input.tsx

@@ -1,11 +1,11 @@
-import { useState } from 'react'
-import Link from 'next/link'
-import useTranslation from 'next-translate/useTranslation'
-import classNames from 'clsx'
+import { useState } from "react"
+import Link from "next/link"
+import useTranslation from "next-translate/useTranslation"
+import classNames from "clsx"
 
-import { FormState } from '../FormState'
+import { FormState } from "../FormState"
 
-export interface InputProps extends React.ComponentPropsWithRef<'input'> {
+export interface InputProps extends React.ComponentPropsWithRef<"input"> {
   label: string
   error?: string | null
   showForgotPassword?: boolean
@@ -13,7 +13,7 @@ export interface InputProps extends React.ComponentPropsWithRef<'input'> {
 }
 
 export const getInputType = (inputType: string): string => {
-  return inputType === 'password' ? 'text' : 'password'
+  return inputType === "password" ? "text" : "password"
 }
 
 export const Input: React.FC<InputProps> = (props) => {
@@ -21,7 +21,7 @@ export const Input: React.FC<InputProps> = (props) => {
     label,
     name,
     className,
-    type = 'text',
+    type = "text",
     showForgotPassword = false,
     error,
     ...rest
@@ -35,43 +35,43 @@ export const Input: React.FC<InputProps> = (props) => {
   }
 
   return (
-    <div className='flex flex-col'>
-      <div className={classNames('mb-2 mt-6 flex justify-between', className)}>
-        <label className='pl-1' htmlFor={name}>
+    <div className="flex flex-col">
+      <div className={classNames("mb-2 mt-6 flex justify-between", className)}>
+        <label className="pl-1" htmlFor={name}>
           {label}
         </label>
-        {type === 'password' && showForgotPassword ? (
+        {type === "password" && showForgotPassword ? (
           <Link
-            href='/authentication/forgot-password'
-            className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
-            data-cy='forgot-password-link'
+            href="/authentication/forgot-password"
+            className="text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm"
+            data-cy="forgot-password-link"
           >
-            {t('authentication:forgot-password')}
+            {t("authentication:forgot-password")}
           </Link>
         ) : null}
       </div>
-      <div className='relative mt-0'>
+      <div className="relative mt-0">
         <input
-          data-cy={`input-${name ?? 'name'}`}
-          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'
+          data-cy={`input-${name ?? "name"}`}
+          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}
           type={inputType}
         />
-        {type === 'password' && (
+        {type === "password" && (
           <div
-            data-cy='password-eye'
+            data-cy="password-eye"
             onClick={handlePassword}
             style={{
-              backgroundImage: `url('/images/svg/icons/input/${inputType}.svg')`
+              backgroundImage: `url('/images/svg/icons/input/${inputType}.svg')`,
             }}
-            className='absolute right-4 top-3 z-10 h-5 w-5 cursor-pointer bg-[#f1f1f1] bg-cover'
+            className="absolute right-4 top-3 z-10 h-5 w-5 cursor-pointer bg-[#f1f1f1] bg-cover"
           />
         )}
         <FormState
-          id={`error-${name ?? 'input'}`}
-          state={error == null ? 'idle' : 'error'}
+          id={`error-${name ?? "input"}`}
+          state={error == null ? "idle" : "error"}
           message={error}
         />
       </div>

components/design/Input/index.ts

@@ -1 +1 @@
-export * from './Input'
+export * from "./Input"

components/design/Loader/Loader.tsx

@@ -1,4 +1,4 @@
-import styles from './Loader.module.css'
+import styles from "./Loader.module.css"
 
 export interface LoaderProps {
   width?: number
@@ -12,19 +12,19 @@ export const Loader: React.FC<LoaderProps> = (props) => {
   return (
     <div className={className}>
       <div
-        data-cy='progress-spinner'
-        className='relative mx-auto my-0 before:block before:pt-[100%] before:content-none'
+        data-cy="progress-spinner"
+        className="relative mx-auto my-0 before:block before:pt-[100%] before:content-none"
         style={{ width: `${width}px`, height: `${height}px` }}
       >
-        <svg className={styles['progressSpinnerSvg']} viewBox='25 25 50 50'>
+        <svg className={styles["progressSpinnerSvg"]} viewBox="25 25 50 50">
           <circle
-            className={styles['progressSpinnerCircle']}
-            cx='50'
-            cy='50'
-            r='20'
-            fill='none'
-            strokeWidth='2'
-            strokeMiterlimit='10'
+            className={styles["progressSpinnerCircle"]}
+            cx="50"
+            cy="50"
+            r="20"
+            fill="none"
+            strokeWidth="2"
+            strokeMiterlimit="10"
           />
         </svg>
       </div>

components/design/Loader/index.ts

@@ -1 +1 @@
-export * from './Loader'
+export * from "./Loader"