diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/gameSettings.tsx | 22 | ||||
| -rw-r--r-- | src/global.css | 4 | ||||
| -rw-r--r-- | src/pages/settings.tsx | 15 |
3 files changed, 38 insertions, 3 deletions
diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx index 13bb1cc..9f96c52 100644 --- a/src/components/gameSettings.tsx +++ b/src/components/gameSettings.tsx @@ -5,6 +5,7 @@ import { Button } from './ui'; import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; +import {DialogBox} from './dialogBox'; export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { return <div style={{ @@ -47,3 +48,24 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { </div>; } + +export function EditGameSettings() { + return <DialogBox title="Spelregels aanpassen"> + <div style={{ + marginTop: 24, + maxHeight: 500, + overflowY: "scroll" + }}> + <span>Hier is een scrollende pagina in een dialoogvenster</span> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p> + </div> + </DialogBox>; +} diff --git a/src/global.css b/src/global.css index 926934d..354c7ea 100644 --- a/src/global.css +++ b/src/global.css @@ -64,3 +64,7 @@ input::placeholder { .navbar svg, .gameBar svg { font-size: 24px; } +/* scroll balken */ +::-webkit-scrollbar-track { background-color: var(--background) !important; } +::-webkit-scrollbar-thumb { background-color: var(--background-alt) !important; } + diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx index 9446a5f..2daa90b 100644 --- a/src/pages/settings.tsx +++ b/src/pages/settings.tsx @@ -1,7 +1,14 @@ +import { CSSProperties } from 'react'; + import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; import { Vierkant } from '../components/ui'; /* import { AccountAvatar } from '../components/account'; */ +import { CurrentGameSettings, EditGameSettings } from '../components/gameSettings'; + +var SettingsSectionHeaderStyle: CSSProperties = { + marginBottom: 24 +} export default function SettingsPage() { return ( @@ -10,14 +17,16 @@ export default function SettingsPage() { <CenteredPage width={802}> <PageTitle>Instellingen</PageTitle> <Vierkant width="calc(100% - 12px)"> - <h2>Account</h2> + <h2 style={SettingsSectionHeaderStyle}>Account</h2> </Vierkant> <Vierkant width="calc(100% - 12px)"> - <h2>Kleuren</h2> + <h2 style={SettingsSectionHeaderStyle}>Kleuren</h2> </Vierkant> <Vierkant width="calc(100% - 12px)"> - <h2>Standaard spelregels</h2> + <h2 style={SettingsSectionHeaderStyle}>Standaard spelregels</h2> + <CurrentGameSettings/> </Vierkant> + <EditGameSettings/> </CenteredPage> </div> ); |