Merge pull request #9400 from google/enhancement/#9068-callout-button…

…-style

Apply callout button style to AS selection panel error notice

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/ErrorNotice.test.js

@@ -210,7 +210,7 @@ describe( 'ErrorNotice', () => {
 
 			expect( getByText( /request access/i ) ).toBeInTheDocument();
 			expect(
-				getByRole( 'link', { name: /request access/i } )
+				getByRole( 'button', { name: /request access/i } )
 			).toHaveAttribute(
 				'href',
 				registry

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/RequestAccessButton.js

@@ -29,13 +29,18 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Link from '../../../../../../components/Link';
+import { Button } from 'googlesitekit-components';
 
 export default function RequestAccessButton( { requestAccessURL } ) {
 	return (
-		<Link danger href={ requestAccessURL } target="_blank">
+		<Button
+			className="googlesitekit-audience-selection-panel__error-notice-action"
+			tertiary
+			href={ requestAccessURL }
+			target="_blank"
+		>
 			{ __( 'Request access', 'google-site-kit' ) }
-		</Link>
+		</Button>
 	);
 }
 

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/RetryButton.js

@@ -29,13 +29,17 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Link from '../../../../../../components/Link';
+import { Button } from 'googlesitekit-components';
 
 export default function RetryButton( { handleRetry } ) {
 	return (
-		<Link danger onClick={ handleRetry }>
+		<Button
+			className="googlesitekit-audience-selection-panel__error-notice-action"
+			onClick={ handleRetry }
+			tertiary
+		>
 			{ __( 'Retry', 'google-site-kit' ) }
-		</Link>
+		</Button>
 	);
 }
 

assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-selection-panel.scss

@@ -42,7 +42,7 @@
 			background-color: $c-utility-error-container;
 			display: flex;
 			justify-content: space-between;
-			padding: $grid-gap-phone - 2 $grid-gap-desktop;
+			padding: 10px $grid-gap-desktop;
 
 			p {
 				color: $c-utility-on-error-container;
@@ -60,11 +60,24 @@
 
 			.googlesitekit-audience-selection-panel__error-notice-actions {
 
-				.googlesitekit-cta-link {
-					color: $c-utility-on-error-container;
-					font-size: $fs-label-md;
-					font-weight: $fw-medium;
-					line-height: $lh-label-md;
+				.googlesitekit-audience-selection-panel__error-notice-action {
+					border-radius: $br-lg;
+					min-height: 32px;
+					padding: 6px $grid-gap-phone;
+					white-space: nowrap;
+
+					@include mdc-button-ink-color( $c-utility-on-error-container );
+
+					&:hover {
+						@include mdc-button-filled-accessible( rgba($c-red-r-100, 0.6) );
+						@include mdc-button-ink-color( $c-utility-on-error-container );
+					}
+
+					&:active,
+					&:focus {
+						@include mdc-button-filled-accessible( $c-red-r-100 );
+						@include mdc-button-ink-color( $c-utility-on-error-container );
+					}
 				}
 			}
 		}