From 67a169910286674fa771a58ba5e4ac99776b5005 Mon Sep 17 00:00:00 2001
From: Divlo <contact@divlo.fr>
Date: Tue, 13 Dec 2022 22:31:32 +0100
Subject: [PATCH] chore: remove usage of `styled-jsx`

---
 .devcontainer/devcontainer.json               |   2 -
 .vscode/extensions.json                       |   2 -
 .../Application/UserProfile/UserProfile.tsx   | 156 +++++++++---------
 components/ErrorPage.tsx                      |  69 ++++----
 components/Header/SwitchTheme.tsx             |  78 +++++++++
 components/Header/SwitchTheme/SwitchTheme.tsx | 126 --------------
 components/Header/SwitchTheme/index.ts        |   1 -
 components/ScrollableBody.tsx                 |  20 ---
 components/design/Input/Input.tsx             |  94 +++++------
 components/design/Loader/Loader.module.css    |  39 +++++
 components/design/Loader/Loader.tsx           |  66 +-------
 .../SocialMediaButton.module.css              |  11 ++
 .../SocialMediaButton/SocialMediaButton.tsx   |  70 ++++----
 cypress.config.ts                             |   3 -
 pages/404.tsx                                 |  13 +-
 pages/500.tsx                                 |  10 +-
 pages/authentication/forgot-password.tsx      |   5 +-
 pages/authentication/reset-password.tsx       |   5 +-
 pages/authentication/signin.tsx               |   5 +-
 pages/authentication/signup.tsx               |   5 +-
 pages/index.tsx                               |   5 +-
 styles/global.css                             |   9 +
 tailwind.config.js                            |   5 +-
 23 files changed, 345 insertions(+), 454 deletions(-)
 create mode 100644 components/Header/SwitchTheme.tsx
 delete mode 100644 components/Header/SwitchTheme/SwitchTheme.tsx
 delete mode 100644 components/Header/SwitchTheme/index.ts
 delete mode 100644 components/ScrollableBody.tsx
 create mode 100644 components/design/Loader/Loader.module.css
 create mode 100644 components/design/SocialMediaButton/SocialMediaButton.module.css

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 24cd732..77a7bfd 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -10,8 +10,6 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
     "davidanson.vscode-markdownlint",
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 111dbb1..8aae002 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -3,8 +3,6 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
     "davidanson.vscode-markdownlint",
diff --git a/components/Application/UserProfile/UserProfile.tsx b/components/Application/UserProfile/UserProfile.tsx
index f7d470a..6b4a847 100644
--- a/components/Application/UserProfile/UserProfile.tsx
+++ b/components/Application/UserProfile/UserProfile.tsx
@@ -16,96 +16,88 @@ 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'>
-                  <Image
-                    quality={100}
-                    className='rounded-full'
-                    src={
-                      user.logo != null
-                        ? user.logo
-                        : '/images/data/user-default.png'
-                    }
-                    alt='Profil Picture'
-                    draggable='false'
-                    height={125}
-                    width={125}
-                  />
+    <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'
+                  src={
+                    user.logo != null
+                      ? user.logo
+                      : '/images/data/user-default.png'
+                  }
+                  alt='Profil Picture'
+                  draggable='false'
+                  height={125}
+                  width={125}
+                />
+              </div>
+              <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'
+                  >
+                    {user.name}
+                  </p>
+                  <p
+                    className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
+                    data-cy='user-createdAt'
+                  >
+                    {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
+                  </p>
                 </div>
-                <div className='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'
-                    >
-                      {user.name}
+                <div className='my-2 text-left'>
+                  {user.email != null && (
+                    <p className='font-bold'>
+                      Email:{' '}
+                      <a
+                        href={`mailto:${user.email}`}
+                        target='_blank'
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                        rel='noreferrer'
+                        data-cy='user-email'
+                      >
+                        {user.email}
+                      </a>
                     </p>
-                    <p
-                      className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
-                      data-cy='user-createdAt'
-                    >
-                      {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
+                  )}
+                  {user.website != null && (
+                    <p className='font-bold'>
+                      {t('application:website')}:{' '}
+                      <a
+                        target='_blank'
+                        rel='noreferrer'
+                        href={user.website}
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                      >
+                        {user.website}
+                      </a>
                     </p>
-                  </div>
-                  <div className='my-2 text-left'>
-                    {user.email != null && (
-                      <p className='font-bold'>
-                        Email:{' '}
-                        <a
-                          href={`mailto:${user.email}`}
-                          target='_blank'
-                          className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
-                          rel='noreferrer'
-                          data-cy='user-email'
-                        >
-                          {user.email}
-                        </a>
-                      </p>
-                    )}
-                    {user.website != null && (
-                      <p className='font-bold'>
-                        {t('application:website')}:{' '}
-                        <a
-                          target='_blank'
-                          rel='noreferrer'
-                          href={user.website}
-                          className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
-                        >
-                          {user.website}
-                        </a>
-                      </p>
-                    )}
-                    {user.status != null && (
-                      <p className='flex font-bold'>
-                        {t('application:status')}:{' '}
-                        <span className='ml-2 font-normal tracking-wide'>
-                          {user.status}
-                        </span>
-                      </p>
-                    )}
-                  </div>
+                  )}
+                  {user.status != null && (
+                    <p className='flex font-bold'>
+                      {t('application:status')}:{' '}
+                      <span className='ml-2 font-normal tracking-wide'>
+                        {user.status}
+                      </span>
+                    </p>
+                  )}
                 </div>
               </div>
             </div>
-            {user.biography != null && (
-              <div className='mt-7 text-center'>
-                <p>{user.biography}</p>
-              </div>
-            )}
           </div>
+          {user.biography != null && (
+            <div className='mt-7 text-center'>
+              <p>{user.biography}</p>
+            </div>
+          )}
         </div>
       </div>
-
-      <style jsx global>{`
-        #application-page-content {
-          overflow-x: hidden;
-        }
-      `}</style>
-    </>
+    </div>
   )
 }
diff --git a/components/ErrorPage.tsx b/components/ErrorPage.tsx
index e1c7ba6..107d24a 100644
--- a/components/ErrorPage.tsx
+++ b/components/ErrorPage.tsx
@@ -1,54 +1,45 @@
 import useTranslation from 'next-translate/useTranslation'
 import Link from 'next/link'
 
-export interface ErrorPageProps {
+import type { FooterProps } from './Footer'
+import { Footer } from './Footer'
+import { Header } from './Header'
+
+export interface ErrorPageProps extends FooterProps {
   statusCode: number
   message: string
 }
 
 export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
-  const { message, statusCode } = props
+  const { message, statusCode, version } = props
   const { t } = useTranslation()
 
   return (
     <>
-      <h1 className='my-6 text-4xl font-semibold'>
-        {t('errors:error')}{' '}
-        <span
-          className='text-green-800 dark:text-green-400'
-          data-cy='status-code'
-        >
-          {statusCode}
-        </span>
-      </h1>
-      <p className='text-center text-lg'>
-        {message}{' '}
-        <Link
-          href='/'
-          className='text-green-800 hover:underline dark:text-green-400'
-        >
-          {t('errors:return-to-home-page')}
-        </Link>
-      </p>
-
-      <style jsx global>
-        {`
-          main {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            min-width: 100vw;
-            flex: 1;
-          }
-          #__next {
-            display: flex;
-            flex-direction: column;
-            padding-top: 0;
-            height: 100vh;
-          }
-        `}
-      </style>
+      <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')}{' '}
+            <span
+              className='text-green-800 dark:text-green-400'
+              data-cy='status-code'
+            >
+              {statusCode}
+            </span>
+          </h1>
+          <p className='text-center text-lg'>
+            {message}{' '}
+            <Link
+              href='/'
+              className='text-green-800 hover:underline dark:text-green-400'
+            >
+              {t('errors:return-to-home-page')}
+            </Link>
+          </p>
+        </main>
+        <Footer version={version} />
+      </div>
     </>
   )
 }
diff --git a/components/Header/SwitchTheme.tsx b/components/Header/SwitchTheme.tsx
new file mode 100644
index 0000000..812c34a
--- /dev/null
+++ b/components/Header/SwitchTheme.tsx
@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react'
+import classNames from 'clsx'
+import { useTheme } from 'next-themes'
+
+export const SwitchTheme: React.FC = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  const handleClick = (): void => {
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+  }
+
+  return (
+    <div
+      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
+            data-cy='switch-theme-dark'
+            className={classNames(
+              'absolute top-0 bottom-0 left-[8px] mt-auto mb-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              {
+                'opacity-100': theme === 'dark',
+                'opacity-0': theme === 'light'
+              }
+            )}
+          >
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+              🌜
+            </span>
+          </div>
+          <div
+            data-cy='switch-theme-light'
+            className={classNames(
+              'absolute right-[10px] top-0 bottom-0 mt-auto mb-auto h-[10px] w-[10px] leading-[0]',
+              {
+                'opacity-100': theme === 'light',
+                'opacity-0': theme === 'dark'
+              }
+            )}
+          >
+            <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',
+            {
+              'left-[27px]': theme === 'dark',
+              'left-0': theme === 'light'
+            }
+          )}
+          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'
+          defaultChecked
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/components/Header/SwitchTheme/SwitchTheme.tsx b/components/Header/SwitchTheme/SwitchTheme.tsx
deleted file mode 100644
index 6a3ab61..0000000
--- a/components/Header/SwitchTheme/SwitchTheme.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes'
-
-export const SwitchTheme: React.FC = () => {
-  const [mounted, setMounted] = useState(false)
-  const { theme, setTheme } = useTheme()
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return null
-  }
-
-  const handleClick = (): void => {
-    setTheme(theme === 'dark' ? 'light' : 'dark')
-  }
-
-  return (
-    <>
-      <div
-        className='flex items-center'
-        data-cy='switch-theme-click'
-        onClick={handleClick}
-      >
-        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
-          <div className='toggle-track'>
-            <div
-              data-cy='switch-theme-dark'
-              className='toggle-track-check absolute'
-            >
-              <span className='toggle_Dark relative flex items-center justify-center'>
-                🌜
-              </span>
-            </div>
-            <div
-              data-cy='switch-theme-light'
-              className='toggle-track-x absolute'
-            >
-              <span className='toggle_Light relative flex items-center justify-center'>
-                🌞
-              </span>
-            </div>
-          </div>
-          <div className='toggle-thumb absolute' />
-          <input
-            data-cy='switch-theme-input'
-            type='checkbox'
-            aria-label='Dark mode toggle'
-            className='toggle-screenreader-only absolute overflow-hidden'
-            defaultChecked
-          />
-        </div>
-      </div>
-
-      <style jsx>
-        {`
-          .toggle-theme-button {
-            touch-action: pan-x;
-            border: 0;
-            padding: 0;
-            user-select: none;
-          }
-          .toggle-track {
-            width: 50px;
-            height: 24px;
-            padding: 0;
-            border-radius: 30px;
-            background-color: #4d4d4d;
-            transition: all 0.2s ease;
-            color: #fff;
-          }
-          .toggle-track-check {
-            width: 14px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            left: 8px;
-            opacity: ${theme === 'dark' ? 1 : 0};
-            transition: opacity 0.25s ease;
-          }
-          .toggle-track-x {
-            width: 10px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            right: 10px;
-            opacity: ${theme === 'dark' ? 0 : 1};
-          }
-          .toggle_Dark,
-          .toggle_Light {
-            height: 10px;
-            width: 10px;
-          }
-          .toggle-thumb {
-            left: ${theme === 'dark' ? '27px' : '0px'};
-            width: 22px;
-            height: 22px;
-            border: 1px solid #4d4d4d;
-            border-radius: 50%;
-            background-color: #fafafa;
-            box-sizing: border-box;
-            transition: all 0.25s ease;
-            top: 1px;
-            color: #fff;
-          }
-          .toggle-screenreader-only {
-            border: 0;
-            clip: rect(0 0 0 0);
-            height: 1px;
-            margin: -1px;
-            padding: 0;
-            width: 1px;
-          }
-        `}
-      </style>
-    </>
-  )
-}
diff --git a/components/Header/SwitchTheme/index.ts b/components/Header/SwitchTheme/index.ts
deleted file mode 100644
index abe4c2b..0000000
--- a/components/Header/SwitchTheme/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SwitchTheme'
diff --git a/components/ScrollableBody.tsx b/components/ScrollableBody.tsx
deleted file mode 100644
index a10e87d..0000000
--- a/components/ScrollableBody.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export const ScrollableBody: React.FC<React.PropsWithChildren<{}>> = (
-  props
-) => {
-  const { children } = props
-
-  return (
-    <>
-      {children}
-      <style jsx global>{`
-        body {
-          scrollbar-width: thin;
-          scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
-          z-index: 1000;
-          height: calc(100vh - 64px);
-          overflow-y: auto;
-        }
-      `}</style>
-    </>
-  )
-}
diff --git a/components/design/Input/Input.tsx b/components/design/Input/Input.tsx
index eeb7e97..a816752 100644
--- a/components/design/Input/Input.tsx
+++ b/components/design/Input/Input.tsx
@@ -35,60 +35,46 @@ export const Input: React.FC<InputProps> = (props) => {
   }
 
   return (
-    <>
-      <div className='flex flex-col'>
-        <div
-          className={classNames('mt-6 mb-2 flex justify-between', className)}
-        >
-          <label className='pl-1' htmlFor={name}>
-            {label}
-          </label>
-          {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'
-            >
-              {t('authentication:forgot-password')}
-            </Link>
-          ) : null}
-        </div>
-        <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'
-            {...rest}
-            id={name}
-            name={name}
-            type={inputType}
-          />
-          {type === 'password' && (
-            <div
-              data-cy='password-eye'
-              onClick={handlePassword}
-              className='password-eye absolute cursor-pointer bg-[#f1f1f1] bg-cover'
-            />
-          )}
-          <FormState
-            id={`error-${name ?? 'input'}`}
-            state={error == null ? 'idle' : 'error'}
-            message={error}
-          />
-        </div>
+    <div className='flex flex-col'>
+      <div className={classNames('mt-6 mb-2 flex justify-between', className)}>
+        <label className='pl-1' htmlFor={name}>
+          {label}
+        </label>
+        {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'
+          >
+            {t('authentication:forgot-password')}
+          </Link>
+        ) : null}
       </div>
-
-      <style jsx>
-        {`
-          .password-eye {
-            top: 12px;
-            right: 16px;
-            z-index: 1;
-            width: 20px;
-            height: 20px;
-            background-image: url('/images/svg/icons/input/${inputType}.svg');
-          }
-        `}
-      </style>
-    </>
+      <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'
+          {...rest}
+          id={name}
+          name={name}
+          type={inputType}
+        />
+        {type === 'password' && (
+          <div
+            data-cy='password-eye'
+            onClick={handlePassword}
+            style={{
+              backgroundImage: `url('/images/svg/icons/input/${inputType}.svg')`
+            }}
+            className='absolute top-3 right-4 z-10 h-5 w-5 cursor-pointer bg-[#f1f1f1] bg-cover'
+          />
+        )}
+        <FormState
+          id={`error-${name ?? 'input'}`}
+          state={error == null ? 'idle' : 'error'}
+          message={error}
+        />
+      </div>
+    </div>
   )
 }
diff --git a/components/design/Loader/Loader.module.css b/components/design/Loader/Loader.module.css
new file mode 100644
index 0000000..728d5ad
--- /dev/null
+++ b/components/design/Loader/Loader.module.css
@@ -0,0 +1,39 @@
+@keyframes progressSpinnerRotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes progressSpinnerDash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+
+.progressSpinnerSvg {
+  animation: progressSpinnerRotate 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.progressSpinnerCircle {
+  stroke-dasharray: 89, 200;
+  stroke-dashoffset: 0;
+  stroke: #27b05e;
+  animation: progressSpinnerDash 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+}
diff --git a/components/design/Loader/Loader.tsx b/components/design/Loader/Loader.tsx
index 9f2f771..ee636cd 100644
--- a/components/design/Loader/Loader.tsx
+++ b/components/design/Loader/Loader.tsx
@@ -1,3 +1,5 @@
+import styles from './Loader.module.css'
+
 export interface LoaderProps {
   width?: number
   height?: number
@@ -9,10 +11,14 @@ export const Loader: React.FC<LoaderProps> = (props) => {
 
   return (
     <div className={props.className}>
-      <div data-cy='progress-spinner' className='progress-spinner'>
-        <svg className='progress-spinner-svg' viewBox='25 25 50 50'>
+      <div
+        data-cy='progress-spinner'
+        className='relative my-0 mx-auto before:block before:pt-[100%] before:content-none'
+        style={{ width: `${width}px`, height: `${height}px` }}
+      >
+        <svg className={styles.progressSpinnerSvg} viewBox='25 25 50 50'>
           <circle
-            className='progress-spinner-circle'
+            className={styles.progressSpinnerCircle}
             cx='50'
             cy='50'
             r='20'
@@ -22,60 +28,6 @@ export const Loader: React.FC<LoaderProps> = (props) => {
           />
         </svg>
       </div>
-
-      <style jsx>
-        {`
-          .progress-spinner {
-            position: relative;
-            margin: 0 auto;
-            width: ${width}px;
-            height: ${height}px;
-          }
-          .progress-spinner::before {
-            content: '';
-            display: block;
-            padding-top: 100%;
-          }
-          .progress-spinner-svg {
-            animation: progress-spinner-rotate 2s linear infinite;
-            height: 100%;
-            transform-origin: center center;
-            width: 100%;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-          }
-          .progress-spinner-circle {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: 0;
-            stroke: #27b05e;
-            animation: progress-spinner-dash 1.5s ease-in-out infinite;
-            stroke-linecap: round;
-          }
-          @keyframes progress-spinner-rotate {
-            100% {
-              transform: rotate(360deg);
-            }
-          }
-          @keyframes progress-spinner-dash {
-            0% {
-              stroke-dasharray: 1, 200;
-              stroke-dashoffset: 0;
-            }
-            50% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -35px;
-            }
-            100% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -124px;
-            }
-          }
-        `}
-      </style>
     </div>
   )
 }
diff --git a/components/design/SocialMediaButton/SocialMediaButton.module.css b/components/design/SocialMediaButton/SocialMediaButton.module.css
new file mode 100644
index 0000000..cbc0b2d
--- /dev/null
+++ b/components/design/SocialMediaButton/SocialMediaButton.module.css
@@ -0,0 +1,11 @@
+.buttonGoogle {
+  color: #000;
+  border: 1px solid #000;
+}
+.buttonMedia {
+  color: #fff;
+  border: none;
+}
+.button:focus {
+  box-shadow: 0 0 0 2px #27b05e;
+}
diff --git a/components/design/SocialMediaButton/SocialMediaButton.tsx b/components/design/SocialMediaButton/SocialMediaButton.tsx
index 8c52ec8..7e571e0 100644
--- a/components/design/SocialMediaButton/SocialMediaButton.tsx
+++ b/components/design/SocialMediaButton/SocialMediaButton.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image'
 import classNames from 'clsx'
 
 import type { ProviderOAuth } from '../../../models/OAuth'
+import styles from './SocialMediaButton.module.css'
 
 export type SocialMedia = ProviderOAuth
 
@@ -52,27 +53,21 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
   }, [socialMedia])
 
   return (
-    <>
-      <button
-        {...rest}
-        className={classNames(className, 'button', givenClassName)}
-      >
-        <SocialMediaChildren socialMedia={socialMedia} />
-      </button>
-
-      <style jsx>
-        {`
-          .button {
-            background: ${socialMediaColor};
-            color: ${socialMedia === 'Google' ? '#000' : '#fff'};
-            border: ${socialMedia === 'Google' ? '1px solid #000' : 'none'};
-          }
-          .button:focus {
-            box-shadow: 0 0 0 2px #27b05e;
-          }
-        `}
-      </style>
-    </>
+    <button
+      {...rest}
+      style={{ background: socialMediaColor }}
+      className={classNames(
+        className,
+        styles.button,
+        {
+          [styles.buttonGoogle]: socialMedia === 'Google',
+          [styles.buttonMedia]: socialMedia !== 'Google'
+        },
+        givenClassName
+      )}
+    >
+      <SocialMediaChildren socialMedia={socialMedia} />
+    </button>
   )
 }
 
@@ -88,23 +83,20 @@ export const SocialMediaLink: React.FC<SocialMediaLinkProps> = (props) => {
   }, [socialMedia])
 
   return (
-    <>
-      <a {...rest} className={classNames(className, 'link', givenClassName)}>
-        <SocialMediaChildren socialMedia={socialMedia} />
-      </a>
-
-      <style jsx>
-        {`
-          .link {
-            background: ${socialMediaColor};
-            color: ${socialMedia === 'Google' ? '#000' : '#fff'};
-            border: ${socialMedia === 'Google' ? '1px solid #000' : 'none'};
-          }
-          .link:focus {
-            box-shadow: 0 0 0 2px #27b05e;
-          }
-        `}
-      </style>
-    </>
+    <a
+      {...rest}
+      style={{ background: socialMediaColor }}
+      className={classNames(
+        className,
+        styles.button,
+        {
+          [styles.buttonGoogle]: socialMedia === 'Google',
+          [styles.buttonMedia]: socialMedia !== 'Google'
+        },
+        givenClassName
+      )}
+    >
+      <SocialMediaChildren socialMedia={socialMedia} />
+    </a>
   )
 }
diff --git a/cypress.config.ts b/cypress.config.ts
index 9f55039..cd8ebcb 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -19,9 +19,7 @@ let server: Mockttp | null = null
 export default defineConfig({
   fixturesFolder: false,
   video: false,
-  downloadsFolder: undefined,
   screenshotOnRunFailure: false,
-
   e2e: {
     baseUrl: 'http://127.0.0.1:3000',
     supportFile: false,
@@ -62,7 +60,6 @@ export default defineConfig({
       return config
     }
   },
-
   component: {
     devServer: {
       framework: 'next',
diff --git a/pages/404.tsx b/pages/404.tsx
index ada8f36..cd1cf40 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -3,9 +3,7 @@ import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from '../components/ErrorPage'
 import { Head } from '../components/Head'
-import { Header } from '../components/Header'
 import type { FooterProps } from '../components/Footer'
-import { Footer } from '../components/Footer'
 
 const Error404: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
@@ -14,12 +12,11 @@ const Error404: NextPage<FooterProps> = (props) => {
   return (
     <>
       <Head title='Thream | 404' />
-
-      <Header />
-      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-        <ErrorPage statusCode={404} message={t('errors:page-not-found')} />
-      </main>
-      <Footer version={version} />
+      <ErrorPage
+        statusCode={404}
+        message={t('errors:page-not-found')}
+        version={version}
+      />
     </>
   )
 }
diff --git a/pages/500.tsx b/pages/500.tsx
index 4420dac..d806bfb 100644
--- a/pages/500.tsx
+++ b/pages/500.tsx
@@ -5,7 +5,6 @@ import { ErrorPage } from '../components/ErrorPage'
 import { Head } from '../components/Head'
 import { Header } from '../components/Header'
 import type { FooterProps } from '../components/Footer'
-import { Footer } from '../components/Footer'
 
 const Error500: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
@@ -16,10 +15,11 @@ const Error500: NextPage<FooterProps> = (props) => {
       <Head title='Thream | 500' />
 
       <Header />
-      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-        <ErrorPage statusCode={500} message={t('errors:server-error')} />
-      </main>
-      <Footer version={version} />
+      <ErrorPage
+        statusCode={500}
+        message={t('errors:server-error')}
+        version={version}
+      />
     </>
   )
 }
diff --git a/pages/authentication/forgot-password.tsx b/pages/authentication/forgot-password.tsx
index d132870..c269340 100644
--- a/pages/authentication/forgot-password.tsx
+++ b/pages/authentication/forgot-password.tsx
@@ -15,7 +15,6 @@ import { Input } from '../../components/design/Input'
 import { Button } from '../../components/design/Button'
 import { FormState } from '../../components/design/FormState'
 import { authenticationFromServerSide } from '../../tools/authentication'
-import { ScrollableBody } from '../../components/ScrollableBody'
 import { userSchema } from '../../models/User'
 import { api } from '../../tools/api'
 import { useFormTranslation } from '../../hooks/useFormTranslation'
@@ -60,7 +59,7 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
   }
 
   return (
-    <ScrollableBody>
+    <>
       <Head title={`Thream | ${t('authentication:forgot-password')}`} />
       <Header />
       <Main>
@@ -86,7 +85,7 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
         />
       </Main>
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 
diff --git a/pages/authentication/reset-password.tsx b/pages/authentication/reset-password.tsx
index 46beebd..2afa510 100644
--- a/pages/authentication/reset-password.tsx
+++ b/pages/authentication/reset-password.tsx
@@ -15,7 +15,6 @@ import { Input } from '../../components/design/Input'
 import { Button } from '../../components/design/Button'
 import { authenticationFromServerSide } from '../../tools/authentication'
 import { AuthenticationForm } from '../../components/Authentication'
-import { ScrollableBody } from '../../components/ScrollableBody'
 import { api } from '../../tools/api'
 import { userSchema } from '../../models/User'
 import { useFormTranslation } from '../../hooks/useFormTranslation'
@@ -55,7 +54,7 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
   }
 
   return (
-    <ScrollableBody>
+    <>
       <Head title={`Thream | ${t('authentication:reset-password')}`} />
       <Header />
       <Main>
@@ -81,7 +80,7 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
         />
       </Main>
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 
diff --git a/pages/authentication/signin.tsx b/pages/authentication/signin.tsx
index 77cd2ba..9fc1d50 100644
--- a/pages/authentication/signin.tsx
+++ b/pages/authentication/signin.tsx
@@ -7,19 +7,18 @@ import { Header } from '../../components/Header'
 import type { FooterProps } from '../../components/Footer'
 import { Footer } from '../../components/Footer'
 import { authenticationFromServerSide } from '../../tools/authentication'
-import { ScrollableBody } from '../../components/ScrollableBody'
 
 const Signin: NextPage<FooterProps> = (props) => {
   const { version } = props
   const { t } = useTranslation()
 
   return (
-    <ScrollableBody>
+    <>
       <Head title={`Thream | ${t('authentication:signin')}`} />
       <Header />
       <Authentication mode='signin' />
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 
diff --git a/pages/authentication/signup.tsx b/pages/authentication/signup.tsx
index 1338474..c8ed5c6 100644
--- a/pages/authentication/signup.tsx
+++ b/pages/authentication/signup.tsx
@@ -7,19 +7,18 @@ import { Header } from '../../components/Header'
 import type { FooterProps } from '../../components/Footer'
 import { Footer } from '../../components/Footer'
 import { authenticationFromServerSide } from '../../tools/authentication'
-import { ScrollableBody } from '../../components/ScrollableBody'
 
 const Signup: NextPage<FooterProps> = (props) => {
   const { version } = props
   const { t } = useTranslation()
 
   return (
-    <ScrollableBody>
+    <>
       <Head title={`Thream | ${t('authentication:signup')}`} />
       <Header />
       <Authentication mode='signup' />
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index f58eeda..4ebe9a1 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -11,14 +11,13 @@ import type { FooterProps } from '../components/Footer'
 import { Footer } from '../components/Footer'
 import { SocialMediaLink } from '../components/design/SocialMediaButton'
 import { ButtonLink } from '../components/design/Button'
-import { ScrollableBody } from '../components/ScrollableBody'
 
 const Home: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 
   return (
-    <ScrollableBody>
+    <>
       <Head />
       <Header />
       <Main>
@@ -71,7 +70,7 @@ const Home: NextPage<FooterProps> = (props) => {
         </div>
       </Main>
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 
diff --git a/styles/global.css b/styles/global.css
index 5e72eb6..8e23608 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -12,9 +12,18 @@
   @apply flex h-screen flex-col;
 }
 
+#application-page-content {
+  overflow-x: hidden;
+}
+
 body {
   @apply bg-white font-headline text-black dark:bg-black dark:text-white;
   overflow: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
+  z-index: 1000;
+  height: calc(100vh - 64px);
+  overflow-y: auto;
 }
 
 .h-full-without-header {
diff --git a/tailwind.config.js b/tailwind.config.js
index fc5fc84..3bcb439 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+const tailwindConfig = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}'
@@ -31,3 +32,5 @@ module.exports = {
   },
   plugins: []
 }
+
+module.exports = tailwindConfig