Feature/use alias for imports (#352)

* Use alias "@" for imports

* Use alias "@" for imports - Fix imports

* Use alias "@" for imports - Prevent faulty "import/extensions" linting issue

For some reason the rule throws an error for alias imports

* Use alias "@" for imports - Update "no-relative-imports" eslint rule

src/components/reader/DoublePage.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { Box, styled } from '@mui/material';
-import { IReaderSettings } from 'typings';
+import { IReaderSettings } from '@/typings';
 
 const Image = styled('img')({
     marginBottom: 0,

src/components/reader/Page.tsx

@@ -7,9 +7,9 @@
  */
 
 import React, { useRef } from 'react';
-import SpinnerImage from 'components/util/SpinnerImage';
 import Box from '@mui/material/Box';
-import { IReaderSettings } from 'typings';
+import { IReaderSettings } from '@/typings';
+import SpinnerImage from '@/components/util/SpinnerImage';
 
 function imageStyle(settings: IReaderSettings): any {
     const [dimensions, setDimensions] = React.useState({

src/components/reader/PageNumber.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { Box } from '@mui/material';
-import { IReaderSettings } from 'typings';
+import { IReaderSettings } from '@/typings';
 
 interface IProps {
     settings: IReaderSettings;

src/components/reader/ReaderSettingsOptions.tsx

@@ -11,8 +11,8 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import React from 'react';
-import { IReaderSettings } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { IReaderSettings } from '@/typings';
 
 interface IProps extends IReaderSettings {
     setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;

src/components/reader/pager/DoublePagedPager.tsx

@@ -8,10 +8,10 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
-import Page from 'components/reader/Page';
-import DoublePage from 'components/reader/DoublePage';
-import { IReaderProps } from 'typings';
 import { createRoot } from 'react-dom/client';
+import { IReaderProps } from '@/typings';
+import Page from '@/components/reader/Page';
+import DoublePage from '@/components/reader/DoublePage';
 
 const isSpreadPage = (image: HTMLImageElement): boolean => {
     const aspectRatio = image.height / image.width;

src/components/reader/pager/HorizontalPager.tsx

@@ -8,8 +8,8 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
-import Page from 'components/reader/Page';
-import { IReaderProps } from 'typings';
+import { IReaderProps } from '@/typings';
+import Page from '@/components/reader/Page';
 
 const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
     for (let i = 0; i < wrapper.children.length; i++) {

src/components/reader/pager/PagedPager.tsx

@@ -8,8 +8,8 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
-import Page from 'components/reader/Page';
-import { IReaderProps } from 'typings';
+import { IReaderProps } from '@/typings';
+import Page from '@/components/reader/Page';
 
 export default function PagedReader(props: IReaderProps) {
     const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props;

src/components/reader/pager/VerticalPager.tsx

@@ -8,8 +8,8 @@
 
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
-import Page from 'components/reader/Page';
-import { IReaderProps } from 'typings';
+import { IReaderProps } from '@/typings';
+import Page from '@/components/reader/Page';
 
 const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
     for (let i = 0; i < wrapper.children.length; i++) {