fix(design): modal height, no results screen

Author: Shipow

src/NoResultsScreen.tsx

@@ -6,6 +6,8 @@ import {
 
 import { InternalDocSearchHit } from './types';
 
+import { NoResultsIcon } from './icons';
+
 interface NoResultsScreenProps
   extends AutocompleteApi<
     InternalDocSearchHit,
@@ -22,6 +24,9 @@ export function NoResultsScreen(props: NoResultsScreenProps) {
 
   return (
     <div className="DocSearch-NoResults">
+      <div className="DocSearch-Screen-Icon">
+        <NoResultsIcon/>
+      </div>
       <p className="DocSearch-Title">
         No results for "<strong>{props.state.query}</strong>".
       </p>
@@ -32,9 +37,8 @@ export function NoResultsScreen(props: NoResultsScreenProps) {
           {searchSuggestions.slice(0, 3).reduce<React.ReactNode[]>(
             (acc, search) => [
               ...acc,
-              acc.length > 0 ? ', ' : '',
               <button
-                className="DocSearch-Link"
+                className="DocSearch-Prefill"
                 key={search}
                 onClick={() => {
                   props.setQuery(search.toLowerCase() + ' ');
@@ -47,14 +51,11 @@ export function NoResultsScreen(props: NoResultsScreenProps) {
             ],
             []
           )}
-          &nbsp;...
         </p>
       )}
 
       <p className="DocSearch-Help">
-        If you believe this query should return results,
-        <br />
-        please{' '}
+        If you believe this query should return results, please{' '}
         <a
           href="https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md"
           target="_blank"

src/ResultsScreen.tsx

@@ -48,9 +48,9 @@ export function ResultsScreen(props: ResultsScreenProps) {
                     >
                       {item.__docsearch_parent !==
                       suggestion.items[index + 1]?.__docsearch_parent ? (
-                        <path d="M8 6v42M20 27H8.3"/>
-                      ) : (
                         <path d="M8 6v21M20 27H8.3"/>
+                        ) : (
+                        <path d="M8 6v42M20 27H8.3"/>
                       )}
                     </g>
                   </svg>

src/icons/ErrorIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export function ErrorIcon() {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 20 20"
+      fill="none"
+      fillRule="evenodd"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round" >
+      <path d="M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0"></path>
+    </svg>
+  );
+}

src/icons/NoResultsIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export function NoResultsIcon() {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 20 20"
+      fill="none"
+      fillRule="evenodd"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round" >
+      <path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"></path>
+    </svg>
+  );
+}

src/icons/index.ts

@@ -6,3 +6,5 @@ export * from './SearchIcon';
 export * from './SelectIcon';
 export * from './SourceIcon';
 export * from './StarIcon';
+export * from './ErrorIcon';
+export * from './NoResultsIcon';

src/style.css

@@ -85,8 +85,8 @@ html[data-theme='dark'] {
   --docsearch-key-shadow: inset 0px -2px 0px 0px rgb(40, 45, 85),
     inset 0px 0px 1px 1px rgb(81, 87, 125), 0px 2px 2px 0px rgb(3, 4, 9);
   --docsearch-footer-background: rgb(30, 33, 54);
-  --docsearch-footer-shadow: inset 0px 1px 0px 0px rgba(73, 76, 106, 0.52),
-    0px -4px 8px 0px rgba(0, 0, 0, 0.34);
+  --docsearch-footer-shadow: inset 0px 1px 0px 0px rgba(73, 76, 106, 0.5),
+    0px -4px 8px 0px rgba(0, 0, 0, 0.2);
   --docsearch-logo-color: #fff;
   --docsearch-muted-color: rgb(127, 132, 151);
 }
@@ -330,7 +330,7 @@ html[data-theme='dark'] {
 /* Modal Dropdown */
 
 .DocSearch-Dropdown {
-  height: calc(
+  max-height: calc(
     var(--docsearch-modal-height) - var(--docsearch-searchbox-height) -
       var(--docsearch-spacing) - var(--docsearch-footer-height)
   );
@@ -572,7 +572,7 @@ html[data-theme='dark'] {
 }
 
 .DocSearch-Hit-path {
-  font-size: 0.7em;
+  font-size: 0.75em;
   color: var(--docsearch-muted-color);
 }
 
@@ -584,7 +584,30 @@ html[data-theme='dark'] {
   width: 80%;
   margin: 0 auto;
   text-align: center;
-  margin-top: 24px;
+  padding: 24px 0;
+  font-size: .9em;
+}
+
+.DocSearch-Screen-Icon {
+  color: var(--docsearch-muted-color);
+  padding-bottom: 12px;
+}
+
+.DocSearch-Prefill {
+  appearance: none;
+  cursor: pointer;
+  border: none;
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 0.8em;
+  background-color: var(--docsearch-muted-color);
+  margin: 0 4px;
+  padding: 4px 12px;
+}
+
+.DocSearch-Prefill:hover {
+  outline: none;
+  background-color: var(--docsearch-primary-color);
 }
 
 /* Responsive */