feat: adds a new design to the header icons (#5025)

After aligning with @nicolaesocaciu, adds a new, cleaner, more
consistent design to our header icons.


![image](https://github.com/Unleash/unleash/assets/14320932/a9f0eb93-ee1f-4e63-96c8-4b2ac11cfdab)

Co-authored-by: Nicolae <nicolae@getunleash.ai>

frontend/src/component/common/Notifications/Notifications.tsx

@@ -8,6 +8,7 @@ import {
     ClickAwayListener,
     Button,
     Switch,
+    Tooltip,
 } from '@mui/material';
 import { useNotifications } from 'hooks/api/getters/useNotifications/useNotifications';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -170,10 +171,11 @@ export const Notifications = () => {
 
     return (
         <StyledPrimaryContainerBox>
+            <Tooltip title='Notifications' arrow>
                 <StyledIconButton
                     onClick={() => setShowNotifications(!showNotifications)}
                     data-testid='NOTIFICATIONS_BUTTON'
-                disableFocusRipple
+                    size='large'
                 >
                     <ConditionallyRender
                         condition={hasUnreadNotifications}
@@ -181,6 +183,7 @@ export const Notifications = () => {
                     />
                     <NotificationsIcon />
                 </StyledIconButton>
+            </Tooltip>
 
             <ConditionallyRender
                 condition={showNotifications}

frontend/src/component/menu/Header/Header.tsx

@@ -100,9 +100,18 @@ const styledIconProps = (theme: Theme) => ({
 
 const StyledLink = styled(Link)(({ theme }) => focusable(theme));
 
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
+const StyledIconButton = styled(IconButton)<{
-    ...focusable(theme),
+    component?: 'a' | 'button';
+    href?: string;
+    target?: string;
+}>(({ theme }) => ({
     borderRadius: 100,
+    '&:focus-visible': {
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineColor: theme.palette.primary.main,
+        borderRadius: '100%',
+    },
 }));
 
 const Header: VFC = () => {
@@ -210,29 +219,31 @@ const Header: VFC = () => {
                             }
                             arrow
                         >
-                            <IconButton onClick={onSetThemeMode} sx={focusable}>
+                            <StyledIconButton
+                                onClick={onSetThemeMode}
+                                size='large'
+                            >
                                 <ConditionallyRender
                                     condition={themeMode === 'dark'}
                                     show={<DarkModeOutlined />}
                                     elseShow={<LightModeOutlined />}
                                 />
-                            </IconButton>
+                            </StyledIconButton>
-                        </Tooltip>{' '}
+                        </Tooltip>
                         <ConditionallyRender
                             condition={!isOss() && !disableNotifications}
                             show={<Notifications />}
                         />
                         <Tooltip title='Documentation' arrow>
-                            <IconButton
+                            <StyledIconButton
+                                component='a'
                                 href='https://docs.getunleash.io/'
                                 target='_blank'
                                 rel='noopener noreferrer'
                                 size='large'
-                                disableRipple
-                                sx={focusable}
                             >
                                 <MenuBookIcon />
-                            </IconButton>
+                            </StyledIconButton>
                         </Tooltip>
                         <Tooltip title='Settings' arrow>
                             <StyledIconButton
@@ -240,10 +251,8 @@ const Header: VFC = () => {
                                 aria-controls={adminRef ? adminId : undefined}
                                 aria-expanded={Boolean(adminRef)}
                                 size='large'
-                                disableRipple
                             >
                                 <SettingsIcon />
-                                <KeyboardArrowDown sx={styledIconProps} />
                             </StyledIconButton>
                         </Tooltip>
                         <NavigationMenu

frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import { useContext, useState } from 'react';
 import { ClickAwayListener, IconButton, styled, Tooltip } from '@mui/material';
 import { useId } from 'hooks/useId';
 import { focusable } from 'themes/themeStyles';
@@ -14,6 +14,12 @@ const StyledContainer = styled('div')(() => ({
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
     ...focusable(theme),
     borderRadius: 100,
+    '&:focus-visible': {
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineColor: theme.palette.primary.main,
+        borderRadius: '100%',
+    },
 }));
 
 const InviteLinkButton = () => {
@@ -34,7 +40,6 @@ const InviteLinkButton = () => {
                     <StyledIconButton
                         onClick={() => setShowInviteLinkContent(true)}
                         size='large'
-                        disableRipple
                     >
                         <PersonAdd />
                     </StyledIconButton>

frontend/src/component/user/UserProfile/UserProfile.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Button, ClickAwayListener, styled } from '@mui/material';
+import { ClickAwayListener, IconButton, Tooltip, styled } from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { UserProfileContent } from './UserProfileContent/UserProfileContent';
 import { IUser } from 'interfaces/user';
 import { HEADER_USER_AVATAR } from 'utils/testIds';
@@ -17,19 +16,21 @@ const StyledProfileContainer = styled('div')(({ theme }) => ({
     position: 'relative',
 }));
 
-const StyledButton = styled(Button)(({ theme }) => ({
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
     ...focusable(theme),
     ...flexRow,
     ...itemsCenter,
     color: 'inherit',
-    padding: theme.spacing(0.5, 2),
+    padding: theme.spacing(1),
     '&:hover': {
         backgroundColor: 'transparent',
     },
-}));
+    '&:focus-visible': {
-
+        outlineStyle: 'solid',
-const StyledIcon = styled(KeyboardArrowDownIcon)(({ theme }) => ({
+        outlineWidth: 2,
-    color: theme.palette.neutral.main,
+        outlineColor: theme.palette.primary.main,
+        borderRadius: '100%',
+    },
 }));
 
 interface IUserProfileProps {
@@ -43,19 +44,20 @@ const UserProfile = ({ profile }: IUserProfileProps) => {
     return (
         <ClickAwayListener onClickAway={() => setShowProfile(false)}>
             <StyledProfileContainer>
-                <StyledButton
+                <Tooltip title='Profile' arrow>
+                    <StyledIconButton
                         onClick={() => setShowProfile((prev) => !prev)}
                         aria-controls={showProfile ? modalId : undefined}
                         aria-expanded={showProfile}
                         color='secondary'
-                    disableRipple
+                        size='large'
                     >
                         <StyledUserAvatar
                             user={profile}
                             data-testid={HEADER_USER_AVATAR}
                         />
-                    <StyledIcon />
+                    </StyledIconButton>
-                </StyledButton>
+                </Tooltip>
                 <UserProfileContent
                     id={modalId}
                     showProfile={showProfile}