rename MapDropDown to MapChooser, move css
This commit is contained in:
parent
1c5e14cd47
commit
3a3906f178
|
@ -4,12 +4,3 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
row-gap: var(--padding-big);
|
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);
|
|
||||||
}
|
|
|
@ -6,7 +6,7 @@ import Column from './components/Column.tsx';
|
||||||
import Row from './components/Row.tsx';
|
import Row from './components/Row.tsx';
|
||||||
import Scoreboard from './Scoreboard.tsx';
|
import Scoreboard from './Scoreboard.tsx';
|
||||||
import Button from './components/Button.tsx';
|
import Button from './components/Button.tsx';
|
||||||
import MapDropDown from './MapDropDown.tsx';
|
import MapChooser from './MapChooser.tsx';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import {getRandomTheme, useStoredTheme} from "./theme.ts";
|
import {getRandomTheme, useStoredTheme} from "./theme.ts";
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
@ -21,7 +21,7 @@ export default function App() {
|
||||||
|
|
||||||
<Row>
|
<Row>
|
||||||
<h1 className="flex-grow">CCCB-Tanks!</h1>
|
<h1 className="flex-grow">CCCB-Tanks!</h1>
|
||||||
<MapDropDown />
|
<MapChooser />
|
||||||
<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()}
|
||||||
|
|
9
tank-frontend/src/MapChooser.css
Normal file
9
tank-frontend/src/MapChooser.css
Normal 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);
|
||||||
|
}
|
|
@ -1,7 +1,8 @@
|
||||||
import { ChangeEvent, useEffect, useState } from "react";
|
import { ChangeEvent, useEffect, useState } from "react";
|
||||||
import { getMaps, postMaps } from "./serverCalls";
|
import { getMaps, postMaps } from "./serverCalls";
|
||||||
|
import './MapChooser.css'
|
||||||
|
|
||||||
export default function MapDropDown() {
|
export default function MapChooser() {
|
||||||
const [mapList, setMaps] = useState<string[] | null>(null);
|
const [mapList, setMaps] = useState<string[] | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -20,7 +21,7 @@ export default function MapDropDown() {
|
||||||
event.preventDefault();
|
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>
|
<option value="" defaultValue={""} >Choose map</option>
|
||||||
{mapList?.map(m =>
|
{mapList?.map(m =>
|
||||||
<option key={m} value={m}>{m}</option>)}
|
<option key={m} value={m}>{m}</option>)}
|
Loading…
Reference in a new issue