From 00a6729295ce8a9209faeadd9d2004fb956386bf Mon Sep 17 00:00:00 2001
From: Robin1999Stark <r.s.mar@gmx.de>
Date: Fri, 30 Aug 2024 02:01:19 +0200
Subject: [PATCH] update frontend

---
 Frontend/frontend/src/App.tsx                   |  4 ++--
 .../frontend/src/Components/MealDragElement.tsx | 17 ++++++++++++-----
 .../frontend/src/Views/IngredientsOverView.tsx  |  4 ++--
 Frontend/frontend/src/Views/MealsOverview.tsx   |  4 ++--
 Frontend/frontend/src/Views/TagsOverView.tsx    |  5 ++---
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/Frontend/frontend/src/App.tsx b/Frontend/frontend/src/App.tsx
index c2fe3a0d..cb11a0ca 100644
--- a/Frontend/frontend/src/App.tsx
+++ b/Frontend/frontend/src/App.tsx
@@ -133,10 +133,10 @@ function App() {
           </Suspense>
         </main>
         {/* Placeholder for mobile bottom nav bar */}
-        <span className={`${windowSize.width > SIZE_MOBILE ? 'hidden' : 'block'} h-[90px]`}>
+        <span className={`${windowSize.width > SIZE_MOBILE ? 'hidden' : 'block'} h-[70px]`}>
         </span>
         {/* Placeholder for mobile bottom nav bar */}
-        <span className={`${windowSize.width <= SIZE_MOBILE && showMITNav ? 'block' : 'hidden'} h-[4.2rem]`}>
+        <span className={`${windowSize.width <= SIZE_MOBILE && showMITNav ? 'block' : 'hidden'} h-[70px]`}>
         </span>
       </span>
     </>
diff --git a/Frontend/frontend/src/Components/MealDragElement.tsx b/Frontend/frontend/src/Components/MealDragElement.tsx
index ce4d3411..5b01cc48 100644
--- a/Frontend/frontend/src/Components/MealDragElement.tsx
+++ b/Frontend/frontend/src/Components/MealDragElement.tsx
@@ -12,6 +12,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import CustomDatePicker from './CustomDatePicker';
 import LoadingSpinner from './LoadingSpinner';
 import { getMeal } from '../Endpoints/MealService';
+import { useNavigate } from 'react-router-dom';
 
 type Props = {
     mealID: number
@@ -39,6 +40,8 @@ function MealDragElement({ mealID, dragProvided, snapshot, date, customStyle, on
     const [imageError, setImageError] = useState<boolean>(false);
     const datePickerRef = useRef<HTMLDivElement>(null);
 
+    const navigate = useNavigate();
+
     useEffect(() => {
         async function fetchMeal() {
             try {
@@ -147,17 +150,21 @@ function MealDragElement({ mealID, dragProvided, snapshot, date, customStyle, on
                         )}
                     </figure>
                     {
-                        meal !== undefined ? <a className='text-[#011413] underline' href={`/meals/${meal!.id}`}>
-                            <h1 className='text-start'>
+                        meal !== undefined ?
+                            <h1
+                                onClick={() => navigate(`/meals/${meal!.id}`)}
+                                className='text-start text-[#011413] underline'>
                                 {meal?.title}
                             </h1>
-                        </a> : <LoadingSpinner />
+                            : <LoadingSpinner />
                     }
                 </article>
                 {
                     showMore ?
-                        <Menu menuButton={<MenuButton><IoIosMore className='size-5 text-[#011413] mr-3' /></MenuButton>} transition>
-                            <MenuItem>Öffnen</MenuItem>
+                        <Menu menuButton={<MenuButton><IoIosMore className='size-5 text-[#011413] mr-3 cursor-pointer' /></MenuButton>} transition>
+                            <MenuItem onClick={() => {
+                                navigate(`/meals/${meal!.id}`)
+                            }}>Öffnen</MenuItem>
                             <MenuItem onClick={() => {
 
                                 handleRemoveMeal(date, mealID)
diff --git a/Frontend/frontend/src/Views/IngredientsOverView.tsx b/Frontend/frontend/src/Views/IngredientsOverView.tsx
index 26f886a7..437a9cca 100644
--- a/Frontend/frontend/src/Views/IngredientsOverView.tsx
+++ b/Frontend/frontend/src/Views/IngredientsOverView.tsx
@@ -149,9 +149,9 @@ function IngredientsOverView() {
                                 clearTimeout(debounceTimeout);
                             }
                         }}
-                        autoFocus={true}
+                        autoFocus={false}
                         className='bg-white w-full focus:ring-0 py-2 text-start shadow-md px-6 rounded-full mr-2'
-                        placeholder='Nach Zutaten Suchen ...' />
+                        placeholder='Zutaten Suchen ...' />
                     <button
                         className='p-3 text-lg bg-[#046865] text-white rounded-full'
                         onClick={() => searchForIngredients(searchString)} >
diff --git a/Frontend/frontend/src/Views/MealsOverview.tsx b/Frontend/frontend/src/Views/MealsOverview.tsx
index 2f7417d0..aba9c289 100644
--- a/Frontend/frontend/src/Views/MealsOverview.tsx
+++ b/Frontend/frontend/src/Views/MealsOverview.tsx
@@ -178,9 +178,9 @@ function MealsOverview() {
                                 clearTimeout(debounceTimeout);
                             }
                         }}
-                        autoFocus={true}
+                        autoFocus={false}
                         className='bg-white w-full focus:ring-0 py-2 text-start shadow-md px-6 rounded-full mr-2'
-                        placeholder='Nach Rezepten Suchen ...' />
+                        placeholder='Rezepte Suchen ...' />
                     <button
                         className='p-3 text-lg bg-[#046865] text-white rounded-full'
                         onClick={() => searchForMeals(searchString)} >
diff --git a/Frontend/frontend/src/Views/TagsOverView.tsx b/Frontend/frontend/src/Views/TagsOverView.tsx
index 032bf2fa..cb9f531b 100644
--- a/Frontend/frontend/src/Views/TagsOverView.tsx
+++ b/Frontend/frontend/src/Views/TagsOverView.tsx
@@ -72,10 +72,9 @@ function TagsOverView() {
                             setSearchString(e.target.value);
                             searchForTags(e.target.value.trim());
                         }}
-                        autoFocus={true}
+                        autoFocus={false}
                         className='bg-white w-full focus:ring-0 py-2 text-start shadow-md px-6 rounded-full mr-2'
-                        placeholder='Nach Tags Suchen ...' />
-
+                        placeholder='Tags Suchen ...' />
                     <button
                         className='p-3 text-lg bg-[#046865] text-white rounded-full'
                         onClick={() => searchForTags(searchString)} >