aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/navbar.tsx38
-rw-r--r--components/toast.tsx2
-rw-r--r--components/ui.tsx5
-rw-r--r--pages/index.tsx17
-rw-r--r--styles/global.css8
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; }