column-based join form layout

This commit is contained in:
Ronja Spiegelberg 2024-04-13 16:39:35 +02:00
parent bf6ce99601
commit 7cc159edd7
2 changed files with 3 additions and 2 deletions

View file

@ -5,7 +5,7 @@
.JoinForm { .JoinForm {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
border: 2px solid rgb(76, 76, 76); border: 2px solid rgb(76, 76, 76);
border-radius: 4px; border-radius: 4px;
} }
@ -13,4 +13,5 @@
.JoinElems { .JoinElems {
padding: 8px 8px; padding: 8px 8px;
margin: 8px 8px; margin: 8px 8px;
color: rgb(255, 255, 255);
} }

View file

@ -47,7 +47,7 @@ export default function JoinForm({ onDone }: { onDone: (id: string) => void }) {
</h1> </h1>
<p className='JoinElems' style={{ "color": "white" }}> Welcome and have fun!</p> <p className='JoinElems' style={{ "color": "white" }}> Welcome and have fun!</p>
<div className="JoinForm"> <div className="JoinForm">
<p className='JoinElems' style={{ "color": "white" }}> <p className='JoinElems' style={{ "color": "white" }}>
Enter your name to join the game! Enter your name to join the game!
</p> </p>
<input className="JoinElems" <input className="JoinElems"