Refactor: Update Feature Notice design (#6964)

Co-authored-by: Paulo Iankoski
impress-org · Sep 27, 2023 · 52a61ac · 52a61ac
1 parent e6be2e2
commit 52a61ac
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/src/DonationForms/V2/resources/components/Onboarding/Dialogs/FeatureNoticeDialog.tsx b/src/DonationForms/V2/resources/components/Onboarding/Dialogs/FeatureNoticeDialog.tsx
@@ -1,8 +1,9 @@
-import {__} from '@wordpress/i18n';
+import {__, sprintf} from '@wordpress/i18n';
 import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
 import {CheckVerified, StarsIcon} from '@givewp/components/AdminUI/Icons';
 import Button from '@givewp/components/AdminUI/Button';
 import styles from '../style.module.scss';
+import {createInterpolateElement} from "@wordpress/element";
 
 
 export default function FeatureNoticeDialog({isUpgrading, isEditing, handleClose}) {
@@ -27,6 +28,14 @@ export default function FeatureNoticeDialog({isUpgrading, isEditing, handleClose
         }
     }
 
+    // @note the <Button/> component does not support the `className` prop.
+    const upgradeButtonStyles = {
+        width: '100%',
+        marginTop: 'var(--givewp-spacing-6)',
+        marginBottom: 'var(--givewp-spacing-4)',
+        backgroundColor: 'var(--wp-blue-blue-50)'
+    }
+
     return (
         <ModalDialog
             isOpen={true}
@@ -39,9 +48,11 @@ export default function FeatureNoticeDialog({isUpgrading, isEditing, handleClose
                 </div>
 
                 <p className={styles.message}>
-                    {__(
-                        'GiveWP 3.0 introduces an enhanced forms experience powered by the new Visual Donation Form Builder. The team is still working on add-on and gateway compatibility. If you need to use an add-on or gateway that isn\'t listed, use the "Add form" option for now.',
-                        'give'
+                    {createInterpolateElement(
+                        sprintf(__('GiveWP 3.0 introduces an enhanced forms experience powered by the new Visual Donation Form Builder. The team is still working on add-on and gateway compatibility. If you need to use an add-on or gateway that isn\'t listed, use the "%sAdd form%s" option for now.', 'give'), '<b>','</b>'),
+                        {
+                            b: <strong />,
+                        }
                     )}
                 </p>
 
@@ -77,7 +88,7 @@ export default function FeatureNoticeDialog({isUpgrading, isEditing, handleClose
                     <Button
                         size="large"
                         onClick={handleUpgrade}
-                        style={{width: '100%'}}
+                        style={upgradeButtonStyles}
                     >
                         {__('Proceed with upgrade', 'give')}
                     </Button>
@@ -90,14 +101,12 @@ export default function FeatureNoticeDialog({isUpgrading, isEditing, handleClose
                             }
                             window.location.href = 'edit.php?post_type=give_forms&page=givewp-form-builder'
                         }}
-                        style={{width: '100%'}}
+                        style={upgradeButtonStyles}
                     >
                         {__('Proceed with the new form builder', 'give')}
                     </Button>
                 )}
 
-                <br />
-
                 <a href="https://docs.givewp.com/compat-guide" rel="noopener noreferrer" target="_blank">
                     {__('Read more on Add-ons and Gateways compatibility', 'give')}
                 </a>

diff --git a/src/DonationForms/V2/resources/components/Onboarding/style.module.scss b/src/DonationForms/V2/resources/components/Onboarding/style.module.scss
@@ -41,7 +41,13 @@
 }
 
 .message {
+    font-size: 0.875rem;
     margin: 0 0 var(--givewp-spacing-5);
+    color: var(--givewp-grey-900);
+
+    strong {
+        color: var(--givewp-grey-700);
+    }
 }
 
 .title {
@@ -50,6 +56,7 @@
     margin-bottom: var(--givewp-spacing-3);
     display: flex;
     align-items: center;
+    color: var(--givewp-grey-900);
 
     svg {
         margin-right: var(--givewp-spacing-2);