Merge pull request #19392 from mozilla/FXA-12326

chore(settings): Add border to Google thirdparty auth button

Author: nshirley

packages/fxa-settings/src/components/ThirdPartyAuth/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThirdPartyAuthComponent buttons match snapshot: apple 1`] = `
+<button
+  aria-label="Continue with Apple"
+  class="w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
+          bg-black border-transparent
+          "
+  type="submit"
+>
+  <svg>
+    apple-logo-viewbox-white.svg
+  </svg>
+</button>
+`;
+
+exports[`ThirdPartyAuthComponent buttons match snapshot: google 1`] = `
+<button
+  aria-label="Continue with Google"
+  class="w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
+          bg-[#F9F4F4] border-[#747775] border-[1px]
+          "
+  type="submit"
+>
+  <svg>
+    google-logo-viewbox.svg
+  </svg>
+</button>
+`;

packages/fxa-settings/src/components/ThirdPartyAuth/index.test.tsx

@@ -197,6 +197,19 @@ describe('ThirdPartyAuthComponent', () => {
     expect(mockViewWithNoPasswordSet).not.toHaveBeenCalled();
   });
 
+  it('buttons match snapshot', async () => {
+    renderWith({
+      enabled: true,
+      onContinueWithApple,
+      onContinueWithGoogle,
+    });
+
+    const googleButton = await screen.findByLabelText('Continue with Google');
+    const appleButton = await screen.findByLabelText('Continue with Apple');
+    expect(googleButton).toMatchSnapshot('google');
+    expect(appleButton).toMatchSnapshot('apple');
+  });
+
   describe('emits metrics', () => {
     it('emits glean metrics loginNoPwView', () => {
       renderWith({

packages/fxa-settings/src/components/ThirdPartyAuth/index.tsx

@@ -35,7 +35,7 @@ const ThirdPartyAuth = ({
   showSeparator = true,
   viewName = 'unknown',
   deeplink,
-  flowQueryParams
+  flowQueryParams,
 }: ThirdPartyAuthProps) => {
   const config = useConfig();
 
@@ -79,7 +79,7 @@ const ThirdPartyAuth = ({
                   <GoogleLogo />
                 </>
               ),
-              deeplink
+              deeplink,
             }}
           />
           <ThirdPartySignInForm
@@ -99,7 +99,7 @@ const ThirdPartyAuth = ({
                   <AppleLogo />
                 </>
               ),
-              deeplink
+              deeplink,
             }}
           />
         </div>
@@ -128,7 +128,7 @@ const ThirdPartySignInForm = ({
   onSubmit,
   viewName,
   deeplink,
-  flowQueryParams
+  flowQueryParams,
 }: {
   party: 'google' | 'apple';
   authorizationEndpoint: string;
@@ -154,8 +154,16 @@ const ThirdPartySignInForm = ({
 
   const getLoginAriaLabel = () => {
     const labels = {
-      google: l10n.getString('continue-with-google-button', null, 'Continue with Google'),
-      apple: l10n.getString('continue-with-apple-button', null, 'Continue with Apple')
+      google: l10n.getString(
+        'continue-with-google-button',
+        null,
+        'Continue with Google'
+      ),
+      apple: l10n.getString(
+        'continue-with-apple-button',
+        null,
+        'Continue with Apple'
+      ),
     };
     return labels[party];
   };
@@ -197,24 +205,30 @@ const ThirdPartySignInForm = ({
     }
   }, [party, stateRef, viewName, logViewEventOnce, flowQueryParams]);
 
-
   if (onSubmit === undefined) {
     onSubmit = () => true;
   }
 
   useEffect(() => {
     if (deeplink && formRef.current) {
       // Only deeplink if this is the correct button
-      if ((deeplink === "googleLogin" && party === "google") || (deeplink === "appleLogin" && party === "apple")) {
+      if (
+        (deeplink === 'googleLogin' && party === 'google') ||
+        (deeplink === 'appleLogin' && party === 'apple')
+      ) {
         onClick();
         formRef.current.submit();
       }
     }
-
   }, [deeplink, onClick, party]);
 
   return (
-    <form action={authorizationEndpoint} method="GET" onSubmit={onSubmit} ref={formRef}>
+    <form
+      action={authorizationEndpoint}
+      method="GET"
+      onSubmit={onSubmit}
+      ref={formRef}
+    >
       <input
         data-testid={`${party}-signin-form-state`}
         ref={stateRef}
@@ -235,15 +249,19 @@ const ThirdPartySignInForm = ({
       {!isDeeplinking ? (
         <button
           type="submit"
-          className={`w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border border-transparent focus-visible-default outline-offset-2 ${
-            party === 'google' ? 'bg-[#F9F4F4]' : 'bg-black'
-          }`}
+          className={`w-[60px] h-[60px] p-4 flex items-center justify-center rounded-full border focus-visible-default outline-offset-2
+          ${
+            party === 'google'
+              ? 'bg-[#F9F4F4] border-[#747775] border-[1px]'
+              : 'bg-black border-transparent'
+          }
+          `}
           onClick={onClick}
           aria-label={getLoginAriaLabel()}
         >
           {buttonText}
         </button>
-      ) : null }
+      ) : null}
     </form>
   );
 };
@@ -263,7 +281,10 @@ function getState(flowQueryParams: QueryParams | undefined) {
   const combinedParams = {
     ...paramsObject,
     ...Object.fromEntries(
-      Object.entries(flowQueryParams || {}).map(([key, value]) => [key, String(value)])
+      Object.entries(flowQueryParams || {}).map(([key, value]) => [
+        key,
+        String(value),
+      ])
     ),
   };
 
@@ -278,7 +299,8 @@ function getState(flowQueryParams: QueryParams | undefined) {
   ]);
   // we won't need these params that are used for internal backbone/react navigation
   return encodeURIComponent(
-    `${window.location.origin}${window.location.pathname
+    `${window.location.origin}${
+      window.location.pathname
     }?${filteredParams.toString()}`
   );
 }