login/register pages

5 files changed, 85 insertions, 6 deletions

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 1ad6fe4..e5d2915 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -7,6 +7,7 @@ import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
 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';
 
 var NavBarItemStyle: CSSProperties = {
 	margin: 12,
@@ -41,8 +42,19 @@ export function NavBar() {
 			<div style={{
 				position: "absolute",
 				bottom: -4,
-				left: 0
+				left: 0,
+				backgroundColor: "var(--background)"
 			}}>
+			<a href="/login" style={NavBarItemStyle}>
+				<div style={{
+					width: 24,
+					height: 24,
+					background: "#888888",
+					borderRadius: 12
+				}}>
+					<PersonIcon/>
+				</div>
+			</a>
 				<a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a>
 			</div>
 		</div>
diff --git a/src/global.css b/src/global.css
index 5f9011f..d851131 100644
--- a/src/global.css
+++ b/src/global.css
@@ -19,17 +19,17 @@ html, body {
 }
 
 /* navbar fix */
-body {
-	padding-left: 48px;
-	background-color: var(--page-background);
-}
+body { padding-left: 48px; }
 
-/* font size */
+/* font */
 html {
 	font-size: 14px;
 	font-family: "Inter";
 }
 
+/* background color */
+html { background-color: var(--page-background); }
+
 /* link color fix */
 a { color: var(--text); }
 
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
new file mode 100644
index 0000000..bbbd363
--- /dev/null
+++ b/src/pages/login.tsx
@@ -0,0 +1,35 @@
+import { NavBar } from '../components/navbar';
+import { CenteredPage, PageTitle } from '../components/page';
+import { Vierkant, Input, Button } from '../components/ui';
+
+export default function LoginPage() {
+	return (
+		<div>
+			<NavBar/>
+			<CenteredPage width={500} style={{ height: "100vh" }}>
+				<div style={{
+					position: "relative",
+					top: "50%",
+					transform: "translateY(-50%)",
+					margin: "0 auto",
+					textAlign: "center"
+				}}>
+					<Vierkant>
+						<Input label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input>
+						<Input label="wachtwoord" type="password"></Input>
+						<div style={{
+							marginTop: 24,
+							gridGap: 24,
+							display: "grid",
+							gridTemplateColumns: "1fr 1fr"
+						}}>
+						<Button text="Registreren" style={{ backgroundColor: "var(--background-alt)" }} onclick={() => window.location.pathname = "/register"}></Button>
+							<Button text="Inloggen"></Button>
+						</div>
+					</Vierkant>
+				</div>
+			</CenteredPage>
+		</div>
+	);
+}
+
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
new file mode 100644
index 0000000..4ab3106
--- /dev/null
+++ b/src/pages/register.tsx
@@ -0,0 +1,28 @@
+import { NavBar } from '../components/navbar';
+import { CenteredPage, PageTitle } from '../components/page';
+import { Vierkant, Input, Button } from '../components/ui';
+
+export default function RegisterPage() {
+	return (
+		<div>
+			<NavBar/>
+			<CenteredPage width={500} style={{ height: "100vh" }}>
+				<div style={{
+					position: "relative",
+					top: "50%",
+					transform: "translateY(-50%)",
+					margin: "0 auto",
+					textAlign: "center"
+				}}>
+					<Vierkant>
+						<Input label="gebruikersnaam" style={{ marginBottom: 12 }}></Input>
+						<Input label="email" style={{ marginBottom: 12 }}></Input>
+						<Input label="wachtwoord" type="password"></Input>
+						<Button text="Registreren" style={{ marginTop: 24 }}></Button>
+					</Vierkant>
+				</div>
+			</CenteredPage>
+		</div>
+	);
+}
+
diff --git a/src/routes.tsx b/src/routes.tsx
index 5310baf..baff382 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -5,12 +5,16 @@ import './global.css';
 import HomePage from './pages/home';
 import SettingsPage from './pages/settings';
 import GamePage from './pages/game';
+import LoginPage from './pages/login';
+import RegisterPage from './pages/register';
 
 export default function Router() {
 	return <Switch>
 		<Route exact path='/' component={HomePage}/>
 		<Route exact path='/settings' component={SettingsPage}/>
 		<Route exact path='/game' component={GamePage}/>
+		<Route exact path='/login' component={LoginPage}/>
+		<Route exact path='/register' component={RegisterPage}/>
 	</Switch>;
 }