From 841d11cb74d80509bbcea4145bf7a77b1fad6a90 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 19 Jun 2025 21:52:10 +0700
Subject: [PATCH 1/7] fix: Update Expensify Help version badges to look like
 badges

---
 docs/_sass/_main.scss           | 11 +++++++++++
 docs/assets/js/main.js          |  4 ++--
 docs/assets/js/platform-tabs.js | 15 ++++++++++++---
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 125bb3646684..ee10ed3e0c48 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -1125,6 +1125,17 @@ button {
     line-height: 16px;
 }
 
+#platform-tabs > .badge{
+    border-style: solid;
+    border-width: 2px;
+    border-color: var(--color-borders); 
+    background-color: transparent;
+    border-radius: 4px;
+    text-align: center;
+    cursor: unset;
+    padding: 8px 12px;
+}
+
 #platform-tabs > .active {
     color: var(--color-text);
     background-color: var(--color-button-background);
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
index 738eabbd3d1c..f1240c596f97 100644
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -236,7 +236,7 @@ mobileBreakpoint.addEventListener('change', handleBreakpointChange);
 handleBreakpointChange();
 
 function selectNewExpensify(newExpensifyTab, newExpensifyContent, expensifyClassicTab, expensifyClassicContent) {
-    newExpensifyTab.classList.add('active');
+    newExpensifyTab.classList.add(!expensifyClassicTab && !expensifyClassicContent ? 'badge' : 'active');
     newExpensifyContent.classList.remove('hidden');
 
     if (expensifyClassicTab && expensifyClassicContent) {
@@ -250,7 +250,7 @@ function selectNewExpensify(newExpensifyTab, newExpensifyContent, expensifyClass
 }
 
 function selectExpensifyClassic(newExpensifyTab, newExpensifyContent, expensifyClassicTab, expensifyClassicContent) {
-    expensifyClassicTab.classList.add('active');
+    expensifyClassicTab.classList.add(!newExpensifyContent && !newExpensifyTab ? 'badge' : 'active');
     expensifyClassicContent.classList.remove('hidden');
 
     if (newExpensifyTab && newExpensifyContent) {
diff --git a/docs/assets/js/platform-tabs.js b/docs/assets/js/platform-tabs.js
index f144ad9d043a..2ca1e928cd63 100644
--- a/docs/assets/js/platform-tabs.js
+++ b/docs/assets/js/platform-tabs.js
@@ -13,7 +13,12 @@ if (expensifyClassicContent || showExpensifyClassicBadge) {
     const tab = document.createElement('div');
     tab.innerHTML = 'Expensify Classic';
     tab.id = 'platform-tab-expensify-classic';
-    tab.classList.add('active');
+    if (!newExpensifyContent) {
+        tab.classList.toggle('badge');
+    } else {
+        console.log('here 1');
+        tab.classList.toggle('active');
+    }
     platformTabs.appendChild(tab);
 }
 
@@ -22,13 +27,17 @@ if (path.length >= 3 && path[2] == 'new-expensify') {
     showNewExpensifyBadge = true;
 }
 
+console.log(newExpensifyContent, expensifyClassicContent);
+
 if (newExpensifyContent || showNewExpensifyBadge) {
     const tab = document.createElement('div');
     tab.innerHTML = 'New Expensify';
     tab.id = 'platform-tab-new-expensify';
-
     if (!expensifyClassicContent) {
-        tab.classList.add('active');
+        tab.classList.toggle('badge');
+    } else {
+        console.log('here 2');
+        tab.classList.toggle('active');
     }
     platformTabs.appendChild(tab);
 }

From efbe6124e3a85dee1f2812589a315d6bcca3f8e8 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 19 Jun 2025 21:58:25 +0700
Subject: [PATCH 2/7] refactor: remove unsused codes

---
 docs/assets/js/platform-tabs.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/assets/js/platform-tabs.js b/docs/assets/js/platform-tabs.js
index 2ca1e928cd63..cc9a938d7aba 100644
--- a/docs/assets/js/platform-tabs.js
+++ b/docs/assets/js/platform-tabs.js
@@ -16,7 +16,6 @@ if (expensifyClassicContent || showExpensifyClassicBadge) {
     if (!newExpensifyContent) {
         tab.classList.toggle('badge');
     } else {
-        console.log('here 1');
         tab.classList.toggle('active');
     }
     platformTabs.appendChild(tab);
@@ -36,7 +35,6 @@ if (newExpensifyContent || showNewExpensifyBadge) {
     if (!expensifyClassicContent) {
         tab.classList.toggle('badge');
     } else {
-        console.log('here 2');
         tab.classList.toggle('active');
     }
     platformTabs.appendChild(tab);

From 9d3f1b1247d14b133f238ff307a51de24a3b13fa Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Sun, 22 Jun 2025 23:32:09 +0700
Subject: [PATCH 3/7] fix: adjust styles

---
 docs/_sass/_main.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index ee10ed3e0c48..72daa82843a3 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -1127,13 +1127,14 @@ button {
 
 #platform-tabs > .badge{
     border-style: solid;
-    border-width: 2px;
+    border-width: 1px;
     border-color: var(--color-borders); 
     background-color: transparent;
     border-radius: 4px;
     text-align: center;
     cursor: unset;
     padding: 8px 12px;
+    color: var(--color-text);
 }
 
 #platform-tabs > .active {

From f4528ff8aba5be9a169acd8b996f8b38657b14b9 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Mon, 30 Jun 2025 17:47:03 +0700
Subject: [PATCH 4/7] fix: styles

---
 docs/_sass/_main.scss           | 10 +++++++---
 docs/assets/js/platform-tabs.js |  2 --
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 72daa82843a3..6d5cb28ed491 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -1125,16 +1125,20 @@ button {
     line-height: 16px;
 }
 
-#platform-tabs > .badge{
+.badge{
     border-style: solid;
     border-width: 1px;
-    border-color: var(--color-borders); 
+    border-color: var(--color-borders);
     background-color: transparent;
-    border-radius: 4px;
+    border-radius: 4px !important;
     text-align: center;
     cursor: unset;
     padding: 8px 12px;
     color: var(--color-text);
+    font-size: 13px;
+    box-sizing: border-box;
+    line-height: 16px;
+    height: 36px;
 }
 
 #platform-tabs > .active {
diff --git a/docs/assets/js/platform-tabs.js b/docs/assets/js/platform-tabs.js
index cc9a938d7aba..9a425b9cb766 100644
--- a/docs/assets/js/platform-tabs.js
+++ b/docs/assets/js/platform-tabs.js
@@ -26,8 +26,6 @@ if (path.length >= 3 && path[2] == 'new-expensify') {
     showNewExpensifyBadge = true;
 }
 
-console.log(newExpensifyContent, expensifyClassicContent);
-
 if (newExpensifyContent || showNewExpensifyBadge) {
     const tab = document.createElement('div');
     tab.innerHTML = 'New Expensify';

From 8c0afb9b698679c9855a2904a3f4018317d01faa Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Mon, 30 Jun 2025 22:40:55 +0700
Subject: [PATCH 5/7] update styles

---
 docs/_sass/_main.scss | 21 +++++----------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 6d5cb28ed491..138d8520726b 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -1102,7 +1102,7 @@ button {
 
     @include maxBreakpoint($breakpoint-tablet) {
         flex-direction: column;
-        gap: 20px;
+        gap: 12px;
     }
 }
 
@@ -1116,29 +1116,18 @@ button {
     gap: 4px;
 }
 
-#platform-tabs > * {
-    cursor: pointer;
-    border-radius: 20px;
-    padding: 10px 20px;
-    box-sizing: border-box;
-    height: 36px;
-    line-height: 16px;
-}
-
 .badge{
     border-style: solid;
     border-width: 1px;
     border-color: var(--color-borders);
     background-color: transparent;
-    border-radius: 4px !important;
+    border-radius: 4px;
     text-align: center;
-    cursor: unset;
-    padding: 8px 12px;
+    padding: 6px 12px;
     color: var(--color-text);
-    font-size: 13px;
+    font-size: 11px;
     box-sizing: border-box;
-    line-height: 16px;
-    height: 36px;
+    height: 28px;
 }
 
 #platform-tabs > .active {

From d49d569abbf83b24b769b95b92f8c53079fc5db0 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Mon, 30 Jun 2025 22:42:02 +0700
Subject: [PATCH 6/7] fix padding

---
 docs/_sass/_main.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 138d8520726b..2a06d6fae200 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -1095,14 +1095,14 @@ button {
 .title-platform-tabs {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 12px;
+    padding-bottom: 20px;
     h1 {
         padding: 0;
     }
 
     @include maxBreakpoint($breakpoint-tablet) {
         flex-direction: column;
-        gap: 12px;
+        gap: 8px;
     }
 }
 

From f250e3446a4562e767938676d94f7f6cfc8aaede Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 9 Jul 2025 06:13:36 +0700
Subject: [PATCH 7/7] refactor: remove unused `active` class

---
 docs/assets/js/main.js          | 10 ++++++----
 docs/assets/js/platform-tabs.js |  4 ----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
index f1240c596f97..4fc4576fdbdf 100644
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -236,11 +236,12 @@ mobileBreakpoint.addEventListener('change', handleBreakpointChange);
 handleBreakpointChange();
 
 function selectNewExpensify(newExpensifyTab, newExpensifyContent, expensifyClassicTab, expensifyClassicContent) {
-    newExpensifyTab.classList.add(!expensifyClassicTab && !expensifyClassicContent ? 'badge' : 'active');
+    if (!expensifyClassicTab && !expensifyClassicContent) {
+        newExpensifyTab.classList.add('badge');
+    }
     newExpensifyContent.classList.remove('hidden');
 
     if (expensifyClassicTab && expensifyClassicContent) {
-        expensifyClassicTab.classList.remove('active');
         expensifyClassicContent.classList.add('hidden');
     }
     window.tocbot.refresh({
@@ -250,11 +251,12 @@ function selectNewExpensify(newExpensifyTab, newExpensifyContent, expensifyClass
 }
 
 function selectExpensifyClassic(newExpensifyTab, newExpensifyContent, expensifyClassicTab, expensifyClassicContent) {
-    expensifyClassicTab.classList.add(!newExpensifyContent && !newExpensifyTab ? 'badge' : 'active');
+    if (!newExpensifyContent && !newExpensifyTab) {
+        expensifyClassicTab.classList.add('badge');
+    }
     expensifyClassicContent.classList.remove('hidden');
 
     if (newExpensifyTab && newExpensifyContent) {
-        newExpensifyTab.classList.remove('active');
         newExpensifyContent.classList.add('hidden');
     }
 
diff --git a/docs/assets/js/platform-tabs.js b/docs/assets/js/platform-tabs.js
index 9a425b9cb766..6b6d0024fafb 100644
--- a/docs/assets/js/platform-tabs.js
+++ b/docs/assets/js/platform-tabs.js
@@ -15,8 +15,6 @@ if (expensifyClassicContent || showExpensifyClassicBadge) {
     tab.id = 'platform-tab-expensify-classic';
     if (!newExpensifyContent) {
         tab.classList.toggle('badge');
-    } else {
-        tab.classList.toggle('active');
     }
     platformTabs.appendChild(tab);
 }
@@ -32,8 +30,6 @@ if (newExpensifyContent || showNewExpensifyBadge) {
     tab.id = 'platform-tab-new-expensify';
     if (!expensifyClassicContent) {
         tab.classList.toggle('badge');
-    } else {
-        tab.classList.toggle('active');
     }
     platformTabs.appendChild(tab);
 }
