Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 24x 151x 151x 151x 151x 34x 34x 151x 24x 93x 117x 93x 151x | import { BellIcon } from "@assets/icons";
import { StyledIconButton } from "@common/IconButton";
import { HiddenComponent } from "@containers/HiddenComponent";
import { Box, BoxProps, styled } from "@mui/material";
import { palette } from "@palette";
import useCheckNewNotifications from "./useCheckNewNotifications";
import NotificationsCenter from "../NotificationsCenter/NotificationsCenter";
import { useState } from "react";
const NotificationsCenterButton = () => {
const { hasNewAlerts, hasMandatoryAlerts } = useCheckNewNotifications();
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const closeNotificationsCenter = () => setAnchorEl(null);
const openNotificationsCenter = (
event: React.MouseEvent<HTMLButtonElement>,
) => {
Iif (anchorEl) {
closeNotificationsCenter();
} else {
setAnchorEl(event.currentTarget);
}
};
return (
<>
<CustomButton onClick={openNotificationsCenter}>
<>
<BellIcon width={24} height={24} stroke={palette.black[100]} />
<HiddenComponent hidden={!hasNewAlerts}>
<CustomAlertDot hasMandatoryAlerts={hasMandatoryAlerts} />
</HiddenComponent>
</>
</CustomButton>
<NotificationsCenter
anchorEl={anchorEl}
onClose={closeNotificationsCenter}
/>
</>
);
};
export default NotificationsCenterButton;
const CustomAlertDot = styled(
(props: BoxProps) => (
<Box data-testid="alert-dot" component="span" {...props} />
),
{
shouldForwardProp: (prop) => prop !== "hasMandatoryAlerts",
},
)<{ hasMandatoryAlerts: boolean }>(({ hasMandatoryAlerts }) => ({
position: "absolute",
width: "8px",
height: "8px",
borderRadius: "100px",
left: "14px",
top: 0,
background: hasMandatoryAlerts ? palette.accent[4] : palette.accent[3],
}));
const CustomButton = styled(StyledIconButton)(() => ({
padding: "0 !important",
height: "32px !important",
width: "32px !important",
"& > span:first-of-type": {
position: "relative",
},
"&:hover path": {
fill: palette.liftedWhite[200],
},
}));
|