I've been attempting to create an alert component, but I'm facing an issue with adjusting the color of the alert message.
Upon enabling dark mode in the navbar (located at the bottom of the navbar component code), an alert message confirming the dark mode activation should be displayed. I'm utilizing Bootstrap CSS for this project.
Alert component:
import React from "react";
export default function Alert(props) {
const capital = (word) => {
const lower = word.toLowerCase();
return lower.charAt(0).toUpperCase() + lower.slice(1);
};
return (
props.alert && (
<div
className={`alert alert-${props.alert.type} alert-dismissible fade show`}
role="alert"
>
<strong>{capital(props.alert.type)}</strong>: {props.alert.msg}
</div>
)
);
}
Navbar component:
import React from "react";
import PropTypes from "prop-types";
export default function Navbar(props) {
return (
<>
<nav
className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}
>
<div className="container-fluid">
<a className="navbar-brand" href="/">
Navbar
</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="/">
Home
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/">
Link
</a>
</li>
<li className="nav-item">
<a
className="nav-link "
href="/"
tabIndex="-1"
aria-current="page"
>
{props.aboutText}
</a>
</li>
</ul>
<form className="d-flex mx-2">
<input
className="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button className="btn btn-outline-success" type="submit">
Search
</button>
</form>
<div
className={`form-check form-switch text-${
props.mode === "light" ? "dark" : "light"
} mx-2`}
>
<input
className="form-check-input "
onClick={props.togglemode}
type="checkbox"
id="flexSwitchCheckDefault"
/>
<label
className={`form-check-label `}
htmlFor="flexSwitchCheckDefault"
>
Enable Dark Mode
</label>
</div>
</div>
</div>
</nav>
</>
);
}
App.js:
import "./App.css";
import Navbar from "./components/Navbar";
import React, { useState } from "react";
import Alert from "./components/Alert";
function App() {
const [mode, setMode] = useState("light");
const [alert, setAlert] = useState(null);
const showAlert = (message, type) => {
setAlert({
msg: message,
type: type,
});
setTimeout(() => {
setAlert(null);
}, 1500);
};
const togglemode = () => {
if (mode === "light") {
setMode("dark");
document.body.style.backgroundColor = "#042743";
showAlert("Dark mode has been enabled", "Success");
} else {
setMode("light");
document.body.style.backgroundColor = "white";
showAlert("Light mode has been enabled", "Success");
}
};
return (
<>
<Navbar aboutText="About Myself" mode={mode} togglemode={togglemode} />
<div className="container " my-3="true">
<Alert alert={alert} />
</div>
</>
);
}
export default App;