diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/index.tsx | 2 | ||||
| -rw-r--r-- | pages/login.tsx | 44 | ||||
| -rw-r--r-- | pages/register.tsx | 38 | ||||
| -rw-r--r-- | pages/search.tsx | 4 | ||||
| -rw-r--r-- | pages/settings.tsx | 8 |
6 files changed, 43 insertions, 54 deletions
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 |