Skip to content

Commit

Permalink
refactor: styled component in header (#2808)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kwasniew
kwasniew committed Jan 3, 2023
1 parent 88d649d commit cc1512c
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 153 deletions.
2 changes: 1 addition & 1 deletion frontend/src/component/menu/Footer/FooterTitle.tsx
View file
Expand Up @@ -4,6 +4,6 @@ export const FooterTitle = styled('h2')(({ theme }) => ({
all: 'unset',
display: 'block',
margin: theme.spacing(2, 0),
fontSize: '1rem',
fontSize: theme.fontSizes.bodySize,
fontWeight: theme.fontWeight.bold,
}));
89 changes: 0 additions & 89 deletions frontend/src/component/menu/Header/Header.styles.ts
View file

This file was deleted.

170 changes: 107 additions & 63 deletions frontend/src/component/menu/Header/Header.tsx
View file
Expand Up @@ -9,6 +9,8 @@ import {
IconButton,
Tooltip,
Switch,
styled,
Theme,
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import SettingsIcon from '@mui/icons-material/Settings';
Expand All @@ -20,21 +22,90 @@ import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText

import { DrawerMenu } from './DrawerMenu/DrawerMenu';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useThemeStyles } from 'themes/themeStyles';
import { flexRow, focusable, useThemeStyles } from 'themes/themeStyles';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { IPermission } from 'interfaces/user';
import { NavigationMenu } from './NavigationMenu/NavigationMenu';
import { getRoutes } from 'component/menu/routes';
import { KeyboardArrowDown } from '@mui/icons-material';
import { filterByConfig } from 'component/common/util';
import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
import { useStyles } from './Header.styles';
import classNames from 'classnames';
import { useId } from 'hooks/useId';
import { IRoute } from 'interfaces/route';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { useThemeMode } from 'hooks/useThemeMode';

const StyledHeader = styled(AppBar)(({ theme }) => ({
backgroundColor: theme.palette.headerBackground,
padding: theme.spacing(1),
boxShadow: 'none',
position: 'relative',
zIndex: 300,
}));

const StyledContainer = styled(Container)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
maxWidth: 1280,
[theme.breakpoints.down('md')]: {
padding: '0',
},
}));

const StyledUserContainer = styled('div')({
marginLeft: 'auto',
display: 'flex',
alignItems: 'center',
});

const StyledNav = styled('nav')({
display: 'flex',
alignItems: 'center',
flexGrow: 1,
});

const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ width: '150px' });

const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' });

const StyledLinks = styled('div')(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
marginLeft: theme.spacing(3),
'& a': {
textDecoration: 'none',
color: 'inherit',
marginRight: theme.spacing(3),
display: 'flex',
alignItems: 'center',
},
}));

const StyledAdvancedNavButton = styled('button')(({ theme }) => ({
border: 'none',
background: 'transparent',
height: '100%',
display: 'flex',
fontSize: theme.fontSizes.bodySize,
fontFamily: theme.typography.fontFamily,
alignItems: 'center',
color: 'inherit',
cursor: 'pointer',
}));

const styledIconProps = (theme: Theme) => ({
color: theme.palette.neutral.main,
});

const StyledLink = styled(Link)(({ theme }) => ({
...focusable(theme),
}));

const StyledIconButton = styled(IconButton)(({ theme }) => ({
...focusable(theme),
borderRadius: 100,
}));

const Header: VFC = () => {
const { onSetThemeMode, themeMode } = useThemeMode();
const theme = useTheme();
Expand All @@ -47,8 +118,6 @@ const Header: VFC = () => {
const { permissions } = useAuthPermissions();
const { uiConfig, isOss } = useUiConfig();
const smallScreen = useMediaQuery(theme.breakpoints.down('md'));
const { classes: styles } = useStyles();
const { classes: themeStyles } = useThemeStyles();
const [openDrawer, setOpenDrawer] = useState(false);

const toggleDrawer = () => setOpenDrawer(prev => !prev);
Expand Down Expand Up @@ -85,11 +154,13 @@ const Header: VFC = () => {

if (smallScreen) {
return (
<AppBar className={styles.header} position="static">
<Container className={styles.container}>
<StyledHeader position="static">
<StyledContainer>
<Tooltip title="Menu" arrow>
<IconButton
className={styles.drawerButton}
sx={theme => ({
color: theme.palette.text.tertiaryContrast,
})}
onClick={toggleDrawer}
aria-controls="header-drawer"
aria-expanded={openDrawer}
Expand All @@ -107,72 +178,49 @@ const Header: VFC = () => {
admin={admin}
routes={filteredMainRoutes}
/>
<div className={styles.userContainer}>
<StyledUserContainer>
<UserProfile />
</div>
</Container>
</AppBar>
</StyledUserContainer>
</StyledContainer>
</StyledHeader>
);
}

return (
<AppBar className={styles.header} position="static">
<Container className={styles.container}>
<Link
to="/"
className={classNames(
themeStyles.flexRow,
themeStyles.focusable
)}
aria-label="Home"
>
<StyledHeader position="static">
<StyledContainer>
<StyledLink to="/" sx={flexRow} aria-label="Home">
<ThemeMode
darkmode={
<UnleashLogoWhite
className={styles.logo}
aria-label="Unleash logo"
/>
<StyledUnleashLogoWhite aria-label="Unleash logo" />
}
lightmode={
<UnleashLogo
className={styles.logo}
aria-label="Unleash logo"
/>
<StyledUnleashLogo aria-label="Unleash logo" />
}
/>
</Link>
<nav className={styles.nav}>
<div className={styles.links}>
<Link to="/projects" className={themeStyles.focusable}>
Projects
</Link>
<Link to="/features" className={themeStyles.focusable}>
Feature toggles
</Link>
<Link
to="/playground"
className={themeStyles.focusable}
>
Playground
</Link>
<button
className={styles.advancedNavButton}
</StyledLink>
<StyledNav>
<StyledLinks>
<StyledLink to="/projects">Projects</StyledLink>
<StyledLink to="/features">Feature toggles</StyledLink>
<StyledLink to="/playground">Playground</StyledLink>
<StyledAdvancedNavButton
onClick={e => setConfigRef(e.currentTarget)}
aria-controls={configRef ? configId : undefined}
aria-expanded={Boolean(configRef)}
>
Configure
<KeyboardArrowDown className={styles.icon} />
</button>
<KeyboardArrowDown sx={styledIconProps} />
</StyledAdvancedNavButton>
<NavigationMenu
id={configId}
options={filteredMainRoutes.mainNavRoutes}
anchorEl={configRef}
handleClose={onConfigureClose}
style={{ top: 10 }}
/>
</div>
<div className={styles.userContainer}>
</StyledLinks>
<StyledUserContainer>
<ConditionallyRender
condition={Boolean(
uiConfig.flags.ENABLE_DARK_MODE_SUPPORT
Expand All @@ -196,7 +244,7 @@ const Header: VFC = () => {
rel="noopener noreferrer"
size="large"
disableRipple
className={themeStyles.focusable}
sx={focusable}
>
<MenuBookIcon />
</IconButton>
Expand All @@ -205,14 +253,10 @@ const Header: VFC = () => {
condition={admin}
show={
<Tooltip title="Settings" arrow>
<IconButton
<StyledIconButton
onClick={e =>
setAdminRef(e.currentTarget)
}
className={classNames(
styles.wideButton,
themeStyles.focusable
)}
aria-controls={
adminRef ? adminId : undefined
}
Expand All @@ -222,9 +266,9 @@ const Header: VFC = () => {
>
<SettingsIcon />
<KeyboardArrowDown
className={styles.icon}
sx={styledIconProps}
/>
</IconButton>
</StyledIconButton>
</Tooltip>
}
/>
Expand All @@ -236,10 +280,10 @@ const Header: VFC = () => {
style={{ top: 5, left: -100 }}
/>{' '}
<UserProfile />
</div>
</nav>
</Container>
</AppBar>
</StyledUserContainer>
</StyledNav>
</StyledContainer>
</StyledHeader>
);
};

Expand Down
20 changes: 20 additions & 0 deletions frontend/src/themes/themeStyles.ts
View file
@@ -1,5 +1,25 @@
import { makeStyles } from 'tss-react/mui';
import { Theme } from '@mui/material';

export const focusable = (theme: Theme) => ({
'&:focus-visible': {
outline: 0,
outlineStyle: 'solid',
outlineWidth: 2,
outlineOffset: 2,
outlineColor: theme.palette.primary.main,
},
});

export const flexRow = {
display: 'flex',
alignItems: 'center',
};

/**
* Please extract styles below into MUI fragments as shown above
* @deprecated
*/
export const useThemeStyles = makeStyles()(theme => ({
focusable: {
'&:focus-visible': {
Expand Down

0 comments on commit cc1512c

Please sign in to comment.