fix(design): error screen, loading indicator, no results links

algolia · Apr 24, 2020 · 67a2b3c · 67a2b3c
1 parent c9273bf
commit 67a2b3c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/src/ErrorScreen.tsx b/src/ErrorScreen.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
+import { ErrorIcon } from './icons';
 
 export function ErrorScreen() {
   return (
     <div className="DocSearch-ErrorScreen">
-      <p>
-        We‘re unable to fetch results. You might want to check your network
-        connection.
+      <div className="DocSearch-Screen-Icon">
+        <ErrorIcon />
+      </div>
+      <p className="DocSearch-Title">
+        Unable to fetch results
+      </p>
+      <p className="DocSearch-Help">
+        You might want to check your network connection.
       </p>
     </div>
   );

diff --git a/src/NoResultsScreen.tsx b/src/NoResultsScreen.tsx
@@ -29,7 +29,7 @@ export function NoResultsScreen(props: NoResultsScreenProps) {
         <NoResultsIcon />
       </div>
       <p className="DocSearch-Title">
-        No results for "<strong>{props.state.query}</strong>".
+        No results for "<strong>{props.state.query}</strong>"
       </p>
 
       {searchSuggestions && searchSuggestions.length > 0 && (

diff --git a/src/style.css b/src/style.css
@@ -256,6 +256,7 @@ html[data-theme='dark'] {
 .DocSearch-Container--Stalled .DocSearch-LoadingIndicator,
 .DocSearch-MagnifierLabel,
 .DocSearch-Reset {
+  color: var(--docsearch-highlight-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -305,10 +306,6 @@ html[data-theme='dark'] {
   height:24px;
 }
 
-.DocSearch-MagnifierLabel {
-  color: var(--docsearch-highlight-color);
-}
-
 .DocSearch-Cancel {
   display: none;
 }
@@ -587,7 +584,7 @@ svg.DocSearch-Hit-Select-Icon {
   width: 80%;
   margin: 0 auto;
   text-align: center;
-  padding: 24px 0;
+  padding: 36px 0;
   font-size: .9em;
 }
 
@@ -618,8 +615,6 @@ svg.DocSearch-Hit-Select-Icon {
 .DocSearch-NoResults-Prefill-List li{
   list-style-type: '- ';
   list-style-position: inside;
-  padding: 0;
-  margin:0;
 }
 
 .DocSearch-Prefill {
@@ -630,13 +625,13 @@ svg.DocSearch-Hit-Select-Icon {
   border-radius: 1em;
   font-size: 1em;
   background: none;
-  /* background-color: var(--docsearch-muted-color); */
+  color: var(--docsearch-primary-color);
+  text-decoration: underline;
   padding: 0;
 }
 
 .DocSearch-Prefill:hover {
   outline: none;
-  color: var(--docsearch-primary-color);
 }
 
 /* Responsive */