fix search field behavior

frontend/src/App.css

@@ -28,6 +28,10 @@
     @apply font-semibold mb-2 mt-4;
   }
 
+  .label {
+    @apply text-gray-600
+  }
+
   /* buttons */
   .primary-button {
     @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600 whitespace-nowrap
@@ -41,15 +45,11 @@
     @apply bg-gray-600  hover:bg-gray-800 text-white shadow-md rounded px-4 py-2 whitespace-nowrap
   }
 
-  /* input field */
+  /* input fields like input and textarea */
   .input-field {
     @apply p-2 w-full border rounded-md placeholder-gray-400 border-gray-600 hover:border-blue-600 transition-colors text-gray-600 focus:outline-none focus:border-blue-800;
   }
 
-  .text-area {
-    @apply border p-2 w-full mb-2 rounded placeholder-gray-400;
-  }
-
   /* groups */
   .button-group{
     @apply flex gap-4 mt-4;

frontend/src/components/basics/SearchField.tsx

@@ -1,8 +1,9 @@
+import { useState } from "react";
+
 /**
  * Custom search field component including a clear search functionality
  */
 type SearchFieldProps = { 
-    searchString : string
     onSearchStringChanged: (searchString : string) => void
 }
 
@@ -10,10 +11,13 @@ type SearchFieldProps = {
  * @param SearchFieldProps consisting of an initial searchString and an onSearchStringChanged handler
  * @returns Custom search field component
  */
-export default function SearchField({searchString, onSearchStringChanged} : SearchFieldProps){
-    const setSearchString = (newSearchString : string) => {
-        searchString = newSearchString;
-        onSearchStringChanged(searchString)
+export default function SearchField({onSearchStringChanged} : SearchFieldProps){
+    const [currentSearchString, setCurrentSearchString] = useState<string>("")
+    
+    const changeSearchString = (newSearchString : string) => {
+        console.log(newSearchString);
+        setCurrentSearchString(newSearchString);
+        onSearchStringChanged(newSearchString)
     }
 
     return (
@@ -26,15 +30,15 @@ export default function SearchField({searchString, onSearchStringChanged} : Sear
             className="input-field pl-10 pr-10"
             type="text"
             placeholder="Search"
-            value={searchString}
-            onChange={ e => setSearchString(e.target.value) }
+            value={currentSearchString}
+            onChange={ e => changeSearchString(e.target.value) }
         />
         {/* Right icon: X 
             Clears search string on click
           */}
         <button 
             className="absolute right-0 inset-y-0 flex items-center"
-            onClick = { () => setSearchString("") }
+            onClick = { () => changeSearchString("") }
         >
             <svg
             xmlns="http://www.w3.org/2000/svg"

frontend/src/components/recipes/RecipeListPage.tsx

@@ -46,7 +46,7 @@ export default function RecipeListPage() {
           <h1 className="content-title text-blue-900">Recipes</h1>
           <div className="flex columns-4 content-stretch gap-2 items-center">
             {/* Number of recipes inlist */}
-            <label className="text-gray-500 w-2/3">{recipeList.length} Recipes</label>
+            <label className="label w-2/3">{recipeList.length} Recipes</label>
             {/* Search field */}
             <SearchField 
               searchString=""