style modal

src/components/Modal/index.tsx

@@ -50,8 +50,10 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> & ModalTypes = ({
     }
   };
 
+  if (!visible) return null;
+
   return (
-    <Styled.ModalWrapper visible={visible} onClick={onClick}>
+    <Styled.ModalWrapper onClick={onClick}>
       <Styled.ModalInnerWrapper>{children}</Styled.ModalInnerWrapper>
     </Styled.ModalWrapper>
   );

src/components/Modal/styles.tsx

@@ -5,13 +5,13 @@ const appearAnimation = keyframes`
   to { transform: scale(1); opacity: 1; };
 `;
 
-export const ModalWrapper = styled.div<{ visible: boolean }>`
+export const ModalWrapper = styled.div`
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100%;
-  display: ${({ visible }) => (visible ? "flex" : "none")};
+  display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.85);

src/containers/ImportModal/index.tsx

@@ -15,7 +15,7 @@ const StyledInput = styled.input`
   border: none;
   border-radius: 4px;
   line-height: 32px;
-  padding: 16px;
+  padding: 12px 8px;
   width: 100%;
   margin-bottom: 10px;
   height: 30px;

src/containers/ShareModal/index.tsx

@@ -14,11 +14,10 @@ const StyledInput = styled.input`
   border: none;
   border-radius: 4px;
   line-height: 32px;
+  padding: 12px 8px;
   width: 100%;
   margin-bottom: 10px;
-  font-size: 16px;
-  padding: 0px 8px;
-  font-family: "Catamaran", sans-serif;
+  height: 30px;
 `;
 
 export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {