From 94db2df0cf86ae5234f7bbbf52cc413151ffb5a3 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 24 Mar 2024 17:33:10 +0700
Subject: [PATCH] top bar styling fixes/cleanup, centered

---
 app/contexts/ButtonSelectContext.tsx | 31 -------------
 app/modules/TopBar/TopBar.tsx        | 68 ++++++++++++++++++----------
 app/pages/PageEnigma/PageEnigma.tsx  | 10 +---
 app/styles/base.css                  |  2 +-
 4 files changed, 47 insertions(+), 64 deletions(-)
 delete mode 100644 app/contexts/ButtonSelectContext.tsx

diff --git a/app/contexts/ButtonSelectContext.tsx b/app/contexts/ButtonSelectContext.tsx
deleted file mode 100644
index 649c5c6d25..0000000000
--- a/app/contexts/ButtonSelectContext.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-interface ButtonSelectContextType {
-  selectedButton: number | null;
-  setSelectedButton: (index: number | null) => void;
-}
-
-const ButtonSelectContext = createContext<ButtonSelectContextType | undefined>(
-  undefined,
-);
-
-export const ButtonSelectProvider: React.FC = ({ children }) => {
-  const [selectedButton, setSelectedButton] = useState<number | null>(null);
-
-  return (
-    <ButtonSelectContext.Provider value={{ selectedButton, setSelectedButton }}>
-      {children}
-    </ButtonSelectContext.Provider>
-  );
-};
-
-// Custom hook to use the context
-export const useButtonSelect = () => {
-  const context = useContext(ButtonSelectContext);
-  if (context === undefined) {
-    throw new Error(
-      "useButtonSelect must be used within a ButtonSelectProvider",
-    );
-  }
-  return context;
-};
diff --git a/app/modules/TopBar/TopBar.tsx b/app/modules/TopBar/TopBar.tsx
index 0e7b0bca10..810f459186 100644
--- a/app/modules/TopBar/TopBar.tsx
+++ b/app/modules/TopBar/TopBar.tsx
@@ -1,32 +1,52 @@
-import { useContext } from 'react';
+import { useContext } from "react";
 
-import { Button } from '~/components/Button'
-import { faRightToBracket } from '@fortawesome/pro-solid-svg-icons'
-import { TopBarInnerContext } from '~/contexts/TopBarInner';
+import { Button } from "~/components/Button";
+import {
+  faChevronLeft,
+  faRightToBracket,
+} from "@fortawesome/pro-solid-svg-icons";
+import { TopBarInnerContext } from "~/contexts/TopBarInner";
+import { ButtonLink } from "~/components";
 
 export const TopBar = () => {
   return (
-    <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" aria-label="Global">
-        <div className="flex lg:flex-1">
-          <a href="#" className="-m-1.5 p-1.5">
-            <span className="sr-only">FakeYou</span>
-            <img className="h-10 w-auto ml-0.5" src="/resources/images/Storyteller-Logo-1.png" alt="Logo FakeYou StoryTeller.ai" />
-          </a>
-          <span className="w-4 lg:w-8"/>
-          <TopBarInner />
+    <header
+      className="fixed left-0 top-0 w-full
+      border-b border-ui-panel-border bg-ui-panel"
+    >
+      <nav
+        className="mx-auto flex max-w-full items-center justify-between px-4 py-3"
+        aria-label="Global"
+      >
+        <div className="grid w-full grid-cols-3 gap-2">
+          <div className="flex gap-4">
+            <a href="/" className="">
+              <span className="sr-only">Storyteller.ai</span>
+              <img
+                className="h-9 w-auto"
+                src="/resources/images/Storyteller-Logo-1.png"
+                alt="Logo FakeYou StoryTeller.ai"
+              />
+            </a>
+            <ButtonLink to={"/"} variant="secondary" icon={faChevronLeft}>
+              Back to Dashboard
+            </ButtonLink>
+          </div>
+
+          <div className="flex justify-center">
+            <TopBarInner />
+          </div>
+
+          <div className="flex justify-end">
+            <Button icon={faRightToBracket}>Login</Button>
+          </div>
         </div>
-        <Button icon={faRightToBracket}>Login</Button>
       </nav>
     </header>
-    
-  )
-}
+  );
+};
 
-const TopBarInner = ()=>{
-  const { TopBarInner } = useContext(TopBarInnerContext) || {}
-  return(TopBarInner);
-}
\ No newline at end of file
+const TopBarInner = () => {
+  const { TopBarInner } = useContext(TopBarInnerContext) || {};
+  return TopBarInner;
+};
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index eef4ef84a6..9248f1c8d5 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -72,16 +72,10 @@ export const PageEnigma = () => {
   return (
     <div>
       <TopBarHelmet>
-        <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>
+        <Button icon={faWandSparkles}>Generate Movie</Button>
       </TopBarHelmet>
 
-      <div style={{ height: "calc(100vh - 73px)" }}>
+      <div style={{ height: "calc(100vh - 64px)" }}>
         {/* Engine section/side panel */}
         <div
           className="flex"
diff --git a/app/styles/base.css b/app/styles/base.css
index 58e00006f4..f4da4f836b 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -3,6 +3,6 @@ body {
 }
 
 .topbar-spacer {
-  height: 73px;
+  height: 64px;
   width: 100vw;
 }