fix(design): no results, empty screen + details

Author: Shipow

src/EmptyScreen/EmptyScreen.tsx

@@ -6,6 +6,8 @@ import {
 
 import { RecentDocSearchHit } from '../types';
 
+import { ResetIcon } from '../SearchBox/ResetIcon';
+
 interface EmptyScreenProps
   extends AutocompleteApi<
   RecentDocSearchHit,
@@ -22,8 +24,8 @@ interface EmptyScreenProps
 export function EmptyScreen(props: EmptyScreenProps) {
   if (props.state.status === 'idle' && props.hasSuggestions === false) {
     return (
-      <div>
-        <p>Select results and your history will appear here.</p>
+      <div className="DocSearch-EmptyScreen">
+        <p className="DocSearch-Help">Your search history will appear here.</p>
       </div>
     );
   }
@@ -117,9 +119,7 @@ export function EmptyScreen(props: EmptyScreenProps) {
                               props.onAction(item);
                             }}
                           >
-                            <svg width="20" height="20">
-
-                            </svg>
+                            <ResetIcon />
                           </button>
                         </div>
                       </div>

src/NoResults/NoResults.tsx

@@ -20,8 +20,8 @@ interface NoResultsProps
 export function NoResults(props: NoResultsProps) {
   return (
     <div className="DocSearch-NoResults">
-      <p className="Docsearch-Hit-title">
-        No results for “{props.state.query}“.
+      <p className="DocSearch-Title">
+        No results for "<strong>{props.state.query}</strong>".
       </p>
 
       <p>
@@ -32,7 +32,6 @@ export function NoResults(props: NoResultsProps) {
             (acc, search) => [
               ...acc,
               acc.length > 0 ? ', ' : '',
-              '“',
               <button
                 className="DocSearch-Link"
                 key={search}
@@ -44,15 +43,14 @@ export function NoResults(props: NoResultsProps) {
               >
                 {search}
               </button>,
-              '“',
             ],
             []
           )}
-        .
+        &nbsp;...
       </p>
 
-      <p className="DocSearch-Label">
-        If you believe this query should return results, please{' '}
+      <p className="DocSearch-Help">
+        If you believe this query should return results,<br/>please{' '}
         <a
           href="https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md"
           target="_blank"

src/style.css

@@ -78,6 +78,7 @@ html[data-theme='dark'] {
   color: var(--ifm-color-emphasis-900);
   font-weight: 500;
   transition: box-shadow 0.4s ease-out;
+  user-select: none;
 }
 
 .DocSearch-SearchButton:hover,
@@ -249,7 +250,7 @@ html[data-theme='dark'] {
   cursor: pointer;
   stroke-width: var(--docsearch-icon-stroke-width);
   color: var(--docsearch-icon);
-  animation: reset-button .2s ease-in forwards;
+  animation: reset-button .1s ease-in forwards;
 }
 
 @keyframes reset-button {
@@ -316,6 +317,7 @@ html[data-theme='dark'] {
   border-radius: 0 0 8px 8px;
   background: var(--docsearch-footer-background);
   box-shadow: var(--docsearch-footer-shadow);
+  user-select: none;
 }
 
 .DocSearch-Commands {
@@ -367,6 +369,16 @@ html[data-theme='dark'] {
   color: var(--docsearch-muted-color);
 }
 
+.DocSearch-Help {
+  font-size: 0.9em;
+  color: var(--docsearch-muted-color);
+  user-select: none;
+}
+
+.DocSearch-Title {
+  font-size: 1.2em;
+}
+
 /* Hit */
 
 .DocSearch-Hits:last-of-type{
@@ -392,7 +404,6 @@ html[data-theme='dark'] {
   padding-left: var(--docsearch-spacing);
   background: var(--docsearch-hit-background);
   box-shadow: var(--docsearch-hit-shadow);
-  transition: background-color ease 0.1s;
 }
 
 .DocSearch-Hit-source {
@@ -482,14 +493,13 @@ html[data-theme='dark'] {
   color: var(--docsearch-muted-color);
 }
 
-/* No Results */
+/* No Results - Empty Screen */
 
-.DocSearch-NoResults {
+.DocSearch-NoResults, .DocSearch-EmptyScreen {
   width: 80%;
   margin: 0 auto;
   text-align: center;
-  padding: var(--docsearch-spacing) 0;
-  margin-top: var(--docsearch-spacing);
+  margin-top: 24px;
 }
 
 /* Responsive */
@@ -511,7 +521,6 @@ html[data-theme='dark'] {
   }
   .DocSearch-Cancel {
     display: inline-block;
-    width: 0;
     white-space: nowrap;
     overflow: hidden;
     margin-left: var(--docsearch-spacing);
@@ -527,11 +536,13 @@ html[data-theme='dark'] {
     color: var(--docsearch-highlight-color);
     animation: cancel-button ease-out 0.2s forwards;
     outline: none;
+    transform: scale(0);
+    user-select: none;
   }
 
   @keyframes cancel-button {
     100% {
-      width: 4em;
+      transform: scale(1);
     }
   }