🎨 Improve SCSS for header navigation

modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss

@@ -4,52 +4,63 @@
 	border-bottom: 1px solid $color-gray-300;
 	position: relative;
 
+	--color-accent: #{$color-blueberry};
+	--color-text: #{$color-gray-900};
+	--color-disabled: #CCC;
+
 	.ppcp-r-navigation {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		height: 40px;
 
-		button.is-primary {
-			padding: 10px 18px;
-			justify-content: center;
-			margin: 0 0 0 12px;
-			&:not(:disabled) {
-				background-color: $color-blueberry;
+		.components-button {
+			@include font(13, 20, 400);
+
+			&.is-primary {
+				background-color: var(--color-accent);
+				padding: 10px 18px;
+				justify-content: center;
+				margin: 0 0 0 12px;
+
+				&:disabled {
+					background-color: var(--color-disabled);
+				}
 			}
-		}
 
-		button.is-tertiary {
-			@include font(16, 24, 600);
-			color: $color-gray-900;
-			&:hover{
-				background-color: transparent;
-				background: none;
+			&.is-link {
+				color: var(--color-accent);
+				text-decoration: none;
+
+				&:disabled {
+					color: var(--color-disabled);
+				}
+			}
+
+			&.is-title {
+				@include font(16, 24, 600);
+				color: var(--color-text);
+
+				.title {
+					margin-left: 18px;
+				}
+
+				.big {
+					@include font(20, 28, 400);
+				}
 			}
 		}
 
 		&--left {
 			align-items: center;
 			display: inline-flex;
-
-			&__link {
-				@include font(20, 28, 400);
-				color: $color-gray-900;
-				text-decoration: none;
-				padding: 0 0 0 18px;
-			}
-		}
-
-		&--right a{
-			@include font(13, 20, 400);
-			color: $color-blueberry;
-			text-decoration: none;
 		}
 
 		&--progress-bar {
 			position: absolute;
 			bottom: 0;
 			left: 0;
-			background-color: $color-blueberry;
+			background-color: var(--color-accent);
 			height: 4px;
 			transition: width 0.3s;
 		}

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js

@@ -14,12 +14,15 @@ const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
 		<div className="ppcp-r-navigation-container">
 			<div className="ppcp-r-navigation">
 				<div className="ppcp-r-navigation--left">
-					<Icon icon={ chevronLeft } />
 					<Button
-						variant="tertiary"
+						variant="link"
 						onClick={ isFirst ? onExit : onPrev }
+						className="is-title"
 					>
-						{ title }
+						<Icon icon={ chevronLeft } />
+						<span className={ 'title ' + ( isFirst ? 'big' : '' ) }>
+							{ title }
+						</span>
 					</Button>
 				</div>
 				{ ! isFirst &&
@@ -33,7 +36,7 @@ const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
 const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => {
 	return (
 		<div className="ppcp-r-navigation--right">
-			<Button onClick={ onExit }>
+			<Button variant="link" onClick={ onExit }>
 				{ __( 'Save and exit', 'woocommerce-paypal-payments' ) }
 			</Button>
 			{ showNext && (