diff --git a/gm-dash/ui/src/Dashboard.tsx b/gm-dash/ui/src/Dashboard.tsx index 115be48..fee92bd 100644 --- a/gm-dash/ui/src/Dashboard.tsx +++ b/gm-dash/ui/src/Dashboard.tsx @@ -28,6 +28,7 @@ const Tracks = () => const Presets = () =>
void; } -export type Flow = "horizontal" | "vertical"; +export type Orientation = "horizontal" | "vertical"; interface LaunchpadProps { title?: string; exclusive: boolean; - flow?: Flow; + orientation?: Orientation; options: Array; } @@ -28,7 +28,7 @@ const multiSelect = (state: { [key: string]: boolean }, targetId: string) => { } } -const Launchpad = ({ title, flow = "horizontal", options, exclusive }: LaunchpadProps) => { +const Launchpad = ({ title, orientation = "horizontal", options, exclusive }: LaunchpadProps) => { const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {}); let tiedOptions = options.map(option => @@ -37,7 +37,7 @@ const Launchpad = ({ title, flow = "horizontal", options, exclusive }: Launchpad return (
{title &&

{title}

} -
+
{tiedOptions}
diff --git a/gm-dash/ui/src/index.css b/gm-dash/ui/src/index.css index 9f6ddb7..f093aea 100644 --- a/gm-dash/ui/src/index.css +++ b/gm-dash/ui/src/index.css @@ -13,11 +13,12 @@ --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);