IconGrid: massive refactor including component extraction

This patch extracts InfoPanel from IconGridItem, adds style tweaks to
match the spec, and in general reduces prop-drilling by tapping into
recoil state for most config, and making use of IconContext to style
member icons where appropriate :)

src/components/IconGrid/IconGrid.tsx

@@ -2,30 +2,30 @@ import React, { useRef, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { motion, useAnimation } from "framer-motion";
 import { useWindowSize } from "react-use";
+import TinyColor from "tinycolor2";
+import { IconContext, WarningTriangle } from "phosphor-react";
 
-import { filteredQueryResultsSelector } from "../../state/selectors";
 import {
-  iconColorAtom,
-  iconSizeAtom,
   styleQueryAtom,
+  iconSizeAtom,
+  iconColorAtom,
   searchQueryAtom,
 } from "../../state/atoms";
-import "./IconGrid.css";
-
+import { filteredQueryResultsSelector } from "../../state/selectors";
 import GridItem from "./IconGridItem";
-import { WarningTriangle, IconProps } from "phosphor-react";
+import "./IconGrid.css";
 
 type IconGridProps = {};
 
 const IconGridAnimated: React.FC<IconGridProps> = () => {
   const weight = useRecoilValue(styleQueryAtom);
-  const query = useRecoilValue(searchQueryAtom);
   const size = useRecoilValue(iconSizeAtom);
   const color = useRecoilValue(iconColorAtom);
-  const iconProps: IconProps = { weight, color, size };
+  const query = useRecoilValue(searchQueryAtom);
+  const isDark = TinyColor(color).isLight();
 
   const { width } = useWindowSize();
-  const spans = Math.floor((width - 32) / 172);
+  const spans = Math.floor(Math.min(width - 32, 1120) / 168);
 
   const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
 
@@ -50,23 +50,30 @@ const IconGridAnimated: React.FC<IconGridProps> = () => {
     );
 
   return (
-    <motion.div
-      className="grid"
-      initial="hidden"
-      animate={controls}
-      variants={{}}
-    >
-      {filteredQueryResults.map((iconEntry, i) => (
-        <GridItem
-          key={i}
-          index={i}
-          spans={spans}
-          {...iconEntry}
-          {...iconProps}
-          originOffset={originOffset}
-        />
-      ))}
-    </motion.div>
+    <IconContext.Provider value={{ weight, size, color, mirrored: false }}>
+      <div
+        className="grid-container"
+        style={{ backgroundColor: isDark ? "#35313D" : "" }}
+      >
+        <motion.div
+          className="grid"
+          initial="hidden"
+          animate={controls}
+          variants={{}}
+        >
+          {filteredQueryResults.map((iconEntry, index) => (
+            <GridItem
+              key={index}
+              index={index}
+              spans={spans}
+              isDark={isDark}
+              {...iconEntry}
+              originOffset={originOffset}
+            />
+          ))}
+        </motion.div>
+      </div>
+    </IconContext.Provider>
   );
 };