From 4ad7382d3b6c7c30c7e04c510551a05d9be39466 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 15 Nov 2023 11:27:25 -0500
Subject: [PATCH] add icons for buttons

---
 frontend/package.json | 1 +
 frontend/src/App.tsx  | 8 +++++---
 frontend/yarn.lock    | 5 +++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 219f0bd..18913b8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^4.12.0",
     "vite-plugin-checker": "^0.6.2"
   },
   "devDependencies": {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c125ee2..632b5d8 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import Preview from "./components/Preview";
 import { generateCode } from "./generateCode";
 import Spinner from "./components/Spinner";
 import classNames from "classnames";
+import { FaDownload, FaUndo } from "react-icons/fa";
 
 function App() {
   const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">(
@@ -101,18 +102,19 @@ function App() {
                 <div className="flex items-center gap-x-2 mb-4">
                   <a
                     className="bg-button/70 hover:bg-highlight text-black
- py-2 px-4 rounded transition duration-300"
+ py-2 px-3 rounded transition duration-300 flex gap-x-2 items-center text-sm"
                     onClick={createBlobUrl}
                     href={blobUrl}
                     download="index.html"
                   >
-                    Download
+                    <FaDownload /> Download
                   </a>
                   <button
                     className="bg-button/70 hover:bg-highlight text-black
- py-2 px-4 rounded transition duration-300"
+ py-2 px-3 rounded transition duration-300 flex gap-x-2 items-center text-sm"
                     onClick={reset}
                   >
+                    <FaUndo />
                     Reset
                   </button>
                 </div>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c474673..d8dc47a 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1684,6 +1684,11 @@ react-hot-toast@^2.4.1:
   dependencies:
     goober "^2.1.10"
 
+react-icons@^4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"
+  integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"