From 6b868aa59b4c739fda5adfcd5d41d44092ad246d Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Mon, 3 Aug 2020 18:22:41 -0400
Subject: [PATCH] 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       | 10 ++++++---
 src/components/IconGrid/IconGridItem.tsx   | 26 ++++++----------------
 src/components/IconGrid/InfoPanel.tsx      |  5 +++--
 src/components/SearchInput/SearchInput.css |  2 +-
 src/components/SizeInput/SizeInput.css     |  3 ++-
 src/components/StyleInput/StyleInput.css   |  2 +-
 6 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index 28b10bd..e5eac68 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/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;
 }
 
diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx
index 8b3c019..a05ee26 100644
--- a/src/components/IconGrid/IconGridItem.tsx
+++ b/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
-            ? "rgba(73, 70, 80, 0)"
-            : "rgba(246, 242, 243, 0)",
+          backgroundColor: isOpen ? "rgba(163, 159, 171, 0.1)" : undefined,
         }}
         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 fallback={<p>NOOOOOO</p>}>
-        {isOpen && <InfoPanel {...props} />}
-        </ErrorBoundary>
-      </AnimatePresence>
+      <ErrorBoundary>
+        <AnimatePresence initial={false}>
+          {isOpen && <InfoPanel {...props} />}
+        </AnimatePresence>
+      </ErrorBoundary>
     </>
   );
 };
diff --git a/src/components/IconGrid/InfoPanel.tsx b/src/components/IconGrid/InfoPanel.tsx
index dbc7ee3..2de85d8 100644
--- a/src/components/IconGrid/InfoPanel.tsx
+++ b/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",
       }}
     >
diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css
index 0add54d..098a298 100644
--- a/src/components/SearchInput/SearchInput.css
+++ b/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 {
diff --git a/src/components/SizeInput/SizeInput.css b/src/components/SizeInput/SizeInput.css
index 15946c8..f8c7b4b 100644
--- a/src/components/SizeInput/SizeInput.css
+++ b/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 */
 }
 
diff --git a/src/components/StyleInput/StyleInput.css b/src/components/StyleInput/StyleInput.css
index 6aea3da..b511855 100644
--- a/src/components/StyleInput/StyleInput.css
+++ b/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;
 }