Working on styling for the dashboard and launchpad

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,11 @@ 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"
+        orientation="vertical"
         exclusive={true}
         options={[
             { title: "Gilcrest Falls day" },
@@ -50,15 +37,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/Design.tsx

@@ -37,7 +37,7 @@ const Launchpads = () => <div className="design_horizontal">
 
     <Launchpad
         exclusive={false}
-        flow={"vertical"}
+        orientation={"vertical"}
         options={[
             { title: "Grey" },
             { title: "Purple" },

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

@@ -2,12 +2,12 @@ import { PropsWithChildren } from 'react';
 import './Card.css';
 
 interface CardProps {
-    name: string,
+    title: string,
 }
 
-const Card = ({ name, children }: PropsWithChildren<CardProps>) => (
+const Card = ({ title, children }: PropsWithChildren<CardProps>) => (
     <div className="card">
-        <h1 className="card__title"> {name} </h1>
+        <h1 className="card__title"> {title} </h1>
         <div className="card__body">
             {children}
         </div>

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

@@ -1,11 +0,0 @@
-.activator {
-    border: 1px solid black;
-    border-radius: 5px;
-    margin: var(--spacer-m);
-    padding: var(--spacer-s);
-    box-shadow: var(--shadow-deep);
-}
-
-.activator_enabled {
-    box-shadow: var(--activator-ring);
-}

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

@@ -1,20 +0,0 @@
-import './Launcher.css';
-import React from 'react';
-
-export interface LauncherProps {
-    title: string,
-    icon?: string,
-    activated?: boolean,
-    onSelected?: (key: string) => void,
-}
-
-const Launcher = ({ title, activated = false, onSelected = (key) => {} }: LauncherProps) => {
-    const classnames = activated ? "activator activator_enabled" : "activator";
-    console.log("classnames ", activated, classnames);
-    return (
-        <div className={classnames} onClick={() => onSelected(title)}>
-            <p> {title} </p>
-        </div>)
-}
-
-export default Launcher;

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

@@ -1,17 +1,23 @@
 .launchpad {
-    display: flex;
     border: var(--border);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-depression);
     margin: var(--spacer-l);
 }
 
-.launchpad_horizontal-flow {
+.launchpad__title {
+    color: var(--label-color);
+    font-variant-caps: all-small-caps;
+    font-size: medium;
+    margin: var(--spacer-m);
+}
+
+.launchpad_horizontal-orientation {
     display: flex;
     flex-direction: row;
 }
 
-.launchpad_vertical-flow {
+.launchpad_vertical-orientation {
     display: flex;
     flex-direction: column;
 }

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

@@ -1,18 +1,18 @@
 import React from 'react';
 import './Launchpad.css';
-import Launcher, { LauncherProps } from '../Launcher/Launcher';
-import classnames from 'classnames';
+import { LaunchpadButton, LaunchpadButtonProps, EditPadButton } from '../LaunchpadButton/types';
 
 export interface Selectable {
     onSelected?: (key: string) => void;
 }
 
-export type Flow = "horizontal" | "vertical";
+export type Orientation = "horizontal" | "vertical";
 
 interface LaunchpadProps {
+    title?: string;
     exclusive: boolean;
-    flow?: Flow;
-    options: Array<LauncherProps>;
+    orientation?: Orientation;
+    options: Array<LaunchpadButtonProps>;
 }
 
 const exclusiveSelect = (state: { [key: string]: boolean }, targetId: string) => {
@@ -28,22 +28,20 @@ const multiSelect = (state: { [key: string]: boolean }, targetId: string) => {
     }
 }
 
-const Launchpad = ({ flow = "horizontal", options, exclusive }: LaunchpadProps) => {
+const Launchpad = ({ title, orientation = "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]} />
+        <LaunchpadButton 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={orientation === "horizontal" ? "launchpad_horizontal-orientation" : "launchpad_vertical-orientation"}>
+            {tiedOptions}
+            <EditPadButton text="Add" />
+        </div>
+    </div>)
 }
 
 export default Launchpad;

gm-dash/ui/src/components/LaunchpadButton/styles.css

@@ -0,0 +1,18 @@
+.launchpad-button {
+    border: 1px solid black;
+    border-radius: var(--border-radius);
+    margin: var(--spacer-m);
+    padding: var(--spacer-s);
+    box-shadow: var(--shadow-deep);
+}
+
+.launchpad-button_enabled {
+    box-shadow: var(--activator-ring);
+}
+
+.edit-pad-button {
+    border: var(--border-faint);
+    border-radius: var(--border-radius);
+    margin: var(--spacer-m);
+    padding: var(--spacer-s);
+}

gm-dash/ui/src/components/LaunchpadButton/types.tsx

@@ -0,0 +1,28 @@
+import './styles.css';
+import React from 'react';
+
+export interface LaunchpadButtonProps {
+    title: string,
+    icon?: string,
+    activated?: boolean,
+    onSelected?: (key: string) => void,
+}
+
+export const LaunchpadButton = ({ title, activated = false, onSelected = (key) => { } }: LaunchpadButtonProps) => {
+    const classnames = activated ? "launchpad-button launchpad-button_enabled" : "launchpad-button";
+    return (
+        <div className={classnames} onClick={() => onSelected(title)}>
+            <p> {title} </p>
+        </div>)
+}
+
+export interface EditPadButtonProps {
+    text: string,
+    onSelected?: () => void,
+}
+
+export const EditPadButton = ({ text, onSelected = () => { } }: EditPadButtonProps) => (
+    <div className="edit-pad-button" onClick={() => onSelected()}>
+        <p> {text} </p>
+    </div>)
+

gm-dash/ui/src/index.css

@@ -13,13 +13,15 @@
 
     --grey-1: hsl(210, 0%, 25%);
     --grey-2: hsl(210, 0%, 40%);
-    --grey-3: hsl(210, 0%, 55%);
+    --grey-3: hsl(210, 0%, 50%);
     --grey-4: hsl(210, 0%, 70%);
     --grey-5: hsl(210, 0%, 85%);
 
     --title-color: var(--grey-1);
+    --label-color: var(--grey-3);
 
     --border: 1px solid var(--purple-1);
+    --border-faint: 1px solid var(--grey-4);
     --activator-ring: 0px 0px 8px 4px var(--blue-4);
     --shadow-depression: inset 1px 1px 2px 0px var(--purple-1);
     --shadow-shallow: 1px 1px 2px 0px var(--purple-1);

gm-dash/ui/src/index.tsx

@@ -1,7 +1,8 @@
+import './index.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import Dashboard from './Dashboard';
+import Setup from './pages/Setup';
 import Design from './Design';
 import reportWebVitals from './reportWebVitals';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
@@ -14,6 +15,10 @@ const router = createBrowserRouter([
         path: "/",
         element: <Dashboard />,
     },
+    {
+        path: "/setup",
+        element: <Setup />,
+    },
     {
         path: "/design",
         element: <Design />,

gm-dash/ui/src/pages/Setup.tsx

@@ -0,0 +1,15 @@
+import './Setup.css'
+import Card from '../components/Card/Card';
+
+const Setup = () => (<div>
+    <h1> Setup </h1>
+
+    <Card title="Scenes" />
+    <Card title="Lights">
+        <p> Connect to nearby light systems </p>
+    </Card>
+    <Card title="Sounds">
+    </Card>
+</div>)
+
+export default Setup;