add "icons" to buttons

This commit is contained in:
Vinzenz Schroeter 2024-05-06 01:20:54 +02:00
parent dced0a3a5c
commit f481bb638a
3 changed files with 10 additions and 7 deletions

View file

@ -22,12 +22,12 @@ export default function App() {
<Row> <Row>
<h1 className="flex-grow">CCCB-Tanks!</h1> <h1 className="flex-grow">CCCB-Tanks!</h1>
<MapChooser theme={theme}/> <MapChooser theme={theme}/>
<Button text="change colors" onClick={() => setTheme(_ => getRandomTheme())}/> <Button text="change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
<Button <Button
onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()} onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}
text="GitHub"/> text="⌂ source"/>
{name !== '' && {name !== '' &&
<Button onClick={() => setName(_ => '')} text="logout"/>} <Button onClick={() => setName(_ => '')} text="logout"/>}
</Row> </Row>
{name || <JoinForm onDone={name => setName(_ => name)}/>} {name || <JoinForm onDone={name => setName(_ => name)}/>}

View file

@ -41,7 +41,7 @@ export default function JoinForm({onDone}: {
<Button <Button
onClick={confirm} onClick={confirm}
disabled={disableButtons} disabled={disableButtons}
text="INSERT COIN"/> text="¢ INSERT COIN"/>
{postPlayer.isError && <p>{postPlayer.error.message}</p>} {postPlayer.isError && <p>{postPlayer.error.message}</p>}
</Dialog>; </Dialog>;
} }

View file

@ -71,8 +71,11 @@ function MapChooserDialog({mapNames, theme, onClose, onConfirm}: {
onClick={() => setChosenMap(name)} onClick={() => setChosenMap(name)}
/>)} />)}
</Row> </Row>
<Button text="confirm" disabled={!chosenMap} onClick={() => chosenMap && onConfirm(chosenMap)}/> <Row>
<Button text="cancel" onClick={onClose}/> <div className='flex-grow'/>
<Button text="« cancel" onClick={onClose}/>
<Button text="√ confirm" disabled={!chosenMap} onClick={() => chosenMap && onConfirm(chosenMap)}/>
</Row>
</Dialog>; </Dialog>;
} }
@ -105,7 +108,7 @@ export default function MapChooser({theme}: {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return <> return <>
<Button text="Change map" <Button text="Change map"
disabled={!query.isSuccess || postMap.isPending} disabled={!query.isSuccess || postMap.isPending}
onClick={() => setOpen(true)}/> onClick={() => setOpen(true)}/>
{query.isSuccess && open && {query.isSuccess && open &&