mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
Adjust styles, add fonts
This commit is contained in:
Narek Zakarian
parent
6d078fcf5d
commit
d62a7c8282
13 changed files with 104 additions and 37 deletions
|
|
@ -1,7 +1,55 @@
|
|||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-Black.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-BlackItalic.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-Bold.otf') format('opentype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-BoldItalic.otf') format('opentype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-Book.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PayPalPro';
|
||||
src: url('../../fonts/PayPalPro-BookItalic.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-family: "PayPalPro", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-sizing: border-box;
|
||||
color: $color-gray-700;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
a:not(.button) {
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@ $color-gray-900: #1E1E1E;
|
|||
$color-gray-800: #2F2F2F;
|
||||
$color-gray-700: #757575;
|
||||
$color-gray-600: #949494;
|
||||
$color-gray-500: #BBBBBB;
|
||||
$color-gray-500: #2c2c2c;
|
||||
$color-gray-400: #CCCCCC;
|
||||
$color-gray-300: #EBEBEB;
|
||||
$color-gray-200: #E0E0E0;
|
||||
$color-gray: #646970;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,24 @@
|
|||
.ppcp-r-text-badge-box {
|
||||
.ppcp-r-badge-box {
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
@include font(14, 20, 700);
|
||||
display: block;
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
.ppcp-r-title-image-badge {
|
||||
.ppcp-r-badge-box__title-text {
|
||||
color: #000;
|
||||
|
||||
&--big {
|
||||
@include font(16, 28, 700);
|
||||
}
|
||||
|
||||
&--small {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
&-image-badge {
|
||||
margin-left: 7px;
|
||||
|
||||
img {
|
||||
|
|
@ -16,5 +27,11 @@
|
|||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--has-image-badge .ppcp-r-title-badge--info {
|
||||
display: block;
|
||||
margin: 6px 0px 0px 0px;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,14 +23,13 @@
|
|||
}
|
||||
|
||||
&__title {
|
||||
@include font(20, 28, 700);
|
||||
@include font(24, 32, 400);
|
||||
margin: 0 0 4px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $color-gray-800;
|
||||
@include font(14, 20, 400);
|
||||
@include font(14, 22, 400);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,14 +17,14 @@
|
|||
}
|
||||
|
||||
.ppcp-r-page-welcome-or-separator {
|
||||
margin: 0 0 32px 0;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.ppcp-r-page-welcome-mode-separator {
|
||||
margin: 0 0 64px 0;
|
||||
|
||||
.ppcp-r-separator__line {
|
||||
background-color: $color-gray-500;
|
||||
background-color: $color-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,9 +62,9 @@
|
|||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: 18px;
|
||||
padding-right: 48px;
|
||||
border-right: 1px solid $color-gray-200;
|
||||
margin-right: 18px;
|
||||
margin-right: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -89,6 +89,8 @@
|
|||
|
||||
&__title {
|
||||
text-align: center;
|
||||
@include font(20, 28, 700);
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
|
|
|
|||
|
|
@ -3,27 +3,31 @@ import TitleBadge, {TITLE_BADGE_INFO} from "./TitleBadge";
|
|||
import {__} from "@wordpress/i18n";
|
||||
|
||||
const BadgeBox = ( props ) => {
|
||||
const titleTag = props.titleTag ?? 'h3';
|
||||
const TitleTag = titleTag;
|
||||
return (
|
||||
<div className="ppcp-r-text-badge-box">
|
||||
<span className="ppcp-r-text-badge-box__title">
|
||||
{props.title}
|
||||
const titleSize = props.titleType && props.titleType === BADGE_BOX_TITLE_BIG ? BADGE_BOX_TITLE_BIG : BADGE_BOX_TITLE_SMALL
|
||||
|
||||
{props.imageBadge && (
|
||||
<span className="ppcp-r-title-image-badge">
|
||||
{props.imageBadge.map((badge) => data().getImage(badge))}
|
||||
</span>
|
||||
const titleTextClassName = 'ppcp-r-badge-box__title-text ' + `ppcp-r-badge-box__title-text--${titleSize}`;
|
||||
|
||||
const titleBaseClassName = 'ppcp-r-badge-box__title';
|
||||
const titleClassName = props.imageBadge ? `${titleBaseClassName} ppcp-r-badge-box__title--has-image-badge` : titleBaseClassName;
|
||||
return (
|
||||
<div className="ppcp-r-badge-box">
|
||||
<span className={titleClassName}>
|
||||
<span className={titleTextClassName}>{props.title}</span>
|
||||
|
||||
{props.imageBadge && (
|
||||
<span className="ppcp-r-badge-box__title-image-badge">
|
||||
{props.imageBadge.map((badge) => data().getImage(badge))}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{props.textBadge && (
|
||||
<TitleBadge type={TITLE_BADGE_INFO} text={props.textBadge}/>
|
||||
)}
|
||||
</span>
|
||||
<div className="ppcp-r-text-badge-box__description">
|
||||
<div className="ppcp-r-badge-box__description">
|
||||
{props?.description && (
|
||||
<p
|
||||
className="ppcp-r-text-badge-box__description"
|
||||
className="ppcp-r-badge-box__description"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: props.description,
|
||||
}}
|
||||
|
|
@ -34,4 +38,6 @@ const BadgeBox = ( props ) => {
|
|||
);
|
||||
};
|
||||
|
||||
export const BADGE_BOX_TITLE_BIG = 'big';
|
||||
export const BADGE_BOX_TITLE_SMALL = 'small';
|
||||
export default BadgeBox;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import Separator from '../../ReusableComponents/Separator';
|
|||
import { useOnboardingStepWelcome, useManualConnect } from '../../../data';
|
||||
|
||||
import DataStoreControl from '../../ReusableComponents/DataStoreControl';
|
||||
import BadgeBox from "../../ReusableComponents/BadgeBox";
|
||||
import BadgeBox, {BADGE_BOX_TITLE_BIG} from "../../ReusableComponents/BadgeBox";
|
||||
|
||||
const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
|
||||
return (
|
||||
|
|
@ -86,16 +86,16 @@ const WelcomeDocs = () => {
|
|||
<div className="ppcp-r-welcome-docs__col">
|
||||
<BadgeBox
|
||||
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
|
||||
titleType = {BADGE_BOX_TITLE_BIG}
|
||||
textBadge={__('from 3.49% + $0.49 USD1', 'woocommerce-paypal-payments')}
|
||||
description={__(
|
||||
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
/>
|
||||
<BadgeBox title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')}/>
|
||||
<BadgeBox title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} titleType = {BADGE_BOX_TITLE_BIG}/>
|
||||
<BadgeBox
|
||||
title={__('Pay with PayPal', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-paypal.svg']}
|
||||
description={sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
|
|
@ -109,7 +109,6 @@ const WelcomeDocs = () => {
|
|||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('Pay Later', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-payment-method-paypal-small.svg']}
|
||||
description={sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
|
|
@ -123,7 +122,6 @@ const WelcomeDocs = () => {
|
|||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('Venmo', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-venmo.svg']}
|
||||
description={sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
|
|
@ -137,7 +135,6 @@ const WelcomeDocs = () => {
|
|||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('Crypto', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-payment-method-crypto.svg']}
|
||||
description={sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
|
|
@ -152,11 +149,11 @@ const WelcomeDocs = () => {
|
|||
<div className="ppcp-r-welcome-docs__col">
|
||||
<BadgeBox
|
||||
title={__('Optional payment methods', 'woocommerce-paypal-payments')}
|
||||
titleType = {BADGE_BOX_TITLE_BIG}
|
||||
description={__('with additional application', 'woocommerce-paypal-payments')}
|
||||
/>
|
||||
<BadgeBox
|
||||
title={__('Custom Card Fields', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']}
|
||||
textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')}
|
||||
description={sprintf(
|
||||
|
|
@ -171,7 +168,6 @@ const WelcomeDocs = () => {
|
|||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('Digital Wallets', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']}
|
||||
textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')}
|
||||
description={sprintf(
|
||||
|
|
@ -186,7 +182,6 @@ const WelcomeDocs = () => {
|
|||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']}
|
||||
textBadge={__('from 3.49% + $0.49 USD1', 'woocommerce-paypal-payments')}
|
||||
description={sprintf(
|
||||
|
|
@ -201,7 +196,6 @@ const WelcomeDocs = () => {
|
|||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<BadgeBox
|
||||
title={__('', 'woocommerce-paypal-payments')}
|
||||
titleTag='h4'
|
||||
imageBadge={['icon-payment-method-fastlane-small.svg']}
|
||||
textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')}
|
||||
description={sprintf(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
