From 402b7dc3f18f2803cb03b6f3e5e4c60598db62df Mon Sep 17 00:00:00 2001
From: YongJunXi <ernestyongjunxi@gmail.com>
Date: Tue, 14 Jul 2026 12:49:31 +0800
Subject: [PATCH 1/3] Simplify container

---
 .../login-page.component.spec.ts.snap         | 127 +++++++++---------
 .../app/page-login/login-page.component.html  |  22 ++-
 .../app/page-login/login-page.component.scss  |  11 --
 .../app/page-login/login-page.component.ts    |   1 -
 4 files changed, 71 insertions(+), 90 deletions(-)
 delete mode 100644 src/web/app/page-login/login-page.component.scss

diff --git a/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap b/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap
index 0efcc40fec9..11a7477e2d9 100644
--- a/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap
+++ b/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap
@@ -10,81 +10,76 @@ exports[`LoginPageComponent snapshot > should match snapshot with login methods
 >
   <div>
     <div
-      class="login-page-container container d-flex align-items-center justify-content-center py-5"
+      class="card bg-light mx-auto"
+      style="max-width: 800px;"
     >
       <div
-        class="login-page-card card w-100 mx-auto shadow-sm rounded-4"
+        class="card-header bg-primary text-white"
       >
-        <div
-          class="card-body p-5"
+        <h1
+          class="mb-0 h3"
         >
+          Sign in
+        </h1>
+      </div>
+      <div
+        class="card-body"
+      >
+        <p>
+          Choose a sign-in method to continue.
+        </p>
+        <tm-login-method-buttons-container>
           <div
-            class="login-card-content w-100 mx-auto"
+            class="login-method-buttons d-flex flex-column gap-3 mx-auto w-100"
           >
-            <h1
-              class="h2 fw-bold mb-2"
-            >
-              Sign in
-            </h1>
-            <p
-              class="text-secondary mb-4"
-            >
-              Choose a sign-in method to continue.
-            </p>
-            <tm-login-method-buttons-container>
-              <div
-                class="login-method-buttons d-flex flex-column gap-3 mx-auto w-100"
+            <tm-google-login-button>
+              <button
+                class="btn btn-outline-dark border-2 w-100 fw-semibold position-relative fs-6 py-3"
+                type="button"
               >
-                <tm-google-login-button>
-                  <button
-                    class="btn btn-outline-dark border-2 w-100 fw-semibold position-relative fs-6 py-3"
-                    type="button"
+                <span
+                  class="position-absolute top-50 start-0 translate-middle-y ms-3 d-inline-flex align-items-center justify-content-center fs-4 lh-1"
+                >
+                  <svg
+                    class="d-block"
+                    height="1em"
+                    version="1.1"
+                    viewBox="0 0 48 48"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
                   >
-                    <span
-                      class="position-absolute top-50 start-0 translate-middle-y ms-3 d-inline-flex align-items-center justify-content-center fs-4 lh-1"
-                    >
-                      <svg
-                        class="d-block"
-                        height="1em"
-                        version="1.1"
-                        viewBox="0 0 48 48"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                      >
-                        <path
-                          d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-                          fill="#EA4335"
-                        />
-                        <path
-                          d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-                          fill="#4285F4"
-                        />
-                        <path
-                          d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-                          fill="#FBBC05"
-                        />
-                        <path
-                          d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-                          fill="#34A853"
-                        />
-                        <path
-                          d="M0 0h48v48H0z"
-                          fill="none"
-                        />
-                      </svg>
-                    </span>
-                    <span
-                      class="d-block text-center text-truncate px-5"
-                    >
-                      Continue with Google
-                    </span>
-                  </button>
-                </tm-google-login-button>
-              </div>
-            </tm-login-method-buttons-container>
+                    <path
+                      d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+                      fill="#EA4335"
+                    />
+                    <path
+                      d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+                      fill="#4285F4"
+                    />
+                    <path
+                      d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+                      fill="#FBBC05"
+                    />
+                    <path
+                      d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+                      fill="#34A853"
+                    />
+                    <path
+                      d="M0 0h48v48H0z"
+                      fill="none"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="d-block text-center text-truncate px-5"
+                >
+                  Continue with Google
+                </span>
+              </button>
+            </tm-google-login-button>
           </div>
-        </div>
+        </tm-login-method-buttons-container>
       </div>
     </div>
   </div>
diff --git a/src/web/app/page-login/login-page.component.html b/src/web/app/page-login/login-page.component.html
index 4dd57b97b84..314f69b8ad9 100644
--- a/src/web/app/page-login/login-page.component.html
+++ b/src/web/app/page-login/login-page.component.html
@@ -1,16 +1,14 @@
 <div *tmIsLoading="isLoadingLoginMethods()">
-  <div class="login-page-container container d-flex align-items-center justify-content-center py-5">
-    <div class="login-page-card card w-100 mx-auto shadow-sm rounded-4">
-      <div class="card-body p-5">
-        <div class="login-card-content w-100 mx-auto">
-          <h1 class="h2 fw-bold mb-2">Sign in</h1>
-          <p class="text-secondary mb-4">Choose a sign-in method to continue.</p>
-          <tm-login-method-buttons-container
-            [nextUrl]="nextUrl()"
-            [supportedLoginMethods]="loginMethods()"
-          ></tm-login-method-buttons-container>
-        </div>
-      </div>
+  <div class="card bg-light mx-auto" style="max-width: 600px">
+    <div class="card-header bg-primary text-white">
+      <h1 class="mb-0 h3">Sign in</h1>
+    </div>
+    <div class="card-body">
+      <p>Choose a sign-in method to continue.</p>
+      <tm-login-method-buttons-container
+        [nextUrl]="nextUrl()"
+        [supportedLoginMethods]="loginMethods()"
+      ></tm-login-method-buttons-container>
     </div>
   </div>
 </div>
diff --git a/src/web/app/page-login/login-page.component.scss b/src/web/app/page-login/login-page.component.scss
deleted file mode 100644
index 565b77513b6..00000000000
--- a/src/web/app/page-login/login-page.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.login-page-container {
-  min-height: calc(100vh - 142px);
-}
-
-.login-page-card {
-  max-width: 640px;
-}
-
-.login-card-content {
-  max-width: 520px;
-}
diff --git a/src/web/app/page-login/login-page.component.ts b/src/web/app/page-login/login-page.component.ts
index fd32ac3a1b3..fb261bc2dec 100644
--- a/src/web/app/page-login/login-page.component.ts
+++ b/src/web/app/page-login/login-page.component.ts
@@ -8,7 +8,6 @@ import { LoginMethodButtonsContainerComponent } from '../components/login-method
 
 @Component({
   selector: 'tm-login-page',
-  styleUrls: ['./login-page.component.scss'],
   templateUrl: './login-page.component.html',
   imports: [LoadingSpinnerDirective, LoginMethodButtonsContainerComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,

From 42520b24e55ca5d659e737df14c4cf4fc0b1f96e Mon Sep 17 00:00:00 2001
From: YongJunXi <ernestyongjunxi@gmail.com>
Date: Tue, 14 Jul 2026 13:07:28 +0800
Subject: [PATCH 2/3] Use plain bootstrap buttons for login buttons

---
 ...in-method-buttons-container.component.html |  2 +-
 .../dev-server-login-button.component.html    | 15 ++----
 .../google-login-button.component.html        | 41 ++---------------
 .../login-page.component.spec.ts.snap         | 46 ++++---------------
 4 files changed, 18 insertions(+), 86 deletions(-)

diff --git a/src/web/app/components/login-method-buttons-container/login-method-buttons-container.component.html b/src/web/app/components/login-method-buttons-container/login-method-buttons-container.component.html
index e44e7445dbb..de831ab4c82 100644
--- a/src/web/app/components/login-method-buttons-container/login-method-buttons-container.component.html
+++ b/src/web/app/components/login-method-buttons-container/login-method-buttons-container.component.html
@@ -1,4 +1,4 @@
-<div class="login-method-buttons d-flex flex-column gap-3 mx-auto w-100">
+<div class="login-method-buttons d-flex flex-column gap-3 mx-auto">
   @if (isSupported(LoginMethod.GOOGLE)) {
     <tm-google-login-button (login)="login(LoginMethod.GOOGLE)"></tm-google-login-button>
   }
diff --git a/src/web/app/components/login-method-buttons/dev-server-login-button/dev-server-login-button.component.html b/src/web/app/components/login-method-buttons/dev-server-login-button/dev-server-login-button.component.html
index 4a52dfe9d8d..5696bca4c1a 100644
--- a/src/web/app/components/login-method-buttons/dev-server-login-button/dev-server-login-button.component.html
+++ b/src/web/app/components/login-method-buttons/dev-server-login-button/dev-server-login-button.component.html
@@ -1,13 +1,6 @@
-<button
-  type="button"
-  class="btn btn-outline-dark border-2 w-100 fw-semibold position-relative fs-6 py-3"
-  (click)="login.emit()"
->
-  <span
-    class="position-absolute top-50 start-0 translate-middle-y ms-3 d-inline-flex align-items-center justify-content-center fs-4 lh-1"
-  >
-    <i class="fas fa-user-lock"></i>
+<button type="button" class="btn btn-dark btn-lg w-100" (click)="login.emit()">
+  <span class="d-inline-flex align-items-center justify-content-center gap-2">
+    <i class="fas fa-user-lock" aria-hidden="true"></i>
+    <span>Continue with Development Server</span>
   </span>
-
-  <span class="d-block text-center text-truncate px-5">Continue with Development Server</span>
 </button>
diff --git a/src/web/app/components/login-method-buttons/google-login-button/google-login-button.component.html b/src/web/app/components/login-method-buttons/google-login-button/google-login-button.component.html
index bdeaf795e2c..d8190f75dee 100644
--- a/src/web/app/components/login-method-buttons/google-login-button/google-login-button.component.html
+++ b/src/web/app/components/login-method-buttons/google-login-button/google-login-button.component.html
@@ -1,39 +1,6 @@
-<button
-  type="button"
-  class="btn btn-outline-dark border-2 w-100 fw-semibold position-relative fs-6 py-3"
-  (click)="login.emit()"
->
-  <span
-    class="position-absolute top-50 start-0 translate-middle-y ms-3 d-inline-flex align-items-center justify-content-center fs-4 lh-1"
-  >
-    <svg
-      class="d-block"
-      height="1em"
-      version="1.1"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 48 48"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <path
-        fill="#EA4335"
-        d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-      ></path>
-      <path
-        fill="#4285F4"
-        d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-      ></path>
-      <path
-        fill="#FBBC05"
-        d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-      ></path>
-      <path
-        fill="#34A853"
-        d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-      ></path>
-      <path fill="none" d="M0 0h48v48H0z"></path>
-    </svg>
+<button type="button" class="btn btn-danger btn-lg w-100" (click)="login.emit()">
+  <span class="d-inline-flex align-items-center justify-content-center gap-2">
+    <i class="fab fa-google" aria-hidden="true"></i>
+    <span>Continue with Google</span>
   </span>
-
-  <span class="d-block text-center text-truncate px-5">Continue with Google</span>
 </button>
diff --git a/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap b/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap
index 11a7477e2d9..ad82071962c 100644
--- a/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap
+++ b/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap
@@ -34,47 +34,19 @@ exports[`LoginPageComponent snapshot > should match snapshot with login methods
           >
             <tm-google-login-button>
               <button
-                class="btn btn-outline-dark border-2 w-100 fw-semibold position-relative fs-6 py-3"
+                class="btn btn-danger text-white w-100"
                 type="button"
               >
                 <span
-                  class="position-absolute top-50 start-0 translate-middle-y ms-3 d-inline-flex align-items-center justify-content-center fs-4 lh-1"
+                  class="d-inline-flex align-items-center justify-content-center gap-2"
                 >
-                  <svg
-                    class="d-block"
-                    height="1em"
-                    version="1.1"
-                    viewBox="0 0 48 48"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <path
-                      d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-                      fill="#EA4335"
-                    />
-                    <path
-                      d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-                      fill="#4285F4"
-                    />
-                    <path
-                      d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-                      fill="#FBBC05"
-                    />
-                    <path
-                      d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-                      fill="#34A853"
-                    />
-                    <path
-                      d="M0 0h48v48H0z"
-                      fill="none"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="d-block text-center text-truncate px-5"
-                >
-                  Continue with Google
+                  <i
+                    aria-hidden="true"
+                    class="fab fa-google"
+                  />
+                  <span>
+                    Continue with Google
+                  </span>
                 </span>
               </button>
             </tm-google-login-button>

From b0017a0e7d9cad64c53b8dbcf3b8d8bba29f845e Mon Sep 17 00:00:00 2001
From: YongJunXi <ernestyongjunxi@gmail.com>
Date: Tue, 14 Jul 2026 14:13:26 +0800
Subject: [PATCH 3/3] Update snapshot

---
 .../__snapshots__/login-page.component.spec.ts.snap         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap b/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap
index ad82071962c..b894c1c744c 100644
--- a/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap
+++ b/src/web/app/page-login/__snapshots__/login-page.component.spec.ts.snap
@@ -11,7 +11,7 @@ exports[`LoginPageComponent snapshot > should match snapshot with login methods
   <div>
     <div
       class="card bg-light mx-auto"
-      style="max-width: 800px;"
+      style="max-width: 600px;"
     >
       <div
         class="card-header bg-primary text-white"
@@ -30,11 +30,11 @@ exports[`LoginPageComponent snapshot > should match snapshot with login methods
         </p>
         <tm-login-method-buttons-container>
           <div
-            class="login-method-buttons d-flex flex-column gap-3 mx-auto w-100"
+            class="login-method-buttons d-flex flex-column gap-3 mx-auto"
           >
             <tm-google-login-button>
               <button
-                class="btn btn-danger text-white w-100"
+                class="btn btn-danger btn-lg w-100"
                 type="button"
               >
                 <span