InfoPanel: add breakpoints that simplify panel on mobile

src/components/IconGrid/IconGrid.css

@@ -37,12 +37,13 @@
 .grid-item p {
   font-size: 12px;
   line-height: 16px;
-  color: #86838B;
+  color: #86838b;
   margin-top: 12px;
   text-align: center;
 }
 
 .info-box {
+  position: relative;
   display: flex;
   width: 100%;
   height: 0px;
@@ -52,6 +53,16 @@
   overflow: hidden;
 }
 
+@media screen and (max-width: 1023px) {
+  .icon-preview {
+    display: none !important;
+  }
+
+  .icon-usage {
+    padding-left: 10% !important;
+  }
+}
+
 .icon-preview {
   height: 396px;
   width: 30%;
@@ -70,7 +81,7 @@
 
 .icon-usage {
   flex: 1;
-  padding: 56px 0px 56px;
+  padding: 56px 10% 56px 0;
 }
 
 .snippet {
@@ -86,6 +97,7 @@
   padding: 0;
   height: 24px;
   float: right;
+  cursor: pointer;
 }
 
 .button-row {
@@ -99,19 +111,18 @@
   margin: 0 48px 0 0;
   padding: 0;
   height: 48px;
+  cursor: pointer;
 }
 
 .button-row button svg {
   margin-right: 8px;
 }
 
-.close {
-  width: 10%;
-  text-align: end;
-}
-
 .close-icon {
-  margin: 24px;
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  text-align: end;
   cursor: pointer;
 }
 

src/components/IconGrid/InfoPanel.tsx

@@ -2,13 +2,7 @@ import React, { useRef } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { motion } from "framer-motion";
 import { saveAs } from "file-saver";
-import {
-  Icon,
-  Copy,
-  X,
-  CheckCircle,
-  ArchiveDiskDot,
-} from "phosphor-react";
+import { Icon, Copy, X, CheckCircle, ArchiveDiskDot } from "phosphor-react";
 
 import {
   styleQueryAtom,
@@ -54,9 +48,9 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
     html: `<i class="ph-${name}${
       weight === "regular" ? "" : `-${weight}`
     }"></i>`,
-    react: `<${Icon.displayName} size={${size}} ${color !== "#000000" ? `color="${color}" ` : ""}${
-      weight === "regular" ? "" : `weight="${weight}" `
-    }/>`,
+    react: `<${Icon.displayName} size={${size}} ${
+      color !== "#000000" ? `color="${color}" ` : ""
+    }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
   };
 
   const handleCopySnippet = (
@@ -142,11 +136,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
             style={{ color: isDark ? "white" : "black" }}
             onClick={handleDownloadSVG}
           >
-            <ArchiveDiskDot
-              size={32}
-              color="currentColor"
-              weight="fill"
-            />{" "}
+            <ArchiveDiskDot size={32} color="currentColor" weight="fill" />{" "}
             Download SVG
           </button>
           <button
@@ -154,23 +144,14 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
             onClick={handleCopySVG}
           >
             {copied === "svg" ? (
-              <CheckCircle
-                size={32}
-                color="#1FA647"
-                weight="fill"
-              />
+              <CheckCircle size={32} color="#1FA647" weight="fill" />
             ) : (
-              <Copy
-                size={32}
-                color="currentColor"
-                weight="fill"
-              />
+              <Copy size={32} color="currentColor" weight="fill" />
             )}
             {copied === "svg" ? "Copied!" : "Copy SVG"}
           </button>
         </div>
       </div>
-      <div className="close">
       <X
         className="close-icon"
         color="currentColor"
@@ -178,7 +159,6 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
         weight="fill"
         onClick={() => setOpen(false)}
       />
-      </div>
     </motion.section>
   );
 };