fix(v2): improve search page styling, fix appearance in dark mode (#3837

) * fix(v2): update SearchPage styling, fix appearance dark mode * fix inputs outline * prettier don't like spaces, lets use margin instead * fix font family, update mobile layout * attempt to address review concerns
facebook · Nov 29, 2020 · f43781f · f43781f
1 parent bb387e0
commit f43781f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 14 deletions.
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
@@ -387,14 +387,23 @@ function Search() {
                   />
 
                   {breadcrumbs.length > 0 && (
-                    <span
-                      className={styles.searchResultItemPath}
-                      // Developer provided the HTML, so assume it's safe.
-                      // eslint-disable-next-line react/no-danger
-                      dangerouslySetInnerHTML={{
-                        __html: breadcrumbs.join(' › '),
-                      }}
-                    />
+                    <span className={styles.searchResultItemPath}>
+                      {breadcrumbs.map((html, index) => (
+                        <>
+                          {index !== 0 && (
+                            <span
+                              className={styles.searchResultItemPathSeparator}>
+                              ›
+                            </span>
+                          )}
+                          <span
+                            // Developer provided the HTML, so assume it's safe.
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML={{__html: html}}
+                          />
+                        </>
+                      ))}
+                    </span>
                   )}
 
                   {summary && (

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
@@ -8,13 +8,27 @@
 .searchQueryInput,
 .searchVersionInput {
   border-radius: var(--ifm-global-radius);
-  border: var(--ifm-global-border-width) solid
-    var(--ifm-color-content-secondary);
+  border: 0;
   font-size: var(--ifm-font-size-base);
-  padding: 0.5rem;
+  font-family: var(--ifm-font-family-base);
+  padding: 0.8rem;
   width: 100%;
-  background: #fff;
+  background: var(--docsearch-searchbox-focus-background);
+  color: var(--docsearch-text-color);
   margin-bottom: 1rem;
+  box-shadow: inset 0 0 0 2px var(--ifm-toc-border-color);
+  transition: var(--ifm-transition-fast) ease box-shadow;
+}
+
+.searchQueryInput:active,
+.searchQueryInput:focus,
+.searchVersionInput:active,
+.searchVersionInput:focus {
+  box-shadow: var(--docsearch-searchbox-shadow);
+}
+
+.searchQueryInput::placeholder {
+  color: var(--docsearch-muted-color);
 }
 
 .searchResultsColumn {
@@ -35,7 +49,7 @@
 
 .searchResultItem {
   padding: 1rem 0;
-  border-bottom: 1px solid #dfe3e8;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
 }
 
 .searchResultItemHeading {
@@ -48,6 +62,13 @@
   display: block;
 }
 
+.searchResultItemPathSeparator {
+  margin: 0 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-400);
+}
+
 .searchResultItemSummary {
   margin: 0.5rem 0 0 0;
   font-style: italic;
@@ -77,6 +98,17 @@
   }
 }
 
+@media screen and (max-width: 576px) {
+  .searchQueryColumn {
+    max-width: 100% !important;
+  }
+
+  .searchVersionColumn {
+    max-width: 100% !important;
+    padding-left: var(--ifm-spacing-horizontal) !important;
+  }
+}
+
 .loadingSpinner {
   pointer-events: none;
   width: 3rem;
@@ -100,6 +132,7 @@
 }
 
 :global(.search-result-match) {
-  background: rgba(255, 215, 142, 0.22);
+  color: var(--docsearch-hit-color);
+  background: rgba(255, 215, 142, 0.25);
   padding: 0.09em 0;
 }