Merge pull request #202 from InternAcademy/dev

Release front-end fixes

.gitignore

@@ -407,3 +407,5 @@ src/server/CookingApp/Properties/launchSettings.json
 src/server/CookingApp/Properties/launchSettings.json
 /src/server/CookingApp/appsettings.Development.json
 /src/server/CookingApp/Properties/launchSettings.json
+/src/server/CookingApp/Properties
+/src/server/CookingApp/appsettings.Production.json

src/client/CookingAppReact/src/components/chat/BotResponse.jsx

@@ -48,13 +48,13 @@ export default function BotResponse({ message }) {
               <SparklesIcon className="size-6 opacity-70 mr-2 text-primaryText" />
               {isPending ? (
                 <span className="text-primaryText">
-                  Crafting Meal
+                  Generating Meal
                   <span className="dot-1">.</span>
                   <span className="dot-2">.</span>
                   <span className="dot-3">.</span>
                 </span>
               ) : (
-                "Use Meal Crafter"
+                "Generate Meal"
               )}
             </div>
           </div>

src/client/CookingAppReact/src/components/chat/ChatInput.jsx

@@ -8,15 +8,20 @@ import useChat from "../../hooks/useChat";
 import { uiActions } from "../../store/uiSlice";
 import toast from "react-hot-toast";
 import { useRef } from "react";
+import Tooltip from "../ui/tooltip";
+
 export default function ChatInput() {
   const input = useSelector((state) => state.ui.input);
   const fileAttacher = useRef();
   const selectedChat = useSelector((state) => state.user.selectedChat);
   const isInitial = useSelector((state) => state.ui.isMessageWarningShowed);
   const role = useSelector((state) => state.user.role);
   const { mutate, isPending, error, isError } = useChat();
+  const isOpenRecipes = useSelector((state) => state.ui.recipesOpen);
+  const isOpenSideBar = useSelector((state) => state.ui.sidebarOpen);
   const dispatch = useDispatch();
   const [base64Image, setBase64Image] = useState(null);
+  const [maxChars] = useState(200);
   useEffect(() => {
     if (role.limitations.chatGeneration === 10 && !isInitial) {
       toast(
@@ -104,7 +109,11 @@ export default function ChatInput() {
 
   return (
     <section className="flex flex-col items-center justify-center mb-5 w-full gap-1 ">
-      <ul className="flex w-4/5 md:w-3/5 lg:w-2/5 items-center secondary rounded-full gap-2  py-2 px-4 bg-active text-primaryText">
+      <ul className={`flex 
+      ${isOpenRecipes || isOpenSideBar ? "w-4/5 md:w-4/5 lg:w-3/5 xl:w-3/5" : "w-4/5 md:w-3/5 xl:w-2/5"}
+       items-center secondary rounded-full gap-2  py-2 px-4 bg-active text-primaryText`}>
+
+      <Tooltip tooltipText="Attach Image">
         <li>
           <input
             type="file"
@@ -113,21 +122,29 @@ export default function ChatInput() {
             ref={fileAttacher}
             onChange={(event) => handleImageAttachment(event)}
           />
+
           <PaperClipIcon
             className="size-6 cursor-pointer"
             onClick={handleClick}
           />
         </li>
+        </Tooltip>
         <li className="w-full">
           <input
             type="text"
             value={input}
             placeholder="What do you want to cook today?"
             onKeyDown={handleChange}
             onChange={handleChange}
+            maxLength={maxChars}
             className="w-full outline-none bg-active text-primaryText"
           />
         </li>
+        <p className="text-sm text-right text-gray-500">
+            {maxChars - input.length}/200
+        </p>
+
+      <Tooltip tooltipText="Send">
         <li>
           <PaperAirplaneIcon
             className={`size-10 rounded-xl p-2 duration-200 ${
@@ -136,10 +153,10 @@ export default function ChatInput() {
             onClick={handleSubmission}
           />
         </li>
+        </Tooltip>
       </ul>
       <p className="hidden md:inline text-sm opacity-80 text-primaryText">
-        Meal Master may occasionally make mistakes. Please verify any important
-        information.
+        Meal Master may occasionally make mistakes.
       </p>
     </section>
   );

src/client/CookingAppReact/src/components/navbar/Navbar.jsx

@@ -1,15 +1,14 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Bars3BottomLeftIcon } from "@heroicons/react/24/outline";
 import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
 import { UserIcon } from "@heroicons/react/24/outline";
-import { ClipboardDocumentCheckIcon } from "@heroicons/react/24/outline";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { uiActions } from "../../store/uiSlice";
 import { userActions } from "@/store/userSlice";
-import Unlimited from "../../assets/unlimited.png";
-import SignOutButton from "../auth/SignOutButton";
 import UserMenu from "../userMenu/UserMenu";
+import MealIcon from "../ui/mealIcon";
+import Tooltip from "../ui/tooltip";
 
 export default function Navbar() {
   const dispatch = useDispatch();
@@ -37,82 +36,94 @@ export default function Navbar() {
     dispatch(uiActions.toggleDropdown());
   };
 
+  const [showTooltip, setShowTooltip] = useState(false);
+  const hoverTimeoutRef = useRef(null);
+
+  const handleMouseEnter = () => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setShowTooltip(true);
+    }, 400); // 1 second delay
+  };
+
+  const handleMouseLeave = () => {
+    clearTimeout(hoverTimeoutRef.current);
+    setShowTooltip(false);
+  };
+
   return (
-    <nav className="text-primaryText ">
-      <ul className={`flex flex-row w-full py-3 justify-between sticky`}>
-        <li
-          className={`flex flex-row pl-6 items-center gap-2 ${
-            sidebarOpen ? "hidden" : "visible"
-          }`}
-        >
+    <nav className="text-primaryText">
+    <ul className={`flex flex-row w-full py-3 justify-between items-center sticky`}>
+      <li
+        className={`flex flex-row pl-6 items-center gap-2`}
+      >
+        <div className={`${
+          sidebarOpen ? "hidden" : "flex items-center"
+        }`}>
+        <Tooltip tooltipText="Sidebar">
           <Bars3BottomLeftIcon
-            className="size-10 rounded-xl hover:bg-base hover:cursor-pointer p-2"
+            className="size-10  rounded-xl hover:bg-base hover:cursor-pointer p-2"
             onClick={handleSidebar}
           />
+        </Tooltip>
+
+        <Tooltip tooltipText="New Chat">
           <ChatBubbleOvalLeftEllipsisIcon
-            className="size-10 hidden sm:block rounded-xl hover:bg-base hover:cursor-pointer p-2"
+            className="size-10 hidden xxs:block rounded-xl hover:bg-base hover:cursor-pointer p-2"
             onClick={handleNewChat}
           />
-          <h2 className="font-semibold text-sm xs:text-xl flex flex-row justify-center content-center text-center h-full">
-            <span className="text-center px-2 py-2 xs:py-1">Meal Master </span>
-            <span
-              className={`${
-                role === "Free" ? "bg-base " : "bg-primary"
-              } text-center  rounded-full flex justify-center items-center px-4 py-1`}
-            >
-              {role}
-            </span>
-          </h2>
-          {/* <h2 className="font-semibold text-xl flex flex-row justify-center items-center text-center content-center gap-2">
-            <div className="flex justify-center items-center text-center border-2 border-orange-300 primaryText p-3 font-semibold text-xl rounded-full w-fit h-10">
-                Meal Master
-            </div>
-          </h2> */}
-        </li>
-        <div
-          className={`flex flex-row pl-6 items-center gap-2 ${
-            sidebarOpen ? "block" : "hidden"
-          }`}
-        >
-          <h2 className="font-semibold text-xl flex flex-row justify-center content-center text-center">
-            <span className="text-center px-2 py-1 text-primaryText">
-              Meal Master{" "}
-            </span>
-            <span
-              className={`${
-                role === "Free" ? "bg-base" : "bg-primary"
-              } text-primaryText rounded-full px-4 py-1`}
-            >
-              {role}
-            </span>
-          </h2>
-          {/* <h2 className="font-semibold text-xl flex flex-row justify-center items-center text-center content-center gap-2">
-            <div className="flex justify-center items-center text-center border-2 border-orange-300 primaryText p-3 font-semibold text-xl rounded-full w-fit h-10">
-                Meal Master
-            </div>
-          </h2> */}
+        </Tooltip>
         </div>
-        <li
-          className={`right-0 sticky flex flex-row pr-10 items-center gap-5 ${
-            recipesOpen ? "invisible" : ""
-          }`}
-        >
-          <ClipboardDocumentCheckIcon
-            className="size-10 rounded-xl hidden sm:block hover:bg-base hover:cursor-pointer p-2"
+        <h2 className={`font-semibold hidden md:flex text-lg flex-row justify-center items-center text-center h-full`}>
+          <span className={`hidden md:block text-center px-2 py-2 xs:py-1`}>Meal Master </span>
+          <span
+            className={`${
+              role === "Free" ? "bg-base " : "bg-primary"
+            } text-center rounded-full flex justify-center items-center px-4 py-1`}
+          >
+            {role}
+          </span>
+        </h2>
+      </li>
+      <li
+        className={` font-semibold flex md:hidden text-lg flex-row justify-center items-center text-center h-full`}
+      >
+        <h2 className="font-semibold text-lg flex flex-row justify-center content-center text-center">
+          <span className={`hidden md:block text-center px-2 py-2 xs:py-1`}>Meal Master </span>
+          <span
+            className={`${
+              role === "Free" ? "bg-base" : "bg-primary"
+            } text-center rounded-full flex justify-center items-center px-4 py-1`}
+          >
+            {role}
+          </span>
+        </h2>
+      </li>
+
+      <li
+        className={`flex flex-row items-center justify-center content-center text-center gap-2 visible pr-6 ${
+          recipesOpen ? "invisible" : ""
+        }`}
+      >
+        <Tooltip tooltipText="My Meals">
+          <div
+            className="w-10 rounded-xl hidden xxs:block hover:cursor-pointer p-2 hover:bg-base"
             onClick={handleRecipes}
-          />
-          <div className="relative">
+          >
+            <MealIcon className="group-hover:bg-base" />
+          </div>
+        </Tooltip>
+          <Tooltip tooltipText="User Menu">
             <UserIcon
               className="size-10 rounded-xl hover:bg-base hover:cursor-pointer p-2"
               onClick={(e) => {
                 e.stopPropagation();
                 toggleDropDown();
               }}
             />
-            <UserMenu isOpen={dropDownOpen} toggleDropDown={toggleDropDown} />
-          </div>
-        </li>
-      </ul>
-    </nav>
+          </Tooltip>
+          <UserMenu isOpen={dropDownOpen} toggleDropDown={toggleDropDown} />
+      </li>
+    </ul>
+  </nav>
   );
 }

src/client/CookingAppReact/src/components/recipes/MyRecipes.jsx

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
 import { UserIcon } from "@heroicons/react/24/outline";
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
+import { ChevronLeftIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { uiActions } from "../../store/uiSlice";
 import RecipeCard from "./RecipeCard";
 import { getToken } from "@/msal/msal";
@@ -10,6 +10,7 @@ import { Skeleton } from "../ui/skeleton";
 import useFirstPageRecipes from "@/hooks/useFirstPageRecipes";
 import "../../assets/css/animations.css";
 import UserMenu from "../userMenu/UserMenu";
+import Tooltip from "../ui/tooltip";
 
 export default function MyRecipes() {
   const isOpen = useSelector((state) => state.ui.recipesOpen);
@@ -88,25 +89,34 @@ export default function MyRecipes() {
     <section
       className={`bg-base flex flex-col flex-shrink-0 ${
         isOpen ? "visible w-screen md:w-[25rem] md:relative" : "invisible w-0"
-      }  h-screen duration-300`}
+      }  h-screen md:duration-300`}
     >
       <header
         className={`flex flex-row justify-between items-center px-3 py-3 text-primaryText ${
           isOpen ? "" : "hidden"
         }`}
       >
-        <ChevronLeftIcon
-          className="size-10  rounded-xl border border-transparent   hover:border hover:border-active hover:cursor-pointer p-2"
-          onClick={handleRecipes}
-        />
-        <h1 className="text-lg text-primaryText">My Recipes</h1>
+
+      <Tooltip tooltipText="Close">
+      <XMarkIcon
+      className="size-10 rounded-xl border border-transparent hover:border hover:border-active hover:cursor-pointer p-2 md:hidden"
+      onClick={handleRecipes}
+    />
+    <ChevronLeftIcon
+      className="size-10 rounded-xl border border-transparent hover:border hover:border-active hover:cursor-pointer p-2 hidden md:block"
+      onClick={handleRecipes}
+    />
+        </Tooltip>
+        <h1 className="text-lg text-primaryText">My Meals</h1>
+        <Tooltip tooltipText="Profile">
         <UserIcon
           className="size-10 invisible md:visible rounded-xl border border-transparent  hover:border hover:border-active hover:cursor-pointer p-2"
           onClick={(e) => {
             e.stopPropagation();
             toggleDropDown();
           }}
         />
+        </Tooltip>
         <UserMenu isOpen={dropDownOpen} toggleDropDown={toggleDropDown} />
       </header>
 

src/client/CookingAppReact/src/components/recipes/RecipeCard.jsx

@@ -15,7 +15,7 @@ export default function RecipeCard({ recipe }) {
   return (
     <li
       key={recipe.id}
-      className="group flex flex-col text-primaryText bg-secondary w-full h-72 rounded-2xl pb-2  hover:cursor-pointer transition"
+      className="group flex flex-col justify-between text-primaryText bg-secondary w-full h-72 rounded-2xl pb-2  hover:cursor-pointer transition"
       onClick={handleClick}
     >
       <img
@@ -30,9 +30,10 @@ export default function RecipeCard({ recipe }) {
           {recipe.title}
         </h2>
       </div>
-      <div className="w-full px-8 mb-3 text-gray-500 transition-all invisible group-hover:visible overflow-hidden">
+      <div className="w-full px-8 text-gray-500 transition-all hidden group-hover:block overflow-hidden">
         <p className="w-full">{recipe.description}</p>
       </div>
+      <div className="mb-3"></div>
       <section className="flex flex-row justify-between mb-2">
         <div className="flex w-full flex-row justify-start gap-2 ms-4">
           <ClockIcon className="size-6" />

src/client/CookingAppReact/src/components/settings/DietaryPreferences.jsx

@@ -19,7 +19,7 @@ export default function DietaryPreferences({
 }) {
   return (
     <div className="flex flex-col md:flex-row">
-      <div className="md:w-1/2 mb-10 pb-6 m-1 bg-secondary rounded-xl border shadow-sm py-4 px-4">
+      <div className="md:w-1/2 pb-6 m-1 bg-secondary rounded-xl border shadow-sm py-4 px-4">
         <h2 className="text-lg font-semibold mb-4 primaryText">Allergens</h2>
         {allergens.length > 0 ? (
           <div className="flex flex-wrap mb-4">
@@ -62,7 +62,7 @@ export default function DietaryPreferences({
           </div>
         </button>
       </div>
-      <div className="md:w-1/2 mb-10 pb-6 bg-secondary border shadow-sm m-1 rounded-xl py-4 px-4">
+      <div className="md:w-1/2 pb-6 bg-secondary border shadow-sm m-1 rounded-xl py-4 px-4">
         <h2 className="text-lg font-semibold mb-4 primaryText">
           Disliked Foods
         </h2>

src/client/CookingAppReact/src/components/settings/Preferences.jsx

@@ -148,7 +148,7 @@ export default function Preferences() {
         setFoodPreferenceInput={setFoodPreferenceInput}
         handleAddDislikeFoodsPressEnter={handleAddDislikeFoodsPressEnter}
       />
-      <div className="flex justify-center w-full">
+      <div className="flex justify-center w-full mt-5">
         <button
           className="bg-primary font-semibold border rounded-full py-2 px-5"
           onClick={savePreferences}

src/client/CookingAppReact/src/components/settings/UserInterface.jsx

@@ -43,7 +43,6 @@ export default function UserInterface() {
             {`Current: ${language}`}
           </option>
           <option value="English">English</option>
-          <option value="German">German</option>
         </select>
         <select
           className="border rounded-lg m-1 px-4 py-3 md:w-1/2 text-sm shadow-sm bg-secondary"
@@ -53,7 +52,7 @@ export default function UserInterface() {
             {`Current: ${theme}`}
           </option>
           <option value="Light">Light</option>
-          <option value="Dark">Dark</option>
+          <option value="Dark">Dark Contrast</option>
         </select>
       </div>
     </>