From 86d0d421b207390228503919583a2355fc3438e8 Mon Sep 17 00:00:00 2001 From: Yonathan Evan Christy Date: Wed, 16 Aug 2023 02:19:11 +0700 Subject: [PATCH 01/10] Update Styling for Pagination section of Search Feature --- docs/_sass/_search-bar.scss | 47 +++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index ace3a7b99ace..628bd1a8a9c2 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -195,3 +195,50 @@ label.search-label { .gsc-resultsbox-visible .gsc-webResult .gsc-result { border-bottom: none; } + + +/* Change Font the Google Search result */ +.gsc-control-cse .gsc-table-result { + font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important; +} + + +/* Change the color of the Google Search Suggestion font */ +.gs-spelling.gs-result { + color: $color-text; +} + + +/* Change the color & background of Google Search Pagination */ +.gsc-cursor-next-page, +.gsc-cursor-final-page { + color: $color-text; + background-color: $color-appBG; +} + +.gsc-cursor-chevron { + color: $color-icons; + + &:hover { + color: $color-text; + } +} + +/* Change the color & background of Google Search Current Page */ +.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page { + background-color: $color-appBG; + color: $color-accent; + + &:hover { + text-decoration: none; + } +} + +.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { + background-color: $color-appBG; + color: $color-text; + + &:hover { + text-decoration: none; + } +} \ No newline at end of file From 830b06bf2f9a91b29c9db1f65bebf66c31cb9e6b Mon Sep 17 00:00:00 2001 From: Yonathan Evan Christy Date: Wed, 16 Aug 2023 02:27:31 +0700 Subject: [PATCH 02/10] Add Comment --- docs/_sass/_search-bar.scss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index 628bd1a8a9c2..f85367a3778f 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -216,14 +216,6 @@ label.search-label { background-color: $color-appBG; } -.gsc-cursor-chevron { - color: $color-icons; - - &:hover { - color: $color-text; - } -} - /* Change the color & background of Google Search Current Page */ .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page { background-color: $color-appBG; @@ -234,6 +226,7 @@ label.search-label { } } +/* Change the color & background of Google Search of Other Page */ .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { background-color: $color-appBG; color: $color-text; From e474176b9896f8bcd06a5a4b220f139e05c94a6f Mon Sep 17 00:00:00 2001 From: Yonathan Evan Christy Date: Wed, 16 Aug 2023 15:41:04 +0700 Subject: [PATCH 03/10] Update Pagination Styling --- docs/_sass/_colors.scss | 1 + docs/_sass/_search-bar.scss | 24 +++++++++++++++++++++--- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index fe88f2152e0e..f9e9f390e5e1 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -2,6 +2,7 @@ $color-green400: #03D47C; $color-green-icons: #8B9C8F; $color-green-borders: #1A3D32; $color-green-highlightBG: #07271F; +$color-green-highlightBG-hover: #06231c; $color-green-appBG: #061B09; $color-green-hover: #00a862; $color-light-gray-green: #AFBBB0; diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index f85367a3778f..bd1957d02234 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -4,6 +4,7 @@ $color-appBG: $color-green-appBG; $color-highlightBG: $color-green-highlightBG; +$color-highlightBG-hover: $color-green-highlightBG-hover; $color-accent : $color-green400; $color-borders: $color-green-borders; $color-icons: $color-green-icons; @@ -208,6 +209,21 @@ label.search-label { color: $color-text; } +/* Pagination */ +.gsc-resultsbox-visible .gsc-results .gsc-cursor-box { + text-align: center; +} + +.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { + margin: 4px; + width: 30px; + height: 30px; + border-radius: 25px; + display: inline-block; + line-height: 2.2; + background-color: $color-accent; +} + /* Change the color & background of Google Search Pagination */ .gsc-cursor-next-page, @@ -218,20 +234,22 @@ label.search-label { /* Change the color & background of Google Search Current Page */ .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page { - background-color: $color-appBG; - color: $color-accent; + background-color: $color-accent; + color: $color-text; &:hover { text-decoration: none; + background-color: $color-accent; } } /* Change the color & background of Google Search of Other Page */ .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { - background-color: $color-appBG; + background-color: $color-highlightBG; color: $color-text; &:hover { + background-color: $color-highlightBG-hover; text-decoration: none; } } \ No newline at end of file From dc37236cdea02a29003be5d2f7335cec46199782 Mon Sep 17 00:00:00 2001 From: Yonathan Evan Christy Date: Wed, 16 Aug 2023 20:50:06 +0700 Subject: [PATCH 04/10] Fix all --- docs/_sass/_search-bar.scss | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index bd1957d02234..e403e73f2b96 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -203,25 +203,32 @@ label.search-label { font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important; } +/* Change Font result Paragraph color */ +.gsc-results .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType { + color: $color-text; +} + /* Change the color of the Google Search Suggestion font */ .gs-spelling.gs-result { color: $color-text; } -/* Pagination */ +/* Pagination related style */ .gsc-resultsbox-visible .gsc-results .gsc-cursor-box { text-align: center; } .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { margin: 4px; - width: 30px; - height: 30px; + width: 28px; + height: 28px; border-radius: 25px; display: inline-block; - line-height: 2.2; + line-height: 2.5; background-color: $color-accent; + font-weight: bold; + font-size: 11px; } From e7c56cf0adf9bf6be043aea97c11367a1cd27615 Mon Sep 17 00:00:00 2001 From: Yonathan Evan Christy Date: Wed, 16 Aug 2023 20:55:26 +0700 Subject: [PATCH 05/10] Change background color --- docs/_sass/_search-bar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index e403e73f2b96..2629e12777b0 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -252,7 +252,7 @@ label.search-label { /* Change the color & background of Google Search of Other Page */ .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { - background-color: $color-highlightBG; + background-color: $color-borders; color: $color-text; &:hover { From 6981e04ad1524bf38e57ce9838938ecb6f3c81db Mon Sep 17 00:00:00 2001 From: Yonathan Evan Christy Date: Wed, 16 Aug 2023 22:34:15 +0700 Subject: [PATCH 06/10] Edit colors --- docs/_sass/_search-bar.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index 2629e12777b0..99194a0b76c8 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -6,6 +6,8 @@ $color-appBG: $color-green-appBG; $color-highlightBG: $color-green-highlightBG; $color-highlightBG-hover: $color-green-highlightBG-hover; $color-accent : $color-green400; +$color-button-background: $color-button-background; +$color-button-hovered: $color-button-hovered; $color-borders: $color-green-borders; $color-icons: $color-green-icons; $color-text: $color-white; @@ -252,11 +254,11 @@ label.search-label { /* Change the color & background of Google Search of Other Page */ .gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { - background-color: $color-borders; + background-color: $color-button-background; color: $color-text; &:hover { - background-color: $color-highlightBG-hover; + background-color: $color-button-hovered; text-decoration: none; } } \ No newline at end of file From ad346dbfd3ffeb41a1fc50570f9d582732d4467c Mon Sep 17 00:00:00 2001 From: Yonathan Evan Christy Date: Wed, 16 Aug 2023 23:18:09 +0700 Subject: [PATCH 07/10] Edit styles --- docs/_sass/_colors.scss | 2 ++ docs/_sass/_search-bar.scss | 2 -- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index f9e9f390e5e1..b34a7d13b7f0 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -1,6 +1,8 @@ $color-green400: #03D47C; $color-green-icons: #8B9C8F; $color-green-borders: #1A3D32; +$color-button-background: #1A3D32; +$color-button-hovered: #2C6755; $color-green-highlightBG: #07271F; $color-green-highlightBG-hover: #06231c; $color-green-appBG: #061B09; diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index 99194a0b76c8..49db519f3e36 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -6,8 +6,6 @@ $color-appBG: $color-green-appBG; $color-highlightBG: $color-green-highlightBG; $color-highlightBG-hover: $color-green-highlightBG-hover; $color-accent : $color-green400; -$color-button-background: $color-button-background; -$color-button-hovered: $color-button-hovered; $color-borders: $color-green-borders; $color-icons: $color-green-icons; $color-text: $color-white; From 1738278ae614ea6babecf8ad6253f577f32eae4b Mon Sep 17 00:00:00 2001 From: Architype Date: Thu, 17 Aug 2023 02:11:48 +0700 Subject: [PATCH 08/10] Update docs/_sass/_search-bar.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Marco Chávez --- docs/_sass/_search-bar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index 49db519f3e36..2f0f4f0a42af 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -259,4 +259,4 @@ label.search-label { background-color: $color-button-hovered; text-decoration: none; } -} \ No newline at end of file +} From 0d8cb84a2642823316684f229138e55c05a75424 Mon Sep 17 00:00:00 2001 From: Yonathan Evan Christy Date: Fri, 18 Aug 2023 12:43:59 +0700 Subject: [PATCH 09/10] Update styling --- docs/_sass/_search-bar.scss | 10 +++++++++- docs/assets/js/main.js | 35 +++++++++++++++++++++++++---------- 2 files changed, 34 insertions(+), 11 deletions(-) diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index 2f0f4f0a42af..ce085878af46 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -28,6 +28,7 @@ $color-gray-label: $color-gray-label; display: block; top: 0; right: 0; + z-index: 2; } @media only screen and (max-width: $breakpoint-tablet) { @@ -70,7 +71,7 @@ $color-gray-label: $color-gray-label; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); - z-index: 2; + z-index: 1; } /* All gsc id & class are Google Search relate gcse_0 is the search bar parent & gcse_1 is the search result list parent */ @@ -157,6 +158,13 @@ label.search-label { font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important; max-height: 80vh; overflow-y: scroll; + -ms-overflow-style: none; + scrollbar-width: none; +} + +/* Hide the scrollbar */ +.gsc-control-cse::-webkit-scrollbar { + display: none; } .gs-title { diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index 2b9c0cc6fe8c..4220272cf420 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -75,16 +75,6 @@ function injectFooterCopywrite() { footer.innerHTML = `©2008-${new Date().getFullYear()} Expensify, Inc.`; } -function openSidebar() { - document.getElementById('sidebar-layer').style.display = 'block'; - - // Make body unscrollable - const yAxis = document.documentElement.style.getPropertyValue('y-axis'); - const body = document.body; - body.style.position = 'fixed'; - body.style.top = `-${yAxis}`; -} - function closeSidebar() { document.getElementById('sidebar-layer').style.display = 'none'; @@ -100,6 +90,31 @@ function closeSidebar() { window.scrollTo(0, parseInt(scrollY || '0', 10) * -1); } +function closeSidebarOnClickOutside(event) { + const sidebarLayer = document.getElementById('sidebar-layer'); + + if (event.target !== sidebarLayer) { + return; + } + closeSidebar(); +}; + +function openSidebar() { + document.getElementById('sidebar-layer').style.display = 'block'; + + // Make body unscrollable + const yAxis = document.documentElement.style.getPropertyValue('y-axis'); + const body = document.body; + body.style.position = 'fixed'; + body.style.top = `-${yAxis}`; + + // Close the sidebar when clicking sidebar layer (outside the sidebar search) + const sidebarLayer = document.getElementById('sidebar-layer'); + if (sidebarLayer) { + sidebarLayer.addEventListener('click', closeSidebarOnClickOutside); + } +} + // Function to adapt & fix cropped SVG viewBox from Google based on viewport (Mobile or Tablet-Desktop) function changeSVGViewBoxGoogle() { // Get all inline Google SVG elements on the page From e22f047b1b73140f86765fb48f96f5380e6900d7 Mon Sep 17 00:00:00 2001 From: Yonathan Evan Christy Date: Fri, 18 Aug 2023 12:49:57 +0700 Subject: [PATCH 10/10] Fix prettier --- docs/assets/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index 4220272cf420..01ebb00b288c 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -97,7 +97,7 @@ function closeSidebarOnClickOutside(event) { return; } closeSidebar(); -}; +} function openSidebar() { document.getElementById('sidebar-layer').style.display = 'block';