font size change

5 files changed, 37 insertions, 33 deletions

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 7725ca8..9a3f9ff 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,4 +1,5 @@
-import { CSSProperties } from "react";
+import { CSSProperties, Component } from "react";
+/* import axios from "axios"; */
 
 import { LogoDark } from "../components/logo";
 
@@ -8,6 +9,7 @@ import ExtensionIcon from '@material-ui/icons/Extension';
 import SearchIcon from '@material-ui/icons/Search';
 import SettingsIcon from '@material-ui/icons/Settings';
 import PersonIcon from '@material-ui/icons/Person';
+import {AccountAvatar} from "./account";
 
 var NavBarItemStyle: CSSProperties = {
 	margin: 12,
@@ -15,9 +17,22 @@ var NavBarItemStyle: CSSProperties = {
 	display: "block"
 }
 
-export function NavBar() {
-	return (
-		<div className="navbar" style={{
+export class NavBar extends Component {
+	state: {
+		loggedIn: boolean
+	} = {
+		loggedIn: false
+	}
+	
+	constructor(props: {}) {
+		super(props);
+
+		if (typeof window === "undefined") return; // return if run on server
+		this.state.loggedIn = document.cookie.includes("token");
+	}
+
+	render () {
+		return <div className="navbar" style={{
 			width: 48,
 			height: "100%",
 
@@ -45,19 +60,16 @@ export function NavBar() {
 				left: 0,
 				backgroundColor: "var(--background)"
 			}}>
-			<a href="/login" style={NavBarItemStyle}>
-				<div style={{
-					width: 24,
-					height: 24,
-					/* background: "#888888", */
-					borderRadius: 12
-				}}>
+			<a href={this.state.loggedIn ? "/account" : "/login"} style={NavBarItemStyle}>
+				{
+					this.state.loggedIn ?
+					<AccountAvatar size={24} dummy round/> :
 					<PersonIcon/>
-				</div>
+				}
 			</a>
 				<a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a>
 			</div>
 		</div>
-	);
+	}
 }
 
diff --git a/components/toast.tsx b/components/toast.tsx
index 7f71855..03a6255 100644
--- a/components/toast.tsx
+++ b/components/toast.tsx
@@ -69,7 +69,7 @@ export class Toast extends Component<{
 					display: "inline-block",
 					cursor: "pointer"
 				}} onClick={this.close}>
-					<CloseIcon style={{ fontSize: 24 }}/>
+					<CloseIcon/>
 				</div>
 			</div>
 		}
diff --git a/components/ui.tsx b/components/ui.tsx
index ef9d8f3..2523745 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -109,7 +109,6 @@ export function SearchBar(props: { label?: string }) {
 			position: "relative"
 		}}>
 			<SearchIcon style={{
-				fontSize: 24,
 				position: "absolute",
 				top: "50%", left: "50%",
 				transform: "translate(-50%, -50%)"
@@ -134,8 +133,8 @@ export class CheckBox extends Component<{
 		}}>
 		{
 			this.state.on ?
-			<CheckBoxIcon style={{ fontSize: 24 }}/> :
-			<CheckBoxOutlineBlankIcon style={{ fontSize: 24 }}/>
+			<CheckBoxIcon/> :
+			<CheckBoxOutlineBlankIcon/>
 		}
 		</div>;
 	}
diff --git a/pages/index.tsx b/pages/index.tsx
index d56c70b..008bec0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,7 +6,6 @@ import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import { Vierkant, Button } from '../components/ui';
 import { AccountAvatar } from '../components/account';
-import { ToastArea, Toast } from '../components/toast';
 
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
 import ExtensionIcon from '@material-ui/icons/Extension';
@@ -66,11 +65,11 @@ export default class HomePage extends Component {
 			url: `/api/user/info`,
 			headers: {"content-type": "application/json"}
 		})
-		.then(request => this.setState({
-			info: request.data,
-			loggedIn: request.status == 200
-		}))
+		.then(request => this.setState({ info: request.data }))
 		.catch(() => {});
+
+		if (typeof window === "undefined") return; // return if run on server
+		this.state.loggedIn = document.cookie.includes("token");
 	}
 
 	constructor(props: {}) {
@@ -81,11 +80,6 @@ export default class HomePage extends Component {
 	render () {
 		return <div>
 			<NavBar/>
-			<ToastArea>
-				<Toast text="Met icoon" icon={<VideogameAssetIcon style={{ fontSize: 32 }}/>}/>
-				<Toast text="Confirmation" type="confirmation"/>
-				<Toast text="Error" type="error"/>
-			</ToastArea>
 			<CenteredPage width={802}>
 				<PageTitle>4 op een rij</PageTitle>
 				<Vierkant href="/game">
@@ -115,6 +109,7 @@ export default class HomePage extends Component {
 							userSelect: "none",
 							display: "inline-block",
 							position: "absolute",
+							fontSize: 14,
 							left: 0, right: 0, top: 0
 						}}>Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies</span>
 						<div style={{
@@ -139,7 +134,7 @@ export default class HomePage extends Component {
 							top: 0, left: 0,
 							...SquareSize
 						}}>
-							<AccountAvatar size={90} image="url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fblogs.agu.org%2Fwildwildscience%2Ffiles%2F2017%2F09%2FCapture-1.png&f=1&nofb=1)"/>
+							<AccountAvatar size={90} dummy/>
 						</div>
 						<div style={{
 							position: "absolute",
diff --git a/styles/global.css b/styles/global.css
index a1c9792..d8c13ac 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -18,12 +18,14 @@ html, body {
 	padding: 0;
 }
 
+/* global font zize */
+p, b, i, span, td, th { font-size: 15px; }
+
 /* navbar fix */
 body { padding-left: 48px; }
 
 /* font */
 html {
-	font-size: 14px;
 	font-family: "Inter";
 }
 
@@ -60,10 +62,6 @@ input::placeholder {
 /* remove chrome's ugly :focus outline */
 :focus { outline: none; }
 
-/* icon size fix */
-.navbar svg,
-.gameBar svg { font-size: 24px; }
-
 /* scroll balken */
 ::-webkit-scrollbar { width: 0 !important; }