feat(e2e): skip OAuth overlay tests on mobile due to MobileGate interference

- Updated OAuth overlay tests to skip execution on mobile devices, as the MobileGate component prevents the overlay from rendering.
- Simplified the test for blurring the active element by removing mobile-specific conditions, ensuring consistent behavior across devices.
- Enhanced MobileGate component styling using Tailwind CSS for improved responsiveness and visual consistency.

Author: tyler-dane

e2e/oauth/oauth-overlay.spec.ts

@@ -22,8 +22,17 @@ import {
  * The overlay shows two phases:
  * 1. OAuth phase: "Complete Google sign-in..." - when isSyncing=true, importing=false
  * 2. Import phase: "Importing your Google Calendar..." - when importing=true
+ *
+ * NOTE: These tests are skipped on mobile because the MobileGate component
+ * blocks the entire app on mobile viewports, preventing the OAuth overlay
+ * from ever being rendered. This is intentional product behavior.
  */
 test.describe("OAuth Overlay", () => {
+  // Skip on mobile - MobileGate blocks the app, so OAuth overlay never renders
+  test.skip(
+    ({ isMobile }) => isMobile,
+    "OAuth overlay not available on mobile",
+  );
   test.beforeEach(async ({ page }) => {
     await prepareOAuthTestPage(page);
     await page.goto("/");
@@ -89,25 +98,11 @@ test.describe("OAuth Overlay", () => {
     await expectBodyLocked(page, false);
   });
 
-  test("blurs active element when overlay activates", async ({
-    page,
-    isMobile,
-  }) => {
-    // On mobile, the main grid might not be visible - use a different focusable element
-    // or skip for mobile as the blur behavior is the same regardless of viewport
-    if (isMobile) {
-      // On mobile, find any focusable element that's visible
-      const focusable = page
-        .locator("button:visible, [tabindex]:visible")
-        .first();
-      await focusable.waitFor({ state: "visible", timeout: 10000 });
-      await focusable.focus();
-    } else {
-      // Wait for main grid to be visible and focusable on desktop
-      const mainGrid = page.locator("#mainGrid");
-      await mainGrid.waitFor({ state: "visible", timeout: 10000 });
-      await mainGrid.focus();
-    }
+  test("blurs active element when overlay activates", async ({ page }) => {
+    // Wait for main grid to be visible and focusable
+    const mainGrid = page.locator("#mainGrid");
+    await mainGrid.waitFor({ state: "visible", timeout: 10000 });
+    await mainGrid.focus();
 
     await page.waitForTimeout(100); // Give time for focus to settle
 
@@ -201,6 +196,12 @@ test.describe("OAuth Overlay", () => {
 });
 
 test.describe("OAuth Overlay - Edge Cases", () => {
+  // Skip on mobile - MobileGate blocks the app, so OAuth overlay never renders
+  test.skip(
+    ({ isMobile }) => isMobile,
+    "OAuth overlay not available on mobile",
+  );
+
   test.beforeEach(async ({ page }) => {
     await prepareOAuthTestPage(page);
     await page.goto("/");

packages/web/src/components/MobileGate/MobileGate.tsx

@@ -1,88 +1,29 @@
 import React from "react";
-import styled from "styled-components";
 
 const WAITLIST_URL = "https://tylerdane.kit.com/compass-mobile";
 
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  min-height: 100dvh;
-  background-color: ${({ theme }) => theme.color.bg.primary};
-  padding: ${({ theme }) => theme.spacing.m};
-`;
-
-const Card = styled.div`
-  background-color: ${({ theme }) => theme.color.bg.secondary};
-  border: 1px solid ${({ theme }) => theme.color.border.primary};
-  border-radius: ${({ theme }) => theme.shape.borderRadius};
-  padding: ${({ theme }) => theme.spacing.xl};
-  width: 400px;
-  max-width: 90vw;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-`;
-
-const Title = styled.h1`
-  font-family: "Rubik", sans-serif;
-  font-size: 24px;
-  font-weight: 500;
-  color: ${({ theme }) => theme.color.common.white};
-  margin: 0 0 ${({ theme }) => theme.spacing.l};
-`;
-
-const Message = styled.p`
-  font-family: "Rubik", sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  color: #a0a0a0;
-  margin: 0 0 ${({ theme }) => theme.spacing.xl};
-  line-height: 1.6;
-`;
-
-const WaitlistButton = styled.button`
-  font-family: "Rubik", sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  min-height: 44px;
-  padding: ${({ theme }) => theme.spacing.s} ${({ theme }) => theme.spacing.xl};
-  background-color: ${({ theme }) => theme.color.text.accent};
-  color: ${({ theme }) => theme.color.common.white};
-  border: none;
-  border-radius: ${({ theme }) => theme.shape.borderRadius};
-  cursor: pointer;
-  transition: opacity ${({ theme }) => theme.transition.default};
-
-  &:hover {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: 2px solid ${({ theme }) => theme.color.text.accent};
-    outline-offset: 2px;
-  }
-`;
-
 export const MobileGate: React.FC = () => {
   const handleJoinWaitlist = () => {
     window.open(WAITLIST_URL, "_blank", "noopener,noreferrer");
   };
 
   return (
-    <Container>
-      <Card>
-        <Title>Compass isn&apos;t built for mobile yet</Title>
-        <Message>
+    <div className="bg-bg-primary flex min-h-dvh items-center justify-center p-4">
+      <div className="border-border-primary bg-bg-secondary flex w-[400px] max-w-[90vw] flex-col items-center rounded border p-8 text-center">
+        <h1 className="mb-6 font-sans text-2xl font-medium text-white">
+          Compass isn&apos;t built for mobile yet
+        </h1>
+        <p className="text-text-light-inactive mb-8 font-sans text-base leading-relaxed">
           We&apos;re focusing on perfecting the web experience first. Join our
           mobile waitlist to be the first to know when we launch.
-        </Message>
-        <WaitlistButton onClick={handleJoinWaitlist}>
+        </p>
+        <button
+          onClick={handleJoinWaitlist}
+          className="bg-accent-primary focus:outline-accent-primary min-h-[44px] cursor-pointer rounded border-none px-8 py-2 font-sans text-base font-medium text-white transition-opacity duration-300 hover:opacity-90 focus:outline focus:outline-2 focus:outline-offset-2"
+        >
           Join Mobile Waitlist
-        </WaitlistButton>
-      </Card>
-    </Container>
+        </button>
+      </div>
+    </div>
   );
 };