diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss index 7eb7fd419..033d436b9 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/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; - } + } + .ppcp-r-navigation--left { + align-items: center; + display: inline-flex; + } - &--left { - align-items: center; - display: inline-flex; + .ppcp-r-navigation--right { + .is-link { + padding: 10px 16px; } + } - &--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; diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss index 05cd48e36..beffaec04 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss +++ b/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; - } } } } diff --git a/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss b/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss index f29755306..bf00b6a68 100644 --- a/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss +++ b/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; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js index 337e5626c..b044e7087 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js +++ b/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 ( - { images.map( ( badge ) => data().getImage( badge ) ) } + { images.map( ( badge, index ) => ( + + ) ) } ); diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js index e4327273f..7faf68a0c 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js @@ -65,7 +65,9 @@ const OptionItem = ( {
{ itemTitle } -

{ itemDescription }

+
+ { itemDescription } +
{ children && (
{ children }
) } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/GenericIcon.js new file mode 100644 index 000000000..1b5e0a184 --- /dev/null +++ b/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 ( + { + ); +}; + +export default GenericIcon; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/LogoPayPal.js similarity index 98% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/LogoPayPal.js index fec3f38a3..f1802d549 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/LogoPayPal.js @@ -1,6 +1,6 @@ import { SVG, Path } from '@wordpress/primitives'; -const logoPayPal = ( +const LogoPayPal = ( ); -export default logoPayPal; +export default LogoPayPal; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/OpenSignup.js similarity index 97% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/OpenSignup.js index 8e8daa32b..2f5bcc629 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/OpenSignup.js @@ -1,9 +1,9 @@ import { SVG, Path } from '@wordpress/primitives'; -const openSignup = ( +const OpenSignup = ( ); -export default openSignup; +export default OpenSignup; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js index 005d1bc58..5519a99d7 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js +++ b/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 = '❌'; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabBar.js similarity index 90% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/TabBar.js index 4a98860fd..0d902e12c 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js +++ b/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; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js index de19a7c4b..5e61a69bf 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js +++ b/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 ( -
-
-
+ <> +
-
+ + ); }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js index 36ab8e197..29434f344 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js +++ b/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 ) { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js index 52d496b33..9d4bcd0a1 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js +++ b/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 } > - + { showNext && ( ) } - + ); }; - -export default OnboardingNavigation; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js index 638af4704..349eadd80 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js +++ b/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 (
- +
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js index 7fdba20d1..29abc0268 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js @@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n'; import TopNavigation from '../../../ReusableComponents/TopNavigation'; import { useSaveSettings } from '../../../../hooks/useSaveSettings'; +import TabBar from '../../../ReusableComponents/TabBar'; const SettingsNavigation = ( { canSave = true, @@ -18,9 +19,13 @@ const SettingsNavigation = ( { + } > { canSave && (