DOP-4995: Dark Mode UAT: always on scroll, version selector hover fla…

…sh, clear all filters flash (#1226)
mongodb · Sep 11, 2024 · b6b72aa · b6b72aa
1 parent 9f167c6
commit b6b72aa
Show file tree

Hide file tree

Showing 5 changed files with 445 additions and 7 deletions.
diff --git a/src/components/SearchResults/SearchFilters.js b/src/components/SearchResults/SearchFilters.js
@@ -1,5 +1,6 @@
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import styled from '@emotion/styled';
+import { cx, css } from '@leafygreen-ui/emotion';
 import Button from '@leafygreen-ui/button';
 import Icon from '@leafygreen-ui/icon';
 import { theme } from '../../theme/docsTheme';
@@ -20,6 +21,19 @@ const MaxWidthSelect = styled(Select)`
   width: ${FILTER_WIDTH};
 `;
 
+const filtersButtonStyles = css`
+  .dark-theme & {
+    background-color: var(--gray-dark1);
+    border-color: var(--gray-base);
+    color: var(--white);
+    box-shadow: var(--gray-dark2) 0px 0px 0px 3px;
+
+    svg {
+      color: var(--gray-light2);
+    }
+  }
+`;
+
 const SearchFilters = ({ manuallyApplyFilters = false, onApplyFilters, ...props }) => {
   const {
     filters,
@@ -176,9 +190,11 @@ const SearchFilters = ({ manuallyApplyFilters = false, onApplyFilters, ...props
         />
       </SelectWrapper>
       {manuallyApplyFilters ? (
-        <Button onClick={applyFilters}>Apply filters</Button>
+        <Button onClick={applyFilters} className={cx(filtersButtonStyles)}>
+          Apply filters
+        </Button>
       ) : (
-        <Button leftGlyph={<Icon glyph="X" />} onClick={resetFilters}>
+        <Button leftGlyph={<Icon glyph="X" />} onClick={resetFilters} className={cx(filtersButtonStyles)}>
           Clear all filters
         </Button>
       )}

diff --git a/src/components/VersionDropdown/index.js b/src/components/VersionDropdown/index.js
@@ -22,6 +22,13 @@ const StyledSelect = styled(Select)`
     div:last-child svg {
       color: var(--select-button-carot);
     }
+
+    .dark-theme &:hover {
+      background-color: var(--gray-dark4);
+      color: var(--gray-light3);
+      border-color: var(--gray-base);
+      box-shadow: var(--gray-dark2) 0px 0px 0px 3px;
+    }
   }
 
   /* Override LG mobile style of enlarged mobile font */

diff --git a/src/styles/global-dark-mode.css b/src/styles/global-dark-mode.css
@@ -79,6 +79,19 @@ body {
 
   --wayfinding-bg-color: var(--gray-dark3);
   --wayfinding-border-color: var(--gray-dark2);
+
+  /* Style the scrollbar background */
+  ::-webkit-scrollbar {
+    background: var(--gray-dark3);
+  }
+
+  /* Style the scrollbar handle */
+  ::-webkit-scrollbar-thumb {
+    background: var(--gray-dark2);
+    border: 3px solid transparent;
+    border-radius: 9px;
+    background-clip: content-box;
+  }
 }
 
 .nav-dark {