more styles

src/app/router.tsx

@@ -31,8 +31,6 @@ export function getRouter() {
     defaultPreload: "intent",
     defaultPreloadStaleTime: 60_000,
     defaultErrorComponent: DefaultCatchBoundary,
-    scrollRestoration: true,
-    defaultViewTransition: true,
   });
 
   setupRouterSsrQueryIntegration({

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: [

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

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<PropsWithChildren> = ({ children }) => {
   const { header, withPadding, fullWidth } = useRouterConfig();
   const viewport = useVisualViewportSize();
+  const location = useLocation();
 
   return (
     <AppShell
@@ -48,7 +50,9 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
       >
         <Pullable>
           <Page noPadding={!withPadding} fullWidth={fullWidth}>
-            {children}
+            <Box key={location.pathname} className="flxn-route-enter">
+              {children}
+            </Box>
           </Page>
         </Pullable>
       </AppShell.Main>

src/features/core/components/route-transition.css

@@ -1,24 +1,6 @@
 @media (prefers-reduced-motion: no-preference) {
-  ::view-transition-old(root) {
+  .flxn-route-enter {
-    animation: flxn-route-fade-out 120ms ease-out both;
+    animation: flxn-route-fade-in 180ms ease-out;
-  }
-
-  ::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;
   }
 }
 

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