From 96da121863ee5f1c0c37c9007ce763cee5af8a9c Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Wed, 22 Mar 2023 00:14:49 +0100
Subject: [PATCH] Fix/show notification state (#3365)

Adds
* Missing notification switch state
* Fixed width
* Notification icon outline
---
 .../common/Notifications/Notifications.tsx      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/common/Notifications/Notifications.tsx b/frontend/src/component/common/Notifications/Notifications.tsx
index 437a93e32d..ed3b525c4b 100644
--- a/frontend/src/component/common/Notifications/Notifications.tsx
+++ b/frontend/src/component/common/Notifications/Notifications.tsx
@@ -43,7 +43,7 @@ const StyledTypography = styled(Typography)(({ theme }) => ({
 }));
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
-    minWidth: '400px',
+    width: '400px',
     boxShadow: theme.boxShadows.popup,
     borderRadius: `${theme.shape.borderRadiusLarge}px`,
     position: 'absolute',
@@ -71,6 +71,15 @@ const StyledHeaderTypography = styled(Typography)(({ theme }) => ({
     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 = () => {
     const [showNotifications, setShowNotifications] = useState(false);
     const { notifications, refetchNotifications } = useNotifications({
@@ -162,16 +171,17 @@ export const Notifications = () => {
 
     return (
         <StyledPrimaryContainerBox>
-            <IconButton
+            <StyledIconButton
                 onClick={() => setShowNotifications(!showNotifications)}
                 data-testid="NOTIFICATIONS_BUTTON"
+                disableFocusRipple
             >
                 <ConditionallyRender
                     condition={hasUnreadNotifications}
                     show={<StyledDotBox />}
                 />
                 <NotificationsIcon />
-            </IconButton>
+            </StyledIconButton>
 
             <ConditionallyRender
                 condition={showNotifications}
@@ -192,6 +202,7 @@ export const Notifications = () => {
                                         onClick={() =>
                                             setShowUnread(!showUnread)
                                         }
+                                        checked={showUnread}
                                     />
                                 </StyledHeaderBox>
                             </NotificationsHeader>