From 1adfa7e2ace8472d2b3254c670d1285b2c784273 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Mon, 2 Dec 2024 06:59:39 +0900
Subject: [PATCH 01/19] fix: adjust tab padding

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 4c3519128d..784afde267 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -143,7 +143,7 @@ select[name="campaignId"] {
 .tabs [role='tab'] {
     position: relative;
     appearance: none;
-    padding: 1em;
+    padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
     border: 0;
     background-color: transparent;
     color: inherit;

From e203cd6b1dced7e886700ad6c63aa2cee54e9969 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Mon, 2 Dec 2024 07:00:32 +0900
Subject: [PATCH 02/19] fix: add tab line-height and center text

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 784afde267..c8a0f5bbbc 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -148,6 +148,8 @@ select[name="campaignId"] {
     background-color: transparent;
     color: inherit;
     font-size: 0.8rem;
+    line-height: 1.5rem;
+    text-align: center;
     cursor: pointer;
 }
 

From 52d87998a8d1542135332a9583b40bac0aa6a6d8 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Mon, 2 Dec 2024 07:56:43 +0900
Subject: [PATCH 03/19] refactor: allow tab border on hover to expand

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index c8a0f5bbbc..803c13bede 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -151,6 +151,7 @@ select[name="campaignId"] {
     line-height: 1.5rem;
     text-align: center;
     cursor: pointer;
+    box-sizing: border-box
 }
 
 @media screen and (min-width: 48rem) {
@@ -166,7 +167,8 @@ select[name="campaignId"] {
     display: block;
     position: absolute;
     top: calc(100% - 0.1875em);
-    width: calc(100% - 2em);
+    left: 0;
+    right: 0;
     height: 0.1875em;
     background-color: transparent;
     transition: background-color 100ms ease-in-out;

From 1aadff2622d5ff5321d7e5751f982440cc263717 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Mon, 2 Dec 2024 07:57:28 +0900
Subject: [PATCH 04/19] feature: add width to tab to maintain size on hover

---
 .../CampaignDetailsPage.module.scss              | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 803c13bede..68af91726e 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -180,6 +180,22 @@ select[name="campaignId"] {
     font-weight: 600;
 }
 
+// set width for each tab to maintain size on hover.
+.tabs [data-reach-tab]:first-child,
+.tabs [role='tab']:first-child {
+    width: 104px;
+}
+
+.tabs [data-reach-tab]:nth-child(2),
+.tabs [role='tab']:nth-child(2) {
+    width: 95px;
+}
+
+.tabs [data-reach-tab]:last-child,
+.tabs [role='tab']:last-child {
+    width: 79px;
+}
+
 .tabs [data-reach-tab][aria-selected='true']::after,
 .tabs [role='tab'][aria-selected='true']::after {
     background-color: #66bb6a;

From be6624002e05ab5b4923f69cb87d47081c50c98e Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Mon, 2 Dec 2024 10:02:15 +0900
Subject: [PATCH 05/19] feature: adjust tabs container for forms page content

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss       | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 68af91726e..78e49a9917 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -136,6 +136,10 @@ select[name="campaignId"] {
     &:not(.fullWidth) {
         padding: 0 var(--givewp-spacing-6);
     }
+
+    &.fullWidth {
+        padding-left: var(--givewp-spacing-6);
+    }
 }
 
 

From 894b3b07952674bc64b385f92e76678109a43741 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 4 Dec 2024 05:30:26 +0900
Subject: [PATCH 06/19] refactor: adjust hover font weight

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss       | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 78e49a9917..805cf70960 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -179,6 +179,10 @@ select[name="campaignId"] {
 }
 
 .tabs [role='tab']:hover,
+.tabs [data-reach-tab]:hover {
+    font-weight: 500;
+}
+
 .tabs [data-reach-tab][aria-selected='true'],
 .tabs [role='tab'][aria-selected='true'] {
     font-weight: 600;

From 1ec44fc1e524b58a724801c8b715acc157f2fce3 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 4 Dec 2024 05:40:32 +0900
Subject: [PATCH 07/19] refactor: update font colors

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 805cf70960..e90edf2efb 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -150,7 +150,7 @@ select[name="campaignId"] {
     padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
     border: 0;
     background-color: transparent;
-    color: inherit;
+    color: var(--givewp-neutral-700, inherit);
     font-size: 0.8rem;
     line-height: 1.5rem;
     text-align: center;
@@ -181,11 +181,13 @@ select[name="campaignId"] {
 .tabs [role='tab']:hover,
 .tabs [data-reach-tab]:hover {
     font-weight: 500;
+    color: var(--givewp-neutral-900, inherit);
 }
 
 .tabs [data-reach-tab][aria-selected='true'],
 .tabs [role='tab'][aria-selected='true'] {
     font-weight: 600;
+    color: var(--givewp-neutral-900, inherit);
 }
 
 // set width for each tab to maintain size on hover.

From 2bffdff02ef2be9f2c1975cda4d71e1269df7f33 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 4 Dec 2024 08:25:57 +0900
Subject: [PATCH 08/19] feature: add active color state to campaignDots

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss    | 7 +++++--
 .../admin/components/CampaignDetailsPage/index.tsx         | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index e90edf2efb..15e3b188ed 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -467,15 +467,18 @@ select[name="campaignId"] {
         border-color: #d1d5db;
     }
 
-
     .campaignButtonDots {
-        background-color: #d1d5db;
+        background-color: #e5e7eb;
         border-color: #d1d5db;
         border-radius: var(--givewp-rounded-4);
         line-height: 0;
         padding: var(--givewp-spacing-2);
     }
 
+    .campaignButtonDotsActive {
+        background-color: #d1d5db;
+    }
+
     .contextMenu {
         position: absolute;
         z-index: 9999;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
index e5ee45c5c9..38a33b475d 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
@@ -236,7 +236,9 @@ export default function CampaignsDetailsPage({campaignId}) {
                                 </button>
 
                                 <button
-                                    className={`button button-secondary ${styles.campaignButtonDots}`}
+                                    className={`button button-secondary
+                                    ${styles.campaignButtonDots}
+                                    ${show.contextMenu && styles.campaignButtonDotsActive}`}
                                     onClick={() => setShow({contextMenu: !show.contextMenu})}
                                 >
                                     <DotsIcons />

From dc88244992ed5de98da549f07abf76be30dd3f9a Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Fri, 6 Dec 2024 14:44:09 +0900
Subject: [PATCH 09/19] refactor: update edit campaign page button

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 15e3b188ed..cfc4f6ee25 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -463,8 +463,13 @@ select[name="campaignId"] {
 
     .editCampaignPageButton {
         color: #060c1a;
-        background-color: #d1d5db;
-        border-color: #d1d5db;
+        background-color: var(--givewp-neutral-100, #e5e7eb);
+        border-color: var(--givewp-neutral-100, #e5e7eb);
+
+        &:hover {
+            background-color: var(--givewp-neutral-200, #d1d5db);
+            border-color: var(--givewp-neutral-200, #d1d5db);
+        }
     }
 
     .campaignButtonDots {

From b5ae7a3c13e9a3dda6548c9344831e8459e83c0d Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Mon, 9 Dec 2024 22:39:56 +0900
Subject: [PATCH 10/19] fix: add hover fill color

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index cfc4f6ee25..3dd4277c12 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -182,6 +182,7 @@ select[name="campaignId"] {
 .tabs [data-reach-tab]:hover {
     font-weight: 500;
     color: var(--givewp-neutral-900, inherit);
+    background-color: var(--givewp-neutral-50);
 }
 
 .tabs [data-reach-tab][aria-selected='true'],

From 7d8bd6fde812bd3fe7fcb00e0452f0f43d1a9c25 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Tue, 10 Dec 2024 05:31:09 +0900
Subject: [PATCH 11/19] refactor: remove fallback colors

---
 .../CampaignDetailsPage.module.scss                | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 3dd4277c12..043ba349ad 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -150,7 +150,7 @@ select[name="campaignId"] {
     padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
     border: 0;
     background-color: transparent;
-    color: var(--givewp-neutral-700, inherit);
+    color: var(--givewp-neutral-700);
     font-size: 0.8rem;
     line-height: 1.5rem;
     text-align: center;
@@ -181,14 +181,14 @@ select[name="campaignId"] {
 .tabs [role='tab']:hover,
 .tabs [data-reach-tab]:hover {
     font-weight: 500;
-    color: var(--givewp-neutral-900, inherit);
+    color: var(--givewp-neutral-900);
     background-color: var(--givewp-neutral-50);
 }
 
 .tabs [data-reach-tab][aria-selected='true'],
 .tabs [role='tab'][aria-selected='true'] {
     font-weight: 600;
-    color: var(--givewp-neutral-900, inherit);
+    color: var(--givewp-neutral-900);
 }
 
 // set width for each tab to maintain size on hover.
@@ -464,12 +464,12 @@ select[name="campaignId"] {
 
     .editCampaignPageButton {
         color: #060c1a;
-        background-color: var(--givewp-neutral-100, #e5e7eb);
-        border-color: var(--givewp-neutral-100, #e5e7eb);
+        background-color: var(--givewp-neutral-100);
+        border-color: var(--givewp-neutral-100);
 
         &:hover {
-            background-color: var(--givewp-neutral-200, #d1d5db);
-            border-color: var(--givewp-neutral-200, #d1d5db);
+            background-color: var(--givewp-neutral-200);
+            border-color: var(--givewp-neutral-200);
         }
     }
 

From ec377a91b697ad3652e364a71614a8067d6171ba Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 11 Dec 2024 17:37:56 +0900
Subject: [PATCH 12/19] fix: adjust overview tab width to 106px

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 043ba349ad..ccaa721cfb 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -194,7 +194,7 @@ select[name="campaignId"] {
 // set width for each tab to maintain size on hover.
 .tabs [data-reach-tab]:first-child,
 .tabs [role='tab']:first-child {
-    width: 104px;
+    width: 106px;
 }
 
 .tabs [data-reach-tab]:nth-child(2),

From 276b01bc34ac50f00546227060d0693a83d1e36e Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 11 Dec 2024 17:43:24 +0900
Subject: [PATCH 13/19] fix: update hover styles

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss       | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index ccaa721cfb..5612c1416c 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -479,6 +479,10 @@ select[name="campaignId"] {
         border-radius: var(--givewp-rounded-4);
         line-height: 0;
         padding: var(--givewp-spacing-2);
+
+        &:hover {
+            background-color: #d1d5db;
+        }
     }
 
     .campaignButtonDotsActive {

From 307f66943c5cd3c52d608162c774a69f2e1c3459 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 11 Dec 2024 17:46:37 +0900
Subject: [PATCH 14/19] fix: adjust header title & action button spacing

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 5612c1416c..7a619fc95e 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -77,7 +77,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    column-gap: 1rem;
+    column-gap: var(--givewp-spacing-2);
     margin-top: auto;
 }
 

From c2a9f386f8109a2ffc5901777225338947d35f2e Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 11 Dec 2024 18:04:05 +0900
Subject: [PATCH 15/19] refactor: update campaign header bread crumbs

---
 .../CampaignDetailsPage.module.scss           | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 7a619fc95e..7bb5382622 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -55,7 +55,7 @@
 }
 
 .pageHeader {
-    background-color: #fff;
+    background-color: var(--givewp-shades-white);
     padding-block: 1em;
     padding-inline: 1.5em;
 }
@@ -94,17 +94,20 @@
 
 .breadcrumb {
     display: flex;
-    line-height: 1rem;
-    font-size: 0.7rem;
-    color: #424242;
+    align-items: center;
+    gap: 0.25rem;
+    line-height: 1.125rem;
+    font-size: 0.75rem;
 
     & > span {
         font-weight: bold;
+        color: var(--givewp-neutral-900);
     }
 
     & > a {
         text-decoration: none;
-        color: #696969;
+        color: var(--givewp-neutral-500);
+        font-weight: 400;
     }
 
     & > a:hover {
@@ -474,19 +477,21 @@ select[name="campaignId"] {
     }
 
     .campaignButtonDots {
-        background-color: #e5e7eb;
-        border-color: #d1d5db;
+        background-color: var(--givewp-neutral-100);
+        border-color: var(--givewp-neutral-100);
         border-radius: var(--givewp-rounded-4);
         line-height: 0;
         padding: var(--givewp-spacing-2);
 
         &:hover {
-            background-color: #d1d5db;
+            background-color:var(--givewp-neutral-200);
+            border-color: var(--givewp-neutral-200);
         }
     }
 
     .campaignButtonDotsActive {
-        background-color: #d1d5db;
+        background-color: var(--givewp-neutral-200);
+        border-color: var(--givewp-neutral-200);
     }
 
     .contextMenu {

From ae031a41ffb94b32ffede037038aec73460dae9f Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 11 Dec 2024 18:09:52 +0900
Subject: [PATCH 16/19] fix: adjust page title

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss  | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 7bb5382622..dbdd66c543 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -116,20 +116,17 @@
 }
 
 .pageTitle {
-    color: #424242;
+    color: var(--givewp-neutral-900);
     margin: 0;
     font-size: 1.5rem;
-    font-weight: 600;
+    font-weight: 700;
+    line-height: 2.25rem;
 }
 
 select[name="campaignId"] {
     display: none;
 }
 
-.fullWidth {
-
-}
-
 .tabs {
     display: flex;
     gap: 0.25rem;

From 5d2080dcf2ed57b77110280afb29fcdd70791c55 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 11 Dec 2024 18:15:06 +0900
Subject: [PATCH 17/19] fix: adjust flexContainer margin top

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index dbdd66c543..27c569acec 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -66,6 +66,7 @@
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
+    margin-top: var(--givewp-spacing-2);
 
     & > * {
         flex-shrink: 0;

From 5cd2afbd204c83b8741646ebc9fa792f54049875 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Wed, 11 Dec 2024 18:31:46 +0900
Subject: [PATCH 18/19] fix: use font variables

---
 .../CampaignDetailsPage.module.scss           | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 27c569acec..509efc24f3 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -56,8 +56,8 @@
 
 .pageHeader {
     background-color: var(--givewp-shades-white);
-    padding-block: 1em;
-    padding-inline: 1.5em;
+    padding-block: 1rem;
+    padding-inline: 1.5rem;
 }
 
 .flexContainer {
@@ -174,7 +174,7 @@ select[name="campaignId"] {
     top: calc(100% - 0.1875em);
     left: 0;
     right: 0;
-    height: 0.1875em;
+    height: 0.1875rem;
     background-color: transparent;
     transition: background-color 100ms ease-in-out;
 }
@@ -313,7 +313,7 @@ select[name="campaignId"] {
             }
 
             .sectionSubtitle {
-                font-size: 16px;
+                font-size: 1rem;
                 font-weight: 500;
                 line-height: 1.5;
                 color: #1f2937;
@@ -338,7 +338,7 @@ select[name="campaignId"] {
             input,
             select,
             textarea {
-                font-size: 16px;
+                font-size: 1rem;
                 line-height: 2;
                 display: block;
                 width: 100%;
@@ -371,7 +371,6 @@ select[name="campaignId"] {
         }
 
         span:is(:global(.components-form-toggle.is-checked .components-form-toggle__thumb)) {
-
             left: 12px;
         }
 
@@ -385,7 +384,7 @@ select[name="campaignId"] {
 
         label {
             font-family: Inter, system-ui, sans-serif;
-            font-size: 16px;
+            font-size: 1rem;
             font-weight: 500;
             line-height: 1.5;
             color: #1f2937;
@@ -395,7 +394,7 @@ select[name="campaignId"] {
 
         p {
             font-family: Inter, system-ui, sans-serif;
-            font-size: 14px;
+            font-size: .875rem;
             color: #4b5563;
             margin-top: -0.1rem;
             margin-left: 1.5rem;
@@ -441,7 +440,7 @@ select[name="campaignId"] {
 
     .loadingContainerContentText {
         padding: var(--givewp-spacing-4);
-        font-size: 16px;
+        font-size: 1rem;
     }
 }
 
@@ -494,25 +493,29 @@ select[name="campaignId"] {
 
     .contextMenu {
         position: absolute;
+        display: flex;
+        flex-direction: column;
+        gap: var(--givewp-spacing-1);
         z-index: 9999;
         padding: var(--givewp-spacing-1);
         top: 50px;
         width: 203px;
         border-radius: 4px;
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-        border: solid 1px #f3f4f6;
-        background-color: #fff;
+        border: solid 1px var(--givewp-neutral-50);
+        background-color: var(--givewp-shades-white);
 
         .contextMenuItem {
             text-decoration: none;
-            gap: 5px;
+            gap: 4px;
             display: flex;
             align-items: center;
             padding: var(--givewp-spacing-2);
-            font-size: 14px;
+            font-size: .875rem;
             font-weight: 500;
             line-height: 1.43;
-            color: #1f2937;
+            color: var(--givewp-neutral-700);
+
 
             &:hover {
                 background-color: #f3f4f6;

From d4354eeff2a6062b392a9a53671c263f2d58c7ba Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Thu, 12 Dec 2024 04:38:17 +0900
Subject: [PATCH 19/19] refactor: apply active and focus states on campaign
 dots in stylesheet

---
 .../CampaignDetailsPage/CampaignDetailsPage.module.scss       | 2 +-
 .../resources/admin/components/CampaignDetailsPage/index.tsx  | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
index 509efc24f3..131baa83b1 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -480,7 +480,7 @@ select[name="campaignId"] {
         line-height: 0;
         padding: var(--givewp-spacing-2);
 
-        &:hover {
+        &:hover, &:active, &:focus {
             background-color:var(--givewp-neutral-200);
             border-color: var(--givewp-neutral-200);
         }
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
index 2572d3759f..123b6b673e 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
@@ -235,9 +235,7 @@ export default function CampaignsDetailsPage({campaignId}) {
                                 </button>
 
                                 <button
-                                    className={`button button-secondary
-                                    ${styles.campaignButtonDots}
-                                    ${show.contextMenu && styles.campaignButtonDotsActive}`}
+                                    className={`button button-secondary ${styles.campaignButtonDots}`}
                                     onClick={() => setShow({contextMenu: !show.contextMenu})}
                                 >
                                     <DotsIcons />