I can't seem to find the source of the 2 silver borders in my modal. I've checked the CSS code, tried using developer tools, and looked through the entire code but still can't figure it out.
Here is the JSX code I'm working with:
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";
import "./Signin.css";
const Modal = props => {
const closeOnEscapeKeyDown = e => {
if ((e.charCode || e.keyCode) === 27) {
props.closeModal();
}
if ((e.charCode || e.keyCode) === 87) {
props.showModal();
}
};
useEffect(() => {
document.body.addEventListener("keydown", closeOnEscapeKeyDown);
return function cleanup() {
document.body.removeEventListener("keydown", closeOnEscapeKeyDown);
};
}, []);
return ReactDOM.createPortal(
<CSSTransition
in={props.show}
unmountOnExit
timeout={{ enter: 0, exit: 300 }}
>
<div className="modal" onClick={props.closeModal}>
<div className="modal-content" onClick={e => e.stopPropagation()}>
<div className="modal-header">
<h4 className="modal-title">Sign in</h4>
</div>
<div className="modal-body">
<div className = "modal-input-field">
<div className = "modal-username-field">
<p className = "p-username">Username</p>
<input tag = "username" placeholder = "eg: muhammet-aldulaimi"/>
</div>
<div className = "modal-password-field">
<p className = "p-password">Password</p>
<input tag = "password" placeholder = "eg: someStrongPassword123"/>
</div>
</div>
<div className = "modal-submit">
<button className = "modal-submit-button">Submit</button>
</div>
</div>
<div className="modal-footer">
<button onClick={props.closeModal} className="button">
Close
</button>
</div>
</div>
</div>
</CSSTransition>,
document.getElementById("root")
);
};
export default Modal;
And this is the CSS code:
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease-in-out;
pointer-events: none;
}
.modal.enter-done {
opacity: 1;
pointer-events: visible;
}
.modal.exit {
opacity: 0;
}
.modal-content {
width: 400px;
height: 500px;
background-image: url(../../Images/flowersSidebarBackground.png);
transition: all 0.3s ease-in-out;
transform: translateY(-200px);
}
.modal.enter-done .modal-content {
transform: translateY(0);
}
.modal.exit .modal-content {
transform: translateY(-200px);
}
...