From 3c0ab1a05191a158565cebc04460d47128da93b4 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Sun, 13 Sep 2020 15:45:14 -0400
Subject: [PATCH] IconGrid: improve empty-state rendering and animation

When search returns no results, the empty-list state now adopts the
current color theme and animates in. The IconGrid also takes up a
minimum of 80vh vertical space, whether the list is populated or empty.
---
 src/components/IconGrid/IconGrid.css |  4 +++-
 src/components/IconGrid/IconGrid.tsx | 27 +++++++++++++++++----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index ebfd722..324268a 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -1,5 +1,6 @@
 .grid-container {
   padding: 0px 16px 4px;
+  min-height: 80vh;
 }
 
 .grid {
@@ -151,5 +152,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  padding: 0 16px 4px;
+  min-height: 80vh;
 }
diff --git a/src/components/IconGrid/IconGrid.tsx b/src/components/IconGrid/IconGrid.tsx
index 4a5a4aa..4deb3d0 100644
--- a/src/components/IconGrid/IconGrid.tsx
+++ b/src/components/IconGrid/IconGrid.tsx
@@ -10,7 +10,10 @@ import {
   iconColorAtom,
   searchQueryAtom,
 } from "../../state/atoms";
-import { filteredQueryResultsSelector, isDarkThemeSelector } from "../../state/selectors";
+import {
+  filteredQueryResultsSelector,
+  isDarkThemeSelector,
+} from "../../state/selectors";
 import GridItem from "./IconGridItem";
 import "./IconGrid.css";
 
@@ -37,15 +40,19 @@ const IconGrid: React.FC<IconGridProps> = () => {
 
   if (!filteredQueryResults.length)
     return (
-      <motion.div
-        className="empty-list"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.2 }}
-      >
-        <Warning size={92} color="currentColor" weight="fill" />
-        <p>{`No results for '${query}'`}</p>
-      </motion.div>
+      <div style={isDark ? { backgroundColor: "#35313D", color: "white" } : {}}>
+        <motion.div
+          className="empty-list"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+        >
+          <Warning size={128} color="currentColor" weight="fill" />
+          <p>
+            No results for '<code>{query}</code>'
+          </p>
+        </motion.div>
+      </div>
     );
 
   return (