From b6b72aa971e72df932870da04aab36da1a42ce6e Mon Sep 17 00:00:00 2001 From: mmeigs Date: Wed, 11 Sep 2024 14:06:50 -0600 Subject: [PATCH] DOP-4995: Dark Mode UAT: always on scroll, version selector hover flash, clear all filters flash (#1226) --- src/components/SearchResults/SearchFilters.js | 20 +- src/components/VersionDropdown/index.js | 7 + src/styles/global-dark-mode.css | 13 + .../__snapshots__/SearchResults.test.js.snap | 405 +++++++++++++++++- .../VersionDropdown.test.js.snap | 7 + 5 files changed, 445 insertions(+), 7 deletions(-) diff --git a/src/components/SearchResults/SearchFilters.js b/src/components/SearchResults/SearchFilters.js index cd52df713..9f5114ae2 100644 --- 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 /> {manuallyApplyFilters ? ( - + ) : ( - )} diff --git a/src/components/VersionDropdown/index.js b/src/components/VersionDropdown/index.js index 89622754f..2750c55fb 100644 --- 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 index e430b2d0a..ecba4a07a 100644 --- 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 { diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap index 52d518a7c..81981445f 100644 --- a/tests/unit/__snapshots__/SearchResults.test.js.snap +++ b/tests/unit/__snapshots__/SearchResults.test.js.snap @@ -1968,6 +1968,85 @@ exports[`Search Results Page considers a given search filter query param and dis } } +.emotion-87 { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + padding: 0; + margin: 0; + background-color: transparent; + border: 1px solid transparent; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-transition: all 150ms ease-in-out; + transition: all 150ms ease-in-out; + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + z-index: 0; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + border-radius: 6px; + background-color: #F9FBFA; + border-color: #889397; + color: #001E2B; + font-size: 13px; + line-height: 20px; + font-weight: 500; + height: 36px; +} + +.emotion-87:focus-visible, +.emotion-87[data-focus="true"] { + outline: none; +} + +.emotion-87:active, +.emotion-87[data-active="true"], +.emotion-87:focus, +.emotion-87:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-87:focus-visible, +.emotion-87[data-focus="true"] { + color: #001E2B; +} + +.emotion-87:hover, +.emotion-87[data-hover="true"], +.emotion-87:active, +.emotion-87[data-active="true"] { + color: #001E2B; + background-color: #FFFFFF; + box-shadow: 0 0 0 3px #E8EDEB; +} + +.emotion-87:focus-visible, +.emotion-87[data-focus="true"] { + background-color: #FFFFFF; + box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; +} + +.dark-theme .emotion-87 { + background-color: var(--gray-dark1); + border-color: var(--gray-base); + color: var(--white); + box-shadow: var(--gray-dark2) 0px 0px 0px 3px; +} + +.dark-theme .emotion-87 svg { + color: var(--gray-light2); +} +
@@ -2368,7 +2447,7 @@ exports[`Search Results Page considers a given search filter query param and dis