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 <[email protected]>
Unleash · Oct 13, 2023 · 9c047e0 · 9c047e0
1 parent e663dc0
commit 9c047e0
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 45 deletions.
diff --git 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
@@ -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,40 +219,40 @@ 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
                                 onClick={(e) => setAdminRef(e.currentTarget)}
                                 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
@@ -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
@@ -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}