diff options
| -rw-r--r-- | components/ui.tsx | 53 | ||||
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/settings.tsx | 17 | ||||
| -rw-r--r-- | public/index.html | 1 | ||||
| -rw-r--r-- | styles/dark.css | 2 | ||||
| -rw-r--r-- | styles/global.css | 2 |
6 files changed, 68 insertions, 8 deletions
diff --git a/components/ui.tsx b/components/ui.tsx index bb2a2ff..e6fdceb 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -3,6 +3,7 @@ import { Component, CSSProperties, ReactNode } from "react"; import SearchIcon from '@material-ui/icons/Search'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; export function Vierkant(props: { href?: string; @@ -154,9 +155,13 @@ export class CheckBox extends Component<{ state?: boolean; style?: CSSProperties; id?: string; + onclick?: (state: boolean) => void; }> { state = { on: this.props.state || false } - public toggle = () => this.setState({ on: !this.state.on }) + public toggle = () => { + this.setState({ on: !this.state.on }); + this.props.onclick && this.props.onclick(!this.state.on); + } render() { return <div onClick={this.toggle} id={this.props.id} className={this.state.on ? "on" : "off"} style={{ @@ -173,5 +178,51 @@ export class CheckBox extends Component<{ } } +export class ColorPicker extends Component<{ + style?: CSSProperties; +}> { + state: { + color: string; + dark: boolean; + } = { + color: "#012345", + dark: true + } + render() { + return <Button style={{ + display: "inline-block", + verticalAlign: "top", + padding: 6, + float: "right", + marginLeft: 12, + color: this.state.dark ? "var(--text)" : "var(--text-alt)", + borderColor: this.state.dark ? "var(--text)" : "var(--text-alt)", + borderWidth: 2, + borderStyle: "solid", + backgroundColor: this.state.color, + ...this.props.style + }}> + <div> + <EditOutlinedIcon/> + <div style={{ + width: 150, + height: 24, + display: "inline-block", + textAlign: "center", + verticalAlign: "top", + position: "relative" + }}> + <span style={{ + position: "absolute", + top: "50%", left: "50%", + transform: "translate(-50%, -50%)", + fontWeight: 600, + fontFeatureSettings: '"tnum", "ss01"' + }}>{this.state.color}</span> + </div> + </div> + </Button> + } +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 7be2763..23f9f79 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,5 @@ import '../styles/global.css'; +import '../styles/dark.css'; export default function VierOpEenRijWebsite({ Component, pageProps }) { return <Component {...pageProps}/> diff --git a/pages/settings.tsx b/pages/settings.tsx index 96c6a2f..5034bd7 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -3,7 +3,7 @@ import * as cookies from 'react-cookies'; import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; -import { Vierkant, IconLabelButton, CheckBox } from '../components/ui'; +import { Vierkant, IconLabelButton, CheckBox, ColorPicker } from '../components/ui'; import { AccountAvatar } from '../components/account'; import { CurrentGameSettings } from '../components/gameSettings'; @@ -53,14 +53,23 @@ export default function SettingsPage() { <Vierkant fullwidth> <h2>Kleuren</h2> <div style={SettingsSubsectionStyle}> - <h3>Schijfjes</h3> + <ColorPicker/> + <ColorPicker/> + <div style={{ display: "block" }}> + <h3>Schijfjes</h3> + </div> </div> <div style={SettingsSubsectionStyle}> - <h3>Achtergrond</h3> + <ColorPicker/> + <div style={{ display: "block" }}> + <h3>Achtergrond</h3> + </div> </div> <div style={SettingsSubsectionStyle}> <div style={{ float: "right" }}> - <CheckBox/> + <CheckBox state={typeof window !== "undefined" && document.getElementsByTagName("html")[0].classList.contains("dark")} onclick={ + (state) => document.getElementsByTagName("html")[0].classList[state ? "add" : "remove"]("dark") + }/> </div> <h3>Donkere modus</h3> </div> diff --git a/public/index.html b/public/index.html index d9fdb5d..05b60c9 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,6 @@ <meta name="description" content="4 op een rij website voor informatica PO"/> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/> - <link rel="stylesheet" href="%PUBLIC_URL%/font/stylesheet.css"/> <title>4 op een rij</title> </head> <body> diff --git a/styles/dark.css b/styles/dark.css index a0f652e..681116f 100644 --- a/styles/dark.css +++ b/styles/dark.css @@ -1,4 +1,4 @@ -:root { +html.dark { --text: #FCFFFD; --text-alt: var(--text); diff --git a/styles/global.css b/styles/global.css index 2a82fa2..03f329e 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,4 +1,4 @@ -:root { +html { --text: #FCFFFD; --page-background: var(--text); |