home page without inline react styles :tada:

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}