Merge pull request #24598 from studentofcoding/Styling-update-help-ex…

…pensify Update Styling for Suggestion Pagination section of Search Feature
Expensify · Aug 19, 2023 · 03cf0b1 · 03cf0b1
2 parents 2004924 + e22f047
commit 03cf0b1
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 11 deletions.
diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
@@ -1,7 +1,10 @@
 $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;
 $color-green-hover: #00a862;
 $color-light-gray-green: #AFBBB0;

diff --git 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;
@@ -27,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) {
@@ -69,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 */
@@ -156,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 {
@@ -195,3 +204,67 @@ 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 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 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: 28px;
+    height: 28px;
+    border-radius: 25px;
+    display: inline-block;
+    line-height: 2.5;
+    background-color: $color-accent;
+    font-weight: bold;
+    font-size: 11px;
+}
+
+
+/* Change the color & background of Google Search Pagination */
+.gsc-cursor-next-page,
+.gsc-cursor-final-page {
+    color: $color-text;
+    background-color: $color-appBG;
+}
+
+/* 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-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-button-background;
+    color: $color-text;
+
+    &:hover {
+        background-color: $color-button-hovered;
+        text-decoration: none;
+    }
+}
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
@@ -75,16 +75,6 @@ function injectFooterCopywrite() {
     footer.innerHTML = `&copy;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