Merge branch 'develop' of https://github.com/MR-medreport/MRB2B into MED-103

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/language-selector.tsx

@@ -53,6 +53,7 @@ export function LanguageSelector({
     }
 
     if (!userId) {
+      localStorage.setItem('lang', locale);
       return i18n.changeLanguage(locale);
     }
 

packages/ui/src/makerkit/page.tsx

@@ -42,7 +42,7 @@ function PageWithSidebar(props: PageProps) {
       >
         {MobileNavigation}
 
-        <div className={'bg-background flex flex-1 flex-col px-4 pb-8 lg:px-0'}>
+        <div className={'bg-background flex flex-1 flex-col px-2 pb-8 lg:px-0'}>
           {Children}
         </div>
       </div>
@@ -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,
   );
 
@@ -119,8 +119,8 @@ export function PageNavigation(props: React.PropsWithChildren) {
 
 export function PageDescription(props: React.PropsWithChildren) {
   return (
-    <div className={'flex h-6 items-center'}>
-      <div className={'text-muted-foreground text-sm leading-none font-normal'}>
+    <div className={'flex items-center'}>
+      <div className={'text-muted-foreground text-sm font-normal leading-6'}>
         {props.children}
       </div>
     </div>
@@ -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,
       )}
     >
@@ -168,7 +168,7 @@ export function PageHeader({
         </If>
 
         <If condition={displaySidebarTrigger || description}>
-          <div className="flex items-center gap-x-2.5">
+          <div className="flex items-center gap-3">
             {displaySidebarTrigger ? (
               <SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground hidden h-4.5 w-4.5 cursor-pointer lg:inline-flex" />
             ) : null}

packages/ui/src/shadcn/card.tsx

@@ -34,7 +34,7 @@ const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
 }) => (
-  <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  <div className={cn('flex flex-col space-y-1.5 p-4 sm:p-6', className)} {...props} />
 );
 CardHeader.displayName = 'CardHeader';
 
@@ -60,14 +60,14 @@ CardDescription.displayName = 'CardDescription';
 const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
-}) => <div className={cn('p-6 pt-0', className)} {...props} />;
+}) => <div className={cn('p-4 sm:p-6 pt-0', className)} {...props} />;
 CardContent.displayName = 'CardContent';
 
 const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
 }) => (
-  <div className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  <div className={cn('flex items-center p-4 sm:p-6 pt-0', className)} {...props} />
 );
 CardFooter.displayName = 'CardFooter';