diff --git a/src/app/router.tsx b/src/app/router.tsx index ee7b1a5..655ea71 100644 --- a/src/app/router.tsx +++ b/src/app/router.tsx @@ -31,8 +31,6 @@ export function getRouter() { defaultPreload: "intent", defaultPreloadStaleTime: 60_000, defaultErrorComponent: DefaultCatchBoundary, - scrollRestoration: true, - defaultViewTransition: true, }); setupRouterSsrQueryIntegration({ diff --git a/src/app/routes/__root.tsx b/src/app/routes/__root.tsx index 655ce8b..30fb4e6 100644 --- a/src/app/routes/__root.tsx +++ b/src/app/routes/__root.tsx @@ -62,7 +62,7 @@ export const Route = createRootRouteWithContext<{ { name: 'twitter:image', content: 'https://flexxon.app/favicon.png' }, { name: 'mobile-web-app-capable', content: 'yes' }, { name: 'apple-mobile-web-app-capable', content: 'yes' }, - { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }, + { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }, { name: 'apple-mobile-web-app-title', content: 'FLXN' }, ], links: [ diff --git a/src/components/swipeable-tabs.tsx b/src/components/swipeable-tabs.tsx index 08428d9..6404d19 100644 --- a/src/components/swipeable-tabs.tsx +++ b/src/components/swipeable-tabs.tsx @@ -57,6 +57,11 @@ function SwipeableTabs({ embla?.scrollTo(index); onTabChange?.(index, tabs[index]); + document + .getElementById("scroll-wrapper") + ?.querySelector(".mantine-ScrollArea-viewport") + ?.scrollTo({ top: 0 }); + const tabLabel = tabs[index].label.toLowerCase(); if (typeof window !== "undefined") { const url = new URL(window.location.href); diff --git a/src/features/core/components/layout.tsx b/src/features/core/components/layout.tsx index b220294..d4946ad 100644 --- a/src/features/core/components/layout.tsx +++ b/src/features/core/components/layout.tsx @@ -1,5 +1,6 @@ -import { AppShell } from '@mantine/core'; +import { AppShell, Box } from '@mantine/core'; import { PropsWithChildren } from 'react'; +import { useLocation } from '@tanstack/react-router'; import Header from './header'; import Navbar from './navbar'; import Pullable from './pullable'; @@ -11,6 +12,7 @@ import './route-transition.css'; const Layout: React.FC = ({ children }) => { const { header, withPadding, fullWidth } = useRouterConfig(); const viewport = useVisualViewportSize(); + const location = useLocation(); return ( = ({ children }) => { > - {children} + + {children} + diff --git a/src/features/core/components/route-transition.css b/src/features/core/components/route-transition.css index 5f421cc..fb54244 100644 --- a/src/features/core/components/route-transition.css +++ b/src/features/core/components/route-transition.css @@ -1,24 +1,6 @@ @media (prefers-reduced-motion: no-preference) { - ::view-transition-old(root) { - animation: flxn-route-fade-out 120ms ease-out both; - } - - ::view-transition-new(root) { - animation: flxn-route-fade-in 200ms ease-out both; - } -} - -@media (prefers-reduced-motion: reduce) { - ::view-transition-group(*), - ::view-transition-old(*), - ::view-transition-new(*) { - animation: none !important; - } -} - -@keyframes flxn-route-fade-out { - to { - opacity: 0; + .flxn-route-enter { + animation: flxn-route-fade-in 180ms ease-out; } } diff --git a/src/lib/mantine/theme-colors.ts b/src/lib/mantine/theme-colors.ts index c0e7054..d61608d 100644 --- a/src/lib/mantine/theme-colors.ts +++ b/src/lib/mantine/theme-colors.ts @@ -23,5 +23,8 @@ export function setThemeColorMeta(color: string): void { return; } - metas.forEach((meta) => meta.setAttribute("content", color)); + metas.forEach((meta) => { + meta.removeAttribute("media"); + meta.setAttribute("content", color); + }); }