I'm currently developing a website and have implemented a modal that appears as follows:
import React,{useState} from "react";
import './AddItem.css';
import { Form, Button,Modal } from "react-bootstrap";
function AddItem({open, setOpen})
{
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return(
<>
<Button className="add" onClick={handleShow}>
ADD
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Email address</Form.Label>
<Form.Control
type="email"
placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="721c131f1732170a13d1d21d">[email protected]</a>"
autoFocus
/>
</Form.Group>
<Form.Group
className="mb-3"
controlId="exampleForm.ControlTextarea1"
>
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default AddItem;
https://i.sstatic.net/BbPUh.png
After clicking on "Save Changes" or closing the modal in any way, the add button in the image (which was clicked to open the modal) changes to an undesired color-
https://i.sstatic.net/qtcZt.png
The color returns to normal only when I click elsewhere on the screen.
How can I prevent this from happening? Here's my Additem.css file:
.add{
position: absolute;
top: 21.35%;
left: 61%;
height: 6%;
width: 10%;
color: white;
background-color: #283d4a;
border-left: 1.5px solid #15aef1;
border-right: 1.5px solid #15aef1;
border-top: 2.7px solid #15aef1;
border-bottom: 2.7px solid #15aef1;
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
}
.add:hover{
background-color:#15aef1 ;
}