Reuse SplashScreen on LoginPage

src/features/authentication/components/SplashScreen.tsx

@@ -7,16 +7,26 @@
  */
 
 import { useTheme } from '@mui/material/styles';
-import Stack from '@mui/material/Stack';
+import Stack, { StackProps } from '@mui/material/Stack';
+import { ComponentProps } from 'react';
 import { SuwayomiLogo } from '@/assets/SuwayomiLogo.tsx';
 import { ServerAddressSetting } from '@/features/settings/components/ServerAddressSetting.tsx';
 import { ThemeMode } from '@/features/theme/AppThemeContext.tsx';
 
-export const SplashScreen = () => {
+export const SplashScreen = ({
+    slots,
+}: {
+    slots?: {
+        stackProps?: StackProps;
+        logoProps?: ComponentProps<typeof SuwayomiLogo>;
+        serverAddressProps?: StackProps;
+    };
+}) => {
     const theme = useTheme();
 
     return (
         <Stack
+            {...slots?.stackProps}
             sx={{
                 position: 'relative',
                 minWidth: '100vw',
@@ -27,20 +37,31 @@ export const SplashScreen = () => {
                 ...theme.applyStyles('dark', {
                     backgroundColor: 'primary.dark',
                 }),
+                ...slots?.stackProps?.sx,
             }}
         >
             <SuwayomiLogo
                 circleRingColor={
                     theme.palette.mode === ThemeMode.DARK ? theme.palette.primary.light : theme.palette.primary.dark
                 }
+                {...slots?.logoProps}
                 sx={{
                     fontSize: 250,
                     [theme.breakpoints.up('lg')]: {
                         fontSize: 350,
                     },
+                    ...slots?.logoProps?.sx,
                 }}
             />
-            <Stack sx={{ position: 'absolute', left: 0, bottom: 0 }}>
+            <Stack
+                {...slots?.serverAddressProps}
+                sx={{
+                    position: 'absolute',
+                    left: 0,
+                    bottom: 0,
+                    ...slots?.serverAddressProps?.sx,
+                }}
+            >
                 <ServerAddressSetting />
             </Stack>
         </Stack>

src/features/authentication/screens/LoginPage.tsx

@@ -19,11 +19,11 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { AuthManager } from '@/features/authentication/AuthManager.ts';
-import { SuwayomiLogo } from '@/assets/SuwayomiLogo.tsx';
 import { useSessionContext } from '@/features/authentication/SessionContext.tsx';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { SearchParam } from '@/base/Base.types.ts';
+import { SplashScreen } from '@/features/authentication/components/SplashScreen.tsx';
 import { ServerAddressSetting } from '@/features/settings/components/ServerAddressSetting.tsx';
 
 export const LoginPage = () => {
@@ -60,7 +60,7 @@ export const LoginPage = () => {
         return () => setOverride({ status: false, value: null });
     }, []);
 
-    if (isAuthenticated) {
+    if (false && isAuthenticated) {
         return <Navigate to={AppRoutes.root.path} replace />;
     }
 
@@ -72,33 +72,28 @@ export const LoginPage = () => {
                 },
             }}
         >
-            <Stack
+            <SplashScreen
-                sx={{
+                slots={{
-                    minHeight: '50vh',
+                    stackProps: {
-                    flexBasis: '60%',
+                        sx: {
-                    p: 4,
+                            position: 'unset',
-                    justifyContent: 'center',
+                            minWidth: 'auto',
-                    alignItems: 'center',
+                            minHeight: '50vh',
-                    backgroundColor: 'primary.light',
+                            flexBasis: '60%',
-                    ...theme.applyStyles('dark', {
+                            p: 4,
-                        backgroundColor: 'primary.dark',
+                            [theme.breakpoints.up('lg')]: {
-                    }),
+                                minHeight: '0vh',
-                    [theme.breakpoints.up('lg')]: {
+                                height: '100vh',
-                        minHeight: '0vh',
+                            },
-                        height: '100vh',
+                        },
+                    },
+                    serverAddressProps: {
+                        sx: {
+                            display: 'none',
+                        },
                     },
                 }}
-            >
+            />
-                <SuwayomiLogo
-                    sx={{
-                        fontSize: 250,
-                        [theme.breakpoints.up('lg')]: {
-                            fontSize: 350,
-                        },
-                    }}
-                    circleRingColor={theme.palette.primary.light}
-                />
-            </Stack>
             <Stack
                 sx={{
                     position: 'relative',