Change footer forward button to primary and backward button to tertiary in the tour guide modal

mdperez86 · mdperez86 · commit dca1433e2498 · 2023-07-10T12:51:33.000-04:00
diff --git a/plugins/woocommerce-admin/client/products/tour/components/guide/index.tsx b/plugins/woocommerce-admin/client/products/tour/components/guide/index.tsx
@@ -11,6 +11,7 @@ import { Modal, Button } from '@wordpress/components';
  */
 import PageControl from './page-control';
 import type { GuideProps } from './types';
+import './style.scss';
 
 /*
  * This component was copied from @wordpress/components since we needed
@@ -90,6 +91,7 @@ function Guide( {
 					{ canGoBack && (
 						<Button
 							className="components-guide__back-button"
+							variant="tertiary"
 							onClick={ goBack }
 						>
 							{ __( 'Previous', 'woocommerce' ) }
@@ -98,6 +100,7 @@ function Guide( {
 					{ canGoForward && (
 						<Button
 							className="components-guide__forward-button"
+							variant="primary"
 							onClick={ goForward }
 						>
 							{ __( 'Next', 'woocommerce' ) }
@@ -106,6 +109,7 @@ function Guide( {
 					{ ! canGoForward && (
 						<Button
 							className="components-guide__finish-button"
+							variant="primary"
 							href={ finishButtonLink }
 							target={ finishButtonLink ? '_blank' : undefined }
 							rel={ finishButtonLink ? 'noopener' : undefined }
diff --git a/plugins/woocommerce-admin/client/products/tour/components/guide/style.scss b/plugins/woocommerce-admin/client/products/tour/components/guide/style.scss
@@ -63,6 +63,43 @@
 		padding: 0 $grid-unit-40;
 		position: relative;
 		width: 100%;
+
+		.components-button {
+			&.components-guide__back-button,
+			&.components-guide__forward-button,
+			&.components-guide__finish-button {
+				height: 30px;
+				position: absolute;
+				font-weight: inherit;
+
+				&.is-primary {
+					color: var(--wp-components-color-accent-inverted, #fff);
+				}
+
+				&:hover {
+					text-decoration: none;
+				}
+			}
+
+			&.components-guide__back-button,
+			&.components-guide__forward-button {
+				font-size: $default-font-size;
+				padding: 4px 2px;
+
+				&.has-text svg {
+					margin: 0;
+				}
+			}
+
+			&.components-guide__back-button {
+				left: $grid-unit-40;
+			}
+
+			&.components-guide__forward-button,
+			&.components-guide__finish-button {
+				right: $grid-unit-40;
+			}
+		}
 	}
 
 	&__page-control {
@@ -88,45 +125,8 @@
 	height: 80vh;
 	max-height: 575px;
 
-	@media ( max-width: $break-small ) {
+	@media (max-width: $break-small) {
 		margin: auto;
 		max-width: calc(100vw - #{$grid-unit-20} * 2);
 	}
 }
-
-.components-button {
-	&.components-guide__back-button,
-	&.components-guide__forward-button,
-	&.components-guide__finish-button {
-		height: 30px;
-		position: absolute;
-	}
-
-	&.components-guide__back-button,
-	&.components-guide__forward-button {
-		font-size: $default-font-size;
-		padding: 4px 2px;
-
-		&.has-text svg {
-			margin: 0;
-		}
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
-	&.components-guide__back-button {
-		left: $grid-unit-40;
-	}
-
-	&.components-guide__forward-button {
-		right: $grid-unit-40;
-		color: #1386bf;
-		font-weight: bold;
-	}
-
-	&.components-guide__finish-button {
-		right: $grid-unit-40;
-	}
-}
