Style/animations

src/app/insights/components/InsightsDisplay.tsx

@@ -180,7 +180,7 @@ export default function InsightsDisplay() {
               }
               className={clsx(
                 "font-normal",
-                isActive && "bg-twd-primary-purple text-white"
+                isActive && "bg-twd-secondary-purple text-white"
               )}
             />
           );

src/app/moods/components/MoodSlider.tsx

@@ -31,9 +31,12 @@ export default function MoodSlider({ chem, label, handleChange }: SliderProps) {
 
   return (
     <div
-      className={clsx("flex flex-col py-2 px-3 rounded-lg", {
-        "bg-gray-900": isActive,
-      })}
+      className={clsx(
+        "flex flex-col py-2 px-3 rounded-lg transition-colors duration-300 ease-in-out",
+        {
+          "bg-gray-900": isActive,
+        }
+      )}
     >
       <label
         id={`label-${chem}`}

src/app/moods/components/MoodsDisplay.tsx

@@ -89,7 +89,7 @@ export default function MoodsDisplay() {
   };
 
   const forwardButton = {
-    label: "ok",
+    label: "Close",
     action: () => setModalOpen(false),
   };
   const insightsForwardButton = {

src/app/needs/components/NeedsDisplay.tsx

@@ -84,9 +84,13 @@ export default function NeedsDisplay() {
 
   const handleCloseNeedsModal = () => {
     setNeedsModalOpen(false);
-    setSelectedNeed(null);
     setNeedsStep(1);
     resetNeuros();
+
+    // This is so that the animation when closing NeedsModal doesn't look ugly
+    setTimeout(() => {
+      setSelectedNeed(null);
+    }, 100);
   };
 
   const handleCloseDeselectModal = () => {
@@ -268,16 +272,16 @@ export default function NeedsDisplay() {
   useEffect(() => {
     switch (needsStep) {
       case 1:
-        setPositiveLabel("urgent");
-        setNegativeLabel("not urgent");
+        setPositiveLabel("Urgent");
+        setNegativeLabel("Not urgent");
         break;
       case 2:
         setPositiveLabel("A lot of effort");
         setNegativeLabel("A little effort");
         break;
       case 3:
-        setPositiveLabel("worth doing");
-        setNegativeLabel("not worth doing");
+        setPositiveLabel("Worth doing");
+        setNegativeLabel("Not worth doing");
         break;
     }
   }, [needsStep]);
@@ -296,7 +300,7 @@ export default function NeedsDisplay() {
           />
         ))}
       </div>
-      
+
       <Button
         onClick={openNextActions}
         label="Next Actions"
@@ -315,9 +319,6 @@ export default function NeedsDisplay() {
         needsStep={needsStep}
         positiveLabel={positiveLabel}
         negativeLabel={negativeLabel}
-        urgent={urgent}
-        effortful={effortful}
-        worthDoing={worthDoing}
         handlePositiveClick={handlePositiveClick}
         handleNegativeClick={handleNegativeClick}
         handleBackClick={handleBackClick}
@@ -338,4 +339,4 @@ export default function NeedsDisplay() {
       />
     </>
   );
-}
+}

src/app/needs/components/NeedsModal.tsx

@@ -7,9 +7,6 @@ interface NeedsModalProps {
   modalOpen: boolean;
   title?: string;
   needsStep: number;
-  urgent: number;
-  effortful: number;
-  worthDoing: number;
   positiveLabel: string;
   negativeLabel: string;
   handlePositiveClick: () => void;
@@ -29,11 +26,17 @@ export default function NeedsModal({
   handleBackClick,
   handleCloseClick,
 }: NeedsModalProps) {
-  if (!modalOpen) return null;
-
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 z-50">
-      <div className="w-11/12 max-w-lg bg-gray-900 border border-gray-700 rounded-lg p-6 shadow-lg">
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 transition-opacity duration-300 ${
+        modalOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+      }`}
+    >
+      <div
+        className={`w-11/12 max-w-lg bg-gray-900 border border-gray-700 rounded-lg p-6 shadow-lg transform transition-transform duration-300 ${
+          modalOpen ? "scale-100" : "scale-95"
+        }`}
+      >
         <div className="relative">
           <p className="text-center text-white mb-4">Step {needsStep} of 3</p>
 
@@ -57,7 +60,11 @@ export default function NeedsModal({
         </div>
 
         <div className="flex flex-col w-full items-center py-6 justify-between h-full">
-          <p className="text-xl w-10/12 text-center text-white mb-5">
+          <p
+            className={`text-xl w-10/12 text-center text-white mb-5 ${
+              modalOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+            }`}
+          >
             {title}
           </p>
 

src/ui/shared/Modal.tsx

@@ -33,40 +33,46 @@ export default function Modal({
 
   return (
     <>
-      {modalOpen && (
-        <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 z-50">
-          <div className="w-11/12 max-w-lg bg-gray-900 border border-gray-700 rounded-lg p-6 shadow-lg">
-            <div className="flex flex-col items-center">
-              {inputModal ? (
-                <input
-                  type="text"
-                  placeholder={placeholder}
-                  className="w-9/12 px-3 py-2 mt-4 text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-twd-primary-purple addToolInput"
-                  onChange={handleInputChange}
+      <div
+        className={`fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 transition-opacity duration-300 ${
+          modalOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+      >
+        <div
+          className={`w-11/12 max-w-lg bg-gray-900 border border-gray-700 rounded-lg p-6 shadow-lg transform transition-transform duration-300 ${
+            modalOpen ? "scale-100" : "scale-95"
+          }`}
+        >
+          <div className="flex flex-col items-center">
+            {inputModal ? (
+              <input
+                type="text"
+                placeholder={placeholder}
+                className="w-9/12 px-3 py-2 mt-4 text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-twd-primary-purple addToolInput"
+                onChange={handleInputChange}
+              />
+            ) : (
+              <p className="mt-4 text-xl text-center text-white">{title}</p>
+            )}
+            <div className="flex justify-center gap-4 mt-6 w-full">
+              {backButton && (
+                <Button
+                  onClick={backButton.action}
+                  label={backButton.label}
+                  className="px-4 py-2 text-lg font-medium text-white bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-400 w-36 text-nowrap"
+                />
+              )}
+              {forwardButton && (
+                <Button
+                  onClick={forwardButton.action}
+                  label={forwardButton.label}
+                  className="px-4 py-2 text-lg font-medium text-white bg-twd-primary-purple rounded-full focus:outline-none focus:ring-2 focus:ring-purple-400 w-36 text-nowrap"
                 />
-              ) : (
-                <p className="mt-4 text-xl text-center text-white">{title}</p>
               )}
-              <div className="flex justify-center gap-4 mt-6 w-full">
-                {backButton && (
-                  <Button
-                    onClick={backButton.action}
-                    label={backButton.label}
-                    className="px-4 py-2 text-lg font-medium text-white bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-400 w-36 text-nowrap"
-                  />
-                )}
-                {forwardButton && (
-                  <Button
-                    onClick={forwardButton.action}
-                    label={forwardButton.label}
-                    className="px-4 py-2 text-lg font-medium text-white bg-twd-primary-purple rounded-full focus:outline-none focus:ring-2 focus:ring-purple-400 w-36 text-nowrap"
-                  />
-                )}
-              </div>
             </div>
           </div>
         </div>
-      )}
+      </div>
     </>
   );
 }