MED-140: ui fixes (#69)

* MED-140: ui fixes

* make accountid optional in hook

packages/features/accounts/src/hooks/use-update-account.ts

@@ -5,12 +5,16 @@ import { useSupabase } from '@kit/supabase/hooks/use-supabase';
 
 type UpdateData = Database['medreport']['Tables']['accounts']['Update'];
 
-export function useUpdateAccountData(accountId: string) {
+export function useUpdateAccountData(accountId?: string) {
   const client = useSupabase();
 
   const mutationKey = ['account:data', accountId];
 
   const mutationFn = async (data: UpdateData) => {
+    if (!accountId) {
+      return null;
+    }
+
     const response = await client
       .schema('medreport')
       .from('accounts')

packages/features/auth/src/components/auth-layout.tsx

@@ -7,7 +7,7 @@ export function AuthLayoutShell({
   return (
     <div
       className={
-        'flex h-screen flex-col items-center justify-center' +
+        'sm:py-auto flex flex-col items-center justify-center py-6' +
         ' bg-background lg:bg-muted/30 gap-y-10 lg:gap-y-8' +
         ' animate-in fade-in slide-in-from-top-16 zoom-in-95 duration-1000'
       }

packages/shared/src/components/select-analysis-packages.tsx

@@ -1,6 +1,8 @@
 import { Trans } from '@kit/ui/trans';
 
-import SelectAnalysisPackage, { AnalysisPackageWithVariant } from './select-analysis-package';
+import SelectAnalysisPackage, {
+  AnalysisPackageWithVariant,
+} from './select-analysis-package';
 
 export default function SelectAnalysisPackages({
   analysisPackages,
@@ -10,11 +12,16 @@ export default function SelectAnalysisPackages({
   countryCode: string;
 }) {
   return (
-    <div className="grid grid-cols-3 gap-6">
-      {analysisPackages.length > 0 ? analysisPackages.map(
-        (analysisPackage) => (
-          <SelectAnalysisPackage key={analysisPackage.title} analysisPackage={analysisPackage} countryCode={countryCode} />
-        )) : (
+    <div className="grid gap-6 sm:grid-cols-3">
+      {analysisPackages.length > 0 ? (
+        analysisPackages.map((analysisPackage) => (
+          <SelectAnalysisPackage
+            key={analysisPackage.title}
+            analysisPackage={analysisPackage}
+            countryCode={countryCode}
+          />
+        ))
+      ) : (
         <h4>
           <Trans i18nKey="order-analysis-package:noPackagesAvailable" />
         </h4>

packages/ui/src/makerkit/language-selector.tsx

@@ -40,7 +40,7 @@ export function LanguageSelector({
   }, [currentLanguage]);
 
   const userId = user?.id;
-  const updateAccountMutation = useUpdateAccountData(userId!);
+  const updateAccountMutation = useUpdateAccountData(userId);
   const revalidateUserDataQuery = useRevalidatePersonalAccountDataQuery();
 
   const updateLanguagePreference = async (
@@ -52,6 +52,10 @@ export function LanguageSelector({
       onChange(locale);
     }
 
+    if (!userId) {
+      return i18n.changeLanguage(locale);
+    }
+
     const promise = updateAccountMutation
       .mutateAsync({
         preferred_locale: locale,

packages/ui/src/makerkit/marketing/header.tsx

@@ -1,5 +1,7 @@
-import { cn } from '../../lib/utils';
 import { LanguageSelector } from '@kit/ui/language-selector';
+
+import { cn } from '../../lib/utils';
+
 interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   logo?: React.ReactNode;
   navigation?: React.ReactNode;
@@ -22,11 +24,16 @@ export const Header: React.FC<HeaderProps> = function ({
       {...props}
     >
       <div className="container">
-        <div className="grid h-14 grid-cols-3 items-center">
-          <div className={'mx-auto md:mx-0'}>{logo}</div>
-          <div className="order-first md:order-none">{navigation}</div>
-          
-          <div className="flex items-center justify-end gap-x-2"><div className="max-w-[100px]"><LanguageSelector /></div>{actions}</div>
+        <div className="2xs:h-14 2xs:grid-cols-3 grid h-24 w-full items-center">
+          <div className={'mx-auto flex'}>{logo}</div>
+          <div className="2xs:order-none order-first">{navigation}</div>
+
+          <div className="2xs:justify-end 2xs:gap-x-2 flex items-center justify-evenly">
+            <div className="max-w-[100px]">
+              <LanguageSelector />
+            </div>
+            {actions}
+          </div>
         </div>
       </div>
     </div>

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 lg:px-0 pb-8'}>
+        <div className={'bg-background flex flex-1 flex-col px-4 pb-8 lg:px-0'}>
           {Children}
         </div>
       </div>
@@ -58,7 +58,7 @@ export function PageMobileNavigation(
   return (
     <div
       className={cn(
-        'flex w-full items-center border-b px-4 py-2 lg:hidden lg:px-0',
+        'flex w-full items-center px-4 py-2 lg:hidden lg:px-0',
         props.className,
       )}
     >