From d14c4b52580695bd612fe8ebbb1c538306755d7d Mon Sep 17 00:00:00 2001
From: kokopi <haruspace.dev@gmail.com>
Date: Wed, 11 Mar 2026 21:41:54 +0900
Subject: [PATCH] update:sign in visibility

---
 frontend/src/components/ui/Button.tsx      | 3 ++-
 frontend/src/components/ui/GuestBanner.tsx | 8 +++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 093d3f2..f387dfe 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -1,11 +1,12 @@
 import type { ButtonHTMLAttributes } from 'react'
 
-type Variant = 'primary' | 'ghost' | 'danger'
+type Variant = 'primary' | 'ghost' | 'danger' | 'purple'
 
 const variants: Record<Variant, string> = {
   primary: 'bg-fg-100 text-bg-100 hover:bg-fg-200 font-medium',
   ghost:   'text-fg-200 hover:bg-bg-300 hover:text-fg-100',
   danger:  'bg-red-900/40 text-red-400 hover:bg-red-900/60',
+  purple:  'bg-purple-500/15 text-purple-400 hover:bg-purple-500/25 hover:text-purple-300',
 }
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
diff --git a/frontend/src/components/ui/GuestBanner.tsx b/frontend/src/components/ui/GuestBanner.tsx
index f8a38d9..0f00e97 100644
--- a/frontend/src/components/ui/GuestBanner.tsx
+++ b/frontend/src/components/ui/GuestBanner.tsx
@@ -1,4 +1,5 @@
 import { InfoIcon } from "../icons/info"
+import { Button } from "./Button"
 
 interface GuestBannerProps {
   onLogin: () => void
@@ -15,12 +16,9 @@ export function GuestBanner({ onLogin }: GuestBannerProps) {
             You're in guest mode — tickets are stored locally in your browser.
           </p>
         </div>
-        <button
-          onClick={onLogin}
-          className="ml-4 shrink-0 rounded-md bg-bg-300 px-3 py-1.5 text-xs font-medium text-fg-100 transition-colors hover:bg-bg-400 cursor-pointer"
-        >
+        <Button onClick={onLogin} variant="primary">
           Sign in with Google
-        </button>
+        </Button>
       </div>
     </div>
   )