aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/ui.tsx131
-rw-r--r--pages/_app.tsx1
-rw-r--r--pages/index.tsx2
-rw-r--r--pages/settings.tsx63
-rw-r--r--styles/index.css1
-rw-r--r--styles/settings.css8
-rw-r--r--styles/ui.css46
-rw-r--r--styles/utility.css2
8 files changed, 105 insertions, 149 deletions
diff --git a/components/ui.tsx b/components/ui.tsx
index 89e8ffe..f939456 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -27,10 +27,9 @@ export function Vierkant(props: {
export function Button(props: {
text?: string;
children?: ReactNode;
- style?: CSSProperties;
href?: string;
className?: string;
- onclick?: (() => void);
+ onclick?: () => void;
id?: string;
}) {
return <a
@@ -52,33 +51,18 @@ export function IconLabelButton(props: {
text: string;
icon: ReactNode;
onclick?: () => void;
- style?: CSSProperties;
href?: string;
+ className?: string;
}) {
return <Button
onclick={props.onclick}
href={props.href}
- style={{
- display: 'inline-block',
- verticalAlign: 'top',
- padding: 8,
- float: 'right',
- marginLeft: 12,
- ...props.style,
- }}
+ className={"iconlabel dispinbl valigntop floatr" + " " + props.className}
>
- {props.icon}
- <span
- style={{
- display: 'inline-block',
- verticalAlign: 'top',
- fontWeight: 500,
- marginLeft: 8,
- marginTop: 3,
- marginBottom: 3,
- marginRight: 3,
- }}
- >
+ <div className="dispinbl icon">
+ {props.icon}
+ </div>
+ <span className="dispinbl valigntop label">
{props.text}
</span>
</Button>;
@@ -186,110 +170,43 @@ export function CheckBox(props: {
</div>;
}
-export class ColorPicker extends Component<{
- style?: CSSProperties;
-}> {
- state: {
- color: string;
- dark: boolean;
- } = {
- color: '#012345',
- dark: true,
- };
+export function ColorPicker() {
+ var [ dark, setDark ] = useState(false);
+ var [ color, setColor ] = useState("#012345");
- 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>
+ return <Button className="colorpicker dispinbl valigntop pad-s floatr">
+ <div>
+ <EditOutlinedIcon />
+ <div className="labelwrapper valigntop dispinbl center posrel">
+ <span className="label posabs">
+ {color}
+ </span>
</div>
- </Button>;
- }
+ </div>
+ </Button>;
}
-export function Tuitje(props: {
- style?: CSSProperties;
- rotation?: number;
-}) {
+export function Tuitje() {
return <svg
width='36'
height='12'
viewBox='0 0 36 12'
fill='none'
xmlns='http://www.w3.org/2000/svg'
- style={{
- ...props.style,
- }}
+ className="tuitje posabs"
>
<path
d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z'
- fill={props.style?.background as string || 'var(--background)'}
+ fill='var(--background)'
/>
</svg>;
}
export function Bubble(props: {
children?: ReactNode;
- style?: CSSProperties;
- tuitjeStyle?: CSSProperties;
}) {
- return <Vierkant
- style={{
- position: 'absolute',
- textAlign: 'center',
- margin: 0,
- overflow: 'visible',
- left: '50%',
- top: -24,
- transform: 'translateY(-100%) translateX(-50%)',
- boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
- ...props.style,
- }}
- >
+ return <Vierkant className="bubble posabs center drop-2">
{props.children}
- <Tuitje
- style={{
- position: 'absolute',
- bottom: -12,
- transform: 'translate(-50%, 0%) rotate(0deg)',
- ...props.tuitjeStyle,
- }}
- />
+ <Tuitje />
</Vierkant>;
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3f66711..bbdbae8 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -13,6 +13,7 @@ import '../styles/utility.css';
import '../styles/index.css';
import '../styles/search.css';
+import '../styles/settings.css';
export default function VierOpEenRijWebsite({ Component, pageProps }) {
return <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 9f63229..31aee57 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -107,7 +107,7 @@ export default function HomePage() {
<Icon path={mdiRobotExcited} className='icon' />
<span className='text'>Tegen computer</span>
</Vierkant>}
- <Vierkant className='loginOrRegisterBox pad-l'>
+ <Vierkant className='loginOrRegisterBox pad-l valigntop'>
{loggedIn
? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
: <LoginOrRegisterBox />}
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 0f40a90..e9fc5fa 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -1,7 +1,6 @@
import axios from 'axios';
import reduce from 'image-blob-reduce';
-import { CSSProperties, useContext } from 'react';
-import * as cookies from 'react-cookies';
+import { useContext } from 'react';
import { AccountAvatar } from '../components/account';
import { Footer } from '../components/footer';
@@ -16,11 +15,6 @@ import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined';
import PublishOutlinedIcon from '@material-ui/icons/PublishOutlined';
import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
-var SettingsSubsectionStyle: CSSProperties = {
- marginTop: 24,
- minHeight: 40,
-};
-
async function uploadNewProfileImage() {
if (!this.result) return;
@@ -54,9 +48,9 @@ export default function SettingsPage() {
<NavBar />
<CenteredPage width={802}>
<PageTitle>Instellingen</PageTitle>
- <Vierkant fullwidth>
+ <Vierkant className="section account fullwidth pad-l">
<h2>Account</h2>
- <div style={SettingsSubsectionStyle}>
+ <div className="subsection">
<AccountAvatar size={100} />
<label htmlFor='pfUpload'>
<IconLabelButton text='Nieuwe profielfoto uploaden' icon={<PublishOutlinedIcon />} />
@@ -65,7 +59,7 @@ export default function SettingsPage() {
type='file'
id='pfUpload'
accept='.png,.jpg,.jpeg'
- style={{ display: 'none' }}
+ className="dispnone"
onChange={event => {
var file = event.target.files[0];
if (!file) return;
@@ -76,45 +70,45 @@ export default function SettingsPage() {
}}
/>
</div>
- <div style={SettingsSubsectionStyle}>
+ <div className="subsection">
<IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} />
- <div style={{ display: 'block' }}>
+ <div className="dispbl">
<h3>Gebruikersnaam</h3>
<p>Hier staat hij dan</p>
</div>
</div>
- <div style={SettingsSubsectionStyle}>
+ <div className="subsection">
<IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} />
<IconLabelButton text='Onthullen' icon={<VisibilityOutlinedIcon />} />
- <div style={{ display: 'block' }}>
+ <div className="dispbl">
<h3>Email</h3>
<p>******@example.com</p>
</div>
</div>
- <div style={SettingsSubsectionStyle}>
+ <div className="subsection">
<IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} />
- <div style={{ display: 'block' }}>
+ <div className="dispbl">
<h3>Wachtwoord</h3>
</div>
</div>
</Vierkant>
- <Vierkant fullwidth>
+ <Vierkant className="section colors fullwidth pad-l">
<h2>Kleuren</h2>
- <div style={SettingsSubsectionStyle}>
+ <div className="subsection">
<ColorPicker />
<ColorPicker />
- <div style={{ display: 'block' }}>
+ <div className="dispbl">
<h3>Schijfjes</h3>
</div>
</div>
- <div style={SettingsSubsectionStyle}>
+ <div className="subsection">
<ColorPicker />
- <div style={{ display: 'block' }}>
+ <div className="dispbl">
<h3>Achtergrond</h3>
</div>
</div>
- <div style={SettingsSubsectionStyle}>
- <div style={{ float: 'right' }}>
+ <div className="subsection">
+ <div className="floatr">
<CheckBox
state={preferences?.darkMode}
onclick={state => updatePreference({ 'darkMode': state })}
@@ -123,31 +117,20 @@ export default function SettingsPage() {
<h3>Donkere modus</h3>
</div>
</Vierkant>
- <Vierkant fullwidth>
+ <Vierkant className="section gamerules fullwidth pad-l">
<h2>Standaard spelregels</h2>
- <div style={SettingsSubsectionStyle}>
+ <div className="subsection">
<CurrentGameSettings />
</div>
</Vierkant>
- <Vierkant fullwidth>
+ <Vierkant className="section logout fullwidth pad-l">
<h2>Uitloggen</h2>
- <div
- style={{
- width: '100%',
- textAlign: 'center',
- }}
- >
+ <div className="center">
<IconLabelButton
+ className="dispinbl"
icon={<ExitToAppOutlinedIcon />}
text='Uitloggen'
- style={{
- float: 'none',
- marginLeft: 0,
- }}
- onclick={() => {
- cookies.remove('token');
- window.location.pathname = '/';
- }}
+ href="/logout"
/>
</div>
</Vierkant>
diff --git a/styles/index.css b/styles/index.css
index 8ba12a6..fcda8e0 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -3,7 +3,6 @@
}
.loginOrRegisterBox {
- vertical-align: top;
height: calc(var(--squareSize) + 2 * var(--spacing-large));
width: 100%;
max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
diff --git a/styles/settings.css b/styles/settings.css
new file mode 100644
index 0000000..bcce5b5
--- /dev/null
+++ b/styles/settings.css
@@ -0,0 +1,8 @@
+.section.logout .button {
+ float: unset;
+}
+
+.subsection {
+ margin-top: var(--spacing-large);
+ min-height: 40px;
+}
diff --git a/styles/ui.css b/styles/ui.css
index f1d65e2..b8cd44c 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -19,3 +19,49 @@
font-weight: 600;
}
+.button.iconlabel,
+.button.colorpicker {
+ margin-left: var(--spacing-medium);
+}
+
+.button.colorpicker {
+ --color: var(--gray-100);
+ --background: #ff00ff;
+
+ background-color: var(--background);
+ color: var(--color);
+ border-width: 2px;
+ border-style: solid;
+ border-color: var(--color);
+}
+
+.button.iconlabel .label {
+ margin: 3px;
+ margin-left: 8px;
+}
+
+.button.colorpicker .labelwrapper {
+ width: 150px;
+ height: 24px;
+}
+
+.button.colorpicker .labelwrapper .label {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-feature-settings: "tnum", "ss01";
+}
+
+.bubble {
+ margin: 0;
+ overflow: visible;
+ left: 50%;
+ top: -24px;
+ transform: translateY(-100%) translateX(-50%);
+}
+
+.bubble .tuitje {
+ bottom: -12px;
+ transform: translate(-50%, 0%) rotate(0deg);
+}
diff --git a/styles/utility.css b/styles/utility.css
index 783b168..f8954cd 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -37,6 +37,8 @@
.center { text-align: center; }
+.floatr { float: right; }
+
.subtile {
color: var(--gray-600);
font-style: italic;