Refactor: change "Add Form" button link and styles (#7462)

impress-org · Jul 30, 2024 · 4bfb893 · 4bfb893
1 parent 8bc0bfc
commit 4bfb893
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 16 deletions.
diff --git a/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx b/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
@@ -19,8 +19,8 @@ declare global {
             tooltipActionUrl: string;
             migrationApiRoot: string;
             apiRoot: string;
-            authors: Array<{ id: string | number; name: string }>;
-            table: { columns: Array<object> };
+            authors: Array<{id: string | number; name: string}>;
+            table: {columns: Array<object>};
             pluginUrl: string;
             showUpgradedTooltip: boolean;
             isMigrated: boolean;
@@ -82,15 +82,13 @@ const donationFormsFilters: Array<FilterConfig> = [
 const columnFilters: Array<ColumnFilterConfig> = [
     {
         column: 'title',
-        filter: item => {
+        filter: (item) => {
             if (item?.v3form) {
                 return (
                     <div className={styles.migratedForm}>
                         <div className={styles.tooltipContainer}>
                             <CubeIcon />
-                            <div className={styles.tooltip}>
-                                {__('Uses the Visual Form Builder', 'give')}
-                            </div>
+                            <div className={styles.tooltip}>{__('Uses the Visual Form Builder', 'give')}</div>
                         </div>
                         <Interweave attributes={{className: 'interweave'}} content={item?.title} />
                     </div>
@@ -108,13 +106,18 @@ const columnFilters: Array<ColumnFilterConfig> = [
                     <div className={styles.upgradedForm}>
                         <div className={styles.tooltipContainer}>
                             <div className={styles.tooltip}>
-                                {__('The name of this form is already associated with an upgraded form. You can safely delete this form', 'give')}.
+                                {__(
+                                    'The name of this form is already associated with an upgraded form. You can safely delete this form',
+                                    'give'
+                                )}
+                                .
                                 <div
                                     className={styles.link}
                                     onClick={(e) => {
                                         e.currentTarget.parentElement.remove();
                                         fetch(window.GiveDonationForms.tooltipActionUrl, {method: 'POST'});
-                                    }}>
+                                    }}
+                                >
                                     {__('Got it', 'give')}
                                 </div>
                             </div>
@@ -126,7 +129,7 @@ const columnFilters: Array<ColumnFilterConfig> = [
 
             return <InterweaveSSR column={column} item={item} />;
         },
-    }
+    },
 ];
 
 const donationFormsBulkActions: Array<BulkActionsConfig> = [
@@ -236,10 +239,9 @@ const ListTableBlankSlate = (
 );
 
 export default function DonationFormsListTable() {
-
     const [state, setState] = useState<OnboardingStateProps>({
-        showFeatureNoticeDialog: false
-    })
+        showFeatureNoticeDialog: false,
+    });
 
     return (
         <OnboardingContext.Provider value={[state, setState]}>
@@ -255,12 +257,18 @@ export default function DonationFormsListTable() {
                 columnFilters={columnFilters}
                 banner={Onboarding}
             >
-                <a href={'post-new.php?post_type=give_forms'} className={styles.addFormButton}>
-                    {__('Add Form', 'give')}
-                </a>
-                <button className={styles.addFormButton} onClick={showLegacyDonationForms}>
+                <button
+                    className={`button button-secondary ${styles.button} ${styles.buttonSecondary}`}
+                    onClick={showLegacyDonationForms}
+                >
                     {__('Switch to Legacy View')}
                 </button>
+                <a
+                    href={'edit.php?post_type=give_forms&page=givewp-form-builder'}
+                    className={`button button-primary ${styles.button}`}
+                >
+                    {__('Add Form', 'give')}
+                </a>
             </ListTablePage>
         </OnboardingContext.Provider>
     );

diff --git a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
@@ -120,6 +120,22 @@
     justify-content: flex-end;
 }
 
+.button:is(:global(.button)) {
+    border-radius: 0.125rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    padding: 0.5rem 1rem;
+}
+
+.buttonSecondary:is(:global(.button)) {
+    background-color: #fff;
+
+    &:hover {
+        background-color: #f6f7f7;
+    }
+}
+
 .addFormButton {
     $depth: 0px 1px 0px rgba(0, 0, 0, 0.25);