Working on styling for the dashboard and launchpad

gm-dash/ui/src/Dashboard.tsx

@@ -28,6 +28,7 @@ const Tracks = () =>
 const Presets = () =>
     <Launchpad
         title="Presets"
+        orientation="vertical"
         exclusive={true}
         options={[
             { title: "Gilcrest Falls day" },

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/Launchpad/Launchpad.css

@@ -6,15 +6,18 @@
 }
 
 .launchpad__title {
-    color: var(--title-color);
+    color: var(--label-color);
+    font-variant-caps: all-small-caps;
+    font-size: medium;
+    margin: var(--spacer-m);
 }
 
-.launchpad_horizontal-flow {
+.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

@@ -6,12 +6,12 @@ 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;
+    orientation?: Orientation;
     options: Array<LaunchpadButtonProps>;
 }
 
@@ -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 (<div className="launchpad">
         {title && <h1 className="launchpad__title"> {title} </h1>}
-        <div className={flow === "horizontal" ? "launchpad_horizontal-flow" : "launchpad_vertical-flow"}>
+        <div className={orientation === "horizontal" ? "launchpad_horizontal-orientation" : "launchpad_vertical-orientation"}>
             {tiedOptions}
             <EditPadButton text="Add" />
         </div>

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);