Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

Fix/show notification state (#3365)

Browse Source 
Adds
* Missing notification switch state
* Fixed width
* Notification icon outline
This commit is contained in:
Fredrik Strand Oseberg 2023-03-22 00:14:49 +01:00 committed by GitHub
parent 27d48b3437
commit 96da121863
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/component/common/Notifications/Notifications.tsx
View File

@ -43,7 +43,7 @@ const StyledTypography = styled(Typography)(({ theme }) => ({
})); }));
const StyledPaper = styled(Paper)(({ theme }) => ({ const StyledPaper = styled(Paper)(({ theme }) => ({
minWidth: '400px', width: '400px',
boxShadow: theme.boxShadows.popup, boxShadow: theme.boxShadows.popup,
borderRadius: `${theme.shape.borderRadiusLarge}px`, borderRadius: `${theme.shape.borderRadiusLarge}px`,
position: 'absolute', position: 'absolute',
@ -71,6 +71,15 @@ const StyledHeaderTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody, fontSize: theme.fontSizes.smallerBody,
})); }));
const StyledIconButton = styled(IconButton)(({ theme }) => ({
'&:focus-visible': {
outlineStyle: 'solid',
outlineWidth: 2,
outlineColor: theme.palette.primary.main,
borderRadius: '100%',
},
}));
export const Notifications = () => { export const Notifications = () => {
const [showNotifications, setShowNotifications] = useState(false); const [showNotifications, setShowNotifications] = useState(false);
const { notifications, refetchNotifications } = useNotifications({ const { notifications, refetchNotifications } = useNotifications({
@ -162,16 +171,17 @@ export const Notifications = () => {
return ( return (
<StyledPrimaryContainerBox> <StyledPrimaryContainerBox>
<IconButton <StyledIconButton
onClick={() => setShowNotifications(!showNotifications)} onClick={() => setShowNotifications(!showNotifications)}
data-testid="NOTIFICATIONS_BUTTON" data-testid="NOTIFICATIONS_BUTTON"
disableFocusRipple
> >
<ConditionallyRender <ConditionallyRender
condition={hasUnreadNotifications} condition={hasUnreadNotifications}
show={<StyledDotBox />} show={<StyledDotBox />}
/> />
<NotificationsIcon /> <NotificationsIcon />
</IconButton> </StyledIconButton>
<ConditionallyRender <ConditionallyRender
condition={showNotifications} condition={showNotifications}
@ -192,6 +202,7 @@ export const Notifications = () => {
onClick={() => onClick={() =>
setShowUnread(!showUnread) setShowUnread(!showUnread)
} }
checked={showUnread}
/> />
</StyledHeaderBox> </StyledHeaderBox>
</NotificationsHeader> </NotificationsHeader>