added fullwidth prop to Vierkant

5 files changed, 40 insertions, 16 deletions

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 9a3f9ff..c62965a 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -27,11 +27,14 @@ export class NavBar extends Component {
 	constructor(props: {}) {
 		super(props);
 
-		if (typeof window === "undefined") return; // return if run on server
-		this.state.loggedIn = document.cookie.includes("token");
 	}
 
 	render () {
+		if (typeof window !== "undefined") { // hot garbage but werks :tada:
+			var loggedIn = document.cookie.includes("token");
+			if (this.state.loggedIn != loggedIn)
+				this.setState({ loggedIn });
+		}
 		return <div className="navbar" style={{
 			width: 48,
 			height: "100%",
@@ -60,13 +63,13 @@ export class NavBar extends Component {
 				left: 0,
 				backgroundColor: "var(--background)"
 			}}>
-			<a href={this.state.loggedIn ? "/account" : "/login"} style={NavBarItemStyle}>
-				{
-					this.state.loggedIn ?
-					<AccountAvatar size={24} dummy round/> :
-					<PersonIcon/>
-				}
-			</a>
+				<a href={this.state.loggedIn ? "/account" : "/login"} style={NavBarItemStyle}>
+					{
+						this.state.loggedIn ?
+						<AccountAvatar size={24} dummy round/> :
+						<PersonIcon/>
+					}
+				</a>
 				<a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a>
 			</div>
 		</div>
diff --git a/components/ui.tsx b/components/ui.tsx
index 11b9ddd..f57a90a 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -12,6 +12,7 @@ export function Vierkant(props: {
 	children?: ReactNode;
 	className?: string;
 	id?: string;
+	fullwidth?: boolean;
 }) {
 	return <a style={{
 		padding: 24,
@@ -22,7 +23,10 @@ export function Vierkant(props: {
 		display: "inline-block",
 		position: "relative",
 		boxSizing: "border-box",
-		width: props.width ? props.width : undefined,
+		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} id={props.id}>{props.children}</a>
diff --git a/pages/account.tsx b/pages/account.tsx
new file mode 100644
index 0000000..c596f11
--- /dev/null
+++ b/pages/account.tsx
@@ -0,0 +1,18 @@
+import { NavBar } from '../components/navbar';
+import { CenteredPage, PageTitle } from '../components/page';
+import { Vierkant } from '../components/ui';
+
+export default function AccountPage() {
+	return (
+		<div>
+			<NavBar/>
+			<CenteredPage width={802}>
+				<PageTitle>Profiel</PageTitle>
+				<Vierkant fullwidth>
+					Gert
+				</Vierkant>
+			</CenteredPage>
+		</div>
+	);
+}
+
diff --git a/pages/index.tsx b/pages/index.tsx
index 008bec0..7d128ef 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -159,7 +159,7 @@ export default class HomePage extends Component {
 						</div>
 					</div>
 				</Vierkant>
-				<Vierkant width="calc(100% - 12px)" style={{ display: this.state.loggedIn ? "block" : "none" }}>
+				<Vierkant fullwidth style={{ display: this.state.loggedIn ? "block" : "none" }}>
 					<h2>Recente partijen</h2>
 					<table width="100%" style={{ marginTop: "16px", textAlign: "center" }}>
 						<tr>
@@ -182,7 +182,7 @@ export default class HomePage extends Component {
 						</tr>
 					</table>
 				</Vierkant>
-				<Vierkant width="calc(100% - 12px)">
+				<Vierkant fullwidth>
 					<h2>Nieuws ofzo</h2>
 					<p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
 				</Vierkant>
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 11161a3..0519b27 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -9,7 +9,6 @@ import { CurrentGameSettings } from '../components/gameSettings';
 import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
 
-var SettingsSectionStyle: CSSProperties = { width: "calc(100% - 12px)" };
 var SettingsSubsectionStyle: CSSProperties = {
 	marginTop: 24,
 	minHeight: 40
@@ -21,7 +20,7 @@ export default function SettingsPage() {
 			<NavBar/>
 			<CenteredPage width={802}>
 				<PageTitle>Instellingen</PageTitle>
-				<Vierkant style={SettingsSectionStyle}>
+				<Vierkant fullwidth>
 					<h2>Account</h2>
 					<div style={SettingsSubsectionStyle}>
 						<AccountAvatar size={100} dummy/>
@@ -49,7 +48,7 @@ export default function SettingsPage() {
 						</div>
 					</div>
 				</Vierkant>
-				<Vierkant style={SettingsSectionStyle}>
+				<Vierkant fullwidth>
 					<h2>Kleuren</h2>
 					<div style={SettingsSubsectionStyle}>
 						<h3>Schijfjes</h3>
@@ -64,7 +63,7 @@ export default function SettingsPage() {
 						<h3>Donkere modus</h3>
 					</div>
 				</Vierkant>
-				<Vierkant style={SettingsSectionStyle}>
+				<Vierkant fullwidth>
 					<h2>Standaard spelregels</h2>
 					<div style={SettingsSubsectionStyle}>
 						<CurrentGameSettings/>