Improve Search styling (github#21295)

* fix: improve search highlight contrast
Z-byte-prog · Sep 3, 2021 · d8b4383 · d8b4383
1 parent f52018f
commit d8b4383
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 59 deletions.
diff --git a/components/Search.module.scss b/components/Search.module.scss
@@ -4,16 +4,16 @@
 }
 
 .searchResultTitle mark {
-  color: var(--color-auto-blue-5);
+  color: var(--color-text-link);
 }
 
 .searchResultIntro mark {
-  border-bottom: 1px solid var(--color-auto-blue-5);
+  border-bottom: 1px solid currentColor;
 }
 
 .searchResultContent mark {
   text-decoration: none;
-  border-bottom: 1px dotted var(--color-auto-gray-5);
+  border-bottom: 1px dotted currentColor;
 }
 
 .searchResultTitle em {
@@ -31,7 +31,7 @@
   background: var(--color-bg-primary);
   box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
   transition: width 0.3s ease-in-out;
-  padding: 64px 24px 24px;
+  padding-top: 64px;
 }
 
 .resultsContainerOpen {

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -37,7 +37,7 @@ export function Search({
   const [query, setQuery] = useState(router.query.query || '')
   const [results, setResults] = useState<Array<SearchResult>>([])
   const [isLoading, setIsLoading] = useState(false)
-  const [activeHit, setActiveHit] = useState(0)
+  const [activeHit, setActiveHit] = useState(-1)
   const inputRef = useRef<HTMLInputElement>(null)
   const { t } = useTranslation('search')
   const { currentVersion } = useVersion()
@@ -164,55 +164,53 @@ export function Search({
       <div
         id="search-results-container"
         className={cx(
-          'z-1',
+          'z-1 pb-4 px-3',
           styles.resultsContainer,
           isOverlay && styles.resultsContainerOverlay,
           query && styles.resultsContainerOpen
         )}
       >
         {results.length > 0 ? (
-          <ol data-testid="search-results" className="d-block">
-            {results.map(({ url, breadcrumbs, heading, title, content }, index) => (
-              <li
-                key={url}
-                data-testid="search-result"
-                className={cx(
-                  'list-style-none overflow-hidden hover:color-bg-info',
-                  index + 1 === activeHit && 'color-bg-info'
-                )}
-              >
-                <div className="border-top color-border-secondary py-3 px-2">
-                  <a className="no-underline" href={url}>
-                    {/* Breadcrumbs in search records don't include the page title. These fields may contain <mark> elements that we need to render */}
-                    <div
-                      className="d-block color-text-primary opacity-60 text-small pb-1"
-                      dangerouslySetInnerHTML={{ __html: breadcrumbs }}
-                    />
-                    <div
-                      className={cx(
-                        styles.searchResultTitle,
-                        'd-block f4 font-weight-semibold color-text-primary'
-                      )}
-                      dangerouslySetInnerHTML={{
-                        __html: heading ? `${title}: ${heading}` : title,
-                      }}
-                    />
-                    <div
-                      className={cx(
-                        styles.searchResultContent,
-                        'd-block color-text-secondary overflow-hidden'
-                      )}
-                      style={{ maxHeight: '4rem' }}
-                      dangerouslySetInnerHTML={{ __html: content }}
-                    />
-                  </a>
-                </div>
-              </li>
-            ))}
+          <ol data-testid="search-results" className="d-block mt-2">
+            {results.map(({ url, breadcrumbs, heading, title, content }, index) => {
+              const isActive = index === activeHit
+              return (
+                <li
+                  key={url}
+                  data-testid="search-result"
+                  className={cx(
+                    'list-style-none overflow-hidden rounded-3 color-text-primary border',
+                    isActive ? 'color-bg-tertiary' : 'color-border-transparent'
+                  )}
+                  onMouseEnter={() => setActiveHit(index)}
+                >
+                  <div className={cx('py-3 px-3', isActive && 'color-border-secondary')}>
+                    <a className="no-underline color-text-primary" href={url}>
+                      {/* Breadcrumbs in search records don't include the page title. These fields may contain <mark> elements that we need to render */}
+                      <div
+                        className={'d-block opacity-60 text-small pb-1'}
+                        dangerouslySetInnerHTML={{ __html: breadcrumbs }}
+                      />
+                      <div
+                        className={cx(styles.searchResultTitle, 'd-block f4 font-weight-semibold')}
+                        dangerouslySetInnerHTML={{
+                          __html: heading ? `${title}: ${heading}` : title,
+                        }}
+                      />
+                      <div
+                        className={cx(styles.searchResultContent, 'd-block overflow-hidden')}
+                        style={{ maxHeight: '4rem' }}
+                        dangerouslySetInnerHTML={{ __html: content }}
+                      />
+                    </a>
+                  </div>
+                </li>
+              )
+            })}
           </ol>
         ) : (
           isOverlay && (
-            <div className="mt-2">
+            <div className="mt-2 px-6">
               {isLoading ? <span>{t('loading')}...</span> : <span>{t('no_results')}.</span>}
             </div>
           )

diff --git a/stylesheets/utilities.scss b/stylesheets/utilities.scss
@@ -18,9 +18,12 @@
   min-height: 100vh;
 }
 
+.outline-none {
+  outline: none;
+}
+
 /* Print utilities
 ------------------------------------------------------------------------------*/
-
 @media print {
   .no-print {
     display: none;
@@ -29,7 +32,6 @@
 
 /* Opacity utilities
 ------------------------------------------------------------------------------*/
-
 .opacity-0 {
   opacity: 0;
 }
@@ -45,7 +47,6 @@
 
 /* Text utilities
 ------------------------------------------------------------------------------*/
-
 .underline-dashed {
   padding-bottom: $spacer-1;
   background-image: linear-gradient(
@@ -58,23 +59,24 @@
   background-size: 10px 1px;
 }
 
+.font-weight-semibold {
+  font-weight: $font-weight-semibold;
+}
+
 /* List utilities
 ------------------------------------------------------------------------------*/
-
 .list-style-inside {
   list-style: inside;
 }
 
 /* Hover utilities
 ------------------------------------------------------------------------------*/
-
 .hover\:color-bg-info:hover {
   background: var(--color-bg-info);
 }
 
 /* Z-Index utilities
 ------------------------------------------------------------------------------*/
-
 .-z-1 {
   z-index: -1;
 }
@@ -87,7 +89,6 @@
 
 /* Gradient utilities
 ------------------------------------------------------------------------------*/
-
 .fade-tertiary-left {
   background: linear-gradient(to right, var(--color-bg-primary), transparent);
 }
@@ -114,12 +115,8 @@
   background-color: var(--color-auto-blue-6);
 }
 
-/* Semibold text
+/* Border colors
 ------------------------------------------------------------------------------*/
-.font-weight-semibold {
-  font-weight: $font-weight-semibold;
-}
-
-.outline-none {
-  outline: none;
+.color-border-transparent {
+  border-color: transparent !important;
 }