refactor: use a real element instead of a pseudo element to create the panel header

main
Josue 4 years ago committed by Tsu-ba-me
parent 14d8dd1683
commit 85f13e4ab9
  1. 7
      striker-ui/components/PanelHeader.tsx

@ -11,10 +11,11 @@ const useStyles = makeStyles(() => ({
innerHeader: { innerHeader: {
position: 'relative', position: 'relative',
padding: '0 10px', padding: '0 10px',
'&::before': { },
header: {
top: '-5px', top: '-5px',
left: '-5px', left: '-5px',
padding: '10px 0', padding: '20px 0',
position: 'absolute', position: 'absolute',
content: '""', content: '""',
borderColor: DIVIDER, borderColor: DIVIDER,
@ -23,7 +24,6 @@ const useStyles = makeStyles(() => ({
borderStyle: 'solid', borderStyle: 'solid',
width: '100%', width: '100%',
}, },
},
})); }));
const PanelHeader = ({ children }: Props): JSX.Element => { const PanelHeader = ({ children }: Props): JSX.Element => {
@ -31,6 +31,7 @@ const PanelHeader = ({ children }: Props): JSX.Element => {
return ( return (
<Box className={classes.innerHeader} whiteSpace="pre-wrap"> <Box className={classes.innerHeader} whiteSpace="pre-wrap">
<div className={classes.header} />
{children} {children}
</Box> </Box>
); );

Loading…
Cancel
Save