IconGrid: adjust grid item and info panel hover/active states

This is now in compliance with the spec, using a single color with
opacity to render open/hovered/active GridItems and InfoPanels. We also
properly show background on open GridItems.

src/components/IconGrid/IconGrid.css

@@ -1,5 +1,5 @@
 .grid-container {
-  padding: 0px 16px 8px;
+  padding: 4px 16px;
   /* background-color: #35313D;
   color: white; */
 }
@@ -32,7 +32,11 @@
   border-radius: 16px;
   user-select: none;
   cursor: pointer;
-  /* background-color: rgba(255, 255, 255, 0); */
+}
+
+.grid-item:hover {
+  background-color: rgba(163, 159, 171, 0.1);
+  transition: background-color 0.2s;
 }
 
 .grid-item:focus {
@@ -43,7 +47,7 @@
 .grid-item p {
   font-size: 12px;
   line-height: 16px;
-  color: #7F7F7F;
+  color: #86838B;
   margin-top: 12px;
 }
 

src/components/IconGrid/IconGridItem.tsx

@@ -2,7 +2,6 @@ import React, {
   useRef,
   useLayoutEffect,
   useEffect,
-  useMemo,
   MutableRefObject,
 } from "react";
 import { useRecoilState } from "recoil";
@@ -36,7 +35,7 @@ const itemVariants = {
 };
 
 const IconGridItem: React.FC<IconGridItemProps> = (props) => {
-  const { index, isDark, originOffset, name, Icon } = props;
+  const { index, originOffset, name, Icon } = props;
   const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);
   const isOpen = open === name;
   const delayRef = useRef<number>(0);
@@ -45,13 +44,6 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
 
   const handleOpen = () => setOpen(isOpen ? false : name);
 
-  const whileHover = useMemo(
-    () => ({
-      backgroundColor: isDark ? "rgb(73, 70, 80)" : "rgb(246, 242, 243)",
-    }),
-    [isDark]
-  );
-
   // The measurement for all elements happens in the layoutEffect cycle
   // This ensures that when we calculate distance in the effect cycle
   // all elements have already been measured
@@ -82,15 +74,11 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
         key={name}
         ref={ref}
         tabIndex={0}
-        // onFocus={console.log}
         style={{
           order: index,
-          backgroundColor: isDark
+          backgroundColor: isOpen ? "rgba(163, 159, 171, 0.1)" : undefined,
-            ? "rgba(73, 70, 80, 0)"
-            : "rgba(246, 242, 243, 0)",
         }}
         custom={delayRef}
-        whileHover={whileHover}
         whileTap={whileTap}
         transition={transition}
         variants={itemVariants}
@@ -100,11 +88,11 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
         <Icon />
         <p>{name}</p>
       </motion.div>
-      <AnimatePresence initial={false}>
+      <ErrorBoundary>
-        <ErrorBoundary fallback={<p>NOOOOOO</p>}>
+        <AnimatePresence initial={false}>
-        {isOpen && <InfoPanel {...props} />}
+          {isOpen && <InfoPanel {...props} />}
-        </ErrorBoundary>
+        </AnimatePresence>
-      </AnimatePresence>
+      </ErrorBoundary>
     </>
   );
 };

src/components/IconGrid/InfoPanel.tsx

@@ -54,7 +54,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
     html: `<i class="ph-${name}${
       weight === "regular" ? "" : `-${weight}`
     }"></i>`,
-    react: `<${Icon.displayName} size={${size}} color="${color}" ${
+    react: `<${Icon.displayName} size={${size}} ${color !== "#000000" ? `color="${color}" ` : ""}${
       weight === "regular" ? "" : `weight="${weight}" `
     }/>`,
   };
@@ -66,6 +66,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
     event.currentTarget.blur();
     setCopied(type);
     const data = snippets[type];
+    if (!navigator.clipboard) throw new Error("no clipboard!");
     data && navigator.clipboard.writeText(data);
   };
 
@@ -94,7 +95,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
       variants={infoVariants}
       style={{
         order: index + (spans - (index % spans)),
-        backgroundColor: isDark ? "rgb(73, 70, 80)" : "rgb(246, 242, 243)",
+        backgroundColor: "rgba(163, 159, 171, 0.1)",
         color: isDark ? "white" : "black",
       }}
     >

src/components/SearchInput/SearchInput.css

@@ -7,7 +7,7 @@
   padding: 0 24px;
   border-radius: 8px;
   color: white;
-  background-color: #494650;
+  background-color: rgba(255, 255, 255, 0.05);
 }
 
 .search-bar:focus-within {

src/components/SizeInput/SizeInput.css

@@ -8,7 +8,7 @@
   padding: 0 24px;
   color: white;
   border-radius: 8px;
-  background-color: #494650;
+  background-color: rgba(255, 255, 255, 0.05);
   font-family: "Manrope", sans-serif;
   font-size: 16px;
 }
@@ -24,6 +24,7 @@
   -webkit-appearance: none;  /* Override default CSS styles */
   appearance: none;
   height: 1px; /* Specified height */
+  background: rgba(255, 255, 255, 0.3);
   outline: none; /* Remove outline */
 }
 

src/components/StyleInput/StyleInput.css

@@ -22,7 +22,7 @@
   padding: 0 24px !important;
   color: white;
   border-radius: 8px !important;
-  background-color: #494650;
+  background-color: rgba(255, 255, 255, 0.05);
   font-size: 16px;
   border: none !important;
 }