IconGrid: extract some inline styles

src/components/IconGrid/IconGrid.css

@@ -47,6 +47,7 @@
   height: 0px;
   margin: 0px;
   border-radius: 16px;
+  background-color: rgba(163, 159, 171, 0.1);
   overflow: hidden;
 }
 
@@ -76,6 +77,7 @@
 }
 .snippet pre {
   text-overflow: ellipsis;
+  color: black;
 }
 .snippet button {
   background-color: transparent;
@@ -98,6 +100,10 @@
   height: 48px;
 }
 
+.button-row button svg {
+  margin-right: 8px;
+}
+
 .close {
   width: 10%;
   text-align: end;

src/components/IconGrid/IconGridItem.tsx

@@ -6,9 +6,9 @@ import React, {
 } from "react";
 import { useRecoilState } from "recoil";
 import { motion, AnimatePresence } from "framer-motion";
+import { IconProps, Icon } from "phosphor-react";
 
 import { iconPreviewOpenAtom } from "../../state/atoms";
-import { IconProps, Icon } from "phosphor-react";
 import InfoPanel from "./InfoPanel";
 import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
 

src/components/IconGrid/InfoPanel.tsx

@@ -2,6 +2,13 @@ import React, { useRef } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { motion } from "framer-motion";
 import { saveAs } from "file-saver";
+import {
+  Icon,
+  ArrowUpRightCircle,
+  Copy,
+  Prohibit,
+  CheckCircle,
+} from "phosphor-react";
 
 import {
   styleQueryAtom,
@@ -10,13 +17,6 @@ import {
   iconPreviewOpenAtom,
 } from "../../state/atoms";
 import useTransientState from "../../hooks/useTransientState";
-import {
-  Icon,
-  ArrowUpRightCircle,
-  Copy,
-  Prohibit,
-  CheckCircle,
-} from "phosphor-react";
 
 const infoVariants = {
   open: {
@@ -95,7 +95,6 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
       variants={infoVariants}
       style={{
         order: index + (spans - (index % spans)),
-        backgroundColor: "rgba(163, 159, 171, 0.1)",
         color: isDark ? "white" : "black",
       }}
     >
@@ -108,7 +107,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
       <div className="icon-usage">
         <div className="snippet">
           HTML/CSS
-          <pre style={{ color: "black" }}>
+          <pre>
             {snippets.html}
             <button
               title="Copy snippet"
@@ -124,7 +123,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
         </div>
         <div className="snippet">
           React
-          <pre style={{ color: "black" }}>
+          <pre>
             {snippets.react}
             <button
               title="Copy snippet"
@@ -145,7 +144,6 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
           >
             <ArrowUpRightCircle
               size={32}
-              style={{ marginRight: 8 }}
               color="currentColor"
               weight="regular"
             />{" "}
@@ -158,14 +156,12 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
             {copied === "svg" ? (
               <CheckCircle
                 size={32}
-                style={{ marginRight: 8 }}
                 color="#1FA647"
                 weight="fill"
               />
             ) : (
               <Copy
                 size={32}
-                style={{ marginRight: 8 }}
                 color="currentColor"
                 weight="regular"
               />