Fix buttons in navigation bar (4127)

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

@@ -1,25 +1,33 @@
+$margin_bottom: 48px;
+
 .ppcp-r-navigation-container {
+	// Theming.
+	--wp-components-color-accent: #{$color-blueberry};
+	--color-text: #{$color-gray-900};
+	--color-disabled: #CCC;
+	--navbar-height: 40px;
+	--navbar-vertical-padding: 10px;
+	--subnavigation-height: 40px;
+
+	// Styling.
 	position: sticky;
 	top: var(--wp-admin--admin-bar--height);
 	z-index: 10;
 
-	padding: 10px 48px;
-	margin: 0 -20px 48px -20px;
+	padding: 0 48px;
+	margin: 0 -20px #{$margin_bottom} -20px;
 
 	box-shadow: 0 -1px 0 0 $color-gray-300 inset;
 	background: var(--ppcp-color-app-bg);
 	transition: box-shadow 0.3s;
 
-	--wp-components-color-accent: #{$color-blueberry};
-	--color-text: #{$color-gray-900};
-	--color-disabled: #CCC;
-
 	.ppcp-r-navigation {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		flex-direction: column;
-		gap: 10px;
+		flex-direction: row;
+		height: calc(var(--navbar-height) + (2 * var(--navbar-vertical-padding)));
+		padding: var(--navbar-vertical-padding) 0;
 
 		.components-button {
 			@include font(13, 20, 400);
@@ -58,40 +66,46 @@
 				}
 			}
 		}
-		&--row {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			width: 100%;
-			padding-bottom: 10px;
-		}
-
+	}
 
-		&--left {
-			align-items: center;
-			display: inline-flex;
-		}
+	.ppcp-r-navigation--left {
+		align-items: center;
+		display: inline-flex;
+	}
 
-		&--right {
-			.is-link {
-				padding: 10px 16px;
-			}
+	.ppcp-r-navigation--right {
+		.is-link {
+			padding: 10px 16px;
 		}
+	}
 
-		&--progress-bar {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			background-color: var(--wp-components-color-accent);
-			height: 4px;
-			transition: width 0.3s;
-		}
+	.ppcp-r-navigation--progress-bar {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		background-color: var(--wp-components-color-accent);
+		height: 4px;
+		transition: width 0.3s;
 	}
 
 	&.ppcp--is-scrolled {
 		box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
 	}
 
+	.ppcp--top-sub-navigation {
+		height: var(--subnavigation-height);
+		margin: 0;
+		padding: 0;
+
+		.ppcp-r-tabs {
+			margin: 0;
+		}
+
+		.components-tab-panel__tabs-item {
+			height: var(--subnavigation-height);
+		}
+	}
+
 	@media screen and (max-width: 782px) {
 		padding: 10px 12px;
 

modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss

@@ -1,6 +1,6 @@
 .ppcp-r-tabs {
 	--wp-components-color-accent: #{$color-blueberry};
-	--wp-admin-border-width-focus: 3px;
+	--wp-admin-border-width-focus: 2px;
 
 	transition: max-width 0.2s;
 	margin-top: 10px;
@@ -9,11 +9,9 @@
 	.components-tab-panel__tabs {
 		gap: 0;
 		overflow: auto;
+
 		.components-button {
 			padding: 16px 20px;
-			&.is-active {
-				background-color: #fff4;
-			}
 		}
 	}
 }

modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss

@@ -12,6 +12,7 @@ body:has(.ppcp-r-container--onboarding) {
 	.woocommerce-layout__header,
 	.wrap.woocommerce form > h2,
 	#mainform .subsubsub,
+	#mainform .subsubsub + br.clear,
 	#screen-meta-links {
 		display: none !important;
 		visibility: hidden;

modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js

@@ -1,4 +1,4 @@
-import data from '../../utils/data';
+import { PPIcon } from './Icons';
 
 const ImageBadge = ( { images } ) => {
 	if ( ! images || ! images.length ) {
@@ -8,7 +8,13 @@ const ImageBadge = ( { images } ) => {
 	return (
 		<BadgeContent>
 			<span className="ppcp-r-badge-box__title-image-badge">
-				{ images.map( ( badge ) => data().getImage( badge ) ) }
+				{ images.map( ( badge, index ) => (
+					<PPIcon
+						key={ `badge-${ index }` }
+						imageName={ badge }
+						className="ppcp-r-badge-box__image"
+					/>
+				) ) }
 			</span>
 		</BadgeContent>
 	);

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js

@@ -65,7 +65,9 @@ const OptionItem = ( {
 			<div className="ppcp--box-content">
 				<div className="ppcp--box-content-inner">
 					<span className="ppcp--box-title">{ itemTitle }</span>
-					<p className="ppcp--box-description">{ itemDescription }</p>
+					<div className="ppcp--box-description">
+						{ itemDescription }
+					</div>
 					{ children && (
 						<div className="ppcp--box-details">{ children }</div>
 					) }

modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const GenericIcon = ( { imageName, className = '', alt = '' } ) => {
+	const pathToImages = global.ppcpSettings.assets.imagesUrl;
+
+	return (
+		<img
+			className={ className }
+			alt={ alt }
+			src={ `${ pathToImages }${ imageName }` }
+		/>
+	);
+};
+
+export default GenericIcon;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js

@@ -1,5 +1,6 @@
-export { default as openSignup } from './open-signup';
-export { default as logoPayPal } from './logo-paypal';
+export { default as PPIcon } from './GenericIcon';
+export { default as OpenSignup } from './OpenSignup';
+export { default as LogoPayPal } from './LogoPayPal';
 
 export const NOTIFICATION_SUCCESS = '✔️';
 export const NOTIFICATION_ERROR = '❌';

modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js → modules/ppcp-settings/resources/js/Components/ReusableComponents/TabBar.js

@@ -5,7 +5,7 @@ import { TabPanel } from '@wordpress/components';
 
 import { updateQueryString } from '../../utils/navigation';
 
-const TabNavigation = ( { tabs, activePanel, setActivePanel } ) => {
+const TabBar = ( { tabs, activePanel, setActivePanel } ) => {
 	const isValidTab = ( tabsList, checkTab ) => {
 		return tabsList.some( ( tab ) => tab.name === checkTab );
 	};
@@ -36,4 +36,4 @@ const TabNavigation = ( { tabs, activePanel, setActivePanel } ) => {
 	);
 };
 
-export default TabNavigation;
+export default TabBar;

modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 import useIsScrolled from '../../hooks/useIsScrolled';
 import { useNavigation } from '../../hooks/useNavigation';
 import BusyStateWrapper from './BusyStateWrapper';
-import TabNavigation from './TabNavigation';
 
 const TopNavigation = ( {
 	title,
@@ -16,9 +15,7 @@ const TopNavigation = ( {
 	onTitleClick = null,
 	showProgressBar = false,
 	progressBarPercent = 0,
-	tabs = [],
-	activePanel = '',
-	setActivePanel = () => {},
+	subNavigation = null,
 } ) => {
 	const { goToWooCommercePaymentsTab } = useNavigation();
 	const { isScrolled } = useIsScrolled();
@@ -44,9 +41,9 @@ const TopNavigation = ( {
 	}, [] );
 
 	return (
-		<div className={ className }>
-			<div className="ppcp-r-navigation">
-				<div className="ppcp-r-navigation--row">
+		<>
+			<nav className={ className }>
+				<div className="ppcp-r-navigation">
 					<BusyStateWrapper
 						className="ppcp-r-navigation--left"
 						busySpinner={ false }
@@ -69,19 +66,18 @@ const TopNavigation = ( {
 						{ children }
 					</BusyStateWrapper>
 				</div>
-				{ tabs.length > 0 && (
-					<TabNavigation
-						tabs={ tabs }
-						activePanel={ activePanel }
-						setActivePanel={ setActivePanel }
-					/>
+
+				{ subNavigation && (
+					<section className="ppcp--top-sub-navigation">
+						{ subNavigation }
+					</section>
 				) }
 
 				{ showProgressBar && (
 					<ProgressBar percent={ progressBarPercent } />
 				) }
-			</div>
-		</div>
+			</nav>
+		</>
 	);
 };
 

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

@@ -1,7 +1,7 @@
 import { Button } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import classNames from 'classnames';
-import { openSignup } from '../../../ReusableComponents/Icons';
+import { OpenSignup } from '../../../ReusableComponents/Icons';
 import { useHandleOnboardingButton } from '../../../../hooks/useHandleConnections';
 import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
 
@@ -27,7 +27,7 @@ const ButtonOrPlaceholder = ( {
 	const buttonProps = {
 		className,
 		variant,
-		icon: showIcon ? openSignup : null,
+		icon: showIcon ? OpenSignup : null,
 	};
 
 	if ( href ) {

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

@@ -21,9 +21,37 @@ const OnboardingNavigation = ( { stepDetails, onNext, onPrev } ) => {
 			showProgressBar={ true }
 			progressBarPercent={ percentage * 0.9 }
 		>
-			<Button variant="link" onClick={ goToWooCommercePaymentsTab }>
+			<OnboardingNavigationActions
+				onExit={ goToWooCommercePaymentsTab }
+				isFirst={ isFirst }
+				isDisabled={ isDisabled }
+				showNext={ showNext }
+				onNext={ onNext }
+			/>
+		</TopNavigation>
+	);
+};
+
+export default OnboardingNavigation;
+
+const OnboardingNavigationActions = ( {
+	isFirst,
+	showNext,
+	isDisabled,
+	onExit,
+	onNext,
+} ) => {
+	// On first page we don't have any actions.
+	if ( isFirst ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button variant="link" onClick={ onExit }>
 				{ __( 'Save and exit', 'woocommerce-paypal-payments' ) }
 			</Button>
+
 			{ showNext && (
 				<Button
 					variant="primary"
@@ -33,8 +61,6 @@ const OnboardingNavigation = ( { stepDetails, onNext, onPrev } ) => {
 					{ __( 'Continue', 'woocommerce-paypal-payments' ) }
 				</Button>
 			) }
-		</TopNavigation>
+		</>
 	);
 };
-
-export default OnboardingNavigation;

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

@@ -1,13 +1,13 @@
 import { Icon } from '@wordpress/components';
 
-import { logoPayPal } from '../../../ReusableComponents/Icons';
+import { LogoPayPal } from '../../../ReusableComponents/Icons';
 
 const OnboardingHeader = ( props ) => {
 	return (
 		<section className="ppcp-r-onboarding-header">
 			<div className="ppcp-r-onboarding-header__logo">
 				<div className="ppcp-r-onboarding-header__logo-wrapper">
-					<Icon icon={ logoPayPal } width="auto" height={ 38 } />
+					<Icon icon={ LogoPayPal } width={ 110 } height={ 38 } />
 				</div>
 			</div>
 			<div className="ppcp-r-onboarding-header__content">