fix(design): improvements from feedbacks

- No results - Select Icon - Start screen message
algolia · Apr 24, 2020 · c9273bf · c9273bf
1 parent 3513478
commit c9273bf
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 39 deletions.
diff --git a/src/NoResultsScreen.tsx b/src/NoResultsScreen.tsx
@@ -10,10 +10,10 @@ import { NoResultsIcon } from './icons';
 
 interface NoResultsScreenProps
   extends AutocompleteApi<
-    InternalDocSearchHit,
-    React.FormEvent,
-    React.MouseEvent,
-    React.KeyboardEvent
+  InternalDocSearchHit,
+  React.FormEvent,
+  React.MouseEvent,
+  React.KeyboardEvent
   > {
   state: AutocompleteState<InternalDocSearchHit>;
   inputRef: React.MutableRefObject<null | HTMLInputElement>;
@@ -26,43 +26,45 @@ export function NoResultsScreen(props: NoResultsScreenProps) {
   return (
     <div className="DocSearch-NoResults">
       <div className="DocSearch-Screen-Icon">
-        <NoResultsIcon/>
+        <NoResultsIcon />
       </div>
       <p className="DocSearch-Title">
         No results for "<strong>{props.state.query}</strong>".
       </p>
 
       {searchSuggestions && searchSuggestions.length > 0 && (
-        <p>
-          Try searching for{' '}
-          {searchSuggestions.slice(0, 3).reduce<React.ReactNode[]>(
-            (acc, search) => [
-              ...acc,
-              <button
-                className="DocSearch-Prefill"
-                key={search}
-                onClick={() => {
-                  props.setQuery(search.toLowerCase() + ' ');
-                  props.refresh();
-                  props.inputRef.current!.focus();
-                }}
-              >
-                {search}
-              </button>,
-            ],
-            []
-          )}
-        </p>
+        <div className="DocSearch-NoResults-Prefill-List">
+          <p className="DocSearch-Help">Try searching for:</p>
+          <ul>
+            {searchSuggestions.slice(0, 3).reduce<React.ReactNode[]>(
+              (acc, search) => [
+                ...acc,
+                <li><button
+                  className="DocSearch-Prefill"
+                  key={search}
+                  onClick={() => {
+                    props.setQuery(search.toLowerCase() + ' ');
+                    props.refresh();
+                    props.inputRef.current!.focus();
+                  }}
+                >
+                  {search}
+                </button></li>,
+              ],
+              []
+            )}
+          </ul>
+        </div>
       )}
 
       <p className="DocSearch-Help">
-        If you believe this query should return results, please{' '}
+        You believe this query should return results?{' '}
         <a
           href="https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md"
           target="_blank"
           rel="noopener noreferrer"
         >
-          let us know on GitHub
+          Let us know
         </a>
         .
       </p>

diff --git a/src/StartScreen.tsx b/src/StartScreen.tsx
@@ -27,7 +27,7 @@ export function StartScreen(props: StartScreenProps) {
   if (props.state.status === 'idle' && props.hasSuggestions === false) {
     return (
       <div className="DocSearch-StartScreen">
-        <p className="DocSearch-Help">Your search history will appear here.</p>
+        <p className="DocSearch-Help">No recent searches</p>
       </div>
     );
   }

diff --git a/src/icons/SelectIcon.tsx b/src/icons/SelectIcon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export function SelectIcon() {
   return (
-    <svg width="20" height="20" viewBox="0 0 20 20">
+    <svg className="DocSearch-Hit-Select-Icon" width="20" height="20" viewBox="0 0 20 20">
       <g
         stroke="currentColor"
         fill="none"

diff --git a/src/style.css b/src/style.css
@@ -538,15 +538,19 @@ html[data-theme='dark'] {
   border-radius: 50%;
 }
 
+svg.DocSearch-Hit-Select-Icon {
+  display: none;
+}
+.DocSearch-Hit[aria-selected='true'] svg.DocSearch-Hit-Select-Icon {
+  display: block;
+}
+
+
 .DocSearch-Hit-action-button:hover {
   transition: background-color .1s ease-in;
   background: rgba(0,0,0,0.2);
 }
 
-.DocSearch-Hit-action-button:active {
-  transform: scale(1.2);
-}
-
 .DocSearch-Hit-action-button:hover path{
   fill: white;
 }
@@ -557,7 +561,7 @@ html[data-theme='dark'] {
   width: 80%;
   margin: 0 8px;
   line-height: 1.1em;
-  flex: 2 1 auto;
+  flex: 1 1 auto;
   font-weight: 500;
   overflow-x: hidden;
   white-space: nowrap;
@@ -592,21 +596,47 @@ html[data-theme='dark'] {
   padding-bottom: 12px;
 }
 
+.DocSearch-NoResults-Prefill-List {
+  text-align: left;
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+}
+
+.DocSearch-NoResults-Prefill-List p{
+  width: 50%;
+  text-align: right;
+}
+
+.DocSearch-NoResults-Prefill-List ul{
+  padding: 0 12px;
+  flex-grow: 1;
+  width: 50%;
+}
+
+.DocSearch-NoResults-Prefill-List li{
+  list-style-type: '- ';
+  list-style-position: inside;
+  padding: 0;
+  margin:0;
+}
+
 .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;
+  font-size: 1em;
+  background: none;
+  /* background-color: var(--docsearch-muted-color); */
+  padding: 0;
 }
 
 .DocSearch-Prefill:hover {
   outline: none;
-  background-color: var(--docsearch-primary-color);
+  color: var(--docsearch-primary-color);
 }
 
 /* Responsive */