diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/recentGames.tsx | 20 | ||||
| -rw-r--r-- | components/ui.tsx | 21 |
2 files changed, 11 insertions, 30 deletions
diff --git a/components/recentGames.tsx b/components/recentGames.tsx index 988126f..65c819a 100644 --- a/components/recentGames.tsx +++ b/components/recentGames.tsx @@ -28,18 +28,14 @@ function GameOutcome(props: { game: gameInfo; }) { }, }[props.game.status](); })(); - var outcome = props.game.outcome; - return <td - style={{ - color: outcome == 'w' - ? 'var(--disk-b-text)' - : outcome == 'l' - ? 'var(--disk-a-text)' - : 'var(--text)', - opacity: !['w', 'l'].includes(outcome) ? 0.75 : 1.0, - }} - > - {gameStatus} + return <td> + <span className={"outcome " + { + 'w': 'win', + 'l': 'lose', + 'd': 'draw', + }[props.game.outcome]}> + {gameStatus} + </span> </td>; } diff --git a/components/ui.tsx b/components/ui.tsx index 99479a8..db858a4 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -30,6 +30,7 @@ export function Button(props: { children?: ReactNode; style?: CSSProperties; href?: string; + className?: string; onclick?: (() => void); id?: string; }) { @@ -37,26 +38,10 @@ export function Button(props: { onClick={props.onclick} href={props.href} id={props.id} - style={{ - padding: props.text ? 8 : 16, - textAlign: props.text ? 'center' : 'left', - borderRadius: 8, - backgroundColor: 'var(--disk-a)', - cursor: 'pointer', - position: 'relative', - textDecoration: 'none', - display: 'block', - userSelect: 'none', - ...props.style, - }} + className={"button pad-s round-t " + props.className} > {props.text - ? <span - style={{ - fontWeight: 600, - userSelect: 'none', - }} - > + ? <span> {props.text} </span> : undefined} |