From b87b4917bc550b639a8afb6fa6458a740d9b2587 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 13 Oct 2023 11:28:24 +0100
Subject: [PATCH] feat: adds a new design to the header icons

---
 .../common/Notifications/Notifications.tsx    | 25 ++++++-----
 frontend/src/component/menu/Header/Header.tsx | 31 ++++++++-----
 .../InviteLinkButton/InviteLinkButton.tsx     |  9 +++-
 .../user/UserProfile/UserProfile.tsx          | 44 ++++++++++---------
 4 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/frontend/src/component/common/Notifications/Notifications.tsx b/frontend/src/component/common/Notifications/Notifications.tsx
index 9cdde57f2275..5b5a9c78109d 100644
--- a/frontend/src/component/common/Notifications/Notifications.tsx
+++ b/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,17 +171,19 @@ export const Notifications = () => {
 
     return (
         <StyledPrimaryContainerBox>
-            <StyledIconButton
-                onClick={() => setShowNotifications(!showNotifications)}
-                data-testid='NOTIFICATIONS_BUTTON'
-                disableFocusRipple
-            >
-                <ConditionallyRender
-                    condition={hasUnreadNotifications}
-                    show={<StyledDotBox />}
-                />
-                <NotificationsIcon />
-            </StyledIconButton>
+            <Tooltip title='Notifications' arrow>
+                <StyledIconButton
+                    onClick={() => setShowNotifications(!showNotifications)}
+                    data-testid='NOTIFICATIONS_BUTTON'
+                    size='large'
+                >
+                    <ConditionallyRender
+                        condition={hasUnreadNotifications}
+                        show={<StyledDotBox />}
+                    />
+                    <NotificationsIcon />
+                </StyledIconButton>
+            </Tooltip>
 
             <ConditionallyRender
                 condition={showNotifications}
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 04cd0ba178cf..db01fa51c39c 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/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 }) => ({
-    ...focusable(theme),
+const StyledIconButton = styled(IconButton)<{
+    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>
-                        </Tooltip>{' '}
+                            </StyledIconButton>
+                        </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
diff --git a/frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx b/frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx
index 99efef12628c..f00921f25a85 100644
--- a/frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx
+++ b/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>
diff --git a/frontend/src/component/user/UserProfile/UserProfile.tsx b/frontend/src/component/user/UserProfile/UserProfile.tsx
index 962852d84675..9925b4590d76 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfile.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Button, ClickAwayListener, styled } from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { ClickAwayListener, IconButton, Tooltip, styled } from '@mui/material';
 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',
     },
-}));
-
-const StyledIcon = styled(KeyboardArrowDownIcon)(({ theme }) => ({
-    color: theme.palette.neutral.main,
+    '&:focus-visible': {
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineColor: theme.palette.primary.main,
+        borderRadius: '100%',
+    },
 }));
 
 interface IUserProfileProps {
@@ -43,19 +44,20 @@ const UserProfile = ({ profile }: IUserProfileProps) => {
     return (
         <ClickAwayListener onClickAway={() => setShowProfile(false)}>
             <StyledProfileContainer>
-                <StyledButton
-                    onClick={() => setShowProfile((prev) => !prev)}
-                    aria-controls={showProfile ? modalId : undefined}
-                    aria-expanded={showProfile}
-                    color='secondary'
-                    disableRipple
-                >
-                    <StyledUserAvatar
-                        user={profile}
-                        data-testid={HEADER_USER_AVATAR}
-                    />
-                    <StyledIcon />
-                </StyledButton>
+                <Tooltip title='Profile' arrow>
+                    <StyledIconButton
+                        onClick={() => setShowProfile((prev) => !prev)}
+                        aria-controls={showProfile ? modalId : undefined}
+                        aria-expanded={showProfile}
+                        color='secondary'
+                        size='large'
+                    >
+                        <StyledUserAvatar
+                            user={profile}
+                            data-testid={HEADER_USER_AVATAR}
+                        />
+                    </StyledIconButton>
+                </Tooltip>
                 <UserProfileContent
                     id={modalId}
                     showProfile={showProfile}