diff options
| -rw-r--r-- | components/gameSettings.tsx | 2 | ||||
| -rw-r--r-- | components/toast.tsx | 75 | ||||
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | styles/toast.css | 66 |
4 files changed, 79 insertions, 65 deletions
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx index 13462be..e2c60e6 100644 --- a/components/gameSettings.tsx +++ b/components/gameSettings.tsx @@ -147,7 +147,7 @@ export function EditGameSettings(props: editGameSettingsProps) { Timer gebruiken voor bijde spelers </span> </GameSettingsSection> - {true && <GameSettingsSection id='gamemodes' title='Regelset' state={false}> + {false && <GameSettingsSection id='gamemodes' title='Regelset' state={false}> <div className='sidebyside'> <GameRule title='+2' description='Extra kolommen' /> <GameRule title='+4' description='Extra kolommen' /> diff --git a/components/toast.tsx b/components/toast.tsx index 97e17e6..3a72ae1 100644 --- a/components/toast.tsx +++ b/components/toast.tsx @@ -1,26 +1,14 @@ -import { createContext, CSSProperties, ReactNode, useState } from 'react'; +import { createContext, ReactNode, useState } from 'react'; import CloseIcon from '@material-ui/icons/Close'; function ToastArea(props: { - style?: CSSProperties; children?: ReactNode; rerender?: boolean; }) { return <div id='ToastArea' - style={{ - position: 'fixed', - whiteSpace: 'nowrap', - bottom: 12, - left: '50%', - transform: 'translateX(-50%)', - zIndex: 1, - maxWidth: 600, - width: 'calc(100% - 48px - 48px)', - margin: '0 24px', - ...props.style, - }} + className='posfix abscenterh' > {props.children} </div>; @@ -32,71 +20,30 @@ function Toast(props: { icon?: ReactNode; children?: ReactNode; type?: 'normal' | 'confirmation' | 'error'; - style?: CSSProperties; }) { var [visible, setVisibility] = useState(true); setTimeout(() => setVisibility(false), 10e3); - return visible && <div - style={{ - padding: 0, - marginBottom: 12, - borderRadius: 6, - boxShadow: '0 8px 12px -4px #00000033', - color: props.type === 'confirmation' ? 'var(--background)' : 'var(--text)', - backgroundColor: props.type === 'normal' - ? 'var(--background)' - : props.type === 'confirmation' - ? 'var(--disk-b)' - : props.type === 'error' - ? 'var(--disk-a)' - : 'var(--background)', - ...props.style, - }} - > + return visible && <div className={'round-t drop-1 toast ' + props.type}> {props.children || <div - style={{ - lineHeight: 0, - padding: 12, - minHeight: props.description ? 36 : 24, - position: 'relative', - }} + className={'inner pad-m posrel ' + + (props.description ? 'hasDescription' : '') + ' ' + + (props.icon ? 'hasIcon' : '')} > - <div - style={{ - position: 'absolute', - left: 12, - top: '50%', - transform: 'translateY(-50%)', - }} - > + <div className='icon posabs abscenterv'> {props.icon} </div> - <div - style={{ - userSelect: 'none', - position: 'absolute', - left: props.icon ? 48 : 12, - top: '50%', - transform: 'translateY(-50%)', - }} - > - <h2 style={{ fontSize: 16 }}>{props.text}</h2> + <div className='content nosel posabs abscenterv'> + <h2>{props.text}</h2> <p>{props.description}</p> </div> <div - style={{ - cursor: 'pointer', - position: 'absolute', - right: 12, - top: '50%', - transform: 'translateY(-50%)', - }} + className='closeIcon posabs abscenterv' onClick={() => setVisibility(false)} > - <CloseIcon style={{ fontSize: 24 }} /> + <CloseIcon /> </div> </div>} </div>; diff --git a/pages/_app.tsx b/pages/_app.tsx index 317b389..c1347e8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -10,6 +10,7 @@ import '../styles/global.css'; import '../styles/navbar.css'; import '../styles/notifications.css'; import '../styles/recentGames.css'; +import '../styles/toast.css'; import '../styles/ui.css'; import '../styles/utility.css'; diff --git a/styles/toast.css b/styles/toast.css new file mode 100644 index 0000000..2ecbcfb --- /dev/null +++ b/styles/toast.css @@ -0,0 +1,66 @@ +.toast.error { + background-color: var(--error); +} +.toast.confirmation { + background-color: var(--confirm); +} +.toast.normal { + background-color: var(--gray-700); +} + +.toast.confirmation, +.toast.error { + color: var(--gray-900); +} + +html.dark .toast.confirmation, +html.dark .toast.error { + background-color: var(--gray-700); + color: var(--foreground); +} +html.dark .toast.error { + box-shadow: inset 0 0 0 2px var(--error); +} +html.dark .toast.confirmation { + box-shadow: inset 0 0 0 2px var(--confirm); +} + +.toast { + margin-bottom: var(--spacing-medium); +} + +#ToastArea { + white-space: nowrap; + bottom: var(--spacing-medium); + z-index: 1; + max-width: 600px; + width: calc(100% - 2 * 48px); + margin: 0 var(--spacing-large); +} + +.toast .inner { + line-height: 0; + min-height: 24px; +} + +.toast .inner.hasDescription { + min-height: 36px; +} + +.toast .inner .icon, +.toast .inner .content { + left: var(--spacing-medium); +} + +.toast .inner.hasIcon .content { + left: calc(36px + var(--spacing-medium)); +} + +.toast .inner .content h2 { + font-size: 1rem; +} + +.toast .inner .closeIcon { + right: var(--spacing-medium); + cursor: pointer; +} |