From 03a809b2e1e70283fb9f334997377474e6ed8a67 Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Thu, 25 Jul 2024 16:31:40 -0300
Subject: [PATCH 1/5] refactor: change add form link and use WP button classes

---
 .../components/DonationFormsListTable.tsx     | 51 +++++++++++--------
 .../ListTablePage/ListTablePage.module.scss   |  9 ++++
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx b/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
index 48315e5ff3..fb3cfda503 100644
--- a/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
+++ b/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
@@ -20,8 +20,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;
             showBanner: boolean;
             showUpgradedTooltip: boolean;
@@ -84,15 +84,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>
@@ -110,13 +108,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>
@@ -128,7 +131,7 @@ const columnFilters: Array<ColumnFilterConfig> = [
 
             return <InterweaveSSR column={column} item={item} />;
         },
-    }
+    },
 ];
 
 const donationFormsBulkActions: Array<BulkActionsConfig> = [
@@ -238,11 +241,10 @@ const ListTableBlankSlate = (
 );
 
 export default function DonationFormsListTable() {
-
     const [state, setState] = useState<OnboardingStateProps>({
         showBanner: Boolean(window.GiveDonationForms.showBanner),
-        showFeatureNoticeDialog: false
-    })
+        showFeatureNoticeDialog: false,
+    });
 
     return (
         <OnboardingContext.Provider value={[state, setState]}>
@@ -260,18 +262,23 @@ export default function DonationFormsListTable() {
             >
                 <div className={styles.tryNewFormBuilderBtnContainer}>
                     <FormBuilderButton
-                        onClick={() => setState(prev => ({
-                            ...prev,
-                            showFeatureNoticeDialog: true
-                        }))}
+                        onClick={() =>
+                            setState((prev) => ({
+                                ...prev,
+                                showFeatureNoticeDialog: true,
+                            }))
+                        }
                     />
                 </div>
-                <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.buttonSecondary}`}
+                    onClick={showLegacyDonationForms}
+                >
                     {__('Switch to Legacy View')}
                 </button>
+                <button className={`button button-primary ${styles.buttonPrimary}`} onClick={addForm}>
+                    {__('Add Form')}
+                </button>
             </ListTablePage>
         </OnboardingContext.Provider>
     );
@@ -281,3 +288,7 @@ const showLegacyDonationForms = async (event) => {
     await API.fetchWithArgs('/view', {isLegacy: 1});
     window.location.href = '/wp-admin/edit.php?post_type=give_forms';
 };
+
+const addForm = (event) => {
+    window.location.href = 'edit.php?post_type=give_forms&page=givewp-form-builder';
+};
diff --git a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
index 7f0e417789..5023a3f5cd 100644
--- a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
+++ b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
@@ -120,6 +120,15 @@
     justify-content: flex-end;
 }
 
+.buttonSecondary {
+    font-weight: 500;
+    height: 36px;
+}
+
+.buttonPrimary {
+    height: 36px;
+}
+
 .addFormButton {
     $depth: 0px 1px 0px rgba(0, 0, 0, 0.25);
 

From 1c4a4b60feba8fc1549e1404c3b2900ba9df1674 Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Thu, 25 Jul 2024 17:15:26 -0300
Subject: [PATCH 2/5] refactor: change button height

---
 .../ListTable/ListTablePage/ListTablePage.module.scss         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
index 5023a3f5cd..5ecc47ebde 100644
--- a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
+++ b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
@@ -122,11 +122,11 @@
 
 .buttonSecondary {
     font-weight: 500;
-    height: 36px;
+    height: 32px;
 }
 
 .buttonPrimary {
-    height: 36px;
+    height: 32px;
 }
 
 .addFormButton {

From c87a0953eed65a81079dd8400f626cf1c9332610 Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Mon, 29 Jul 2024 11:22:03 -0300
Subject: [PATCH 3/5] refactor: replace button with link tag

---
 .../resources/components/DonationFormsListTable.tsx | 13 ++++++-------
 .../ListTablePage/ListTablePage.module.scss         |  1 +
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx b/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
index fb3cfda503..f41e609d51 100644
--- a/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
+++ b/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
@@ -276,9 +276,12 @@ export default function DonationFormsListTable() {
                 >
                     {__('Switch to Legacy View')}
                 </button>
-                <button className={`button button-primary ${styles.buttonPrimary}`} onClick={addForm}>
-                    {__('Add Form')}
-                </button>
+                <a
+                    href={'edit.php?post_type=give_forms&page=givewp-form-builder'}
+                    className={`button button-primary ${styles.buttonPrimary}`}
+                >
+                    {__('Add Form', 'give')}
+                </a>
             </ListTablePage>
         </OnboardingContext.Provider>
     );
@@ -288,7 +291,3 @@ const showLegacyDonationForms = async (event) => {
     await API.fetchWithArgs('/view', {isLegacy: 1});
     window.location.href = '/wp-admin/edit.php?post_type=give_forms';
 };
-
-const addForm = (event) => {
-    window.location.href = 'edit.php?post_type=give_forms&page=givewp-form-builder';
-};
diff --git a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
index 5ecc47ebde..3dfd85eb57 100644
--- a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
+++ b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
@@ -127,6 +127,7 @@
 
 .buttonPrimary {
     height: 32px;
+    line-height: 2.4 !important;
 }
 
 .addFormButton {

From 630963f8535f09e282e8537cdd7951f08b3514f3 Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Tue, 30 Jul 2024 10:29:57 -0300
Subject: [PATCH 4/5] refactor: change CSS classes

---
 .../V2/resources/components/DonationFormsListTable.tsx   | 4 ++--
 .../ListTable/ListTablePage/ListTablePage.module.scss    | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx b/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
index f41e609d51..a7142c46f0 100644
--- a/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
+++ b/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
@@ -271,14 +271,14 @@ export default function DonationFormsListTable() {
                     />
                 </div>
                 <button
-                    className={`button button-secondary ${styles.buttonSecondary}`}
+                    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.buttonPrimary}`}
+                    className={`button button-primary ${styles.button}`}
                 >
                     {__('Add Form', 'give')}
                 </a>
diff --git a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
index 3dfd85eb57..ea0ced4fb3 100644
--- a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
+++ b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
@@ -120,14 +120,13 @@
     justify-content: flex-end;
 }
 
-.buttonSecondary {
-    font-weight: 500;
+.button:is(:global(.button)) {
     height: 32px;
+    line-height: 2.4;
 }
 
-.buttonPrimary {
-    height: 32px;
-    line-height: 2.4 !important;
+.buttonSecondary:is(:global(.button)) {
+    font-weight: 500;
 }
 
 .addFormButton {

From 9d1eadd53f60cc13bca887f5e7b3f62fed1f2b76 Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Tue, 30 Jul 2024 11:24:23 -0300
Subject: [PATCH 5/5] refactor: update styles

---
 .../ListTablePage/ListTablePage.module.scss         | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
index ea0ced4fb3..5731c9e450 100644
--- a/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
+++ b/src/Views/Components/ListTable/ListTablePage/ListTablePage.module.scss
@@ -121,12 +121,19 @@
 }
 
 .button:is(:global(.button)) {
-    height: 32px;
-    line-height: 2.4;
+    border-radius: 0.125rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    padding: 0.5rem 1rem;
 }
 
 .buttonSecondary:is(:global(.button)) {
-    font-weight: 500;
+    background-color: #fff;
+
+    &:hover {
+        background-color: #f6f7f7;
+    }
 }
 
 .addFormButton {