improve some texts + styles

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx

@@ -331,7 +331,7 @@ function FactorQrCode({
   return (
     <div
       className={
-        'dark:bg-secondary flex flex-col space-y-4 rounded-lg border p-4'
+        'dark:bg-secondary flex flex-col space-y-2 rounded-lg border p-4'
       }
     >
       <p>

packages/supabase/src/hooks/use-user.ts

@@ -28,8 +28,8 @@ export function useUser(initialData?: User | null) {
     queryFn,
     queryKey,
     initialData,
-    refetchInterval: false,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
+    refetchInterval: 2_000,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
   });
 }

packages/ui/src/makerkit/app-breadcrumbs.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Fragment } from 'react';
+import clsx from 'clsx';
 
 import { usePathname } from 'next/navigation';
 
@@ -52,9 +53,13 @@ export function AppBreadcrumbs(props: {
               />
             );
 
+          const isLast = index === visiblePaths.length - 1;
+
           return (
             <Fragment key={index}>
-              <BreadcrumbItem className={'capitalize lg:text-xs'}>
+              <BreadcrumbItem className={clsx('lg:text-xs', {
+                'font-bold text-black': isLast,
+              })}>
                 <If
                   condition={index < visiblePaths.length - 1}
                   fallback={label}
@@ -64,6 +69,7 @@ export function AppBreadcrumbs(props: {
                       '/' +
                       splitPath.slice(0, splitPath.indexOf(path) + 1).join('/')
                     }
+                    className='text-muted-foreground'
                   >
                     {label}
                   </BreadcrumbLink>
@@ -77,7 +83,7 @@ export function AppBreadcrumbs(props: {
                 </>
               )}
 
-              <If condition={index !== visiblePaths.length - 1}>
+              <If condition={!isLast}>
                 <BreadcrumbSeparator />
               </If>
             </Fragment>

packages/ui/src/makerkit/page.tsx

@@ -106,7 +106,7 @@ export function PageBody(
   }>,
 ) {
   const className = cn(
-    'flex w-full flex-1 flex-col space-y-6 lg:px-4',
+    'flex w-full flex-1 flex-col space-y-6',
     props.className,
   );
 
@@ -158,7 +158,7 @@ export function PageHeader({
   return (
     <div
       className={cn(
-        'flex items-center justify-between py-5 lg:px-4',
+        'flex items-center justify-between py-5',
         className,
       )}
     >