diff --git a/striker-ui/components/Panel.tsx b/striker-ui/components/Panel.tsx index 6766fcb7..54e1a788 100644 --- a/striker-ui/components/Panel.tsx +++ b/striker-ui/components/Panel.tsx @@ -7,6 +7,21 @@ type Props = { children: ReactNode; }; +const decorationBoxProps = { + content: '""', + position: 'absolute', + width: '30px', + height: '30px', + border: '1px', + borderColor: TEXT, + borderWidth: '1px', + borderRadius: '3px', + borderStyle: 'solid', + padding: 0, + margin: 0, + zIndex: -1, +}; + const useStyles = makeStyles(() => ({ rectangle: { width: '30px', @@ -18,20 +33,19 @@ const useStyles = makeStyles(() => ({ }, paper: { margin: 10, - padding: 10, + padding: '30px', backgroundColor: PANEL_BACKGROUND, + position: 'relative', + zIndex: 999, '&::before': { - content: '""', - position: 'absolute', - top: '-10px', - bottom: '-10px', - width: '30px', - height: '30px', - border: '1px', - borderColor: TEXT, - borderWidth: '1px', - borderRadius: '3px', - borderStyle: 'solid', + ...decorationBoxProps, + top: '-5px', + left: '-5px', + }, + '&::after': { + ...decorationBoxProps, + bottom: '-5px', + right: '-5px', }, }, }));