From 3b3a070d2bb782a7969ed4f747aaf193a925b82f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 03:01:53 +0000
Subject: [PATCH 1/4] Initial plan


From 628937b5acf65061acad1eccce95830b361d8be8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 03:05:01 +0000
Subject: [PATCH 2/4] refactor(MobileGate): convert from styled-components to
 Tailwind CSS

Co-authored-by: tyler-dane <30163055+tyler-dane@users.noreply.github.com>
---
 .../src/components/MobileGate/MobileGate.tsx  | 87 +++----------------
 1 file changed, 14 insertions(+), 73 deletions(-)

diff --git a/packages/web/src/components/MobileGate/MobileGate.tsx b/packages/web/src/components/MobileGate/MobileGate.tsx
index 91e578e69..f27f4a2d6 100644
--- a/packages/web/src/components/MobileGate/MobileGate.tsx
+++ b/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="mb-8 font-sans text-base leading-relaxed font-normal text-[#a0a0a0]">
           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>
   );
 };

From ea28e7f102858b209fa79692d0cbef5627285717 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 03:06:14 +0000
Subject: [PATCH 3/4] fix(MobileGate): use semantic color token for message
 text

Co-authored-by: tyler-dane <30163055+tyler-dane@users.noreply.github.com>
---
 packages/web/src/components/MobileGate/MobileGate.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/src/components/MobileGate/MobileGate.tsx b/packages/web/src/components/MobileGate/MobileGate.tsx
index f27f4a2d6..c7ac08996 100644
--- a/packages/web/src/components/MobileGate/MobileGate.tsx
+++ b/packages/web/src/components/MobileGate/MobileGate.tsx
@@ -13,7 +13,7 @@ export const MobileGate: React.FC = () => {
         <h1 className="mb-6 font-sans text-2xl font-medium text-white">
           Compass isn&apos;t built for mobile yet
         </h1>
-        <p className="mb-8 font-sans text-base leading-relaxed font-normal text-[#a0a0a0]">
+        <p className="text-text-light-inactive mb-8 font-sans text-base leading-relaxed font-normal">
           We&apos;re focusing on perfecting the web experience first. Join our
           mobile waitlist to be the first to know when we launch.
         </p>

From dca78bba50c9ac3d41ce63d4b7e2ccd003eac22e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 03:07:18 +0000
Subject: [PATCH 4/4] refactor(MobileGate): remove redundant font-normal class

Co-authored-by: tyler-dane <30163055+tyler-dane@users.noreply.github.com>
---
 packages/web/src/components/MobileGate/MobileGate.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/src/components/MobileGate/MobileGate.tsx b/packages/web/src/components/MobileGate/MobileGate.tsx
index c7ac08996..bc1c48e9f 100644
--- a/packages/web/src/components/MobileGate/MobileGate.tsx
+++ b/packages/web/src/components/MobileGate/MobileGate.tsx
@@ -13,7 +13,7 @@ export const MobileGate: React.FC = () => {
         <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 font-normal">
+        <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.
         </p>