rename MapDropDown to MapChooser, move css

This commit is contained in:
Vinzenz Schroeter 2024-04-29 12:24:52 +02:00
parent 1c5e14cd47
commit 3a3906f178
4 changed files with 14 additions and 13 deletions

View file

@ -4,12 +4,3 @@
flex-wrap: wrap;
row-gap: var(--padding-big);
}
.DropDown {
border: solid var(--border-size-thin);
padding: var(--padding-normal);
background: var(--color-background);
border-color: var(--color-primary);
color: var(--color-primary);
}

View file

@ -6,7 +6,7 @@ import Column from './components/Column.tsx';
import Row from './components/Row.tsx';
import Scoreboard from './Scoreboard.tsx';
import Button from './components/Button.tsx';
import MapDropDown from './MapDropDown.tsx';
import MapChooser from './MapChooser.tsx';
import './App.css';
import {getRandomTheme, useStoredTheme} from "./theme.ts";
import { useState } from 'react';
@ -21,7 +21,7 @@ export default function App() {
<Row>
<h1 className="flex-grow">CCCB-Tanks!</h1>
<MapDropDown />
<MapChooser />
<Button text="change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
<Button
onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}

View file

@ -0,0 +1,9 @@
.MapChooser-DropDown {
border: solid var(--border-size-thin);
padding: var(--padding-normal);
background: var(--color-background);
border-color: var(--color-primary);
color: var(--color-primary);
}

View file

@ -1,7 +1,8 @@
import { ChangeEvent, useEffect, useState } from "react";
import { getMaps, postMaps } from "./serverCalls";
import './MapChooser.css'
export default function MapDropDown() {
export default function MapChooser() {
const [mapList, setMaps] = useState<string[] | null>(null);
useEffect(() => {
@ -20,7 +21,7 @@ export default function MapDropDown() {
event.preventDefault();
};
return <select value="maps" className='DropDown' onChange={onChange}>
return <select value="maps" className='MapChooser-DropDown' onChange={onChange}>
<option value="" defaultValue={""} >Choose map</option>
{mapList?.map(m =>
<option key={m} value={m}>{m}</option>)}