Skip to content

Commit cf7864d

Browse files
committed
fix(design): no results, empty screen + details
1 parent 3219559 commit cf7864d

3 files changed

Lines changed: 29 additions & 20 deletions

File tree

src/EmptyScreen/EmptyScreen.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66

77
import { RecentDocSearchHit } from '../types';
88

9+
import { ResetIcon } from '../SearchBox/ResetIcon';
10+
911
interface EmptyScreenProps
1012
extends AutocompleteApi<
1113
RecentDocSearchHit,
@@ -22,8 +24,8 @@ interface EmptyScreenProps
2224
export function EmptyScreen(props: EmptyScreenProps) {
2325
if (props.state.status === 'idle' && props.hasSuggestions === false) {
2426
return (
25-
<div>
26-
<p>Select results and your history will appear here.</p>
27+
<div className="DocSearch-EmptyScreen">
28+
<p className="DocSearch-Help">Your search history will appear here.</p>
2729
</div>
2830
);
2931
}
@@ -117,9 +119,7 @@ export function EmptyScreen(props: EmptyScreenProps) {
117119
props.onAction(item);
118120
}}
119121
>
120-
<svg width="20" height="20">
121-
122-
</svg>
122+
<ResetIcon />
123123
</button>
124124
</div>
125125
</div>

src/NoResults/NoResults.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ interface NoResultsProps
2020
export function NoResults(props: NoResultsProps) {
2121
return (
2222
<div className="DocSearch-NoResults">
23-
<p className="Docsearch-Hit-title">
24-
No results for {props.state.query}.
23+
<p className="DocSearch-Title">
24+
No results for "<strong>{props.state.query}</strong>".
2525
</p>
2626

2727
<p>
@@ -32,7 +32,6 @@ export function NoResults(props: NoResultsProps) {
3232
(acc, search) => [
3333
...acc,
3434
acc.length > 0 ? ', ' : '',
35-
'“',
3635
<button
3736
className="DocSearch-Link"
3837
key={search}
@@ -44,15 +43,14 @@ export function NoResults(props: NoResultsProps) {
4443
>
4544
{search}
4645
</button>,
47-
'“',
4846
],
4947
[]
5048
)}
51-
.
49+
&nbsp;...
5250
</p>
5351

54-
<p className="DocSearch-Label">
55-
If you believe this query should return results, please{' '}
52+
<p className="DocSearch-Help">
53+
If you believe this query should return results,<br/>please{' '}
5654
<a
5755
href="https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md"
5856
target="_blank"

src/style.css

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ html[data-theme='dark'] {
7878
color: var(--ifm-color-emphasis-900);
7979
font-weight: 500;
8080
transition: box-shadow 0.4s ease-out;
81+
user-select: none;
8182
}
8283

8384
.DocSearch-SearchButton:hover,
@@ -249,7 +250,7 @@ html[data-theme='dark'] {
249250
cursor: pointer;
250251
stroke-width: var(--docsearch-icon-stroke-width);
251252
color: var(--docsearch-icon);
252-
animation: reset-button .2s ease-in forwards;
253+
animation: reset-button .1s ease-in forwards;
253254
}
254255

255256
@keyframes reset-button {
@@ -316,6 +317,7 @@ html[data-theme='dark'] {
316317
border-radius: 0 0 8px 8px;
317318
background: var(--docsearch-footer-background);
318319
box-shadow: var(--docsearch-footer-shadow);
320+
user-select: none;
319321
}
320322

321323
.DocSearch-Commands {
@@ -367,6 +369,16 @@ html[data-theme='dark'] {
367369
color: var(--docsearch-muted-color);
368370
}
369371

372+
.DocSearch-Help {
373+
font-size: 0.9em;
374+
color: var(--docsearch-muted-color);
375+
user-select: none;
376+
}
377+
378+
.DocSearch-Title {
379+
font-size: 1.2em;
380+
}
381+
370382
/* Hit */
371383

372384
.DocSearch-Hits:last-of-type{
@@ -392,7 +404,6 @@ html[data-theme='dark'] {
392404
padding-left: var(--docsearch-spacing);
393405
background: var(--docsearch-hit-background);
394406
box-shadow: var(--docsearch-hit-shadow);
395-
transition: background-color ease 0.1s;
396407
}
397408

398409
.DocSearch-Hit-source {
@@ -482,14 +493,13 @@ html[data-theme='dark'] {
482493
color: var(--docsearch-muted-color);
483494
}
484495

485-
/* No Results */
496+
/* No Results - Empty Screen */
486497

487-
.DocSearch-NoResults {
498+
.DocSearch-NoResults, .DocSearch-EmptyScreen {
488499
width: 80%;
489500
margin: 0 auto;
490501
text-align: center;
491-
padding: var(--docsearch-spacing) 0;
492-
margin-top: var(--docsearch-spacing);
502+
margin-top: 24px;
493503
}
494504

495505
/* Responsive */
@@ -511,7 +521,6 @@ html[data-theme='dark'] {
511521
}
512522
.DocSearch-Cancel {
513523
display: inline-block;
514-
width: 0;
515524
white-space: nowrap;
516525
overflow: hidden;
517526
margin-left: var(--docsearch-spacing);
@@ -527,11 +536,13 @@ html[data-theme='dark'] {
527536
color: var(--docsearch-highlight-color);
528537
animation: cancel-button ease-out 0.2s forwards;
529538
outline: none;
539+
transform: scale(0);
540+
user-select: none;
530541
}
531542

532543
@keyframes cancel-button {
533544
100% {
534-
width: 4em;
545+
transform: scale(1);
535546
}
536547
}
537548

0 commit comments

Comments
 (0)