From fb1f80d5af7e3808a3506ee5d2b609394f452cec Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Mon, 8 Feb 2021 15:35:49 +0100
Subject: account page done

---
 components/recentGames.tsx | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 pages/account.tsx          | 10 +++++++---
 pages/index.tsx            | 23 ++---------------------
 3 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 components/recentGames.tsx

diff --git a/components/recentGames.tsx b/components/recentGames.tsx
new file mode 100644
index 0000000..6bd766b
--- /dev/null
+++ b/components/recentGames.tsx
@@ -0,0 +1,46 @@
+import { CSSProperties, Component } from 'react';
+
+var LeftAlignedTableColumn: CSSProperties = {
+	textAlign: "left",
+	paddingLeft: 16
+}
+
+var RightAlignedTableColumn: CSSProperties = {
+	textAlign: "right",
+	paddingRight: 16
+}
+
+export default class RecentGames extends Component {
+	constructor(props: {
+		user?: string;
+	}) {
+		super(props);
+	}
+
+	render () {
+		return <div>
+			<h2>Recente partijen</h2>
+			<table width="100%" style={{ marginTop: "16px", textAlign: "center" }}>
+				<tr>
+					<th style={{ width: "50%" }}>Tegenstander</th>
+					<th style={{ width: "20%" }}>Uitkomst</th>
+					<th style={{ width: "15%" }}>Zetten</th>
+					<th style={{ width: "15%" }}>Datum</th>
+				</tr>
+				<tr>
+					<td style={LeftAlignedTableColumn}>Naam hier</td>
+					<td style={{ color: "var(--disk-b-text)" }}>Gewonnen</td>
+					<td>7</td>
+					<td style={RightAlignedTableColumn}>Vandaag</td>
+				</tr>
+				<tr>
+					<td style={LeftAlignedTableColumn}>Nog meer namen</td>
+					<td style={{ opacity: .6 }}>Gelijkspel</td>
+					<td>42</td>
+					<td style={RightAlignedTableColumn}>Gisteren</td>
+				</tr>
+			</table>
+		</div>
+	}
+}
+
diff --git a/pages/account.tsx b/pages/account.tsx
index 4d1ecd2..82e21fa 100644
--- a/pages/account.tsx
+++ b/pages/account.tsx
@@ -5,6 +5,7 @@ import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import { Vierkant, IconLabelButton } from '../components/ui';
 import { AccountAvatar } from '../components/account';
+import RecentGames from '../components/recentGames';
 
 import PersonAddOutlinedIcon from '@material-ui/icons/PersonAddOutlined';
 import AssignmentIndOutlinedIcon from '@material-ui/icons/AssignmentIndOutlined';
@@ -90,18 +91,21 @@ export default function AccountPage() {
 				</div>
 			</Vierkant>
 			<InfoSection>
-				<InfoModule icon={<Icon size={1} path={mdiCheckboxBlankCircle}/>} label="Online"/>
+				<InfoModule icon={<Icon size={1} path={mdiCheckboxBlankCircle} color="var(--disk-b-text)"/>} label="Online"/>
 				<InfoModule icon={<AssignmentIndOutlinedIcon/>} label="Lid sinds 14 december 2020"/>
 				<InfoModule icon={<PeopleOutlineOutlinedIcon/>} label="2 vrienden"/>
 				<InfoModule icon={<Icon size={1} path={mdiEarth}/>} label="Nederland"/>
 			</InfoSection>
 			<InfoSection>
-				<InfoModule icon={<ArrowUpwardOutlinedIcon/>} label="4 keer gewonnen"/>
+				<InfoModule icon={<ArrowUpwardOutlinedIcon style={{ color: "var(--disk-b-text)" }}/>} label="4 keer gewonnen"/>
 				<InfoModule icon={<Icon size={1} path={mdiEqual}/>} label="2 keer gelijkspel"/>
-				<InfoModule icon={<ArrowDownwardOutlinedIcon/>} label="2 keer verloren"/>
+				<InfoModule icon={<ArrowDownwardOutlinedIcon style={{ color: "var(--disk-a-text)" }}/>} label="2 keer verloren"/>
 				<InfoModule icon={<Icon size={1} path={mdiClipboardTextOutline}/>} label="Score: 400"/>
 				<InfoModule icon={<Icon size={1} path={mdiGamepadSquareOutline}/>} label="6 potjes"/>
 			</InfoSection>
+			<Vierkant>
+				<RecentGames/>
+			</Vierkant>
 		</CenteredPage>
 	</div>
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 7d128ef..665ef6a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,6 +6,7 @@ import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import { Vierkant, Button } from '../components/ui';
 import { AccountAvatar } from '../components/account';
+import RecentGames from '../components/recentGames';
 
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
 import ExtensionIcon from '@material-ui/icons/Extension';
@@ -160,27 +161,7 @@ export default class HomePage extends Component {
 					</div>
 				</Vierkant>
 				<Vierkant fullwidth style={{ display: this.state.loggedIn ? "block" : "none" }}>
-					<h2>Recente partijen</h2>
-					<table width="100%" style={{ marginTop: "16px", textAlign: "center" }}>
-						<tr>
-							<th style={{ width: "50%" }}>Tegenstander</th>
-							<th style={{ width: "20%" }}>Uitkomst</th>
-							<th style={{ width: "15%" }}>Zetten</th>
-							<th style={{ width: "15%" }}>Datum</th>
-						</tr>
-						<tr>
-							<td style={LeftAlignedTableColumn}>Naam hier</td>
-							<td style={{ color: "var(--disk-b-text)" }}>Gewonnen</td>
-							<td>7</td>
-							<td style={RightAlignedTableColumn}>Vandaag</td>
-						</tr>
-						<tr>
-							<td style={LeftAlignedTableColumn}>Nog meer namen</td>
-							<td style={{ opacity: .6 }}>Gelijkspel</td>
-							<td>42</td>
-							<td style={RightAlignedTableColumn}>Gisteren</td>
-						</tr>
-					</table>
+					<RecentGames/>
 				</Vierkant>
 				<Vierkant fullwidth>
 					<h2>Nieuws ofzo</h2>
-- 
cgit v1.2.3