From 67a2b3c3e0105dd710462913d19ff3acaa8713a2 Mon Sep 17 00:00:00 2001
From: Shipow <shipowlata@gmail.com>
Date: Fri, 24 Apr 2020 11:22:52 +0200
Subject: [PATCH] fix(design): error screen, loading indicator, no results
 links

---
 src/ErrorScreen.tsx     | 12 +++++++++---
 src/NoResultsScreen.tsx |  2 +-
 src/style.css           | 13 ++++---------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/ErrorScreen.tsx b/src/ErrorScreen.tsx
index d2602fad..7ef7a943 100644
--- 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
index 1aa0f667..3158a844 100644
--- 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
index fe82d77d..9ff4e4b3 100644
--- 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 */