diff --git a/src/app/components/splash-screen/SplashScreen.css.ts b/src/app/components/splash-screen/SplashScreen.css.ts deleted file mode 100644 index bd3c300a..00000000 --- a/src/app/components/splash-screen/SplashScreen.css.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { style } from '@vanilla-extract/css'; -import { color, config } from 'folds'; - -export const SplashScreen = style({ - minHeight: '100%', - backgroundColor: color.Background.Container, - color: color.Background.OnContainer, -}); - -export const SplashScreenFooter = style({ - padding: config.space.S400, -}); diff --git a/src/app/components/splash-screen/SplashScreen.tsx b/src/app/components/splash-screen/SplashScreen.tsx deleted file mode 100644 index 1301fe69..00000000 --- a/src/app/components/splash-screen/SplashScreen.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Box, Text } from 'folds'; -import React, { ReactNode } from 'react'; -import classNames from 'classnames'; -import * as patternsCSS from '../../styles/Patterns.css'; -import * as css from './SplashScreen.css'; - -type SplashScreenProps = { - children: ReactNode; -}; -export function SplashScreen({ children }: SplashScreenProps) { - return ( - - {children} - - - Vojo - - - - ); -} diff --git a/src/app/components/splash-screen/index.ts b/src/app/components/splash-screen/index.ts deleted file mode 100644 index e3e5dd34..00000000 --- a/src/app/components/splash-screen/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './SplashScreen'; diff --git a/src/app/pages/ConfigConfig.tsx b/src/app/pages/ConfigConfig.tsx index dbcdca73..38a06167 100644 --- a/src/app/pages/ConfigConfig.tsx +++ b/src/app/pages/ConfigConfig.tsx @@ -1,16 +1,9 @@ -import { Box, Button, Dialog, Spinner, Text, color, config } from 'folds'; +import { Box, Button, Dialog, Text, color, config } from 'folds'; import React from 'react'; -import { SplashScreen } from '../components/splash-screen'; +import { AuthSplashScreen } from './auth/AuthSplashScreen'; export function ConfigConfigLoading() { - return ( - - - - Heating up - - - ); + return ; } type ConfigConfigErrorProps = { @@ -20,7 +13,7 @@ type ConfigConfigErrorProps = { }; export function ConfigConfigError({ error, retry, ignore }: ConfigConfigErrorProps) { return ( - + @@ -48,6 +41,6 @@ export function ConfigConfigError({ error, retry, ignore }: ConfigConfigErrorPro - + ); } diff --git a/src/app/pages/FeatureCheck.tsx b/src/app/pages/FeatureCheck.tsx index abb366a8..8b91431e 100644 --- a/src/app/pages/FeatureCheck.tsx +++ b/src/app/pages/FeatureCheck.tsx @@ -2,7 +2,7 @@ import React, { ReactNode, useEffect } from 'react'; import { Box, Dialog, Text, config } from 'folds'; import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback'; import { checkIndexedDBSupport } from '../utils/featureCheck'; -import { SplashScreen } from '../components/splash-screen'; +import { AuthSplashScreen } from './auth/AuthSplashScreen'; export function FeatureCheck({ children }: { children: ReactNode }) { const [idbSupportState, checkIDBSupport] = useAsyncCallback(checkIndexedDBSupport); @@ -13,7 +13,7 @@ export function FeatureCheck({ children }: { children: ReactNode }) { if (idbSupportState.status === AsyncStatus.Success && idbSupportState.data === false) { return ( - + @@ -34,7 +34,7 @@ export function FeatureCheck({ children }: { children: ReactNode }) { - + ); } diff --git a/src/app/pages/auth/AuthLayout.tsx b/src/app/pages/auth/AuthLayout.tsx index 1cbe9cb9..dc96af16 100644 --- a/src/app/pages/auth/AuthLayout.tsx +++ b/src/app/pages/auth/AuthLayout.tsx @@ -11,6 +11,8 @@ import { import { useTranslation } from 'react-i18next'; import { AuthFooter } from './AuthFooter'; +import { AuthMascot } from './AuthMascot'; +import { authLayoutRootVars } from './layoutConfig'; import * as css from './styles.css'; import { clientAllowedServer, @@ -27,8 +29,6 @@ import { AuthFlowsLoader } from '../../components/AuthFlowsLoader'; import { AuthFlowsProvider } from '../../hooks/useAuthFlows'; import { AuthServerProvider } from '../../hooks/useAuthServer'; import { tryDecodeURIComponent } from '../../utils/dom'; -import mascotPoster from '../../../../public/res/img/mascot.png'; -import mascotWebm from '../../../../public/res/img/mascot.webm'; const currentAuthPath = (pathname: string): string => { if (matchPath(LOGIN_PATH, pathname)) return LOGIN_PATH; @@ -163,16 +163,6 @@ function calculateModalLayout(input: { }; } -const rootVars: React.CSSProperties = { - '--vojo-mascot-size': 'clamp(28rem, 57dvh, 48rem)', - '--vojo-mascot-top': 'clamp(1.5rem, 4dvh, 3rem)', - '--vojo-stack-pad': '1.5rem', - '--vojo-anchor-ratio': '0.71', - '--vojo-modal-min-top': 'clamp(12rem, 26dvh, 18rem)', - '--vojo-modal-gap': 'clamp(0.75rem, 2dvh, 1.5rem)', - '--vojo-footer-space': 'clamp(4.5rem, 9dvh, 6.5rem)', -} as React.CSSProperties; - export function AuthLayout() { const { t } = useTranslation(); const navigate = useNavigate(); @@ -291,21 +281,9 @@ export function AuthLayout() { }, []); return ( -
+
- +
diff --git a/src/app/pages/auth/AuthMascot.tsx b/src/app/pages/auth/AuthMascot.tsx new file mode 100644 index 00000000..766871d4 --- /dev/null +++ b/src/app/pages/auth/AuthMascot.tsx @@ -0,0 +1,27 @@ +import React, { Ref } from 'react'; + +import mascotPoster from '../../../../public/res/img/mascot.png'; +import mascotWebm from '../../../../public/res/img/mascot.webm'; +import * as css from './styles.css'; + +type AuthMascotProps = { + mascotRef?: Ref; +}; + +export function AuthMascot({ mascotRef }: AuthMascotProps) { + return ( + + ); +} diff --git a/src/app/pages/auth/AuthSplashScreen.tsx b/src/app/pages/auth/AuthSplashScreen.tsx new file mode 100644 index 00000000..99201691 --- /dev/null +++ b/src/app/pages/auth/AuthSplashScreen.tsx @@ -0,0 +1,22 @@ +import React, { ReactNode } from 'react'; + +import { AuthFooter } from './AuthFooter'; +import { AuthMascot } from './AuthMascot'; +import { authLayoutRootVars } from './layoutConfig'; +import * as css from './styles.css'; + +type AuthSplashScreenProps = { + children?: ReactNode; +}; + +export function AuthSplashScreen({ children }: AuthSplashScreenProps) { + return ( +
+
+ + {children &&
{children}
} +
+ +
+ ); +} diff --git a/src/app/pages/auth/layoutConfig.ts b/src/app/pages/auth/layoutConfig.ts new file mode 100644 index 00000000..6ef98493 --- /dev/null +++ b/src/app/pages/auth/layoutConfig.ts @@ -0,0 +1,11 @@ +import type { CSSProperties } from 'react'; + +export const authLayoutRootVars: CSSProperties = { + '--vojo-mascot-size': 'clamp(28rem, 57dvh, 48rem)', + '--vojo-mascot-top': 'clamp(1.5rem, 4dvh, 3rem)', + '--vojo-stack-pad': '1.5rem', + '--vojo-anchor-ratio': '0.71', + '--vojo-modal-min-top': 'clamp(12rem, 26dvh, 18rem)', + '--vojo-modal-gap': 'clamp(0.75rem, 2dvh, 1.5rem)', + '--vojo-footer-space': 'clamp(4.5rem, 9dvh, 6.5rem)', +} as CSSProperties; diff --git a/src/app/pages/auth/styles.css.ts b/src/app/pages/auth/styles.css.ts index d32c9af1..5bd7fcd6 100644 --- a/src/app/pages/auth/styles.css.ts +++ b/src/app/pages/auth/styles.css.ts @@ -87,6 +87,17 @@ export const AuthModalZone = style({ zIndex: 1, }); +export const AuthSplashContent = style({ + position: 'relative', + zIndex: 1, + minHeight: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + paddingInline: 'var(--vojo-stack-pad)', + boxSizing: 'border-box', +}); + /* ── Auth card (glassmorphism) ── */ export const AuthCard = style({ display: 'flex', diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx index 93f0526e..7b1647c3 100644 --- a/src/app/pages/client/ClientRoot.tsx +++ b/src/app/pages/client/ClientRoot.tsx @@ -10,7 +10,6 @@ import { MenuItem, PopOut, RectCords, - Spinner, Text, } from 'folds'; import { HttpApiEvent, HttpApiEventHandlerMap, MatrixClient } from 'matrix-js-sdk'; @@ -23,7 +22,6 @@ import { logoutClient, startClient, } from '../../../client/initMatrix'; -import { SplashScreen } from '../../components/splash-screen'; import { ServerConfigsLoader } from '../../components/ServerConfigsLoader'; import { CapabilitiesProvider } from '../../hooks/useCapabilities'; import { MediaConfigProvider } from '../../hooks/useMediaConfig'; @@ -36,16 +34,10 @@ import { SyncStatus } from './SyncStatus'; import { AuthMetadataProvider } from '../../hooks/useAuthMetadata'; import { getFallbackSession } from '../../state/sessions'; import { AutoDiscovery } from './AutoDiscovery'; +import { AuthSplashScreen } from '../auth/AuthSplashScreen'; function ClientRootLoading() { - return ( - - - - Heating up - - - ); + return ; } function ClientRootOptions({ mx }: { mx?: MatrixClient }) { @@ -189,7 +181,7 @@ export function ClientRoot({ children }: ClientRootProps) { {mx && } {loading && } {(loadState.status === AsyncStatus.Error || startState.status === AsyncStatus.Error) && ( - + - + )} {loading || !mx ? ( diff --git a/src/app/pages/client/SpecVersions.tsx b/src/app/pages/client/SpecVersions.tsx index 84eecf7d..d51050a7 100644 --- a/src/app/pages/client/SpecVersions.tsx +++ b/src/app/pages/client/SpecVersions.tsx @@ -1,23 +1,16 @@ import React, { ReactNode } from 'react'; -import { Box, Dialog, config, Text, Button, Spinner } from 'folds'; +import { Box, Dialog, config, Text, Button } from 'folds'; import { SpecVersionsLoader } from '../../components/SpecVersionsLoader'; import { SpecVersionsProvider } from '../../hooks/useSpecVersions'; -import { SplashScreen } from '../../components/splash-screen'; +import { AuthSplashScreen } from '../auth/AuthSplashScreen'; export function SpecVersions({ baseUrl, children }: { baseUrl: string; children: ReactNode }) { return ( ( - - - - Connecting to server - - - )} + fallback={() => } error={(err, retry, ignore) => ( - + @@ -37,7 +30,7 @@ export function SpecVersions({ baseUrl, children }: { baseUrl: string; children: - + )} > {(versions) => {children}}