Started readding old core frontend code

frontend/react/src/ui/buttons/statebutton.tsx

@@ -18,7 +18,7 @@ export class StateButton extends React.Component<ButtonProps, {}> {
 
     render() {
         var computedClassName = "";
-        computedClassName += this.props.active? 'bg-white text-background-steel': 'bg-transparent text-white border-white';
+        computedClassName += this.props.active? 'bg-white text-background-darker': 'bg-transparent text-white border-white';
         
         return (
           <FontAwesomeIcon icon={this.props.icon as IconProp} className={computedClassName + " rounded w-5 h-5 p-2 border-2"} onClick={this.props.onClick as MouseEventHandler}>

frontend/react/src/ui/panels/components/menutitle.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export class MenuTitle extends React.Component<{title: string}, {}> {
+    render() {
+        return <div className="h-12 w-full bg-background-dark flex items-center px-4 font-semibold">
+        {this.props.title}
+    </div>
+    }
+}

frontend/react/src/ui/panels/header.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { StateButton } from './statebuttons';
+import { StateButton } from '../buttons/statebutton';
 import { faPlus, faGamepad, faRuler, faPencil } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { EventsConsumer, EventsContext } from '../eventscontext';
-import { StateConsumer } from '../statecontext';
+import { EventsConsumer, EventsContext } from '../../eventscontext';
+import { StateConsumer } from '../../statecontext';
 
 library.add(faPlus, faGamepad, faRuler, faPencil)
 
@@ -18,7 +18,7 @@ export class Header extends React.Component<{}, {}> {
 				{(appState) =>
 					<EventsConsumer>
 						{(events) =>
-							<div className='absolute top-0 left-0 h-16 w-full z-ui bg-background-steel flex flex-row items-center px-5'>
+							<div className='h-16 w-full bg-background-darker flex flex-row items-center px-5'>
 								<div className="flex flex-row items-center gap-1">
 									<StateButton onClick={events.toggleSpawnMenu} active={appState.spawnMenuVisible} icon="fa-solid fa-plus"></StateButton>
 									<StateButton onClick={events.toggleUnitControlMenu} active={appState.unitControlMenuVisible} icon="fa-solid fa-gamepad"></StateButton>

frontend/react/src/ui/panels/spawnmenu.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { MenuTitle } from "./components/menutitle";
+
+export class SpawnMenu extends React.Component<{}, {}> {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return <div className="h-full w-96 bg-background-neutral z-ui">
+            <MenuTitle title="Spawn menu"></MenuTitle>
+        </div>
+    }
+}