Fade in

src/components/Loading.tsx

@@ -1,4 +1,4 @@
-import { Center, Loader, Stack } from '@mantine/core';
+import { Stack } from '@mantine/core';
 import { stackClasses } from 'styles';
 
 function Loading({ loaded }: any) {
@@ -10,11 +10,7 @@ function Loading({ loaded }: any) {
 			className={stackClasses.fadeAway}
 			classNames={stackClasses}
 			data-loaded={loaded}
-		>
-			<Center>
-				<Loader color={'gray'} size='xl' />
-			</Center>
-		</Stack>
+		/>
 	);
 }
 

src/components/MainLayout.tsx

@@ -1,23 +1,10 @@
 import { Box } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
 import { Outlet } from 'react-router-dom';
+import { boxClasses } from 'styles';
 
 export function MainLayout() {
-	const { theme } = useCommonHooks();
 	return (
-		<Box
-			style={{
-				width: '100%',
-				height: '100%',
-				position: 'fixed',
-				backgroundImage: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
-				backgroundSize: 'cover',
-				backgroundRepeat: 'no-repeat',
-				backgroundPosition: 'center',
-				zIndex: -1,
-				overflow: 'scroll',
-			}}
-		>
+		<Box className={boxClasses.layoutContainer}>
 			<Outlet />
 		</Box>
 	);

src/components/ThemeProvider.tsx

@@ -12,6 +12,7 @@ export function ThemeProvider({
 				'--color-background': theme.backgroundColor,
 				'--color-border': theme.borderColor,
 				'--color-search-background': theme.searchColor,
+				'--image-background': `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
 				'--toastify-color-light': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
 				'--toastify-color-dark': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
 				'--toastify-color-info': '#3498db',