Merge pull request #107 from fac30/JasonWarrenUK-patch-1

New Action Buttopn bug & misc tweaks
fac30 · Dec 18, 2024 · d4d3603 · d4d3603
2 parents 5730cc3 + 26af30e
commit d4d3603
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 49 deletions.
diff --git a/src/app/needs/next-actions/components/NextActionsDisplay.tsx b/src/app/needs/next-actions/components/NextActionsDisplay.tsx
@@ -239,21 +239,13 @@ export default function NextActionsDisplay() {
                     To meet a need for {changeCase(need.name, "lower")}, which actions can you take next?
                   </h4>
 
-                  { actions.length > 0
-                    ? (
-                      <NextActionsSection
-                        need={need}
-                        actions={actions}
-                        onToggleAction={onToggleAction}
-                        onDeleteAction={onDeleteAction}
-                        mode={mode}
-                        handleAddAction={handleAddAction}
-                      />
-                    )
-                    : (<p className="text-sm text-gray-500 ml-6">
-                      No next actions available for this need.
-                    </p>)
-                  }
+                  <NextActionsSection need={need}
+                    actions={actions}
+                    onToggleAction={onToggleAction}
+                    onDeleteAction={onDeleteAction}
+                    mode={mode}
+                    handleAddAction={handleAddAction}
+                  />
                 </div>
               );
             })}

diff --git a/src/app/needs/next-actions/components/NextActionsSection.tsx b/src/app/needs/next-actions/components/NextActionsSection.tsx
@@ -38,43 +38,60 @@ export default function NextActionsSection({
 
   return (
     <>
-      <div className="mb-6 flex gap-5 flex-wrap">
-        {actions.map((action) => {
-          const highlighted = new Date(action.selectedExpiry) > new Date();
+      { actions.length > 0
+        ? <div className="mb-6 flex gap-5 flex-wrap">
+          {actions.map((action) => {
+            const highlighted = new Date(action.selectedExpiry) > new Date();
 
-          return (
-            <Button label={action.name}
-              key={action.id}
-              className={ mode === "destroy"
-                ? "bg-twd-cube-red text-black font-normal"
-                : highlighted
-                  ? "bg-twd-primary-purple text-black font-normal"
-                  : "bg-gray-600 text-white font-normal"
-              }
-              onClick={() => (mode === "destroy"
-                ? onDeleteAction(action)
-                : onToggleAction(action)
-              )}
-            />
-          );
-        })}
+            return (
+              <Button label={action.name}
+                key={action.id}
+                className={ mode === "destroy"
+                  ? "bg-twd-cube-red text-black font-normal"
+                  : highlighted
+                    ? "bg-twd-primary-purple text-black font-normal"
+                    : "bg-gray-600 text-white font-normal"
+                }
+                onClick={() => (mode === "destroy"
+                  ? onDeleteAction(action)
+                  : onToggleAction(action)
+                )}
+              />
+            );
+          })}
 
-        <button aria-label="Add Action"
-          onClick={() => setModalOpen(true)}
-          className="flex justify-center items-center"
-        >
-          <PlusCircleIcon className="w-7 m-auto" />
-        </button>
-      </div>
+          <button aria-label="Add Action"
+            onClick={() => setModalOpen(true)}
+            className="flex justify-center items-center"
+          >
+            <PlusCircleIcon className="w-7 m-auto"/>
+          </button>
+        </div>
+        : (
+          <div className="flex gap-5 flex-wrap items-center">
+            <p className="text-sm text-gray-500 ml-6">
+              No next actions available for this need.
+            </p>
+
+            <button aria-label="Add Action"
+              onClick={() => setModalOpen(true)}
+              className="flex justify-center items-center"
+            >
+              <PlusCircleIcon className="w-7 m-auto"/>
+            </button>
+          </div>
+        )
+      }
 
       <Modal title="Add a New Action"
-        inputModal={true}
-        modalOpen={modalOpen}
+        inputModal={ true }
+        modalOpen={ modalOpen }
         placeholder="What action might help meet this need?"
-        handleInputChange={handleInputChange}
-        forwardButton={{ label: "Add", action: handleSubmitAction }}
-        backButton={{
-          label: "Cancel",
+        handleInputChange={ handleInputChange }
+        forwardButton={{ label: "Add",
+          action: handleSubmitAction
+        }}
+        backButton={{ label: "Cancel",
           action: () => {
             setNewAction("");
             setModalOpen(false);

diff --git a/src/app/toolkit/info/categories-info/page.tsx b/src/app/toolkit/info/categories-info/page.tsx
@@ -26,7 +26,7 @@ export default function CategoriesInfoPage() {
     return (
         <>
           {/* Header */}
-          <Header title="Categories" isInfoPage={true}/>
+          <Header title="Tags" isInfoPage={true}/>
           <div className=" text-white min-h-screen px-10 py-6">
 
           {/* Subheader */}

diff --git a/src/app/toolkit/info/page.tsx b/src/app/toolkit/info/page.tsx
@@ -57,7 +57,7 @@ export default function ToolkitInfoPage() {
             <div className="mt-10">
               <Link href="/toolkit/info/categories-info" 
                 className="bg-twd-primary-purple text-white text-base px-6 py-3 rounded-full font-semibold">
-                Go to Tabs
+                Go to Tags
               </Link>
             </div>