Refactored dashboard to TS - still some bugs and inefficiencies

frontend/components/basic/Toggle.tsx

@@ -28,7 +28,6 @@ interface ToggleProps {
  * @returns 
  */
 export default function Toggle ({ enabled, setEnabled, addOverride, keyName, value, pos, id, deleteOverride }: ToggleProps): JSX.Element {
-  console.log(755, pos, enabled)
   return (
     <Switch
       checked={enabled}

frontend/components/basic/buttons/Button.tsx

@@ -16,7 +16,7 @@ type ButtonProps = {
   size: string;
   icon?: IconProp;
   active?: boolean;
-  iconDisabled?: string;
+  iconDisabled?: IconProp;
   textDisabled?: string;
 };
 

frontend/components/basic/popups/BottomRightPopup.tsx

@@ -3,6 +3,16 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 
+interface PopupProps {
+  buttonText: string;
+  buttonLink: string;
+  titleText: string;
+  emoji: string;
+  textLine1: string;
+  textLine2: string;
+  setCheckDocsPopUpVisible: (value: boolean) => void;
+}
+
 /**
  * This is the notification that pops up at the bottom right when a user performs a certain action
  * @param {object} org 
@@ -23,16 +33,16 @@ export default function BottonRightPopup({
   textLine1,
   textLine2,
   setCheckDocsPopUpVisible,
-}) {
+}: PopupProps): JSX.Element {
   return (
     <div
-      class="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6"
+      className="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6"
       role="alert"
     >
       <div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">
         <div className="font-bold text-xl mr-2 mt-0.5 flex flex-row">
           <div>{titleText}</div>
-          <div class="ml-2.5">{emoji}</div>
+          <div className="ml-2.5">{emoji}</div>
         </div>
         <button
           className="mt-1"
@@ -44,14 +54,14 @@ export default function BottonRightPopup({
           />
         </button>
       </div>
-      <div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">
+      <div className="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">
         {textLine1}
       </div>
-      <div class="block sm:inline mb-4 px-6">{textLine2}</div>
+      <div className="block sm:inline mb-4 px-6">{textLine2}</div>
       <div className="flex flex-row px-6 w-full">
         {/*eslint-disable-next-line react/jsx-no-target-blank */}
         <a
-          class="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
+          className="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
           href={buttonLink}
           target="_blank"
           rel="noopener"