better buttons

app/components/Button.tsx

@@ -16,20 +16,16 @@ export const Button = ({
   function getVariantClassNames(variant: string){
     switch(variant){
       case "secondary":{
-        return "bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
+        return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
       }
       case "primary":
       default:{
-        return "bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600";
+        return " bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600";
       }
     }
   }; 
-  const className = `
-    text-sm font-semibold
-    rounded-md px-3.5 py-2.5 shadow-sm
-    focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
-  ` + getVariantClassNames(variant)
-  + (propsClassName ? ` ${propsClassName}` : null);
+  const className = "text-sm font-semibold rounded-md px-3.5 py-2.5 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" + getVariantClassNames(variant)
+  + (propsClassName ? ` ${propsClassName}` : "");
 
   return(
     <button

app/components/ButtonLink.tsx

@@ -18,22 +18,18 @@ interface LinkButtonProps extends LinkProps {
   function getVariantClassNames(variant: string){
     switch(variant){
       case "secondary":{
-        return "bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
+        return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
       }
       case "primary":
       default:{
-        return "bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600";
+        return " bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600";
       }
     }
   }; 
-  const className = `
-    text-sm font-semibold
-    rounded-md px-3.5 py-2.5 shadow-sm
-    focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
-  ` + getVariantClassNames(variant)
-  + (propsClassName ? ` ${propsClassName}` : null);
+  const className = "text-sm font-semibold rounded-md px-3.5 py-2.5 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" + getVariantClassNames(variant)
+  + (propsClassName ? ` ${propsClassName}` : "");
   // END TODO
-  
+
   return(
     <Link {...rest}>
       <button className={className}>

app/contexts/TopBarInner.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, createContext } from "react";
+import { createContext } from "react";
 
 export const TopBarInnerContext = createContext<{
   TopBarInner: JSX.Element | null;

app/pages/PageEnigma/PageEnigma.tsx

@@ -1,16 +1,26 @@
-import { 
-  useRef,
-  useEffect,
-  // useState,
+import {
   useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  // useState,
 } from 'react';
 
+import {
+  faChevronLeft,
+  faWandSparkles,
+} from "@fortawesome/free-solid-svg-icons";
+
 
 import { Button } from '~/components/Button';
+import { ButtonLink } from '~/components/ButtonLink';
+import { TopBarInnerContext } from "~/contexts/TopBarInner";
 
 import Editor from './js/editor';
 
 export const PageEnigma = () => {
+  const { setTopBarInner } = useContext(TopBarInnerContext) || {};
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const editorRef = useRef<Editor | null>(null);
@@ -37,6 +47,29 @@ export const PageEnigma = () => {
     }
   }, []);
 
+  useLayoutEffect(()=>{
+    if(setTopBarInner){
+      const TopBarInnerButtons = (
+        <div className="flex grow justify-between">
+          <ButtonLink
+            to={"/"}
+            variant='secondary'
+            icon={faChevronLeft}
+          >
+            Back to Dashboard
+          </ButtonLink>
+          <Button
+            icon={faWandSparkles}
+          >
+              Generate Movie
+          </Button>
+          <span className="w-8"/>
+        </div>
+      );
+      setTopBarInner(TopBarInnerButtons);
+    }
+  },[setTopBarInner]);
+
   const handleButtonSave = ()=>{
     editorRef.current?.save();
   }
@@ -53,7 +86,7 @@ export const PageEnigma = () => {
   return(
     <div>
       <canvas ref={canvasRef} id="video-scene" width="1280px" height="720px" />
-      <div className="absolute top-0 right-0 bg-ui-panel h-screen w-1/5 pt-20">
+      <div className="absolute top-16 m-2 right-0 bg-ui-panel h-screen w-1/5 pt-20">
         <Button onClick={handleButtonSave}>Save</Button>
         <Button onClick={handleButtonLoad}>Load</Button>
         <Button onClick={handleButtonRender}>Render</Button>

app/root.tsx

@@ -39,8 +39,10 @@ export default function App() {
             TopBarInner: topBarInnerComponent,
             setTopBarInner: setTopBarInnerComponent
           }}>
-          <Outlet />
           <TopBar />
+          <div className="h-10 m-4 w-screen"/>
+          <Outlet />
+          
         </TopBarInnerContext.Provider>
         <ScrollRestoration />
         <Scripts />

app/routes/ColourGuide.tsx

@@ -0,0 +1,10 @@
+
+
+export default function ColourGuide () {
+  return(
+  <>
+    <h1 className="text-brand-primary">Primary / Sunglo</h1>
+    <h1 className="text-brand-secondary">Secondary / Gunpowder</h1>
+  </>
+  );
+};

app/routes/ComponentLibrary.tsx

@@ -0,0 +1,11 @@
+import { Button } from "~/components/Button";
+import { ButtonLink } from "~/components/ButtonLink";
+
+export default function ComponentLibrary () {
+  return(
+  <>
+    <Button>Button</Button>
+    <ButtonLink to="/">Button with Link</ButtonLink>
+  </>
+  );
+};

app/template/TopBar/TopBar.tsx

@@ -6,7 +6,10 @@ import { TopBarInnerContext } from '~/contexts/TopBarInner';
 
 export const TopBar = () => {
   return (
-    <header className="bg-ui-panel fixed top-0 left-0 w-full">
+    <header className="
+      fixed top-0 left-0 w-full
+      bg-ui-panel border-b border-ui-panel-border
+    ">
       <nav className="mx-auto flex max-w-full items-center justify-between p-4 lg:px-8" aria-label="Global">
         <div className="flex lg:flex-1">
           <a href="#" className="-m-1.5 p-1.5">

tailwind.config.ts

@@ -73,6 +73,7 @@ export default {
 
       'ui-background': '#1a1a27',
       'ui-panel': '#242433',
+      'ui-panel-border': '#5e6097',
 
       gray: colors.gray,
       white: colors.white