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

♻️ Major button-styling refactoring

Browse source
This commit is contained in:
Philipp Stracker 2024-12-10 13:58:00 +01:00
parent 36de426260
commit 3d49241c5e
No known key found for this signature in database
5 changed files with 107 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,7 @@ $color-gray-500: #BBBBBB;
$color-gray-400: #CCCCCC;
$color-gray-300: #EBEBEB;
$color-gray-200: #E0E0E0;
$color-gray-100: #F0F0F0;
$color-gray: #646970;
$color-text-tertiary: #505050;
$color-text-text: #070707;
@ -27,6 +28,8 @@ $max-width-settings: 938px;
$card-vertical-gap: 48px;
/* define custom theming options */
:root {
--ppcp-color-app-bg: #{$color-white};
}
@ -37,4 +40,18 @@ $card-vertical-gap: 48px;
--max-width-onboarding-content: #{$max-width-onboarding-content};
--max-container-width: var(--max-width-settings);
--color-black: #{$color-black};
--color-white: #{$color-white};
--color-blueberry: #{$color-blueberry};
--color-gray-900: #{$color-gray-900};
--color-gray-800: #{$color-gray-800};
--color-gray-700: #{$color-gray-700};
--color-gray-600: #{$color-gray-600};
--color-gray-500: #{$color-gray-500};
--color-gray-400: #{$color-gray-400};
--color-gray-300: #{$color-gray-300};
--color-gray-200: #{$color-gray-200};
--color-gray-100: #{$color-gray-100};
--color-gradient-dark: #{$color-gradient-dark};
}

104
modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
View file

@ -1,48 +1,102 @@
button.components-button, a.components-button {
&.is-primary, &.is-secondary {
&:not(:disabled) {
background-color: $color-black;
}
%button-style-default {
background-color: var(--button-background);
color: var(--button-color);
box-shadow: inset 0 0 0 1px var(--button-border-color);
}
&:disabled {
color: $color-gray-700;
}
%button-style-hover {
background-color: var(--button-hover-background);
color: var(--button-hover-color);
box-shadow: inset 0 0 0 1px var(--button-hover-border-color);
}
%button-style-disabled {
background-color: var(--button-disabled-background);
color: var(--button-disabled-color);
box-shadow: inset 0 0 0 1px var(--button-disabled-border-color);
}
%button-shape-pill {
border-radius: 50px;
padding: 15px 32px;
height: auto;
}
button.components-button, a.components-button {
/* default theme */
--button-color: var(--color-gray-900);
--button-background: transparent;
--button-border-color: transparent;
--button-hover-color: var(--button-color);
--button-hover-background: var(--button-background);
--button-hover-border-color: var(--button-border-color);
--button-disabled-color: var(--color-gray-500);
--button-disabled-background: transparent;
--button-disabled-border-color: transparent;
/* style the button template */
&:not(:disabled) {
@extend %button-style-default;
}
&:hover {
@extend %button-style-hover;
}
&:disabled {
@extend %button-style-disabled;
}
/*
----------------------------------------------
Customize variants using the theming variables
*/
&.is-primary,
&.is-secondary {
@extend %button-shape-pill;
}
&.is-primary {
@include font(14, 18, 900);
&:not(:disabled) {
background-color: $color-blueberry;
color: $color-white;
}
--button-color: #{$color-white};
--button-background: #{$color-blueberry};
--button-disabled-color: #{$color-gray-100};
--button-disabled-background: #{$color-gray-500};
}
&.is-secondary:not(:disabled) {
border-color: $color-blueberry;
background-color: $color-white;
color: $color-blueberry;
&.is-secondary {
--button-color: #{$color-blueberry};
--button-background: #{$color-white};
--button-border-color: #{$color-blueberry};
&:hover {
background-color: $color-white;
background: none;
}
--button-disabled-color: #{$color-gray-600};
--button-disabled-background: #{$color-gray-100};
--button-disabled-border-color: #{$color-gray-400};
}
&.is-tertiary {
color: $color-blueberry;
&:hover {
color: $color-gradient-dark;
}
--button-color: #{$color-blueberry};
--button-hover-color: #{$color-gradient-dark};
&:focus:not(:disabled) {
border: none;
box-shadow: none;
}
}
&.small-button {
@include small-button;
}
}
.ppcp--is-loading {
button.components-button, a.components-button {
@extend %button-style-disabled;
}
}

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

@ -20,12 +20,6 @@
margin: 0 0 24px 0;
}
.ppcp-r-toggle-block__toggled-content > button{
@include small-button;
color: $color-white;
border: none;
}
.client-id-error {
color: #cc1818;
margin: -16px 0 24px;

7
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
View file

@ -145,6 +145,7 @@ const AdvancedOptionsForm = () => {
) }
showIcon={ false }
variant="secondary"
className="small-button"
isSandbox={
true /* This button always connects to sandbox */
}
@ -190,7 +191,11 @@ const AdvancedOptionsForm = () => {
onChange={ setClientSecret }
type="password"
/>
<Button variant="secondary" onClick={ handleManualConnect }>
<Button
variant="secondary"
className="small-button"
onClick={ handleManualConnect }
>
{ __(
'Connect Account',
'woocommerce-paypal-payments'

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

@ -15,10 +15,11 @@ const ConnectionButton = ( {
isSandbox = false,
variant = 'primary',
showIcon = true,
className = '',
} ) => {
const { handleSandboxConnect } = useSandboxConnection();
const { handleProductionConnect } = useProductionConnection();
const className = classNames( 'ppcp-r-connection-button', {
const buttonClassName = classNames( 'ppcp-r-connection-button', className, {
'sandbox-mode': isSandbox,
'live-mode': ! isSandbox,
} );
@ -34,7 +35,7 @@ const ConnectionButton = ( {
return (
<BusyStateWrapper>
<Button
className={ className }
className={ buttonClassName }
variant={ variant }
icon={ showIcon ? openSignup : null }
onClick={ handleConnectClick }