fix: form and popup style fixes

src/App.tsx

@@ -10,7 +10,7 @@ import {
 	faShuffle,
 	faStar,
 } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
 	Dispatch,
 	SetStateAction,
@@ -20,17 +20,18 @@ import {
 	useState,
 } from 'react';
 import './App.css';
-import { CardBase } from './components/CardBase';
-import { DeckView } from './components/DeckView';
-import { Popup } from './components/Popup';
-import { Button } from './components/common/Button';
-import { Input } from './components/common/Input';
-import { H2 } from './components/common/Typography';
-import { cities } from './data/cities';
-import { Assortment, IAssortment } from './lib/Assortment';
-import { Card } from './lib/Card';
-import { Deck, IPossibleCard, IReadonlyPossibleCard } from './lib/Deck';
-import { useMutable } from './lib/Mutable';
+import {CardBase} from './components/CardBase';
+import {DeckView} from './components/DeckView';
+import {Popup} from './components/Popup';
+import {Button} from './components/common/Button';
+import {Input} from './components/common/Input';
+import {Select} from './components/common/Select';
+import {H2} from './components/common/Typography';
+import {cities} from './data/cities';
+import {Assortment, IAssortment} from './lib/Assortment';
+import {Card} from './lib/Card';
+import {Deck, IPossibleCard, IReadonlyPossibleCard} from './lib/Deck';
+import {useMutable} from './lib/Mutable';
 
 const cityCards = Object.keys(cities).map((city) => Card.get({ name: city }));
 const shuffledCityCards = new Assortment(
@@ -185,7 +186,13 @@ function App() {
 			</section>
 			<section>
 				<H2>Draw Chance</H2>
-				<ol>
+				<ol
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						gap: '0.25rem',
+					}}
+				>
 					{cardDrawProbabilities.map(
 						({ card, probability }, index) => {
 							const color = [...colors.entries()]
@@ -397,23 +404,32 @@ function App() {
 						infectionDeck.name = json.name;
 						setEditDeckFormVisible(false);
 					}}
+					style={{
+						flexDirection: 'column',
+					}}
 				>
 					<textarea
 						value={editDeckData}
-						style={{ width: '90vw', height: '80vh' }}
+						style={{
+							width: '90vw',
+							height: '80vh',
+							background: '#222',
+						}}
 						onChange={(e) => {
 							setEditDeckData(e.target.value);
 						}}
 					></textarea>
-					<button type="submit">Save</button>
-					<button
-						type="button"
-						onClick={() => {
-							setEditDeckFormVisible(false);
-						}}
-					>
-						Cancel
-					</button>
+					<div>
+						<Button type="submit">Save</Button>
+						<Button
+							type="button"
+							onClick={() => {
+								setEditDeckFormVisible(false);
+							}}
+						>
+							Cancel
+						</Button>
+					</div>
 				</form>
 			</Popup>
 			<Popup visible={topDrawFormVisible}>
@@ -497,7 +513,7 @@ function SelectCardForm({
 				onSelectCard(card);
 			}}
 		>
-			<select
+			<Select
 				value={cardName}
 				onChange={(e) => {
 					setCardName(e.target.value);
@@ -508,7 +524,7 @@ function SelectCardForm({
 						{card.name}
 					</option>
 				))}
-			</select>
+			</Select>
 			<Button type="submit">Draw</Button>
 			<Button type="button" onClick={onCancel}>
 				Done

src/components/Popup.tsx

@@ -20,7 +20,16 @@ export function Popup({
 				alignItems: 'center',
 			}}
 		>
-			{children}
+			<div
+				style={{
+					background: 'black',
+					padding: '1rem',
+					borderRadius: '0.5rem',
+					boxShadow: '0 0 1rem black',
+				}}
+			>
+				{children}
+			</div>
 		</div>
 	);
 }

src/components/common/Button.tsx

@@ -8,6 +8,7 @@ const StyledButton = styled.button`
 	align-items: center;
 	border: 1px solid currentColor;
 	line-height: 1;
+	background-color: black;
 
 	&:disabled {
 		color: gray;

src/components/common/Input.tsx

@@ -14,9 +14,6 @@ const StyledInput = styled.input`
 	}
 `;
 
-export function Input({
-	children,
-	...props
-}: React.JSX.IntrinsicElements['input']) {
+export function Input(props: React.JSX.IntrinsicElements['input']) {
 	return <StyledInput {...props} />;
 }

src/components/common/Select.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledSelect = styled.select`
+	display: inline-block;
+	padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+	justify-content: center;
+	align-items: center;
+	color: inherit;
+	border-bottom: 1px solid currentColor;
+
+	&:disabled {
+		color: gray;
+	}
+`;
+
+const StyledBox = styled.div`
+	display: inline-block;
+	position: relative;
+	background-color: black;
+
+	&::after {
+		content: '▼';
+		position: absolute;
+		right: 0.25rem;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 1rem;
+		height: 1rem;
+	}
+`;
+
+export function Select(props: React.JSX.IntrinsicElements['select']) {
+	return (
+		<StyledBox>
+			<StyledSelect {...props} />
+		</StyledBox>
+	);
+}

src/index.css

@@ -27,14 +27,14 @@ input,
 textarea,
 select,
 button {
-	background: black;
 	color: inherit;
+	background: black;
 }
 
-textarea,
-select {
+textarea {
 	min-width: 3rem;
 	min-height: 3rem;
+	line-height: 1.25;
 }
 
 input[type='checkbox'] {
@@ -46,6 +46,11 @@ button:not(:disabled) {
 	cursor: pointer;
 }
 
+form {
+	display: flex;
+	gap: 0.25rem;
+}
+
 ul,
 ol {
 	list-style-type: none;