site not longer broken (i think) still some inline css remains....

4 files changed, 14 insertions, 81 deletions

diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx
index 4ead7c5..a5b02fa 100644
--- a/components/dialogBox.tsx
+++ b/components/dialogBox.tsx
@@ -12,7 +12,7 @@ export function DialogBox(props: {
 	className?: string;
 }) {
 	return <Vierkant
-		className={'dialogbox drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '') + ' '
+		className={'dialogbox bg-800 drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '') + ' '
 			+ props.className}
 	>
 		<h2 className='title'>{props.title}</h2>
diff --git a/components/gameBar.tsx b/components/gameBar.tsx
index 0d7d4d9..a3479d5 100644
--- a/components/gameBar.tsx
+++ b/components/gameBar.tsx
@@ -11,14 +11,7 @@ function GameBarModule(props: {
 	onclick?: () => void;
 }) {
 	return <Vierkant
-		style={{
-			backgroundColor: 'var(--background-alt)',
-			padding: 12,
-			borderRadius: 6,
-			margin: 0,
-			verticalAlign: 'top',
-			cursor: props.onclick ? 'pointer' : 'default',
-		}}
+		className={'gameBarButton bg-700 pad-m round-t valigntop ' + (props.onclick ? 'cpointer' : '')}
 		onclick={props.onclick}
 	>
 		{props.children}
@@ -37,33 +30,13 @@ export function GameBar(props: {
 	active: boolean;
 	resignFunction: () => void;
 }) {
-	return <Vierkant
-		className='gameBar'
-		style={{
-			padding: 8,
-			width: 'calc(100% - 12px)',
-		}}
-	>
-		<div style={{ gridAutoColumns: 'auto' }}>
+	return <Vierkant className='gameBar bg-800 w100m2m pad-s'>
+		<div>
 			<div style={{ ...GameBarAlignStyle, float: 'left' }}>
-				<div
-					style={{
-						width: 32,
-						height: 32,
-						margin: 8,
-						backgroundColor: props.turn ? 'var(--disk-b)' : 'var(--disk-a)',
-						borderRadius: 16,
-						display: 'inline-block',
-					}}
-				/>
-				<h2
-					style={{
-						fontSize: 20,
-						margin: 12,
-						verticalAlign: 'top',
-						display: 'inline-block',
-					}}
-				>
+				{props.active && <div
+					className={'move dispinbl ' + (props.turn ? 'move-a' : 'move-b')}
+				/>}
+				<h2 className='pad-m valigntop dispinbl'>
 					{!props.active
 						? 'Wachten op tegenstander...'
 						: props.turn == props.player1
diff --git a/components/ui.tsx b/components/ui.tsx
index 80bfba1..11914c8 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -16,7 +16,7 @@ export function Vierkant(props: {
 }) {
 	return <a
 		href={props.href}
-		className={['bg-800', 'round-l', 'vierkant', props.className].join(' ')}
+		className={['round-l', 'vierkant', props.className].join(' ')}
 		id={props.id}
 		onClick={props.onclick}
 	>
diff --git a/components/voerBord.tsx b/components/voerBord.tsx
index 93e350c..ffb291b 100644
--- a/components/voerBord.tsx
+++ b/components/voerBord.tsx
@@ -1,62 +1,22 @@
-function Disc() {
-	return <div
-		className='disk'
-		style={{
-			position: 'absolute',
-			top: 0,
-			left: 0,
-			right: 0,
-			bottom: 0,
-			borderRadius: 999999,
-			margin: 3,
-		}}
-	/>;
-}
-
 export function VoerBord(props: {
 	width: number;
 	height: number;
 	onMove: (move: number) => void;
 	active: boolean;
 }) {
-	return <table
-		className='voerBord'
-		style={{
-			borderSpacing: 8,
-			width: '100%',
-		}}
-	>
+	return <table className={'voerBord fullwidth ' + (props.active ? 'active' : '')}>
 		<tbody>
 			{[...Array(props.height).keys()].map((row) => (
 				<tr key={`r-${row}`}>
 					{[...Array(props.width).keys()].map((column) => (
 						<td
-							style={{
-								position: 'relative',
-								width: '100%',
-								padding: 0,
-							}}
+							className='posrel outer cell fullwidth'
 							key={`c-${row}x${column}`}
 						>
+							<div className='dispbl square' />
+							<div className='disk posabs a0' />
 							<div
-								style={{
-									display: 'block',
-									marginTop: '100%',
-								}}
-							/>
-							<Disc />
-							<div
-								style={{
-									position: 'absolute',
-									top: 0,
-									left: 0,
-									right: 0,
-									bottom: 0,
-									borderRadius: 6,
-									border: '2px solid var(--background-alt)',
-									opacity: .5,
-									cursor: props.active ? 'pointer' : 'default',
-								}}
+								className='posabs a0 round-t inner cell'
 								id={`pos-${(props.height - row - 1) * props.width + column}`}
 								onClick={event => {
 									props.onMove(Number((event.target as HTMLElement).id.split('-')[1]));