aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-04-19 09:51:38 +0200
committerlonkaars <l.leblansch@gmail.com>2021-04-19 09:51:38 +0200
commit08ba9024f532554fe2135d2596f1169828b01e5f (patch)
tree3ec940a1fce58777449774a11942ccb6dffb24a8
parent5e664e0694a09cfb7b952dd4bd123cf921950ba0 (diff)
login/register pages done + fullwidth css class edited
-rw-r--r--components/ui.tsx2
-rw-r--r--pages/_app.tsx1
-rw-r--r--pages/index.tsx2
-rw-r--r--pages/login.tsx44
-rw-r--r--pages/register.tsx38
-rw-r--r--pages/search.tsx4
-rw-r--r--pages/settings.tsx8
-rw-r--r--styles/loginregister.css13
-rw-r--r--styles/ui.css2
-rw-r--r--styles/utility.css10
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;