From 094dfd5d65f4affeec01457a2543fbaa48ac9c1c Mon Sep 17 00:00:00 2001
From: Sophia Beluli <sophiabeluli@gmail.com>
Date: Wed, 4 Sep 2024 15:07:09 -0400
Subject: [PATCH] replace fontawesome with react icons

---
 src/app/index.html                            |  1 -
 .../ConfirmationDialog/ConfirmationDialog.jsx |  3 ++-
 src/app/src/components/RangeSlider/index.tsx  |  8 +++++---
 .../MachineStatus/AlarmDescriptionIcon.tsx    |  4 ++--
 .../features/MachineStatus/MachineStatus.tsx  | 18 +++++++++---------
 .../features/MachineStatus/UnlockButton.tsx   | 19 +++++++++----------
 6 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/app/index.html b/src/app/index.html
index 2799a7e6b..7b064059d 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -5,7 +5,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>gSender</title>
         <link rel="stylesheet" crossorigin href="./src/index.css" type="text/css"/>
-        <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" />
         <script src="https://cdn.tailwindcss.com"></script>
         <!--app-head-->
     </head>
diff --git a/src/app/src/components/ConfirmationDialog/ConfirmationDialog.jsx b/src/app/src/components/ConfirmationDialog/ConfirmationDialog.jsx
index e159d0590..802e3612d 100644
--- a/src/app/src/components/ConfirmationDialog/ConfirmationDialog.jsx
+++ b/src/app/src/components/ConfirmationDialog/ConfirmationDialog.jsx
@@ -24,6 +24,7 @@
 import React, { useState, useEffect } from 'react';
 import pubsub from 'pubsub-js';
 import cx from 'classnames';
+import { FaExclamationTriangle } from "react-icons/fa";
 import styles from './index.styl';
 import ConfirmationDialogButton from './ConfirmationDialogButton';
 import { DIALOG_CONFIRM, DIALOG_CANCEL } from './ConfirmationDialogLib';
@@ -61,7 +62,7 @@ const ConfirmationDialog = () => {
             <div className={styles.confirmationDialog}>
                 <div className={styles.confirmationBar} />
                 <div className={styles.confirmationDialogTitle}>
-                    <i className="fas fa-exclamation-triangle" />
+                    <FaExclamationTriangle />
                     <span>{ title }</span>
                 </div>
                 <div className={styles.confirmationDialogContent}>
diff --git a/src/app/src/components/RangeSlider/index.tsx b/src/app/src/components/RangeSlider/index.tsx
index 837a0d986..2db0c4de4 100644
--- a/src/app/src/components/RangeSlider/index.tsx
+++ b/src/app/src/components/RangeSlider/index.tsx
@@ -23,6 +23,8 @@
 
 import React, { PointerEventHandler } from 'react';
 import * as Slider from '@radix-ui/react-slider';
+import { CiRedo } from "react-icons/ci";
+import { FaMinus, FaPlus } from "react-icons/fa";
 
 export interface RangeSliderProps {
     [key: string]: any,
@@ -68,7 +70,7 @@ const RangeSlider = ({
                     className="flex w-10 h-7 items-center justify-center rounded-s-3xl rounded-e-none text-center p-1 m-0 font-bold border-solid border-[1px] border-blue-400 bg-white bg-opacity-60 text-black"
                     onClick={() => onChange(defaultValue)}
                 >
-                    <i className="fas fa-redo"></i>
+                    <CiRedo />
                 </button>
                 <Slider.Root
                     className="flex relative items-center w-full h-6"
@@ -101,7 +103,7 @@ const RangeSlider = ({
                         onChange([newValue]);
                     }}
                 >
-                    <i className="fas fa-minus"></i>
+                    <FaMinus />
                 </button>
                 <button
                     type="button"
@@ -114,7 +116,7 @@ const RangeSlider = ({
                         onChange([newValue]);
                     }}
                 >
-                    <i className="fas fa-plus"></i>
+                    <FaPlus />
                 </button>
             </div>
         </div>
diff --git a/src/app/src/features/MachineStatus/AlarmDescriptionIcon.tsx b/src/app/src/features/MachineStatus/AlarmDescriptionIcon.tsx
index 9eb735efb..22bf8a46a 100644
--- a/src/app/src/features/MachineStatus/AlarmDescriptionIcon.tsx
+++ b/src/app/src/features/MachineStatus/AlarmDescriptionIcon.tsx
@@ -22,7 +22,7 @@
  */
 
 import get from 'lodash/get';
-import cx from 'classnames';
+import { FaQuestion } from "react-icons/fa6";
 import { store as reduxStore } from '../../store/redux';
 import { GRBLHAL } from '../../constants';
 import { GRBL_HAL_ALARMS } from '../../../../server/controllers/Grblhal/constants';
@@ -47,7 +47,7 @@ const AlarmDescriptionIcon = ({ code = 1 }: { code: ALARM_CODE }) => {
           <Tooltip>
             <TooltipTrigger asChild>
                 <div className="bg-white opacity-90 rounded-full w-8 h-8 my-0 mx-4 flex items-center justify-center shadow-[rgba(0,0,0,0.35)_0px_5px_15px] [pointer-events:_all]">
-                    <i className={cx("fas fa-question", "text-xl text-gray-600")} />
+                    <FaQuestion className="text-xl text-gray-600" />
                 </div>
             </TooltipTrigger>
             <TooltipContent className="max-w-64">
diff --git a/src/app/src/features/MachineStatus/MachineStatus.tsx b/src/app/src/features/MachineStatus/MachineStatus.tsx
index 1e662d6e1..d77074ce8 100644
--- a/src/app/src/features/MachineStatus/MachineStatus.tsx
+++ b/src/app/src/features/MachineStatus/MachineStatus.tsx
@@ -97,21 +97,21 @@ const MachineStatus: React.FC<MachineStatusProps> = ({ activeState, alarmCode, i
                         isConnected && activeState ? (
                             <>
                                 {
-                                    activeState === GRBL_ACTIVE_STATE_ALARM ? (
-                                        <div className="flex w-full flex-row justify-center align-middle items-center font-light text-3xl mb-1">
-                                            <div className="flex justify-center">{activeState}</div>
-                                            <div className="absolute right-3 flex float-right"><AlarmDescriptionIcon code={alarmCode} /></div>
-                                        </div>
-                                    ) : (
-                                        <span className="flex w-full font-light text-3xl mb-1 justify-center">{message[activeState]}</span>
-                                    )
+                                    // activeState === GRBL_ACTIVE_STATE_ALARM ? (
+                                    <div className="flex w-full flex-row justify-center align-middle items-center font-light text-3xl mb-1">
+                                        <div className="flex justify-center">{activeState}</div>
+                                        <div className="absolute right-3 flex float-right"><AlarmDescriptionIcon code={alarmCode} /></div>
+                                    </div>
+                                    // ) : (
+                                    //     <span className="flex w-full font-light text-3xl mb-1 justify-center">{message[activeState]}</span>
+                                    // )
                                 }
                             </>
                         ) : <h1 className="flex w-full font-light text-3xl mb-1 justify-center">Disconnected</h1>
                     }
                 </div>
                 <div className="mt-4">
-                    { (activeState === GRBL_ACTIVE_STATE_ALARM || activeState === GRBL_ACTIVE_STATE_HOLD) && <UnlockButton onClick={unlock} alarmCode={alarmCode} activeState={activeState} /> }
+                    <UnlockButton onClick={unlock} alarmCode={alarmCode} activeState={activeState} />
                 </div>
             </div>
         )
diff --git a/src/app/src/features/MachineStatus/UnlockButton.tsx b/src/app/src/features/MachineStatus/UnlockButton.tsx
index 07a04cb2a..88cbb4848 100644
--- a/src/app/src/features/MachineStatus/UnlockButton.tsx
+++ b/src/app/src/features/MachineStatus/UnlockButton.tsx
@@ -23,6 +23,7 @@
 
 import React, { MouseEventHandler } from 'react';
 import cx from 'classnames';
+import { FaHome, FaUnlock } from "react-icons/fa";
 
 import { GRBL_ACTIVE_STATE_ALARM } from '../../constants';
 import { GRBL_ACTIVE_STATES_T } from 'definitions/general';
@@ -41,6 +42,12 @@ const UnlockButton: React.FC<UnlockProps> = ({ activeState, alarmCode, onClick }
         }
         return 'Click to Unlock Machine';
     };
+
+    const SymbolComponent = activeState === GRBL_ACTIVE_STATE_ALARM && (alarmCode === 'Homing' || alarmCode === 11) ? (
+        <FaHome className="text-9xl h-16 mr-1" role="button" tabIndex={-1} />
+    ) : (
+        <FaUnlock className="text-9xl h-16 mr-1" role="button" tabIndex={-1} />
+    );
     
     return (
         <div className="flex items-center justify-center pointer-events-auto">
@@ -51,20 +58,12 @@ const UnlockButton: React.FC<UnlockProps> = ({ activeState, alarmCode, onClick }
                     {
                         "border-red-800 bg-red-600 grow [animation:grow_2s_infinite]": activeState === GRBL_ACTIVE_STATE_ALARM,
                         "border-yellow-800 bg-yellow-600": activeState !== GRBL_ACTIVE_STATE_ALARM,
-                        "pr-1": alarmCode !== 'Homing' && alarmCode !== 11 // this is for adjusting the position of the text
+                        // "pr-1": alarmCode !== 'Homing' && alarmCode !== 11 // this is for adjusting the position of the text
                     }
                 )}
                 onClick={onClick}
             >
-                <i
-                    className={cx(
-                        "text-5xl",
-                        "fas",
-                        activeState === GRBL_ACTIVE_STATE_ALARM && (alarmCode === 'Homing' || alarmCode === 11) ? 'fa-home' : 'fa-unlock'
-                    )}
-                    role="button"
-                    tabIndex={-1}
-                />
+                {SymbolComponent}
                 {getButtonText()}
             </button>
         </div>