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

@@ -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;
 }

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
+      <div style={isDark ? { backgroundColor: "#35313D", color: "white" } : {}}>
-        className="empty-list"
+        <motion.div
-        initial={{ opacity: 0 }}
+          className="empty-list"
-        animate={{ opacity: 1 }}
+          initial={{ opacity: 0 }}
-        transition={{ duration: 0.2 }}
+          animate={{ opacity: 1 }}
-      >
+          transition={{ duration: 0.5 }}
-        <Warning size={92} color="currentColor" weight="fill" />
+        >
-        <p>{`No results for '${query}'`}</p>
+          <Warning size={128} color="currentColor" weight="fill" />
-      </motion.div>
+          <p>
+            No results for '<code>{query}</code>'
+          </p>
+        </motion.div>
+      </div>
     );
 
   return (