login/register pages done + fullwidth css class edited

10 files changed, 67 insertions, 57 deletions

diff --git a/components/ui.tsx b/components/ui.tsx
index 6555813..9aa48cc 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -1,4 +1,4 @@
-import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { CSSProperties, ReactNode, useEffect, useState } from 'react';
 
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 9521d58..7cdb8e3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -13,6 +13,7 @@ import '../styles/utility.css';
 
 import '../styles/gameSettings.css';
 import '../styles/index.css';
+import '../styles/loginregister.css';
 import '../styles/search.css';
 import '../styles/settings.css';
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 31aee57..873cf8b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -117,7 +117,7 @@ export default function HomePage() {
 				&& <Vierkant className='fullwidth pad-l'>
 					<RecentGames games={gameInfo?.games} />
 				</Vierkant>}
-			<Vierkant className='fullwidth pad-l'>
+			<Vierkant className='w100m2m pad-l'>
 				<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/login.tsx b/pages/login.tsx
index 1e14573..9e26b50 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -49,44 +49,32 @@ export default function LoginPage() {
 		<div>
 			<NavBar />
 			<CenteredPage width={500} style={{ height: '100vh' }}>
-				<div
-					style={{
-						position: 'relative',
-						top: '50%',
-						transform: 'translateY(-50%)',
-						margin: '0 auto',
-						textAlign: 'center',
-					}}
-				>
-					<Vierkant>
+				<div className='posrel center centeredForm'>
+					<Vierkant className='pad-l'>
 						<form onSubmit={(e) => submitLogin(e, toast)}>
 							<Input
 								autofocus
 								autocomplete='username'
 								id='email'
 								label='email of gebruikersnaam'
-								style={{ marginBottom: 12 }}
-							>
-							</Input>
-							<Input autocomplete='current-password' id='password' label='wachtwoord' type='password'>
-							</Input>
-							<div
-								style={{
-									marginTop: 24,
-									gridGap: 24,
-									display: 'grid',
-									gridTemplateColumns: '1fr 1fr',
-								}}
-							>
+								className='pad-m fullwidth bg-900 round-t'
+							/>
+							<Input
+								autocomplete='current-password'
+								id='password'
+								label='wachtwoord'
+								type='password'
+								className='pad-m fullwidth bg-900 round-t'
+							/>
+							<div className='sidebyside'>
 								<Button
 									href='/register'
 									text='Registreren'
-									style={{ backgroundColor: 'var(--background-alt)' }}
-								>
-								</Button>
-								<Button text='Inloggen' onclick={() => submitLogin(null, toast)}></Button>
+									className='register bg-700 fg-100'
+								/>
+								<Button text='Inloggen' className='login' onclick={() => submitLogin(null, toast)} />
 							</div>
-							<input type='submit' style={{ display: 'none' }} />
+							<input type='submit' className='dispnone' />
 						</form>
 					</Vierkant>
 				</div>
diff --git a/pages/register.tsx b/pages/register.tsx
index f78d092..90dab3e 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -89,34 +89,34 @@ export default function RegisterPage() {
 		<div>
 			<NavBar />
 			<CenteredPage width={500} style={{ height: '100vh' }}>
-				<div
-					style={{
-						position: 'relative',
-						top: '50%',
-						transform: 'translateY(-50%)',
-						margin: '0 auto',
-						textAlign: 'center',
-					}}
-				>
-					<Vierkant>
+				<div className='posrel center centeredForm'>
+					<Vierkant className='pad-l'>
 						<form onSubmit={(e) => submitRegister(e, toast)}>
 							<Input
 								autofocus
 								autocomplete='username'
 								id='username'
 								label='gebruikersnaam'
-								style={{ marginBottom: 12 }}
-							>
-							</Input>
-							<Input autocomplete='email' id='email' label='email' style={{ marginBottom: 12 }}></Input>
-							<Input autocomplete='new-password' id='password' label='wachtwoord' type='password'></Input>
+								className='pad-m fullwidth bg-900 round-t'
+							/>
+							<Input
+								autocomplete='email'
+								id='email'
+								label='email'
+								className='pad-m fullwidth bg-900 round-t'
+							/>
+							<Input
+								autocomplete='new-password'
+								id='password'
+								label='wachtwoord'
+								type='password'
+								className='pad-m fullwidth bg-900 round-t'
+							/>
 							<Button
 								text='Registreren'
-								style={{ marginTop: 24 }}
 								onclick={() => submitRegister(null, toast)}
-							>
-							</Button>
-							<input type='submit' style={{ display: 'none' }} />
+							/>
+							<input type='submit' className='dispnone' />
 						</form>
 					</Vierkant>
 				</div>
diff --git a/pages/search.tsx b/pages/search.tsx
index 6e52865..e874775 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -24,7 +24,7 @@ function search(callback: (results: Array<userInfo>) => void) {
 }
 
 function SearchResults(props: { userList: Array<userInfo>; }) {
-	return <div className='results'>
+	return <div className='results w100m2m'>
 		{props.userList?.map(user => <SearchResult user={user} key={user.id} />)}
 	</div>;
 }
@@ -47,7 +47,7 @@ function SearchResult(props: { user: userInfo; }) {
 function SearchBar(props: {
 	searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
 }) {
-	return <Vierkant className='pad-m fullwidth searchBar'>
+	return <Vierkant className='pad-m w100m2m searchBar'>
 		<form onSubmit={props.searchFunction}>
 			<Input
 				id='searchBar'
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 9a09178..672edac 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -48,7 +48,7 @@ export default function SettingsPage() {
 			<NavBar />
 			<CenteredPage width={802}>
 				<PageTitle>Instellingen</PageTitle>
-				<Vierkant className='section account fullwidth pad-l'>
+				<Vierkant className='section account w100m2m pad-l'>
 					<h2>Account</h2>
 					<div className='subsection'>
 						<AccountAvatar size={100} />
@@ -92,7 +92,7 @@ export default function SettingsPage() {
 						</div>
 					</div>
 				</Vierkant>
-				<Vierkant className='section colors fullwidth pad-l'>
+				<Vierkant className='section colors w100m2m pad-l'>
 					<h2>Kleuren</h2>
 					<div className='subsection'>
 						<ColorPicker />
@@ -117,13 +117,13 @@ export default function SettingsPage() {
 						<h3>Donkere modus</h3>
 					</div>
 				</Vierkant>
-				<Vierkant className='section gamerules fullwidth pad-l'>
+				<Vierkant className='section gamerules w100m2m pad-l'>
 					<h2>Standaard spelregels</h2>
 					<div className='subsection'>
 						<CurrentGameSettings />
 					</div>
 				</Vierkant>
-				<Vierkant className='section logout fullwidth pad-l'>
+				<Vierkant className='section logout w100m2m pad-l'>
 					<h2>Uitloggen</h2>
 					<div className='center'>
 						<IconLabelButton
diff --git a/styles/loginregister.css b/styles/loginregister.css
new file mode 100644
index 0000000..854aeb2
--- /dev/null
+++ b/styles/loginregister.css
@@ -0,0 +1,13 @@
+.centeredForm {
+	top: 50%;
+	transform: translateY(-50%);
+	margin: 0 auto;
+}
+
+.centeredForm .input {
+	margin-bottom: var(--spacing-medium);
+}
+
+.centeredForm .input:nth-last-of-type(2) {
+	margin-bottom: var(--spacing-large);
+}
diff --git a/styles/ui.css b/styles/ui.css
index 55b24e2..8003a7c 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -5,8 +5,6 @@
 	box-sizing: border-box;
 }
 
-.fullwidth { width: calc(100% - var(--spacing-medium)); }
-
 .button {
 	background-color: var(--accent);
 	color: var(--gray-900);
diff --git a/styles/utility.css b/styles/utility.css
index 0393d1d..7f5ebbd 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -15,6 +15,9 @@
 .bg-800 { background-color: var(--gray-800); }
 .bg-900 { background-color: var(--gray-900); }
 
+.fg-100 { color: var(--gray-100); }
+.fg-900 { color: var(--gray-900); }
+
 .posabs { position: absolute; }
 .posrel { position: relative; }
 .posfix { position: fixed; }
@@ -40,6 +43,13 @@
 
 .floatr { float: right; }
 
+.w100m2m { width: calc(100% - var(--spacing-medium)); }
+
+.fullwidth {
+	width: 100%;
+	box-sizing: border-box;
+}
+
 .subtile {
 	color: var(--gray-600);
 	font-style: italic;