From 841d11cb74d80509bbcea4145bf7a77b1fad6a90 Mon Sep 17 00:00:00 2001 From: daledah 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 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 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 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 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 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 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); }