Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Nuno Góis 2023-10-13 14:31:07 +01:00 committed by GitHub
parent e663dc0960
commit 9c047e0756
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 64 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}

31
frontend/src/component/menu/Header/Header.tsx
View File

@ -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

9
frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx
View File

@ -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>

44
frontend/src/component/user/UserProfile/UserProfile.tsx
View File

@ -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}