fixed imports

src/components/chat/w2wChat/Modal/Modal.tsx

@@ -1,40 +1,46 @@
 // React + Web3 Essentials
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { MouseEvent } from 'react';
+import { createPortal } from 'react-dom';
 
 import styled from 'styled-components';
 
 import { ImageV2, ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2';
 
-
-const Modal = props => {
+const Modal = (props) => {
   if (!props.showImageModal) {
-    return null
+    return null;
   }
 
   let time = new Date(props?.time).toLocaleTimeString('en-US');
   let date = time.slice(0, -6) + time.slice(-2);
 
   // image click handler wont close the modal
-  const preventModalClose = (e:React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLImageElement, MouseEvent>)=>{
+  const preventModalClose = (e: MouseEvent<HTMLDivElement, MouseEvent> | MouseEvent<HTMLImageElement, MouseEvent>) => {
     e.stopPropagation();
-  }
+  };
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <ModalContainer>
       <ModalContent onClick={props.onClose}>
         <ModalClose>
-          <ModalCloseIcon className="fa fa-times" aria-hidden="true" onClick={props.onClose}/>
+          <ModalCloseIcon
+            className="fa fa-times"
+            aria-hidden="true"
+            onClick={props.onClose}
+          />
         </ModalClose>
         <ModalImageContainer>
-          <ModalImage src={props.src} onClick={preventModalClose}/>
+          <ModalImage
+            src={props.src}
+            onClick={preventModalClose}
+          />
           <ModalDate onClick={preventModalClose}>{date}</ModalDate>
         </ModalImageContainer>
       </ModalContent>
     </ModalContainer>,
     document.getElementById('portal')
-  )
-}
+  );
+};
 
 const ModalContainer = styled(ItemVV2)`
   position: fixed;
@@ -45,20 +51,20 @@ const ModalContainer = styled(ItemVV2)`
   background-color: rgba(37, 37, 37, 0.5);
   /* z-index of header is 99999 */
   z-index: 100000;
-`
+`;
 
 const ModalContent = styled(ItemHV2)`
   align-items: flex-start;
-  width:100vw;
+  width: 100vw;
   height: 100vh;
-`
+`;
 
 const ModalClose = styled.div`
   display: flex;
   align-items: flex-start;
   padding-right: 20px;
-  margin-top: 30px; 
-`
+  margin-top: 30px;
+`;
 
 const ModalCloseIcon = styled.i`
   font-size: 2rem;
@@ -67,10 +73,10 @@ const ModalCloseIcon = styled.i`
   cursor: pointer;
   background-color: black;
   padding: 10px;
-  &:hover{
+  &:hover {
     transform: rotate(25deg);
   }
-`
+`;
 
 const ModalImageContainer = styled.div`
   width: 80%;
@@ -81,14 +87,14 @@ const ModalImageContainer = styled.div`
   object-fit: cover;
   flex-direction: column-reverse;
   align-items: center;
-`
+`;
 
 const ModalImage = styled(ImageV2)`
   width: 100%;
   z-index: 3000;
   height: 80%;
   object-fit: contain;
-`
+`;
 
 const ModalDate = styled.span`
   font-size: 1.2rem;
@@ -97,6 +103,6 @@ const ModalDate = styled.span`
   padding: 10px;
   margin-bottom: 10px;
   background-color: black;
-`
+`;
 
-export default Modal
+export default Modal;