...
 
Commits (2)
.button {
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
background: grey;
font-weight: 600;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: .875rem;
border-radius: 4px;
cursor: pointer;
&.accept {background: var(--accent-color); margin-right: 20px;}
&.confirm {background: var(--accent-color); margin-left: 20px;}
&.cancel {background: #4f545c;}
&.warning {background: var(--red);}
&.warning {background: var(--red);}
}
.disabled {
......
......@@ -2,15 +2,18 @@ import React, { ReactNode } from 'react';
import classNames from 'classnames';
import styles from './Button.module.scss';
export type ButtonType = 'confirm' | 'cancel' | 'warning';
interface ButtonProps {
children: ReactNode[] | ReactNode
type?: 'accept' | 'cancel' | 'warning'
type?: ButtonType
click?: () => void
};
export function Button(props: ButtonProps) {
let classes: any = {
[styles.button]: true,
[styles.disabled]: true
[styles.disabled]: false
};
if (props.type) {
......@@ -18,7 +21,7 @@ export function Button(props: ButtonProps) {
}
return (
<div className={classNames(classes)}>
<div className={classNames(classes)} onClick={props.click}>
{props.children}
</div>
);
......
......@@ -32,6 +32,9 @@
padding: 1em;
border-radius: 0 0 5px 5px;
background: var(--sub);
display: flex;
flex-direction: row-reverse;
}
}
}
......
import React, { useState } from 'react';
import React, { useState, ReactNode } from 'react';
import classNames from 'classnames';
import styles from './Modal.module.scss';
import { Button } from './Button';
import { Button, ButtonType } from './Button';
interface ModalProps {
title: string
dismiss?: () => void
allowClose?: boolean
//children: ReactNode[] | ReactNode
children: ReactNode[] | ReactNode
buttons: {
type?: ButtonType
value: ReactNode[] | ReactNode
handler?: () => void
close?: boolean
}[]
};
export default function Modal(props: ModalProps) {
......@@ -15,34 +22,48 @@ export default function Modal(props: ModalProps) {
function handleClose(e?: React.MouseEvent) {
if (e && (e.target !== e.currentTarget)) return;
if (!props.dismiss) return;
if (!props.allowClose) return;
setClosing(true);
setTimeout(() => {
(props.dismiss as Function)();
if (props.dismiss)
props.dismiss();
}, 250);
}
// ? REDO LATER
let modalClasses = classNames(styles.modal, {
[styles.animInB]: !closing,
[styles.animOutB]: closing
});
// ? ALSO RE-DO
let classes = classNames(styles.root, {
[styles.animateIn]: !closing,
[styles.animateOut]: closing
});
let buttons: ReactNode[] = props.buttons
.map(btn => <Button type={btn.type}
click={() => {
if (btn.close) {
handleClose();
} else if (btn.handler) {
btn.handler();
}
}}>
{btn.value}
</Button>);
return (
<div className={modalClasses} onClick={handleClose}>
<div className={classes}>
<div className={styles.container}>
<span className={styles.title}>{props.title}</span>
<p>blah blah blah<br/>this may do a thing that you dotn want, word wrap pls as well ok thank</p>
<p>{props.children}</p>
</div>
<div className={styles.footer}>
<Button type='accept'>test</Button>
<Button type='cancel'>cancel</Button>
{buttons}
</div>
</div>
</div>
......
.link {
color: #2B8FF3;
font-size: .875rem;
text-decoration: none;
&:hover {text-decoration: underline;}
&.grey {color: grey;}
}
\ No newline at end of file
import React, { ReactNode } from 'react';
import styles from './Link.module.scss';
interface LinkProps {
href: string
children: ReactNode[] | ReactNode
};
export default function Link(props: LinkProps) {
return (
<a className={styles.link} href={props.href}>
{props.children}
</a>
);
}
\ No newline at end of file
......@@ -40,14 +40,25 @@ export default function Login() {
});
}
let [ temp, setTemp ] = useState(true);
let [ tfa, setTFA ] = useState(true);
return (
<AppContext.Consumer>
{ app =>
<div>
<div className={styles.login}>
{ temp && <Modal title='2FA required' dismiss={() => setTemp(false)} /> }
{ tfa &&
<Modal title='2FA required'
allowClose={true}
dismiss={() => setTFA(false)}
buttons={[
{ type: 'confirm', value: 'Continue' },
{ value: 'Cancel', close: true }
]}>
This is where the fancy input will be yes
</Modal>
}
<div className={styles.overlay}>
{ error.type !== 0 && <Notification title='Failed to login' text={error.reason} /> }
</div>
......
......@@ -10,6 +10,7 @@
--streaming: #977EFF;
--unclaimed: #E5AA07;
--accept: #14B89C;
--link: #2B8FF3;
--red: #D14F4F;
--yellow: #FFBB00;
......