fix google

frontend/src/components/GoogleSignIn.tsx

@@ -43,6 +43,8 @@ interface GoogleButtonOptions {
   size?: string;
   text?: string;
   shape?: string;
+  logoAlignment?: string;
+  width?: number;
 }
 
 interface GoogleNotification {
@@ -60,7 +62,6 @@ interface GoogleSignInProps {
 
 export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) {
   const googleClientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
-  const buttonRef = useRef<HTMLButtonElement>(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const handleGoogleSignIn = useCallback(async (response: GoogleSignInResponse) => {
@@ -80,12 +81,6 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) {
     }
   }, [returnUrl]);
 
-  const handleCustomButtonClick = useCallback(() => {
-    if (window.google) {
-      window.google.accounts.id.prompt();
-    }
-  }, []);
-
   useEffect(() => {
     // Assign the callback to window object so it can be called from the Google button
     window.handleGoogleSignIn = handleGoogleSignIn;
@@ -128,7 +123,7 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) {
 
   return (
     <>
-      {/* Hidden div for One Tap popup */}
+      {/* Google One Tap container */}
       <div 
         id="g_id_onload"
         data-client_id={googleClientId}
@@ -139,51 +134,44 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) {
         data-callback="handleGoogleSignIn"
       />
       
-      {/* Custom Google button that matches site style */}
-      <button
-        ref={buttonRef}
-        onClick={handleCustomButtonClick}
-        disabled={isLoading}
-        className={`
-          group w-full h-12 flex items-center justify-center gap-3 text-sm font-medium tracking-wide 
-          rounded-full border border-border bg-background hover:bg-accent/5 transition-all duration-200 
-          relative overflow-hidden ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}
-        `}
-      >
-        {/* Google logo without background */}
-        <span className="relative z-10 flex items-center justify-center">
-          <svg className="w-5 h-5 relative" viewBox="0 0 24 24">
-            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
-            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
-            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
-            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
-          </svg>
-        </span>
-        
-        <span className="relative z-10">{isLoading ? "Connecting..." : "Continue with Google"}</span>
-        
-        {/* External link indicator */}
-        <span className="relative z-10 inline-flex items-center justify-center size-4 rounded-full bg-muted/30 group-hover:bg-muted/50 transition-colors duration-200 ml-1">
-          <svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="text-muted-foreground">
-            <path d="M7 17L17 7M17 7H8M17 7V16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-          </svg>
-        </span>
-      </button>
-      
-      {/* Hidden original Google button with no styles */}
-      <div 
-        className="g_id_signin hidden"
-        data-type="standard"
-        data-size="large"
-        data-theme="outline"
-        data-text="sign_in_with"
-        data-shape="rectangular"
-        data-logo_alignment="left"
-      />
+      {/* Google Sign-In button container styled to match site design */}
+      <div id="google-signin-button" className="w-full h-12">
+        {/* The Google button will be rendered here */}
+      </div>
       
       <Script
         src="https://accounts.google.com/gsi/client"
         strategy="afterInteractive"
+        onLoad={() => {
+          if (window.google && googleClientId) {
+            // Style the button after Google script loads
+            const buttonContainer = document.getElementById('google-signin-button');
+            if (buttonContainer) {
+              window.google.accounts.id.renderButton(buttonContainer, {
+                type: 'standard',
+                theme: 'outline',
+                size: 'large',
+                text: 'continue_with',
+                shape: 'pill',
+                logoAlignment: 'left',
+                width: buttonContainer.offsetWidth
+              });
+              
+              // Apply custom styles to match site design
+              setTimeout(() => {
+                const googleButton = buttonContainer.querySelector('div[role="button"]');
+                if (googleButton instanceof HTMLElement) {
+                  googleButton.style.borderRadius = '9999px';
+                  googleButton.style.width = '100%';
+                  googleButton.style.height = '56px';
+                  googleButton.style.border = '1px solid var(--border)';
+                  googleButton.style.background = 'var(--background)';
+                  googleButton.style.transition = 'all 0.2s';
+                }
+              }, 100);
+            }
+          }
+        }}
       />
     </>
   );