From a8c4d653e190b30a47defb95cbcd2eae8b8cf7ef Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Tue, 9 Jul 2024 18:44:24 -0300 Subject: [PATCH 1/7] refactor: replace text on Introduction step --- .../js/admin/onboarding-wizard/app/steps/introduction/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/introduction/index.js b/assets/src/js/admin/onboarding-wizard/app/steps/introduction/index.js index 04f88c7427..2829050f2f 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/introduction/index.js +++ b/assets/src/js/admin/onboarding-wizard/app/steps/introduction/index.js @@ -26,7 +26,7 @@ const Introduction = () => {

- { __( 'You\'re only minutes away from accepting donations on your website! Use the Onboarding Wizard if this is your first time using GiveWP.', 'give' ) } + { __( 'Get started quickly with our Onboarding Wizard and begin accepting donations on your website in minutes.', 'give' ) }

onStartSetup() } label={ __( 'Start Setup', 'give' ) } testId="intro-continue-button" /> From 27a41ddc60e7f83253482d1ba80557eb060f8e62 Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Tue, 9 Jul 2024 18:57:29 -0300 Subject: [PATCH 2/7] refactor: replace text on Cause step --- .../js/admin/onboarding-wizard/app/steps/your-cause/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js b/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js index 56de6fd54f..f4ab622d4c 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js +++ b/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/index.js @@ -27,7 +27,7 @@ const YourCause = () => { return (
-

{__( '👋 Hi there! Tell us a little about your Organization.', 'give' )}

+

{__( '👋 Hi there! Tell us about your cause.', 'give' )}

{__( 'This information will be used to customize your experience to your fundraising needs.', 'give' )}

dispatch( setUserType( values ) )} checkMultiple={false}> From 8c1e53dc28cf03a52cd7e25541f3aed8974d5e58 Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Tue, 9 Jul 2024 20:14:02 -0300 Subject: [PATCH 3/7] refactor: add description to Location step --- .../onboarding-wizard/app/steps/location/index.js | 1 + .../onboarding-wizard/app/steps/location/style.scss | 11 +++++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/location/index.js b/assets/src/js/admin/onboarding-wizard/app/steps/location/index.js index 9a3ebcebb7..9055b9517e 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/location/index.js +++ b/assets/src/js/admin/onboarding-wizard/app/steps/location/index.js @@ -32,6 +32,7 @@ const Location = () => {

{ __( '🌎 Where are you fundraising?', 'give' ) }

+

{__('This information will be used to set up your donation form experience.', 'give')}

dispatch( setState( value ) ) } options={ statesList } isLoading={ fetchingStatesList } /> diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/location/style.scss b/assets/src/js/admin/onboarding-wizard/app/steps/location/style.scss index 3d90e0cd50..5a829e52a7 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/location/style.scss +++ b/assets/src/js/admin/onboarding-wizard/app/steps/location/style.scss @@ -15,10 +15,17 @@ font-size: 24px; line-height: 34px; color: #333; - - margin: 0 0 52px 0; + margin: 0 0 0.75rem; } + > p { + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #333; + margin: 0 0 1.5rem + } + .give-obw-card { padding: 40px; margin-bottom: 85px; From abe2816c21e0cd7b3042cd979290e00ab45aecac Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Tue, 9 Jul 2024 20:33:16 -0300 Subject: [PATCH 4/7] refactor: add descriptions to Features step cards --- .../app/steps/features/index.js | 64 ++++++++++--------- .../app/steps/features/style.scss | 28 +++++--- 2 files changed, 52 insertions(+), 40 deletions(-) diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/features/index.js b/assets/src/js/admin/onboarding-wizard/app/steps/features/index.js index 1dd6ee077d..49c23124d2 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/features/index.js +++ b/assets/src/js/admin/onboarding-wizard/app/steps/features/index.js @@ -26,36 +26,40 @@ const Features = () => { return (

{ __( 'What do you need in your first donation form?', 'give' ) }

-

- { __( 'Don\'t worry, these settings can always be changed later.', 'give' ) } -

- dispatch( setFeatures( value ) ) } > - - - { __( 'Donation Goal', 'give' ) } - - - - { __( 'Donation Comments', 'give' ) } - - - - { __( 'Terms & Conditions', 'give' ) } - - - - { __( 'Offline Donations', 'give' ) } - - - - { __( 'Anonymous Donations', 'give' ) } - - - - { __( 'Company Donations', 'give' ) } - - - +

{__('Select the features you need. These can always be changed later.', 'give')}

+ dispatch(setFeatures(value))}> + + +

{__('Donation Goal', 'give')}

+

{__('Show the donation goal progress on the form.', 'give')}

+ + + +

{__('Donation Comments', 'give')}

+

{__('Allow donors to add comments to their donations.', 'give')}

+ + + +

{__('Terms & Conditions', 'give')}

+

{__('Require donors to accept terms and conditions.', 'give')}

+ + + +

{__('Offline Donations', 'give')}

+

{__('Donors can choose to donate offline, via mail or in person.', 'give')}

+ + + +

{__('Anonymous Donations', 'give')}

+

{__('Enable donors to give anonymously.', 'give')}

+ + + +

{__('Company Donations', 'give')}

+

{__('Donors can donate via their company.', 'give')}

+ + +
); }; diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/features/style.scss b/assets/src/js/admin/onboarding-wizard/app/steps/features/style.scss index 051f9473c1..51cc82219c 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/features/style.scss +++ b/assets/src/js/admin/onboarding-wizard/app/steps/features/style.scss @@ -30,16 +30,24 @@ align-items: center; justify-content: center; - > strong { - font-family: Montserrat, Arial, Helvetica, sans-serif; - text-transform: uppercase; - font-weight: 500; - font-size: 18px; - line-height: 24px; - text-align: center; - letter-spacing: 3.5px; - color: #4a5568; - } + > h2 { + color: #4a5568; + font-size: 18px; + font-weight: 600; + line-height: 1.33; + margin: 0 0 0.25rem; + text-align: center; + text-transform: uppercase; + } + + > p { + color: #4a5568; + font-size: 14px; + font-weight: 400; + line-height: 1.57; + margin: 0; + text-align: center; + } } > .give-obw-button { From 3ae06e0011a746eb23de3d558a95e943c8226df5 Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Tue, 9 Jul 2024 20:36:28 -0300 Subject: [PATCH 5/7] refactor: replace text on Preview step --- .../admin/onboarding-wizard/app/steps/donation-form/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/index.js b/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/index.js index 98aa6bd358..dd8d0e05ed 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/index.js +++ b/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/index.js @@ -17,7 +17,7 @@ const DonationForm = () => {
-

{ __( 'Check out your first donation form!', 'give' ) }

+

{ __( '🎉 Congrats! Check out your first donation form.', 'give' ) }

{ __( 'This form is customized based on your responses.', 'give' ) }

@@ -38,7 +38,7 @@ const DonationForm = () => {
  • - { __( 'Extend with add-ons and more!', 'give' ) } + { __( 'Extend functionality with add-ons and more', 'give' ) }
    • From 81685b8801057bcdbe7f1e6ed21eeb2a829ed7dd Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Tue, 9 Jul 2024 20:38:34 -0300 Subject: [PATCH 6/7] refactor: add descriptions to Add-ons step cards --- .../app/steps/addons/index.js | 74 ++++++++++--------- .../app/steps/addons/style.scss | 28 ++++--- 2 files changed, 57 insertions(+), 45 deletions(-) diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/addons/index.js b/assets/src/js/admin/onboarding-wizard/app/steps/addons/index.js index ca19f6bba0..75e5876f28 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/addons/index.js +++ b/assets/src/js/admin/onboarding-wizard/app/steps/addons/index.js @@ -23,41 +23,45 @@ const Addons = () => { const [ { configuration }, dispatch ] = useStoreValue(); const addons = configuration.addons; - return ( -
    -

    { __( 'What else do you need to support your cause?', 'give' ) }

    -

    - { __( 'Take your fundraising to the next level with these premium add-ons.', 'give' ) } -

    - dispatch( setAddons( value ) ) } > - - - { __( 'Recurring Donations', 'give' ) } - - - - { __( 'Donors Cover Fees', 'give' ) } - - - - { __( 'PDF Receipts', 'give' ) } - - - - { __( 'Custom Form Fields', 'give' ) } - - - - { __( 'Multiple Currencies', 'give' ) } - - - - { __( 'Dedicate Donations', 'give' ) } - - - -
    - ); + return ( +
    +

    {__('What else do you need to support your cause?', 'give')}

    +

    {__('Take your fundraising to the next level with these premium add-ons.', 'give')}

    + dispatch(setAddons(value))}> + + +

    {__('Recurring Donations', 'give')}

    +

    {__('Allow donors to make donations on a recurring basis.', 'give')}

    +     + + +

    {__('Donors Cover Fees', 'give')}

    +

    {__('Enable donors to cover payment processing fees.', 'give')}

    +     + + +

    {__('PDF Receipts', 'give')}

    +

    {__('Provide custom donation receipts in PDF format.', 'give')}

    +     + + +

    {__('Custom Form Fields', 'give')}

    +

    {__('Add custom fields to your donation forms.', 'give')}

    +     + + +

    {__('Multiple Currencies', 'give')}

    +

    {__('Accept donations in your preferred currencies.', 'give')}

    +     + + +

    {__('Dedicate Donations', 'give')}

    +

    {__('Allow donors to dedicate their donation to someone special.', 'give')}

    +     +     + +
    + ); }; export default Addons; diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss b/assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss index d669249e74..50f60d9c99 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss +++ b/assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss @@ -30,16 +30,24 @@ align-items: center; justify-content: center; - > strong { - font-family: Montserrat, Arial, Helvetica, sans-serif; - text-transform: uppercase; - font-weight: 500; - font-size: 18px; - line-height: 24px; - text-align: center; - letter-spacing: 3.5px; - color: #4a5568; - } + > h2 { + color: #4a5568; + font-size: 18px; + font-weight: 600; + line-height: 1.33; + margin: 0 0 0.25rem; + text-align: center; + text-transform: uppercase; + } + + > p { + color: #4a5568; + font-size: 14px; + font-weight: 400; + line-height: 1.57; + margin: 0; + text-align: center; + } } > .give-obw-button { From 5b518cc682bcf762be0f21533997fcd9b7dd8d38 Mon Sep 17 00:00:00 2001 From: Paulo Iankoski Date: Tue, 9 Jul 2024 21:50:38 -0300 Subject: [PATCH 7/7] refactor: enhance style fidelity with designs --- .../app/steps/addons/style.scss | 25 +++++++--- .../app/steps/donation-form/style.scss | 4 +- .../app/steps/features/style.scss | 50 +++++++++---------- .../app/steps/your-cause/style.scss | 16 +++--- .../components/card-input/style.scss | 2 +- .../components/card/style.scss | 8 ++- 6 files changed, 57 insertions(+), 48 deletions(-) diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss b/assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss index 50f60d9c99..54762662bd 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss +++ b/assets/src/js/admin/onboarding-wizard/app/steps/addons/style.scss @@ -4,34 +4,43 @@ align-items: center; > h1 { - font-family: Montserrat, Arial, Helvetica, sans-serif; font-weight: 600; font-size: 24px; line-height: 34px; text-align: center; color: #333; - margin: 0 0 8px 0; + margin: 0 0 8px; } > p { - font-family: Montserrat, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 16px; line-height: 22px; text-align: center; color: #333; - margin: 0 0 52px 0; + margin: 0; } .give-obw-card { - box-sizing: border-box; - height: 218px; - width: 242px; align-items: center; - justify-content: center; + box-sizing: border-box; + width: 17.5rem; + min-height: 15rem; + position: relative; + padding-top: 7.25rem; + + > svg { + position: absolute; + top: 2.25rem; + left: 50%; + translate: -50%; + } > h2 { color: #4a5568; + display: flex; + align-items: flex-end; + height: 2.66em; font-size: 18px; font-weight: 600; line-height: 1.33; diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/style.scss b/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/style.scss index 40d905f14c..93632e5be8 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/style.scss +++ b/assets/src/js/admin/onboarding-wizard/app/steps/donation-form/style.scss @@ -25,7 +25,7 @@ font-size: 24px; line-height: 34px; color: #333; - margin: 0 0 8px 0; + margin: 0 0 8px; } p { @@ -34,7 +34,7 @@ font-size: 16px; line-height: 22px; color: #333; - margin: 0 0 38px; + margin: 0 0 24px; } h2 { diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/features/style.scss b/assets/src/js/admin/onboarding-wizard/app/steps/features/style.scss index 51cc82219c..130ed2aaa6 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/features/style.scss +++ b/assets/src/js/admin/onboarding-wizard/app/steps/features/style.scss @@ -3,35 +3,35 @@ flex-direction: column; align-items: center; - > h1 { - font-family: Montserrat, Arial, Helvetica, sans-serif; - font-weight: 600; - font-size: 24px; - line-height: 34px; - text-align: center; - color: #333; - margin: 0 0 8px 0; - } + > h1 { + font-weight: 600; + font-size: 24px; + line-height: 34px; + text-align: center; + color: #333; + margin: 0 0 8px 0; + } - > p { - font-family: Montserrat, Arial, Helvetica, sans-serif; - font-weight: 500; - font-size: 16px; - line-height: 22px; - text-align: center; - color: #333; - margin: 0 0 52px 0; - } + > p { + font-weight: 500; + font-size: 16px; + line-height: 22px; + text-align: center; + color: #333; + margin: 0 0 52px 0; + } - .give-obw-card { - box-sizing: border-box; - height: 218px; - width: 242px; - align-items: center; - justify-content: center; + .give-obw-card { + box-sizing: border-box; + width: 17.5rem; + align-items: center; + justify-content: center; > h2 { color: #4a5568; + display: flex; + align-items: flex-end; + height: 2em; font-size: 18px; font-weight: 600; line-height: 1.33; @@ -48,7 +48,7 @@ margin: 0; text-align: center; } - } + } > .give-obw-button { margin-top: 52px; diff --git a/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/style.scss b/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/style.scss index 2b58a476e0..50623e9578 100644 --- a/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/style.scss +++ b/assets/src/js/admin/onboarding-wizard/app/steps/your-cause/style.scss @@ -7,9 +7,9 @@ h1 { font-weight: 600; font-size: 24px; - line-height: 34px; + line-height: 1.42; color: #333; - margin: 0; + margin: 0 0 12px; } h2 { @@ -22,7 +22,8 @@ > p { font-weight: 400; font-size: 16px; - line-height: 24px; + line-height: 1.5; + margin: 0; color: #333; } @@ -75,22 +76,23 @@ font-weight: 400; } - - .give-obw-button { margin-top: 20px; } .give-obw-card { - width: 250px; - height: 200px; + box-sizing: border-box; + width: 292px; + height: 242px; align-items: center; + padding: 39px 30px; p { font-family: Montserrat, Arial, Helvetica, sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; + margin: 14px 0; color: #333; } diff --git a/assets/src/js/admin/onboarding-wizard/components/card-input/style.scss b/assets/src/js/admin/onboarding-wizard/components/card-input/style.scss index 1eda0775b3..1f3ec22be1 100644 --- a/assets/src/js/admin/onboarding-wizard/components/card-input/style.scss +++ b/assets/src/js/admin/onboarding-wizard/components/card-input/style.scss @@ -4,7 +4,7 @@ grid-gap: 40px; border: none; padding: 0; - margin: 30px 0 50px; + margin: 1.5rem 0; } .give-obw-card-input__option { diff --git a/assets/src/js/admin/onboarding-wizard/components/card/style.scss b/assets/src/js/admin/onboarding-wizard/components/card/style.scss index 8c96693f44..72bad149e3 100644 --- a/assets/src/js/admin/onboarding-wizard/components/card/style.scss +++ b/assets/src/js/admin/onboarding-wizard/components/card/style.scss @@ -1,18 +1,16 @@ .give-obw-card { position: relative; - padding: 20px; + padding: 2.25rem 1.25rem 1.5rem; background: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 1px solid #fff; border-radius: 8px; - display: flex; flex-direction: column; - justify-content: center; - + justify-content: flex-end; transition: all 0.2s ease-out; > svg { - margin-bottom: 20px; + flex: 1 } }