Merge pull request Expensify#64567 from daledah/fix/64093

fix: Update Expensify Help version badges to look like badges

Author: srikarparsi

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: 20px;
+        gap: 8px;
     }
 }
 
@@ -1116,13 +1116,18 @@ button {
     gap: 4px;
 }
 
-#platform-tabs > * {
-    cursor: pointer;
-    border-radius: 20px;
-    padding: 10px 20px;
+.badge{
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--color-borders);
+    background-color: transparent;
+    border-radius: 4px;
+    text-align: center;
+    padding: 6px 12px;
+    color: var(--color-text);
+    font-size: 11px;
     box-sizing: border-box;
-    height: 36px;
-    line-height: 16px;
+    height: 28px;
 }
 
 #platform-tabs > .active {

docs/assets/js/main.js

@@ -236,11 +236,12 @@ mobileBreakpoint.addEventListener('change', handleBreakpointChange);
 handleBreakpointChange();
 
 function selectNewExpensify(newExpensifyTab, newExpensifyContent, expensifyClassicTab, expensifyClassicContent) {
-    newExpensifyTab.classList.add('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('active');
+    if (!newExpensifyContent && !newExpensifyTab) {
+        expensifyClassicTab.classList.add('badge');
+    }
     expensifyClassicContent.classList.remove('hidden');
 
     if (newExpensifyTab && newExpensifyContent) {
-        newExpensifyTab.classList.remove('active');
         newExpensifyContent.classList.add('hidden');
     }
 

docs/assets/js/platform-tabs.js

@@ -13,7 +13,9 @@ 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');
+    }
     platformTabs.appendChild(tab);
 }
 
@@ -26,9 +28,8 @@ 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');
     }
     platformTabs.appendChild(tab);
 }