mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-03 08:37:53 +08:00
New Settings UI: Update Products and Business step designs
This commit is contained in:
Himad M
parent
d09d7f7b65
commit
014524f37c
8 changed files with 42 additions and 71 deletions
|
|
@ -18,7 +18,7 @@ $color-gradient-dark: #001435;
|
|||
$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%);
|
||||
|
||||
$max-width-onboarding: 1024px;
|
||||
$max-width-onboarding-content: 662px;
|
||||
$max-width-onboarding-content: 500px;
|
||||
$max-width-settings: 938px;
|
||||
|
||||
#ppcp-settings-container {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.ppcp-r-onboarding-header{
|
||||
margin: 0 0 32px 0;
|
||||
margin: 0 0 24px 0;
|
||||
|
||||
&__logo {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -8,14 +8,12 @@
|
|||
.ppcp-r-select-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid $color-gray-500;
|
||||
border: 1px solid $color-gray-200;
|
||||
outline: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 28px 16px 28px 32px;
|
||||
gap: 16px;
|
||||
padding: 24px 16px 24px 16px;
|
||||
|
||||
|
||||
&.selected {
|
||||
|
|
@ -59,20 +57,23 @@
|
|||
|
||||
&__content {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(16, 24, 600);
|
||||
color: $color-blueberry;
|
||||
@include font(14, 20, 700);
|
||||
color: $color-black;
|
||||
margin: 0 0 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(14, 20, 400);
|
||||
color: $color-gray-800;
|
||||
margin: 0 0 18px 0;
|
||||
@include font(13, 20, 400);
|
||||
color: $color-gray-700;
|
||||
margin:0;
|
||||
|
||||
&:not(:last-child){
|
||||
margin-block-end:18px;
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-presentation {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0 16px 48px;
|
||||
box-sizing: border-box;
|
||||
box-sizing: content-box;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
padding-bottom: 36px;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: $color-gray-700;
|
||||
@include font(14, 20, 400);
|
||||
@include font(13, 20, 400);
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
|
|
@ -29,7 +28,7 @@
|
|||
|
||||
.ppcp-r-select-box__additional-content {
|
||||
a {
|
||||
@include font(12, 20, 400);
|
||||
@include font(13, 20, 500);
|
||||
color: $color-blueberry;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ const SelectBox = ( props ) => {
|
|||
/>
|
||||
) }
|
||||
<div className="ppcp-r-select-box__content">
|
||||
{ data().getImage( props.icon ) }
|
||||
<div className="ppcp-r-select-box__content-inner">
|
||||
<span className="ppcp-r-select-box__title">
|
||||
{ props.title }
|
||||
|
|
|
|||
|
|
@ -34,22 +34,38 @@ const StepBusiness = ( {
|
|||
<div className="ppcp-r-page-business">
|
||||
<OnboardingHeader
|
||||
title={ __(
|
||||
'Tell Us About Your Business',
|
||||
'Choose your account type',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
<div className="ppcp-r-inner-container">
|
||||
<SelectBoxWrapper>
|
||||
<SelectBox
|
||||
title={ __(
|
||||
'Business',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Recommended for individuals and organizations that primarily use PayPal to sell goods or services or receive donations, even if your business is not incorporated.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
name={ BUSINESS_RADIO_GROUP_NAME }
|
||||
value={ BUSINESS_TYPES.BUSINESS }
|
||||
changeCallback={ handleSellerTypeChange }
|
||||
currentValue={ getCurrentValue() }
|
||||
checked={ isCasualSeller === false }
|
||||
type="radio"
|
||||
>
|
||||
</SelectBox>
|
||||
<SelectBox
|
||||
title={ __(
|
||||
'Casual Seller',
|
||||
'Personal Account',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'I sell occasionally and mainly use PayPal for personal transactions.',
|
||||
'Ideal for those who primarily make purchases or send personal transactions to family and friends.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-business-casual-seller.svg"
|
||||
name={ BUSINESS_RADIO_GROUP_NAME }
|
||||
value={ BUSINESS_TYPES.CASUAL_SELLER }
|
||||
changeCallback={ handleSellerTypeChange }
|
||||
|
|
@ -57,47 +73,6 @@ const StepBusiness = ( {
|
|||
checked={ isCasualSeller === true }
|
||||
type="radio"
|
||||
>
|
||||
<PaymentMethodIcons
|
||||
icons={ [
|
||||
'paypal',
|
||||
'venmo',
|
||||
'visa',
|
||||
'mastercard',
|
||||
'amex',
|
||||
'discover',
|
||||
] }
|
||||
/>
|
||||
</SelectBox>
|
||||
<SelectBox
|
||||
title={ __(
|
||||
'Business',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'I run a registered business and sell full-time.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-business-business.svg"
|
||||
name={ BUSINESS_RADIO_GROUP_NAME }
|
||||
value={ BUSINESS_TYPES.BUSINESS }
|
||||
changeCallback={ handleSellerTypeChange }
|
||||
currentValue={ getCurrentValue() }
|
||||
checked={ isCasualSeller === false }
|
||||
type="radio"
|
||||
>
|
||||
<PaymentMethodIcons
|
||||
icons={ [
|
||||
'paypal',
|
||||
'venmo',
|
||||
'visa',
|
||||
'mastercard',
|
||||
'amex',
|
||||
'discover',
|
||||
'apple-pay',
|
||||
'google-pay',
|
||||
'ideal',
|
||||
] }
|
||||
/>
|
||||
</SelectBox>
|
||||
</SelectBoxWrapper>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const StepProducts = ( {
|
|||
<div className="ppcp-r-page-products">
|
||||
<OnboardingHeader
|
||||
title={ __(
|
||||
'Tell Us About the Products You Sell',
|
||||
'Tell us about the products you sell',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
|
|
@ -28,10 +28,9 @@ const StepProducts = ( {
|
|||
<SelectBox
|
||||
title={ __( 'Virtual', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Digital items or services that don’t require shipping.',
|
||||
'Items do not require shipping.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-product-virtual.svg"
|
||||
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
|
||||
value={ PRODUCT_TYPES.VIRTUAL }
|
||||
changeCallback={ toggleProduct }
|
||||
|
|
@ -71,10 +70,9 @@ const StepProducts = ( {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Items that need to be shipped.',
|
||||
'Items require shipping.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-product-physical.svg"
|
||||
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
|
||||
value={ PRODUCT_TYPES.PHYSICAL }
|
||||
changeCallback={ toggleProduct }
|
||||
|
|
@ -99,10 +97,9 @@ const StepProducts = ( {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Recurring payments for physical goods or services.',
|
||||
'Recurring payments for either physical goods or services.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-product-subscription.svg"
|
||||
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
|
||||
value={ PRODUCT_TYPES.SUBSCRIPTIONS }
|
||||
changeCallback={ toggleProduct }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
