migrated the files to tsx (#4972)

* migrated the files to tsx

* reverted unecessary changes

* reverted unecessary changes to app.css

* fixed the fails

* fixed the fails

web/src/js/components/Modal/Modal.jsx

@@ -1,13 +0,0 @@
-import * as React from "react"
-import ModalList from './ModalList'
-import { useAppSelector } from "../../ducks";
-
-
-export default function PureModal() {
-    const activeModal = useAppSelector(state => state.ui.modal.activeModal)
-    const ActiveModal = ModalList.find(m => m.name === activeModal )
-
-    return(
-        activeModal ? <ActiveModal/> : <div/>
-    )
-}

web/src/js/components/Modal/Modal.tsx

@@ -0,0 +1,13 @@
+import * as React from "react"
+import ModalList from './ModalList'
+import { useAppSelector } from "../../ducks";
+
+
+export default function PureModal() {
+    const activeModal : string = useAppSelector(state => state.ui.modal.activeModal)
+    const ActiveModal:(() => JSX.Element)  | undefined= ModalList.find(m => m.name === activeModal )
+
+    return(
+        activeModal&&ActiveModal!==undefined ? <ActiveModal/> : <div/>
+    )
+}

web/src/js/components/Modal/ModalLayout.tsx

@@ -1,10 +1,14 @@
 import * as React from "react"
 
-export default function ModalLayout ({ children }) {
+type ModalLayoutProps = {
+    children: React.ReactNode,
+}
+
+export default function ModalLayout ({ children}: ModalLayoutProps ) {
     return (
         <div>
         <div className="modal-backdrop fade in"></div>
-        <div className="modal modal-visible" id="optionsModal" tabIndex="-1" role="dialog" aria-labelledby="options">
+        <div className="modal modal-visible" id="optionsModal" tabIndex={-1} role="dialog" aria-labelledby="options">
         <div className="modal-dialog modal-lg" role="document">
             <div className="modal-content">
                 {children}