Updated icons to use FA

portapack-mayhem · Jan 15, 2024 · 6353692 · 6353692
1 parent e7c2cc1
commit 6353692
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/components/Controller/Controller.tsx b/src/components/Controller/Controller.tsx
@@ -1,5 +1,11 @@
 "use client";
 
+import {
+  faRotate,
+  faRotateLeft,
+  faRotateRight,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import { LatestVersions } from "@/app/models";
 import { parseDirectories } from "@/utils/fileUtils";
@@ -287,7 +293,7 @@ const Controller = () => {
                     }}
                   />
                   <HotkeyButton
-                    label="🔄"
+                    label={<FontAwesomeIcon icon={faRotate} />}
                     disabled={disableTransmitAction}
                     onClickFunction={() => {
                       if (!disableTransmitAction) {
@@ -356,7 +362,7 @@ const Controller = () => {
                     onClick={() => write("button 7", autoUpdateFrame)}
                     className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
                   >
-                    ↪️
+                    <FontAwesomeIcon icon={faRotateLeft} />
                   </button>
                   <HotkeyButton
                     label="Up"
@@ -392,7 +398,7 @@ const Controller = () => {
                     onClick={() => write("button 8", autoUpdateFrame)}
                     className="h-12 w-12 self-end justify-self-end rounded bg-blue-400 text-white disabled:opacity-50"
                   >
-                    ↩️
+                    <FontAwesomeIcon icon={faRotateRight} />
                   </button>
                 </div>
               </div>

diff --git a/src/components/DeviceButtons/DeviceButtons.tsx b/src/components/DeviceButtons/DeviceButtons.tsx
@@ -1,3 +1,5 @@
+import { faRotateLeft, faRotateRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useWriteCommand } from "@/utils/serialUtils";
 import HotkeyButton from "../HotkeyButton/HotkeyButton";
 
@@ -60,7 +62,7 @@ export const DeviceButtons = ({
             onClick={() => write("button 7", autoUpdateFrame)}
             className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
           >
-            ↪️
+            <FontAwesomeIcon icon={faRotateLeft} />
           </button>
           <HotkeyButton
             label="Up"
@@ -96,7 +98,7 @@ export const DeviceButtons = ({
             onClick={() => write("button 8", autoUpdateFrame)}
             className="h-12 w-12 self-end justify-self-end rounded bg-blue-400 text-white disabled:opacity-50"
           >
-            ↩️
+            <FontAwesomeIcon icon={faRotateRight} />
           </button>
         </div>
       </div>

diff --git a/src/components/HotkeyButton/HotkeyButton.tsx b/src/components/HotkeyButton/HotkeyButton.tsx
@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
 interface IHotkeyButton {
@@ -8,7 +9,7 @@ interface IHotkeyButton {
   /**
    * Text to display on button
    */
-  label?: string;
+  label?: string | ReactNode;
   /**
    * Comma-separated string of shortcutkeys
    */