aboutsummaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/footer.tsx4
-rw-r--r--components/logo.tsx25
-rw-r--r--components/navbar.tsx42
-rw-r--r--components/ui.tsx20
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}
>