From 93964e174ab8ca671c679637b01ccc36e9dc0d5a Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Thu, 11 Apr 2024 21:29:46 +0800
Subject: [PATCH] Update UI layout and enhance email confirmation test

The UI layout for the site header, site footer, and account section was updated to improve visual spacing and arrangement. In addition, the authentication test for email confirmation was enhanced, specifically by adding checking that the response from visiting the mailbox is not null. This improves the robustness and reliability of the test.
---
 apps/e2e/tests/authentication/auth.po.ts      |  8 +++++--
 .../(marketing)/_components/site-footer.tsx   | 22 ++++++++++---------
 .../site-header-account-section.tsx           |  2 +-
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/apps/e2e/tests/authentication/auth.po.ts b/apps/e2e/tests/authentication/auth.po.ts
index 1b0342005..4767ef65b 100644
--- a/apps/e2e/tests/authentication/auth.po.ts
+++ b/apps/e2e/tests/authentication/auth.po.ts
@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 import { Mailbox } from '../utils/mailbox';
 
 export class AuthPageObject {
@@ -50,7 +50,11 @@ export class AuthPageObject {
   async visitConfirmEmailLink(email: string) {
     await this.page.waitForTimeout(300);
 
-    await this.mailbox.visitMailbox(email);
+    return expect(async() => {
+      const res = await this.mailbox.visitMailbox(email);
+
+      expect(res).not.toBeNull();
+    }).toPass();
   }
 
   createRandomEmail() {
diff --git a/apps/web/app/(marketing)/_components/site-footer.tsx b/apps/web/app/(marketing)/_components/site-footer.tsx
index 279cedaec..5d775f23c 100644
--- a/apps/web/app/(marketing)/_components/site-footer.tsx
+++ b/apps/web/app/(marketing)/_components/site-footer.tsx
@@ -14,7 +14,7 @@ export function SiteFooter() {
         <div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
           <div
             className={
-              'flex w-full space-x-2 lg:w-4/12 xl:w-3/12' +
+              'flex w-full space-x-2 lg:w-4/12 xl:w-4/12' +
               ' xl:space-x-6 2xl:space-x-8'
             }
           >
@@ -23,16 +23,18 @@ export function SiteFooter() {
                 <AppLogo className={'w-[85px] md:w-[115px]'} />
               </div>
 
-              <div>
-                <p className={'text-sm text-muted-foreground'}>
-                  Add a short tagline about your product
-                </p>
-              </div>
+              <div className={'flex flex-col space-y-2'}>
+                <div>
+                  <p className={'text-sm text-muted-foreground'}>
+                    Add a short tagline about your product
+                  </p>
+                </div>
 
-              <div className={'flex text-xs text-muted-foreground'}>
-                <p>
-                  © Copyright {YEAR} {appConfig.name}. All Rights Reserved.
-                </p>
+                <div className={'flex text-xs text-muted-foreground'}>
+                  <p>
+                    © Copyright {YEAR} {appConfig.name}. All Rights Reserved.
+                  </p>
+                </div>
               </div>
             </div>
           </div>
diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index ba53860b4..07db7617b 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -56,7 +56,7 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 
 function AuthButtons() {
   return (
-    <div className={'flex space-x-0.5'}>
+    <div className={'flex space-x-2'}>
       <div className={'hidden space-x-0.5 md:flex'}>
         <ModeToggle />