From 00811644d9ab554c3a314be04c99e341e5631fef Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Fri, 8 Jan 2021 12:11:45 +0100
Subject: beginsels spelregels aanpassen dialoogvenster

---
 src/components/gameSettings.tsx | 22 ++++++++++++++++++++++
 src/global.css                  |  4 ++++
 src/pages/settings.tsx          | 15 ++++++++++++---
 3 files changed, 38 insertions(+), 3 deletions(-)

(limited to 'src')

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>
 	);
-- 
cgit v1.2.3