feat: update styling + apply linting rules

src/animations/fade/fade.animation.test.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
 import {render} from '@testing-library/react';
+import React from 'react';
+
 import {FadeAnimation} from './fade.animation';
 
 function Children() {

src/animations/fade/fade.animation.tsx

@@ -1,5 +1,5 @@
-import React, {ReactElement} from 'react';
 import {animated, useSpring} from '@react-spring/web';
+import React, {ReactElement} from 'react';
 
 interface FadeAnimationProps {
   children: string | ReactElement;

src/app/components/with-time-loop/with-time-loop.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import raf from 'raf';
 import React, {
   JSXElementConstructor,
   ReactElement,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import raf from 'raf';
-import hoistNonReactStatics from 'hoist-non-react-statics';
 
 /**
  * @param C

src/app/hooks/use-app/use-app.test.ts

@@ -1,4 +1,5 @@
 import {renderHook} from '@testing-library/react-hooks';
+
 import {useApp} from './use-app';
 
 describe('useApp', () => {

src/app/hooks/use-google-analytics/use-google-analytics.test.ts

@@ -1,7 +1,8 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import {renderHook} from '@testing-library/react-hooks';
-import {useGoogleAnalytics} from './use-google-analytics';
+
 import {useRouter} from '../../../../__mocks__/next-router';
+import {useGoogleAnalytics} from './use-google-analytics';
 
 const MOCK_EVENTS_ON = useRouter().events.on;
 const MOCK_EVENTS_OFF = useRouter().events.off;

src/app/hooks/use-google-analytics/use-google-analytics.ts

@@ -1,5 +1,6 @@
-import {useEffect} from 'react';
 import {useRouter} from 'next/router';
+import {useEffect} from 'react';
+
 import {GA_TRACKING_ID} from './use-google-analytics.constants';
 
 declare global {

src/app/shared.styles.ts

@@ -1,32 +1,73 @@
 import {mediaQueries} from 'src/app/styles/breakpoints';
-import {css} from 'styled-components';
+import styled, {css} from 'styled-components';
 
 export const centerFlex = css`
   display: flex;
   justify-content: center;
   align-items: center;
 `;
 
+export const CenteredDiv = styled.div`
+  ${centerFlex};
+`;
+
 const p = 14;
-export const addPadding = css`
-  padding: ${p - 4}px ${p}px;
+export const addMargins = css`
+  margin: ${p - 4}px ${p}px;
+`;
+
+export const addFontSizeSmall = css`
+  font-size: 16px;
+`;
+
+export const addFontSizeMedium = css`
+  font-size: 18px;
+`;
+
+export const addFontSizeBig = css`
+  font-size: 20px;
+`;
+
+export const addFontSizeGiant = css`
+  font-size: 22px;
 `;
 
 export const addFontSizes = css`
   ${mediaQueries.below.tablet} {
-    font-size: 20px;
+    ${addFontSizeSmall};
   }
 
   ${mediaQueries.above.tablet} {
-    font-size: 24px;
+    ${addFontSizeMedium};
   }
 
   ${mediaQueries.above.desktop} {
-    font-size: 28px;
+    ${addFontSizeBig};
+  }
+
+  ${mediaQueries.above.fullhd} {
+    ${addFontSizeGiant};
   }
 `;
 
 export const addColorsDefault = css`
   color: ${(props) => props.theme.primary};
   background: ${(props) => props.theme.background.primary};
 `;
+
+export const addVerticalScroll = css`
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-right: ${p}px;
+`;
+
+export const addHoverLink = css`
+  a {
+    transition: color 200ms ease-in-out;
+
+    &:hover {
+      cursor: pointer;
+      color: ${(props) => props.theme.highlight};
+    }
+  }
+`;

src/app/styles/global.js

@@ -1,6 +1,7 @@
-import {createGlobalStyle} from 'styled-components';
 import '@fontsource/noto-sans';
 
+import {createGlobalStyle} from 'styled-components';
+
 // noinspection CssUnusedSymbol
 export const Global = createGlobalStyle`
   html {

src/components/audio/audio.component.tsx

@@ -1,6 +1,7 @@
 import React, {ReactElement} from 'react';
-import {useAudioModule} from './hooks/use-audio-component';
+
 import {Invisible} from './audio.component.styles';
+import {useAudioModule} from './hooks/use-audio-component';
 
 interface Props {
   url: string;

src/components/audio/hooks/use-audio-component.ts

@@ -1,21 +1,22 @@
-import {RefObject, useRef} from 'react';
-import {useRouter} from 'next/router';
 import {useAtom} from 'jotai';
+import {useRouter} from 'next/router';
 import {useNextReplaceUrl} from 'next-replace-url';
-import {useCache} from 'src/hooks/use-cache';
-import {speedAtom} from 'src/atoms/speed.atoms';
+import {RefObject, useRef} from 'react';
 import {audioTitleAtom} from 'src/atoms/audio-title.atoms';
+import {speedAtom} from 'src/atoms/speed.atoms';
+import {useCache} from 'src/hooks/use-cache';
 import {getProviderFromRouter} from 'src/utils/get-provider/get-provider-from-router';
-import {useKeyboardToggle} from './use-keyboard-toggle';
+
+import {useAudioBuffered} from './use-audio-buffered';
 import {useAudioLoad} from './use-audio-load';
 import {useAudioLoop} from './use-audio-loop';
 import {useAudioPitch} from './use-audio-pitch';
-import {useAudioPlaybackRate} from './use-audio-playback-rate';
-import {useAudioVolume} from './use-audio-volume';
 import {useAudioPlayPause} from './use-audio-play-pause';
+import {useAudioPlaybackRate} from './use-audio-playback-rate';
 import {useAudioProgress} from './use-audio-progress';
 import {useAudioSeek} from './use-audio-seek';
-import {useAudioBuffered} from './use-audio-buffered';
+import {useAudioVolume} from './use-audio-volume';
+import {useKeyboardToggle} from './use-keyboard-toggle';
 
 interface UseAudioComponent {
   ref: RefObject<HTMLAudioElement>;

src/components/audio/hooks/use-audio-load.test.ts

@@ -1,10 +1,11 @@
 import {renderHook} from '@testing-library/react-hooks';
-import {useAudioLoad} from './use-audio-load';
+
 import {
   MOCK_AUDIO,
   MOCK_URL,
   SPY_AUDIO,
 } from './use-audio-component.test.mock';
+import {useAudioLoad} from './use-audio-load';
 
 afterEach(() => jest.resetAllMocks());
 

src/components/audio/hooks/use-audio-load.ts

@@ -1,5 +1,5 @@
-import {useCallback, useEffect, useState} from 'react';
 import {useAtom} from 'jotai';
+import {useCallback, useEffect, useState} from 'react';
 import {setDurationAtom} from 'src/atoms/duration.atoms';
 import {setLoadedAtom} from 'src/atoms/load.atoms';
 

src/components/audio/hooks/use-audio-loop.test.ts

@@ -1,6 +1,7 @@
 import {renderHook} from '@testing-library/react-hooks';
-import {useAudioLoop} from './use-audio-loop';
+
 import {MOCK_AUDIO} from './use-audio-component.test.mock';
+import {useAudioLoop} from './use-audio-loop';
 
 afterEach(() => jest.resetAllMocks());
 

src/components/audio/hooks/use-audio-loop.ts

@@ -1,5 +1,5 @@
-import {useEffect} from 'react';
 import {useAtom} from 'jotai';
+import {useEffect} from 'react';
 import {isRepeatingAtom} from 'src/atoms/repeat.atoms';
 
 /**

src/components/audio/hooks/use-audio-pitch.test.ts

@@ -1,6 +1,7 @@
 import {renderHook} from '@testing-library/react-hooks';
-import {useAudioPitch} from './use-audio-pitch';
+
 import {MOCK_AUDIO} from './use-audio-component.test.mock';
+import {useAudioPitch} from './use-audio-pitch';
 
 declare global {
   interface HTMLAudioElement {

src/components/audio/hooks/use-audio-play-pause.test.ts

@@ -1,6 +1,7 @@
 import {renderHook} from '@testing-library/react-hooks';
-import {useAudioPlayPause} from './use-audio-play-pause';
+
 import {MOCK_AUDIO, SPY_AUDIO} from './use-audio-component.test.mock';
+import {useAudioPlayPause} from './use-audio-play-pause';
 
 afterEach(() => jest.resetAllMocks());
 

src/components/audio/hooks/use-audio-play-pause.ts

@@ -1,5 +1,5 @@
-import {useEffect} from 'react';
 import {useAtom} from 'jotai';
+import {useEffect} from 'react';
 import {isPlayingAtom} from 'src/atoms/play-pause.atoms';
 
 /**

src/components/audio/hooks/use-audio-playback-rate.test.ts

@@ -1,6 +1,7 @@
 import {renderHook} from '@testing-library/react-hooks';
-import {useAudioPlaybackRate} from './use-audio-playback-rate';
+
 import {MOCK_AUDIO} from './use-audio-component.test.mock';
+import {useAudioPlaybackRate} from './use-audio-playback-rate';
 
 afterEach(() => jest.resetAllMocks());
 

src/components/audio/hooks/use-audio-playback-rate.ts

@@ -1,5 +1,5 @@
-import {useEffect} from 'react';
 import {useAtom} from 'jotai';
+import {useEffect} from 'react';
 import {speedAtom} from 'src/atoms/speed.atoms';
 
 /**

src/components/audio/hooks/use-audio-progress.ts

@@ -1,7 +1,7 @@
-import {useEffect} from 'react';
 import {useAtom} from 'jotai';
-import {setProgressAtom} from 'src/atoms/progress.atoms';
+import {useEffect} from 'react';
 import {isPlayingAtom} from 'src/atoms/play-pause.atoms';
+import {setProgressAtom} from 'src/atoms/progress.atoms';
 
 /**
  * Hook to set the progress of audio element

src/components/audio/hooks/use-audio-seek.test.ts

@@ -1,6 +1,7 @@
 import {renderHook} from '@testing-library/react-hooks';
-import {useAudioSeek} from './use-audio-seek';
+
 import {MOCK_AUDIO} from './use-audio-component.test.mock';
+import {useAudioSeek} from './use-audio-seek';
 
 afterEach(() => jest.resetAllMocks());
 

src/components/audio/hooks/use-audio-seek.ts

@@ -1,5 +1,5 @@
-import {useEffect} from 'react';
 import {useAtom} from 'jotai';
+import {useEffect} from 'react';
 import {seekAtom} from 'src/atoms/seek.atoms';
 
 /**

src/components/audio/hooks/use-audio-volume.test.ts

@@ -1,6 +1,7 @@
 import {renderHook} from '@testing-library/react-hooks';
-import {useAudioVolume} from './use-audio-volume';
+
 import {MOCK_AUDIO, SPY_AUDIO} from './use-audio-component.test.mock';
+import {useAudioVolume} from './use-audio-volume';
 
 afterEach(() => jest.resetAllMocks());
 

src/components/audio/hooks/use-audio-volume.ts

@@ -1,5 +1,5 @@
-import {useEffect} from 'react';
 import {useAtom} from 'jotai';
+import {useEffect} from 'react';
 import {setVolumeAtom, volumeAtom} from 'src/atoms/volume.atoms';
 
 /**

src/components/audio/hooks/use-keyboard-toggle.test.ts

@@ -1,4 +1,5 @@
 import {renderHook} from '@testing-library/react-hooks';
+
 import {useKeyboardToggle} from './use-keyboard-toggle';
 import {MOCK_DOCUMENT} from './use-keyboard-toggle.mock';
 

src/components/audio/hooks/use-keyboard-toggle.ts

@@ -1,5 +1,6 @@
-import {useEffect} from 'react';
 import {useAtom} from 'jotai';
+import {useEffect} from 'react';
+
 import {
   isPlayingAtom,
   setPauseAtom,

src/components/form/form.component.styles.ts

@@ -1,11 +1,11 @@
-import {addPadding, centerFlex} from 'src/app/shared.styles';
+import {addMargins, centerFlex} from 'src/app/shared.styles';
 import styled, {css} from 'styled-components';
 
 export const Form = styled.form`
-  ${centerFlex}
-  ${addPadding}
+  ${centerFlex};
+  ${addMargins};
   flex-direction: column;
-  gap: 1em;
+  gap: 14px;
 `;
 
 const formElement = css`

src/components/form/form.component.test.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
 import {render as defaultRender, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import {ThemeWrapper} from '../../app/components/theme-wrapper/theme-wrapper';
 import {FormComponent} from './form.component';
 import {MOCK_STATE} from './form.component.test.mock';
-import {ThemeWrapper} from '../../app/components/theme-wrapper/theme-wrapper';
 
 const render = () => {
   const {link, handleSubmit} = MOCK_STATE();

src/components/form/form.component.tsx

@@ -1,5 +1,6 @@
+import Image from 'next/legacy/image';
 import React, {ReactElement} from 'react';
-import Image from "next/legacy/image";
+
 import {Form, GoogleContainer, ImageContainer, Input, Submit} from './form.component.styles';
 import {useFormComponent} from './hooks/use-form-component';
 

src/components/form/hooks/use-form-component.ts

@@ -1,5 +1,5 @@
-import {UseInput, useInput} from './use-input';
 import {UseFormSubmit, useFormSubmit} from './use-form-submit';
+import {UseInput, useInput} from './use-input';
 
 interface UseFormComponent {
   link: UseInput;

src/components/form/hooks/use-form-submit.ts

@@ -1,9 +1,10 @@
-import {FormEvent, useCallback} from 'react';
 import {useRouter} from 'next/router';
+import {FormEvent, useCallback} from 'react';
+
 import {validateForm} from '../utils/validate-form';
-import {UseInput} from './use-input';
 import {getClientToken} from './get-client-token';
 import {queryTokenApi} from './query-token-api';
+import {UseInput} from './use-input';
 
 interface UseFormSubmitOptions {
   link: UseInput;