diff --git a/fluxer_app/src/features/app/components/layout/AuthLayout.module.css b/fluxer_app/src/features/app/components/layout/AuthLayout.module.css index 715419a37..2ccfa52b4 100644 --- a/fluxer_app/src/features/app/components/layout/AuthLayout.module.css +++ b/fluxer_app/src/features/app/components/layout/AuthLayout.module.css @@ -54,17 +54,6 @@ width: 100%; } -.rightSplit { - bottom: 0; - inset-inline-end: 0; - opacity: 1; - pointer-events: none; - position: fixed; - transition: opacity 0.4s ease; - width: auto; - z-index: 0; -} - .leftSplit { display: flex; flex-direction: column; @@ -126,10 +115,9 @@ visibility: hidden; } -.splashImage { +.splashBackdrop { position: fixed; - right: 0; - bottom: 0; + inset: 0; pointer-events: none; overflow: hidden; z-index: 0; diff --git a/fluxer_app/src/features/app/components/layout/AuthLayout.tsx b/fluxer_app/src/features/app/components/layout/AuthLayout.tsx index fab09cc33..88afe131b 100644 --- a/fluxer_app/src/features/app/components/layout/AuthLayout.tsx +++ b/fluxer_app/src/features/app/components/layout/AuthLayout.tsx @@ -26,7 +26,6 @@ import {Scroller, type ScrollerHandle} from '@app/features/ui/components/Scrolle import {isMobileExperienceEnabled} from '@app/features/ui/utils/MobileExperience'; import {hasUnavailableElectronNativeContext} from '@app/features/ui/utils/NativeUtils'; import {useNativeTitleBar} from '@app/features/window/hooks/useNativeTitleBar'; -import Window from '@app/features/window/state/Window'; import {flxElementClassName} from '@app/lib/react'; import type {GuildSplashCardAlignmentValue} from '@fluxer/constants/src/GuildConstants'; import {GuildSplashCardAlignment} from '@fluxer/constants/src/GuildConstants'; @@ -65,7 +64,6 @@ function resolveAuthLayoutContentMode({current, value}: ResolveAuthLayoutContent } const AuthLayoutContent = observer(function AuthLayoutContent({children}: {children?: ReactNode}) { - const {width: viewportWidth, height: viewportHeight} = Window.windowSize; const [splashUrl, setSplashUrl] = useState(null); const [cardVariant, setCardVariant] = useState('default'); const [contentMode, setContentMode] = useState(null); @@ -102,14 +100,6 @@ const AuthLayoutContent = observer(function AuthLayoutContent({children}: {child useLayoutEffect(() => { setContentMode((current) => current ?? AuthLayoutContentMode.CARD); }, []); - const splashScale = useMemo(() => { - if (!splashDimensions) return null; - const {width, height} = splashDimensions; - if (width <= 0 || height <= 0) return null; - const heightScale = viewportHeight / height; - const widthScale = viewportWidth / width; - return Math.max(heightScale, widthScale); - }, [splashDimensions, viewportHeight, viewportWidth]); const handleSetContentMode = useCallback>>((value) => { setContentMode((current) => resolveAuthLayoutContentMode({current, value})); }, []); @@ -236,11 +226,10 @@ const AuthLayoutContent = observer(function AuthLayoutContent({children}: {child data-flx="app.auth-layout.auth-layout-content.character-background" > ) => { +const getSplashObjectPosition = (alignment: ValueOf) => { switch (alignment) { case GuildSplashCardAlignment.LEFT: - return {transformOrigin: 'bottom left', objectPosition: 'left bottom'}; + return 'left bottom'; case GuildSplashCardAlignment.RIGHT: - return {transformOrigin: 'bottom right', objectPosition: 'right bottom'}; + return 'right bottom'; default: - return {transformOrigin: 'bottom center', objectPosition: 'center bottom'}; + return 'center bottom'; } }; export interface AuthBackgroundProps { splashUrl: string | null; splashDimensions?: {width: number; height: number} | null; - splashScale?: number | null; patternImageUrl?: string | null; className?: string; - useFullCover?: boolean; splashAlignment?: ValueOf; } export const AuthBackground: React.FC = ({ splashUrl, splashDimensions, - splashScale, patternImageUrl, className, - useFullCover = false, splashAlignment = GuildSplashCardAlignment.CENTER, }) => { - const shouldShowSplash = splashUrl && splashDimensions && (useFullCover || splashScale); - const {transformOrigin, objectPosition} = getSplashAlignmentStyles(splashAlignment); - if (shouldShowSplash) { - if (useFullCover) { - return ( -
-
- -
-
-
- ); - } + if (splashUrl && splashDimensions) { return ( -
-
+ - -
-
+ data-flx="auth.flow.auth-background.img" + /> +
); } diff --git a/fluxer_app/src/features/invite/components/modals/InvitePagePreviewModal.tsx b/fluxer_app/src/features/invite/components/modals/InvitePagePreviewModal.tsx index f724f19ea..5f75b66c5 100644 --- a/fluxer_app/src/features/invite/components/modals/InvitePagePreviewModal.tsx +++ b/fluxer_app/src/features/invite/components/modals/InvitePagePreviewModal.tsx @@ -125,7 +125,6 @@ export const InvitePagePreviewModal: React.FC = obs splashDimensions={splashDimensions} patternImageUrl={patternReady ? foodPatternUrl : null} splashAlignment={splashAlignment} - useFullCover={true} data-flx="invite.invite-page-preview-modal.background" />