Fix warnings

gm-dash/ui/src/Dashboard.tsx

@@ -1,10 +1,9 @@
 import './Dashboard.css';
-import Card from './components/Card/Card';
-import Launcher from './components/Launcher/Launcher';
 import Launchpad from './components/Launchpad/Launchpad';
 
-const LightThemes = () => <Card name="Light Themes">
+const LightThemes = () =>
     <Launchpad
+        title="Lights"
         exclusive={true}
         options={[
             { title: "Dark reds" },
@@ -13,18 +12,10 @@ const LightThemes = () => <Card name="Light Themes">
             { title: "Darkness" },
         ]}
     />
-</Card>
 
-const LightSetup = () => <div> </div>
-
-interface LightProps {
-    name: string,
-}
-
-const Light = ({ name }: LightProps) => <div> <p> {name} </p> </div>
-
-const Tracks = () => <Card name="Tracks">
+const Tracks = () =>
     <Launchpad
+        title="Tracks"
         exclusive={false}
         options={[
             { title: "City BGM" },
@@ -33,15 +24,10 @@ const Tracks = () => <Card name="Tracks">
             { title: "Water dripping" },
         ]}
     />
-</Card>
 
-interface TrackProps {
-    name: string,
-}
-const Track = ({ name }: TrackProps) => <Launcher title={name} />
-
-const Presets = () => <Card name="Presets">
+const Presets = () =>
     <Launchpad
+        title="Presets"
         exclusive={true}
         options={[
             { title: "Gilcrest Falls day" },
@@ -50,15 +36,6 @@ const Presets = () => <Card name="Presets">
             { title: "Surk colony" },
         ]}
     />
-</Card>
-
-interface PresetProps {
-    name: string
-}
-
-// const Scene = ({ name }: PresetProps) => <Launcher title={name} activated={false} />
-
-const SceneEditor = () => <div> </div>
 
 const Dashboard = () => {
     return (

gm-dash/ui/src/components/Launchpad/Launchpad.css

@@ -1,11 +1,14 @@
 .launchpad {
-    display: flex;
     border: var(--border);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-depression);
     margin: var(--spacer-l);
 }
 
+.launchpad__title {
+    color: var(--title-color);
+}
+
 .launchpad_horizontal-flow {
     display: flex;
     flex-direction: row;

gm-dash/ui/src/components/Launchpad/Launchpad.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import './Launchpad.css';
 import Launcher, { LauncherProps } from '../Launcher/Launcher';
-import classnames from 'classnames';
 
 export interface Selectable {
     onSelected?: (key: string) => void;
@@ -10,6 +9,7 @@ export interface Selectable {
 export type Flow = "horizontal" | "vertical";
 
 interface LaunchpadProps {
+    title?: string;
     exclusive: boolean;
     flow?: Flow;
     options: Array<LauncherProps>;
@@ -28,22 +28,19 @@ const multiSelect = (state: { [key: string]: boolean }, targetId: string) => {
     }
 }
 
-const Launchpad = ({ flow = "horizontal", options, exclusive }: LaunchpadProps) => {
+const Launchpad = ({ title, flow = "horizontal", options, exclusive }: LaunchpadProps) => {
     const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {});
 
-    let classOptions = [ "launchpad" ];
-
-    if (flow === "horizontal") {
-        classOptions.push("launchpad_horizontal-flow");
-    } else {
-        classOptions.push("launchpad_vertical-flow");
-    }
-
     let tiedOptions = options.map(option =>
         <Launcher key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} />
     );
 
-    return (<div className={classnames(classOptions)}> {tiedOptions} </div>)
+    return (<div className="launchpad">
+        {title && <h1 className="launchpad__title"> {title} </h1>}
+        <div className={flow === "horizontal" ? "launchpad_horizontal-flow" : "launchpad_vertical-flow"}>
+            {tiedOptions}
+        </div>
+    </div>)
 }
 
 export default Launchpad;