Fade in

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>
 	);