diff options
| -rw-r--r-- | components/ui.tsx | 2 | ||||
| -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 | ||||
| -rw-r--r-- | styles/loginregister.css | 13 | ||||
| -rw-r--r-- | styles/ui.css | 2 | ||||
| -rw-r--r-- | styles/utility.css | 10 |
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; |