Merge pull request #94 from fac30/bugfix/modal

Bugfix/UI
fac30 · Dec 17, 2024 · a95466d · a95466d
2 parents d159ae9 + 4bd1366
commit a95466d
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 46 deletions.
diff --git a/src/app/manifest.json b/src/app/manifest.json
@@ -33,8 +33,8 @@
       "form_factor": "wide"
     }
   ],
-  "theme_color": "#893FFC",
-  "background_color": "#893FFC",
+  "theme_color": "#1B192E",
+  "background_color": "#1B192E",
   "start_url": "/toolkit",
   "display": "standalone",
   "orientation": "portrait"

diff --git a/src/app/moods/components/MoodButtons.tsx b/src/app/moods/components/MoodButtons.tsx
diff --git a/src/app/moods/components/MoodSlider.tsx b/src/app/moods/components/MoodSlider.tsx
@@ -1,6 +1,8 @@
 import { NeurochemState } from "./MoodsDisplay";
 import Slider from "rc-slider";
 import "rc-slider/assets/index.css";
+import { useState } from "react";
+import clsx from "clsx";
 
 interface SliderProps {
   chem: "dopamine" | "serotonin" | "adrenaline";
@@ -12,11 +14,7 @@ interface SliderProps {
   neuroState: NeurochemState;
 }
 export default function MoodSlider({ chem, label, handleChange }: SliderProps) {
-  // const normaliseValue = (value: unknown): number => {
-  //   if (value instanceof Date) return value.getTime();
-  //   if (typeof value === "number") return value;
-  //   return 1;
-  // };
+  const [isActive, setIsActive] = useState(false);
 
   const renderText =
     label === "Step 2. How much effort does it take?" ? (
@@ -32,19 +30,27 @@ export default function MoodSlider({ chem, label, handleChange }: SliderProps) {
     );
 
   return (
-    <div className="flex flex-col mb-2">
+    <div
+      className={clsx("flex flex-col py-2 px-3 rounded-lg", {
+        "bg-gray-900": isActive,
+      })}
+    >
       <label
         id={`label-${chem}`}
         htmlFor={`slider-${chem}`}
-        className="text-white text-md mb-4"
+        className={clsx("text-md mb-4", {})}
       >
         {label}
       </label>
       <Slider
         data-testid={`slider-${chem}`}
         id={`slider-${chem}`}
         aria-labelledby={`label-${chem}`}
-        onChange={(value) => handleChange(value as number, chem)} // Ensure the value is a number
+        onChange={(value) => {
+          handleChange(value as number, chem);
+          setIsActive(true);
+        }} // Ensure the value is a number
+        onChangeComplete={() => setIsActive(false)}
         styles={{
           rail: { backgroundColor: "#3C246C" },
           track: { backgroundColor: "#893FFC" },

diff --git a/src/app/moods/components/MoodsDisplay.tsx b/src/app/moods/components/MoodsDisplay.tsx
@@ -2,11 +2,13 @@
 
 import Cube from "./Cube";
 import SliderBox from "./SliderBox";
-import MoodButtons from "./MoodButtons";
+// import MoodButtons from "./MoodButtons";
 import { useDatabase } from "@/context/DatabaseContext";
 import { useState } from "react";
 import { Datum } from "plotly.js";
 import Modal from "@/ui/shared/Modal";
+import { useRouter } from "next/navigation";
+import Button from "@/ui/shared/Button";
 
 export interface NeurochemState {
   dopamine: Datum;
@@ -15,8 +17,10 @@ export interface NeurochemState {
 }
 
 export default function MoodsDisplay() {
+  const router = useRouter();
   const database = useDatabase();
   const [modalOpen, setModalOpen] = useState(false);
+  const [insightsModalOpen, setInsightsModalOpen] = useState(false);
   const [neuroState, setNeuroState] = useState<NeurochemState>({
     dopamine: 1,
     serotonin: 1,
@@ -84,20 +88,54 @@ export default function MoodsDisplay() {
   };
 
   const forwardButton = {
-    label: "continue",
+    label: "ok",
     action: () => setModalOpen(false),
   };
+  const insightsForwardButton = {
+    label: "Yes",
+    action: () => {
+      setInsightsModalOpen(false);
+      submitMood();
+      router.push("/insights");
+    },
+  };
+  const insightsBackButton = {
+    label: "No",
+    action: () => {
+      setInsightsModalOpen(false);
+      router.push("/insights");
+    },
+  };
 
   return (
     <>
       <Cube neuroState={neuroState} />
       <SliderBox handleChange={handleChange} neuroState={neuroState} />
-      <MoodButtons submitMood={submitMood} />
+
+      <div className="flex justify-between w-10/12 max-w-xl m-auto">
+        <Button
+          label="Save"
+          className="mt-2 px-3 py-1 bg-twd-primary-purple text-white rounded"
+          onClick={() => submitMood()}
+        />
+        <Button
+          label="Go to Insights"
+          className="mt-2 px-3 py-1 bg-gray-700 text-white rounded"
+          onClick={() => setInsightsModalOpen(true)}
+        />
+      </div>
+
       <Modal
         modalOpen={modalOpen}
         forwardButton={forwardButton}
         title={"You've submitted your mood!"}
       />
+      <Modal
+        modalOpen={insightsModalOpen}
+        forwardButton={insightsForwardButton}
+        backButton={insightsBackButton}
+        title={"Save mood before continuing?"}
+      />
     </>
   );
 }
diff --git a/src/app/moods/components/SliderBox.tsx b/src/app/moods/components/SliderBox.tsx
@@ -26,7 +26,7 @@ export default function SliderBox({
     <form className="flex flex-col gap-4 w-10/12 m-auto">
       <fieldset>
         <legend className="m-auto text-xl text-center mb-3 font-semiboldbold">
-          How does this task feel right now?
+          How does what you are thinking of doing feel right now?
         </legend>
         {sliders.map((slider) => {
           return (

diff --git a/src/app/moods/loading.tsx b/src/app/moods/loading.tsx
@@ -1,3 +1,7 @@
 export default function Loading() {
-  return <div>Moods is loading...</div>;
+  return (
+    <div className="h-screen w-screen flex justify-center items-center">
+      <div className="text-3xl">Loading...</div>
+    </div>
+  );
 }
diff --git a/src/app/needs/components/NeedsModal.tsx b/src/app/needs/components/NeedsModal.tsx
@@ -65,18 +65,18 @@ export default function NeedsModal({
             Select the button that best describes meeting this need right now.
           </p>
 
-          <div className="flex justify-center gap-4 w-full">
+          <div className="flex flex-col justify-center gap-6 w-full items-center">
             <Button
               onClick={handleNegativeClick}
               label={negativeLabel}
-              className="px-4 py-2 text-lg font-medium text-white bg-gray-600 rounded-full w-36 text-nowrap"
+              className="px-4 py-4 text-xl font-normal text-white bg-gradient-to-l from-twd-primary-purple to-purple-600 rounded-lg w-full text-nowrap"
               aria-label="Negative"
             />
 
             <Button
               onClick={handlePositiveClick}
               label={positiveLabel}
-              className="px-4 py-2 text-lg font-medium text-white bg-twd-primary-purple rounded-full w-36 text-nowrap"
+              className="px-4 py-4 text-xl font-normal text-white bg-gradient-to-r from-twd-primary-purple to-purple-600 rounded-lg w-full text-nowrap"
               aria-label="Positive"
             />
           </div>

diff --git a/src/app/toolkit/add-tool/components/AddToolHeader.tsx b/src/app/toolkit/add-tool/components/AddToolHeader.tsx
@@ -31,15 +31,15 @@ export default function Header() {
   };
 
   const modalForwardButton = {
-    label: "Yes, leave",
+    label: "Yes",
     action: () => {
       setModalOpen(false);
       router.push("/toolkit");
     },
   };
 
   const modalBackButton = {
-    label: "No, stay",
+    label: "No",
     action: () => setModalOpen(false),
   };
 

diff --git a/src/app/toolkit/components/SortableItem.tsx b/src/app/toolkit/components/SortableItem.tsx
@@ -58,7 +58,7 @@ export default function SortableItem({
               e.stopPropagation();
               handleToggle(item.id);
             }}
-            className="h-5 w-5 appearance-none border-2 border-white rounded bg-twd-background checked:bg-white checked:border-white focus:ring focus:ring-twd-primary-purple checked:after:content-['✔']"
+            className="h-6 w-6 appearance-none border-2 border-white rounded bg-twd-background checked:bg-white checked:border-white focus:ring focus:ring-twd-primary-purple checked:after:text-xl checked:after:content-['✔'] checked:after:text-black"
           />
           <p
             className={`text-lg ${
@@ -80,7 +80,7 @@ export default function SortableItem({
             />
           ) : (
             <div className="h-10 w-10 flex items-center justify-center bg-twd-background rounded">
-            {/* Use a Heroicon as a placeholder */}
+              {/* Use a Heroicon as a placeholder */}
               <PhotoIcon className="h-10 w-10 text-slate-300" />
             </div>
             // <div className="h-10 w-10"></div> // Reserve space when no image

diff --git a/src/ui/shared/Header.tsx b/src/ui/shared/Header.tsx
@@ -5,6 +5,14 @@ import { useRouter } from "next/navigation";
 import { ChevronLeftIcon } from "@heroicons/react/24/outline";
 import DownloadButton from "./DownloadButton";
 
+import {
+  HomeIcon,
+  PresentationChartLineIcon,
+  ChartBarIcon,
+  PuzzlePieceIcon,
+  WrenchIcon,
+} from "@heroicons/react/24/outline";
+
 interface HeaderProps {
   title: string;
   description?: string;
@@ -24,6 +32,18 @@ export function Header({
     router.back();
   };
 
+  const iconMapping: Record<string, React.ReactNode> = {
+    Home: <HomeIcon className="w-6 h-6 text-white" />,
+    "Decision Maker": (
+      <PresentationChartLineIcon className="w-6 h-6 text-white" />
+    ),
+    Toolkit: <WrenchIcon className="w-6 h-6 text-white" />,
+    Needs: <PuzzlePieceIcon className="w-6 h-6 text-white" />,
+    Insights: <ChartBarIcon className="w-6 h-6 text-white" />,
+  };
+
+  const selectedIcon = iconMapping[title] || null;
+
   return (
     <header className="flex items-center justify-between px-5 pt-3 pb-1">
       <div className="flex items-center align-middle gap-1 w-full">
@@ -32,6 +52,7 @@ export function Header({
             {<ChevronLeftIcon className="w-8 h-8" />}
           </button>
         )}
+        <div className="mr-4">{selectedIcon}</div>
         <h1
           className={clsx("text-lg font-bold text-white sm:text-xl", {
             "ml-auto": isInfoPage,