From 8faf7be4514c0c5978f0d6e3e8f3749f08c7e30b Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Mon, 17 Aug 2020 02:19:55 -0400
Subject: [PATCH] IconGrid: switch to fill-style icon buttons

---
 src/components/IconGrid/IconGrid.css  |  1 +
 src/components/IconGrid/InfoPanel.tsx | 18 +++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index 587fb9c..77c642f 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -39,6 +39,7 @@
   line-height: 16px;
   color: #86838B;
   margin-top: 12px;
+  text-align: center;
 }
 
 .info-box {
diff --git a/src/components/IconGrid/InfoPanel.tsx b/src/components/IconGrid/InfoPanel.tsx
index 23f4780..32f2417 100644
--- a/src/components/IconGrid/InfoPanel.tsx
+++ b/src/components/IconGrid/InfoPanel.tsx
@@ -4,10 +4,10 @@ import { motion } from "framer-motion";
 import { saveAs } from "file-saver";
 import {
   Icon,
-  ArrowUpRightCircle,
   Copy,
-  Prohibit,
+  X,
   CheckCircle,
+  ArchiveDiskDot,
 } from "phosphor-react";
 
 import {
@@ -116,7 +116,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
               {copied === "html" ? (
                 <CheckCircle size={24} color="#1FA647" weight="fill" />
               ) : (
-                <Copy size={24} color="currentColor" weight="regular" />
+                <Copy size={24} color="currentColor" weight="fill" />
               )}
             </button>
           </pre>
@@ -132,7 +132,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
               {copied === "react" ? (
                 <CheckCircle size={24} color="#1FA647" weight="fill" />
               ) : (
-                <Copy size={24} color="currentColor" weight="regular" />
+                <Copy size={24} color="currentColor" weight="fill" />
               )}
             </button>
           </pre>
@@ -142,10 +142,10 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
             style={{ color: isDark ? "white" : "black" }}
             onClick={handleDownloadSVG}
           >
-            <ArrowUpRightCircle
+            <ArchiveDiskDot
               size={32}
               color="currentColor"
-              weight="regular"
+              weight="fill"
             />{" "}
             Download SVG
           </button>
@@ -163,7 +163,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
               <Copy
                 size={32}
                 color="currentColor"
-                weight="regular"
+                weight="fill"
               />
             )}
             {copied === "svg" ? "Copied!" : "Copy SVG"}
@@ -171,11 +171,11 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
         </div>
       </div>
       <div className="close">
-        <Prohibit
+        <X
           className="close-icon"
           color="currentColor"
           size={32}
-          weight="regular"
+          weight="fill"
           onClick={() => setOpen(false)}
         />
       </div>