diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/gameSettings.tsx | 60 | ||||
| -rw-r--r-- | components/navbar.tsx | 42 |
2 files changed, 19 insertions, 83 deletions
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx index bb01284..13462be 100644 --- a/components/gameSettings.tsx +++ b/components/gameSettings.tsx @@ -1,5 +1,5 @@ import axios from 'axios'; -import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react'; +import { ReactNode, useEffect, useState } from 'react'; import { ruleset, userPreferences } from '../api/api'; import { DialogBox } from './dialogBox'; @@ -71,24 +71,15 @@ function GameSettingsSection(props: { id={props.id} className='pad-m editableRulesSection' > - <span - style={{ - verticalAlign: 'top', - fontSize: 14, - fontWeight: 600, - }} - > + <span className='valigntop nosel'> {props.title} </span> - <CheckBox - state={props.state} - id={`${props.id}_enabled`} - style={{ - verticalAlign: 'top', - float: 'right', - margin: -3, - }} - /> + <div className='checkboxWrapper valigntop floatr'> + <CheckBox + state={props.state} + id={props.id + '_enabled'} + /> + </div> <div>{props.children}</div> </Vierkant>; } @@ -96,19 +87,10 @@ function GameSettingsSection(props: { function GameRule(props: { title: string; description: string; - style?: CSSProperties; }) { - return <div - style={{ - backgroundColor: 'var(--page-background)', - borderRadius: 8, - padding: '16px 0', - textAlign: 'center', - ...props.style, - }} - > - <h1 style={{ color: 'var(--disk-a)', fontSize: 42 }}>{props.title}</h1> - <p style={{ color: 'var(--text-alt)', maxWidth: 250, margin: '0 auto' }}>{props.description}</p> + return <div className='gamerule pad-m round-t center bg-900'> + <h1>{props.title}</h1> + <p>{props.description}</p> </div>; } @@ -161,28 +143,16 @@ export function EditGameSettings(props: editGameSettingsProps) { /> </div> <CheckBox id='timelimit_shared' state={props.ruleset.timelimit.shared} /> - <span - className='valignsup' - style={{ - marginLeft: 4, - }} - > + <span className='valignsup'> Timer gebruiken voor bijde spelers </span> </GameSettingsSection> - {false && <GameSettingsSection id='gamemodes' title='Regelset' state={false}> - <div - style={{ - display: 'grid', - gridTemplateColumns: '1fr 1fr', - gridGap: 16, - margin: '16px 0', - }} - > + {true && <GameSettingsSection id='gamemodes' title='Regelset' state={false}> + <div className='sidebyside'> <GameRule title='+2' description='Extra kolommen' /> <GameRule title='+4' description='Extra kolommen' /> </div> - <GameRule style={{ marginBottom: 16 }} title='Gravity' description='De zwaartekracht draait soms' /> + <GameRule title='Gravity' description='De zwaartekracht draait soms' /> <GameRule title='Flashlight' description='Het veld wordt opgelicht door de vallende fiches' /> </GameSettingsSection>} <GameSettingsSection diff --git a/components/navbar.tsx b/components/navbar.tsx index 7f6e694..5ce43bb 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -54,25 +54,7 @@ export function NavBar() { })(); }, []); - return <div - className='navbar bg-800' - style={{ - width: 48, - height: '100%', - - lineHeight: 0, - - display: 'inline-block', - - position: 'fixed', - top: 0, - left: 0, - - overflow: 'visible', - whiteSpace: 'nowrap', - zIndex: 2, - }} - > + return <div className='navbar bg-800 h100vh dispinbl t0 l0 posfix'> <div className='item'> <Logo /> </div> @@ -90,29 +72,13 @@ export function NavBar() { </a> <div className='bg-800 bottomArea'> - {loggedIn && <a - className='item' - style={{ - overflow: 'visible', - position: 'relative', - }} - > + {loggedIn && <a className='notifications item posrel'> <div - style={{ cursor: 'pointer' }} + className='iconWrapper' onClick={() => setNotificationsAreaVisible(!notificationsAreaVisible)} > <NotificationsIcon /> - {gotNotifications && <div - style={{ - backgroundColor: 'var(--disk-a)', - width: 8, - height: 8, - borderRadius: 4, - position: 'absolute', - top: 2, - right: 2, - }} - />} + {gotNotifications && <div className='notificationDot posabs' />} </div> <NotificationsArea visible={notificationsAreaVisible} |