started moving to css files

4 files changed, 23 insertions, 68 deletions

diff --git a/components/footer.tsx b/components/footer.tsx
index 36ebef3..f39946c 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { LogoDark } from '../components/logo';
+import Logo from '../components/logo';
 
 import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined';
 import ExtensionIcon from '@material-ui/icons/Extension';
@@ -25,7 +25,7 @@ function PageLink(props: {
 export function Footer() {
 	return <div className='footer'>
 		<div className='header'>
-			<LogoDark />
+			<Logo />
 			<h2>4 op een rij</h2>
 		</div>
 		<div className='content'>
diff --git a/components/logo.tsx b/components/logo.tsx
index e43aa88..9faf43f 100644
--- a/components/logo.tsx
+++ b/components/logo.tsx
@@ -1,27 +1,14 @@
-export function LogoDark() {
+export default function Logo() {
 	return (
 		<div className='noclick'>
 			<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-				<rect width='24' height='24' fill='var(--background)' />
-				<circle cx='6.5' cy='6.5' r='4.5' fill='var(--disk-b)' />
-				<circle cx='6.5' cy='17.5' r='4.5' fill='var(--disk-a)' />
-				<circle cx='17.5' cy='17.5' r='4.5' fill='var(--disk-b)' />
-				<circle cx='17.5' cy='6.5' r='3.5' stroke='var(--text)' strokeWidth='2' />
+				<rect width='24' height='24' fill='none' />
+				<circle className='green' cx='6.5' cy='6.5' r='4.5' fill='var(--confirm)' />
+				<circle className='red' cx='6.5' cy='17.5' r='4.5' fill='var(--error)' />
+				<circle className='green' cx='17.5' cy='17.5' r='4.5' fill='var(--confirm)' />
+				<circle className='circle' cx='17.5' cy='6.5' r='3.5' stroke='var(--foreground)' strokeWidth='2' />
 			</svg>
 		</div>
 	);
 }
 
-export function LogoLight() {
-	return (
-		<div className='noclick'>
-			<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-				<rect width='24' height='24' fill='var(--page-background)' />
-				<circle cx='6.5' cy='6.5' r='4.5' fill='var(--disk-b)' />
-				<circle cx='6.5' cy='17.5' r='4.5' fill='var(--disk-a)' />
-				<circle cx='17.5' cy='17.5' r='4.5' fill='var(--disk-b)' />
-				<circle cx='17.5' cy='6.5' r='3.5' stroke='var(--background)' strokeWidth='2' />
-			</svg>
-		</div>
-	);
-}
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 70de574..932669d 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,8 +1,8 @@
 import axios from 'axios';
-import { CSSProperties, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import { userInfo } from '../api/api';
-import { LogoDark } from '../components/logo';
+import Logo from '../components/logo';
 import { AccountAvatar } from './account';
 import { NotificationsArea } from './notificationsArea';
 import { SocketContext } from './socketContext';
@@ -15,12 +15,6 @@ import SearchIcon from '@material-ui/icons/Search';
 import SettingsIcon from '@material-ui/icons/Settings';
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
 
-var NavBarItemStyle: CSSProperties = {
-	margin: 12,
-	marginBottom: 16,
-	display: 'block',
-};
-
 export function NavBar() {
 	var [loggedIn, setLoggedIn] = useState(false);
 	var [gotData, setGotData] = useState(false);
@@ -61,14 +55,13 @@ export function NavBar() {
 	}, []);
 
 	return <div
-		className='navbar'
+		className="navbar bg-800"
 		style={{
 			width: 48,
 			height: '100%',
 
 			lineHeight: 0,
 
-			backgroundColor: 'var(--background)',
 			display: 'inline-block',
 
 			position: 'fixed',
@@ -80,35 +73,28 @@ export function NavBar() {
 			zIndex: 2,
 		}}
 	>
-		<div style={NavBarItemStyle}>
-			<LogoDark />
+		<div className="item">
+			<Logo />
 		</div>
-		<a href='/' style={NavBarItemStyle}>
+		<a href='/' className="item">
 			<Home />
 		</a>
-		<a href='/game' style={NavBarItemStyle}>
+		<a href='/game' className="item">
 			<VideogameAssetIcon />
 		</a>
-		{false && <a href='/' style={NavBarItemStyle}>
+		{false && <a href='/' className="item">
 			<ExtensionIcon />
 		</a>}
-		<a href='/search' style={NavBarItemStyle}>
+		<a href='/search' className="item">
 			<SearchIcon />
 		</a>
 
-		<div
-			style={{
-				position: 'absolute',
-				bottom: -4,
-				left: 0,
-				backgroundColor: 'var(--background)',
-			}}
-		>
+		<div className="bg-800 bottomArea">
 			{loggedIn && <a
+				className="item"
 				style={{
 					overflow: 'visible',
-					position: 'relative',
-					...NavBarItemStyle,
+					position: 'relative'
 				}}
 			>
 				<div
@@ -134,12 +120,12 @@ export function NavBar() {
 					rerender={getNotifications}
 				/>
 			</a>}
-			<a href={loggedIn ? '/user' : '/login'} style={NavBarItemStyle}>
+			<a href={loggedIn ? '/user' : '/login'} className="item">
 				{loggedIn
 					? <AccountAvatar size={24} round />
 					: <PersonIcon />}
 			</a>
-			{loggedIn && <a href='/settings' style={NavBarItemStyle}>
+			{loggedIn && <a href='/settings' className="item">
 				<SettingsIcon />
 			</a>}
 		</div>
diff --git a/components/ui.tsx b/components/ui.tsx
index c3f950b..99479a8 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -9,7 +9,6 @@ export function Vierkant(props: {
 	href?: string;
 	width?: string;
 	height?: string;
-	style?: CSSProperties;
 	children?: ReactNode;
 	className?: string;
 	id?: string;
@@ -17,25 +16,8 @@ export function Vierkant(props: {
 	onclick?: () => void;
 }) {
 	return <a
-		style={{
-			padding: 24,
-			backgroundColor: 'var(--background)',
-			borderRadius: 8,
-			color: 'var(--text)',
-			margin: 6, // geen margin collapse = 12px marge
-			display: 'inline-block',
-			position: 'relative',
-			boxSizing: 'border-box',
-			width: props.width
-				? props.width
-				: props.fullwidth
-				? 'calc(100% - 12px)'
-				: undefined,
-			height: props.height ? props.height : undefined,
-			...props.style,
-		}}
 		href={props.href}
-		className={props.className}
+		className={["bg-800", "round-l", "pad-l", "vierkant", props.className, props.fullwidth && "fullwidth"].join(" ")}
 		id={props.id}
 		onClick={props.onclick}
 	>