Merge pull request #211 from CodeForPhilly/branding-ux-updates

feat: Updated styling of Navbars and Header to Match BDT branding more closely

Author: Michael-Dratch

builder-frontend/src/assets/logos/bdt-logo-large-mono-dark.svg

@@ -1,13 +1,16 @@
 import { useAuth } from "../context/AuthContext";
-import { useNavigate } from "@solidjs/router";
+import { useLocation, useNavigate } from "@solidjs/router";
+
+import bdtLogo from "../assets/logos/bdt-logo-large-mono-light.svg";
+import { Show } from "solid-js";
 
 
 const HeaderButton = ({ buttonText, onClick }: { buttonText: string; onClick: () => void }) => {
   return (
     <div
       onClick={onClick}
       class="
-        h-full px-4 text-sm font-bold text-gray-500
+        px-4 py-3 text-md font-bold text-gray-700 rounded-md
         flex items-center
         hover:bg-gray-300 cursor-pointer select-none"
     >
@@ -20,20 +23,23 @@ export default function Header() {
   const { logout } = useAuth();
   const navigate = useNavigate();
 
+  const location = useLocation();
+  const isNotRoot = location.pathname !== "/";
+
   const handleLogout = () => {
     logout();
     navigate("/login", { replace: true });
   };
 
   return (
-    <header class="bg-gray-200 min-h-18 h-18 px-4 flex items-center justify-between">
+    <header class="bg-gray-200 min-h-24 h-24 px-4 flex items-center justify-between border-b-2 border-gray-300">
       <div class="flex items-center space-x-6">
-        <span class="text-lg font-bold text-gray-600">
-          Benefit Decision Toolkit
-        </span>
+        <img src={bdtLogo} alt="" class="w-36" />
       </div>
       <div class="flex items-center h-full">
-        <HeaderButton buttonText="← Back to Home" onClick={() => navigate("/")} />
+        <Show when={isNotRoot}>
+          <HeaderButton buttonText="← Back to Home" onClick={() => navigate("/")} />
+        </Show>
         <HeaderButton buttonText="Logout" onClick={handleLogout} />
       </div>
     </header>

builder-frontend/src/assets/logos/bdt-logo-large-mono-light.svg

@@ -1,30 +1,31 @@
-import { createSignal, Match, Switch } from "solid-js";
+import { Accessor, createSignal, Match, Switch } from "solid-js";
 
 import EligibilityChecksList from "./eligibilityCheckList/EligibilityChecksList";
 import ProjectsList from "./ProjectsList"
 import Header from "../Header";
 
+import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";0
+
 const HomeScreen = () => {
-  const [screenMode, setScreenMode] = createSignal<"projects" | "checks">("projects");
+  const [screenMode, setScreenMode] = createSignal<"screeners" | "checks">("screeners");
+
+  const navbarDefs: Accessor<NavbarProps> = () => {
+    return {
+      tabDefs: [
+        { key: "screeners", label: "Screeners", onClick: () => setScreenMode("screeners") },
+        { key: "checks", label: "Eligibility checks", onClick: () => setScreenMode("checks") },
+      ],
+      activeTabKey: () => screenMode(),
+      titleDef: null,
+    }
+  };
+
   return (
     <div>
       <Header/>
-      <div class="flex space-x-4 p-4 border-b-2 border-gray-200">
-        <div
-          class={`btn-default ${screenMode() === "projects" ? "btn-blue" : "btn-gray"}`}
-          onClick={() => setScreenMode("projects")}
-        >
-          Projects List
-        </div>
-        <div
-          class={`btn-default ${screenMode() === "checks" ? "btn-blue" : "btn-gray"}`}
-          onClick={() => setScreenMode("checks")}
-        >
-          Eligibility Checks List
-        </div>
-      </div>
+      <BdtNavbar navProps={navbarDefs} />
       <Switch>
-        <Match when={screenMode() === "projects"}>
+        <Match when={screenMode() === "screeners"}>
           <ProjectsList />
         </Match>
         <Match when={screenMode() === "checks"}>

builder-frontend/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Match, Show, Switch } from "solid-js";
+import { Accessor, createSignal, Match, Show, Switch } from "solid-js";
 import { useParams } from "@solidjs/router";
 
 import { clsx } from "clsx";
@@ -11,18 +11,19 @@ import EligibilityCheckTest from "./checkTesting/EligibilityCheckTest";
 import PublishCheck from "./PublishCheck";
 
 import eligibilityCheckDetailResource from "./eligibilityCheckDetailResource";
+import ParametersConfiguration from "./ParametersConfiguration";
 
 import ErrorDisplayModal from "@/components/shared/ErrorModal";
-import ParametersConfiguration from "./ParametersConfiguration";
+import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";
 
 
-type CheckDetailScreenMode = "Parameter Configuration" | "DMN Definition" | "Testing" | "Publish";
+type CheckDetailScreenMode = "paramConfig" | "dmnDefinition" | "testing" | "publish";
 
 const EligibilityCheckDetail = () => {
   const { checkId } = useParams();
 
   const [currentDmnModel, setCurrentDmnModel] = createSignal<string>("");
-  const [screenMode, setScreenMode] = createSignal<CheckDetailScreenMode>("Parameter Configuration");
+  const [screenMode, setScreenMode] = createSignal<CheckDetailScreenMode>("paramConfig");
 
   const [validationErrors, setValidationErrors] = createSignal<string[]>([]);
   const [showingErrorModal, setShowingErrorModal] = createSignal<boolean>(false);
@@ -44,40 +45,40 @@ const EligibilityCheckDetail = () => {
     }
   }
 
+  const navbarDefs: Accessor<NavbarProps> = () => {
+    return {
+      tabDefs: [
+        { key: "paramConfig", label: "Parameter Configuration", onClick: () => setScreenMode("paramConfig") },
+        { key: "dmnDefinition", label: "DMN Definition", onClick: () => setScreenMode("dmnDefinition") },
+        { key: "testing", label: "Testing", onClick: () => setScreenMode("testing") },
+        { key: "publish", label: "Publish", onClick: () => setScreenMode("publish") },
+      ],
+      activeTabKey: () => screenMode(),
+      titleDef: { label: eligibilityCheck().name },
+    };
+  };
+
   return (
     <div class="h-screen flex flex-col">
       <Show when={initialLoadStatus.loading() || actionInProgress()}>
         <Loading />
       </Show>
       <Header />
-      <div class="flex border-b border-gray-200">
-        {["Parameter Configuration", "DMN Definition", "Testing", "Publish"].map((tab: CheckDetailScreenMode) => (
-          <button
-            class={`px-4 py-2 -mb-px text-sm font-medium border-b-2 transition-colors ${
-              screenMode() === tab
-                ? "border-b border-gray-700 text-gray-700 hover:bg-gray-200"
-                : "border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-200"
-            }`}
-            onClick={() => setScreenMode(tab)}
-          >
-            {tab.charAt(0).toUpperCase() + tab.slice(1)}
-          </button>
-        ))}
-      </div>
 
+      <BdtNavbar navProps={navbarDefs} />
       <Show when={ eligibilityCheck().id !== undefined && !initialLoadStatus.loading() }>
         <Switch>
-          <Match when={screenMode() === "Parameter Configuration"}>
+          <Match when={screenMode() === "paramConfig"}>
             <ParametersConfiguration
               eligibilityCheck={eligibilityCheck}
               addParameter={actions.addParameter}
               editParameter={actions.updateParameter}
               removeParameter={actions.removeParameter}
             />
           </Match>
-          <Match when={screenMode() === "DMN Definition"}>
+          <Match when={screenMode() === "dmnDefinition"}>
             <>
-              <div class="flex space-x-4 p-4 border-b-2 border-gray-200">
+              <div class="flex space-x-4 px-4 py-3 border-b-2 border-gray-200">
                 <div
                   class="btn-default btn-blue"
                   onClick={() => validateDmnModel(currentDmnModel())}
@@ -97,13 +98,13 @@ const EligibilityCheckDetail = () => {
               />
             </>
           </Match>
-          <Match when={screenMode() === "Testing"}>
+          <Match when={screenMode() === "testing"}>
             <EligibilityCheckTest
               eligibilityCheck={eligibilityCheck}
               testEligibility={actions.testEligibility}
             />
           </Match>
-          <Match when={screenMode() === "Publish"}>
+          <Match when={screenMode() === "publish"}>
             <PublishCheck
               eligibilityCheck={eligibilityCheck}
               publishCheck={actions.publishCheck}

builder-frontend/src/components/homeScreen/HomeScreen.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createResource } from "solid-js";
+import { createSignal, createResource, Accessor } from "solid-js";
 import { useParams } from "@solidjs/router";
 
 import FormEditorView from "./FormEditorView";
@@ -9,14 +9,15 @@ import Preview from "./preview/Preview";
 import Publish from "./Publish";
 
 import { fetchProject } from "@/api/screener";
+import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";
 
 
-type TabOption = "Manage Benefits" | "Form Editor" | "Preview" | "Publish";
+type TabOption = "manageBenefits" | "formEditor" | "preview" | "publish";
 
 function Project() {
   const params = useParams();
 
-  const [activeTab, setActiveTab] = createSignal<TabOption>("Manage Benefits");
+  const [activeTab, setActiveTab] = createSignal<TabOption>("manageBenefits");
   const [formSchema, setFormSchema] = createSignal();
   const [forceUpdate, setForceUpdate] = createSignal(0);
 
@@ -36,8 +37,17 @@ function Project() {
     fetchAndCacheProject
   );
 
-  const handleSelectTab = (tab) => {
-    setActiveTab(tab);
+  const navbarDefs: Accessor<NavbarProps> = () => {
+    return {
+      tabDefs: [
+        { key: "manageBenefits", label: "Manage Benefits", onClick: () => setActiveTab("manageBenefits") },
+        { key: "formEditor", label: "Form Editor", onClick: () => setActiveTab("formEditor") },
+        { key: "preview", label: "Preview", onClick: () => setActiveTab("preview") },
+        { key: "publish", label: "Publish", onClick: () => setActiveTab("publish") },
+      ],
+      activeTabKey: () => activeTab(),
+      titleDef: { label: project().screenerName },
+    };
   };
 
   return (
@@ -47,42 +57,20 @@ function Project() {
         <Loading/>
       ) : (
         <>
-          <div class="flex border-b border-gray-200">
-            <span class="py-2 px-4 font-bold text-gray-600">
-              {" "}
-              {project().screenerName}
-            </span>
-            {[
-              "Manage Benefits",
-              "Form Editor",
-              "Preview",
-              "Publish",
-            ].map((tab) => (
-              <button
-                class={`px-4 py-2 -mb-px text-sm font-medium border-b-2 transition-colors ${
-                  activeTab() === tab
-                    ? "border-b border-gray-700 text-gray-700 hover:bg-gray-200"
-                    : "border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-200"
-                }`}
-                onClick={() => handleSelectTab(tab)}
-              >
-                {tab.charAt(0).toUpperCase() + tab.slice(1)}
-              </button>
-            ))}
-          </div>
-          {activeTab() == "Form Editor" && (
+          <BdtNavbar navProps={navbarDefs} />
+          {activeTab() == "formEditor" && (
             <FormEditorView
               formSchema={formSchema}
               setFormSchema={setFormSchema}
             />
           )}
-          {activeTab() == "Manage Benefits" && (
+          {activeTab() == "manageBenefits" && (
             <ManageBenefits />
           )}
-          {activeTab() == "Preview" && (
+          {activeTab() == "preview" && (
             <Preview project={project} formSchema={formSchema}/>
           )}
-          {activeTab() == "Publish" && (
+          {activeTab() == "publish" && (
             <Publish
               project={project}
               refetchProject={() => setForceUpdate((prev) => prev + 1)}

builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/EligibilityCheckDetail.tsx

@@ -0,0 +1,41 @@
+import { Accessor, Show } from "solid-js";
+
+export interface NavbarProps {
+  tabDefs: NavbarButtonDef[];
+  activeTabKey: Accessor<string>;
+  titleDef: NavbarTitleDef | null;
+}
+interface NavbarTitleDef {
+  label: string;
+}
+interface NavbarButtonDef {
+  key: string;
+  label: string;
+  onClick: () => void;
+};
+
+const BdtNavbar = ({navProps}: {navProps: Accessor<NavbarProps>}) => {
+  return (
+    <div class="flex border-b border-gray-300">
+      <Show when={navProps().titleDef !== null}>
+        <div class="py-2 px-4 font-bold text-gray-700 cursor-default">
+          {navProps().titleDef!.label}
+        </div>
+      </Show>
+      {navProps().tabDefs.map((tab) => (
+        <button
+          class={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+            navProps().activeTabKey() === tab.key
+              ? "border-b border-gray-700 text-gray-700 hover:bg-gray-200"
+              : "border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-200"
+          }`}
+          onClick={tab.onClick}
+        >
+          {tab.label.charAt(0).toUpperCase() + tab.label.slice(1)}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default BdtNavbar;