woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Adjust styles, add fonts

Browse source
This commit is contained in:
Narek Zakarian 2024-11-05 17:54:47 +04:00
parent 6d078fcf5d
commit d62a7c8282
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
13 changed files with 104 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
modules/ppcp-settings/fonts/PayPalPro-Black.otf Normal file
View file

Binary file not shown.

BIN
modules/ppcp-settings/fonts/PayPalPro-BlackItalic.otf Normal file
View file

Binary file not shown.

BIN
modules/ppcp-settings/fonts/PayPalPro-Bold.otf Normal file
View file

Binary file not shown.

BIN
modules/ppcp-settings/fonts/PayPalPro-BoldItalic.otf Normal file
View file

Binary file not shown.

BIN
modules/ppcp-settings/fonts/PayPalPro-Book.otf Normal file
View file

Binary file not shown.

BIN
modules/ppcp-settings/fonts/PayPalPro-BookItalic.otf Normal file
View file

Binary file not shown.

50
modules/ppcp-settings/resources/css/_global.scss
View file

@ -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) {

3
modules/ppcp-settings/resources/css/_variables.scss
View file

@ -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;

29
modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss
View file

@ -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;
}
}
}

5
modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss
View file

@ -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;
}

10
modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss
View file

@ -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 {

30
modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js
View file

@ -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;

14
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
View file

@ -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(