diff options
author | Loek Le Blansch <32883851+lonkaars@users.noreply.github.com> | 2021-04-21 10:40:52 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-21 10:40:52 +0200 |
commit | dadc722875b2095bd3d6c4ab628a644197b85f7b (patch) | |
tree | 9e061708fad5bfdcc40f4c40662d77fbc42cfe64 /components/dialogBox.tsx | |
parent | c603cb79e7ba7fdbb101a506e36f6d8d70b3a8f4 (diff) | |
parent | 5cb39d822716c650e520c3855ef049ff308a348c (diff) |
Merge pull request #12 from lonkaars/css-files
big redesign css move thing
Diffstat (limited to 'components/dialogBox.tsx')
-rw-r--r-- | components/dialogBox.tsx | 29 |
1 files changed, 7 insertions, 22 deletions
diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx index 7abbded..a5b02fa 100644 --- a/components/dialogBox.tsx +++ b/components/dialogBox.tsx @@ -1,4 +1,4 @@ -import { CSSProperties, ReactNode } from 'react'; +import { ReactNode } from 'react'; import { Vierkant } from './ui'; @@ -7,32 +7,17 @@ import CancelIcon from '@material-ui/icons/Cancel'; export function DialogBox(props: { children: ReactNode; title: string; - style?: CSSProperties; onclick?: () => void; + hidden?: boolean; + className?: string; }) { return <Vierkant - style={{ - position: 'fixed', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - boxShadow: '0 8px 32px -5px #0007', - width: 392, - ...props.style, - }} + className={'dialogbox bg-800 drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '') + ' ' + + props.className} > - <h2 style={{ marginBottom: 24 }}>{props.title}</h2> + <h2 className='title'>{props.title}</h2> <span onClick={props.onclick}> - <CancelIcon - style={{ - position: 'absolute', - top: 25, - right: 25, - color: 'var(--text)', - opacity: .85, - cursor: 'pointer', - }} - /> + <CancelIcon className='posabs close icon subtile' /> </span> {props.children} </Vierkant>; |