From 9cb5b52ac9bfa4bacbe43210e8c45285981bbb8d Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Sun, 21 Sep 2025 10:45:24 +0200
Subject: [PATCH] replace all html buttons with button component

---
 frontend/src/App.css                          | 28 +++++++++++++------
 frontend/src/components/basics/Button.tsx     | 22 +++++++--------
 .../recipes/IngredientGroupListEditor.tsx     | 12 ++++----
 .../recipes/IngredientListEditor.tsx          | 14 ++++------
 .../components/recipes/RecipeDetailPage.tsx   |  4 +--
 .../src/components/recipes/RecipeEditor.tsx   | 18 ++++++------
 .../components/recipes/RecipeListToolbar.tsx  | 14 ++++++----
 7 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 99574de..e1c7217 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -33,16 +33,26 @@
   }
 
   /* buttons */
-  .default-button{
-    @apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 whitespace-nowrap text-gray-600
-  }hover:bg-gray-400
-  
-  .primary-button {
+  .basic-button{
+    @apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap
+  }
+  .default-button-bg {
+    @apply bg-gray-300  hover:bg-gray-400 
+  }
+  .default-button-text{
+    @apply  text-gray-600 
+  }
+  .primary-button-bg {
     @apply bg-blue-300 hover:bg-blue-400 text-gray-600
-  } 
-
-  .dark-button{
-    @apply bg-gray-600  hover:bg-gray-800 text-white shadow-md rounded px-4 py-2 whitespace-nowrap
+  }
+  .primary-button-text {
+    @apply text-gray-600
+  }
+  .dark-button-bg{
+    @apply bg-gray-600  hover:bg-gray-800
+  }
+  .dark-button-text{
+    @apply text-white
   }
 
   /* input fields like input and textarea */
diff --git a/frontend/src/components/basics/Button.tsx b/frontend/src/components/basics/Button.tsx
index 3d9b745..16922dc 100644
--- a/frontend/src/components/basics/Button.tsx
+++ b/frontend/src/components/basics/Button.tsx
@@ -1,35 +1,35 @@
 import SvgIcon, { Icon } from "./SvgIcon"
 
 type ButtonProps = {
-    onClicked: () => void,
+    onClick: () => void,
     icon?: Icon,
     text?: string,
-    buttonType : ButtonType
+    buttonType? : ButtonType
 }
 
 export const ButtonType = {
   DarkButton: {
-    textColor: "text-white",
-    backgroundColor: "bg-gray-600  hover:bg-gray-800"
+    textColor: "dark-button-text",
+    backgroundColor: "dark-button-bg"
   },
   PrimaryButton: {
-    textColor: "text-gray-600",
-    backgroundColor: "bg-blue-300 hover:bg-blue-400"
+    textColor: "primary-button-text",
+    backgroundColor: "primary-button-bg"
   },
   DefaultButton: {
-    textColor: "text-gray-600",
-    backgroundColor: "bg-gray-300 hover:bg-gray-400"
+    textColor: "default-button-text",
+    backgroundColor: "default-button-bg"
   }
 } as const;
 
 export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
 
-export default function Button ({onClicked, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
+export default function Button ({onClick: onClick, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
     return(
         <button
             type="button"
-            className={`px-4 py-2 shadow-md rounded-lg whitespace-nowrap ${buttonType.backgroundColor} ${buttonType.textColor}`}
-            onClick={onClicked}
+            className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor}`}
+            onClick={onClick}
         >
             <div className="flex items-center gap-2">
                 {/* Render icon only if defined */}
diff --git a/frontend/src/components/recipes/IngredientGroupListEditor.tsx b/frontend/src/components/recipes/IngredientGroupListEditor.tsx
index dc134d3..604ccb0 100644
--- a/frontend/src/components/recipes/IngredientGroupListEditor.tsx
+++ b/frontend/src/components/recipes/IngredientGroupListEditor.tsx
@@ -44,13 +44,11 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
               value = {ingGrp.title}
               onChange={ e => handleUpdate(index, "title", e.target.value)}
             />
-            <button
-              type="button"
-              className="dark-button"
+            <Button 
               onClick={() => handleRemove(index)}
-            >
-              Remove Group
-            </button>
+              text={"Remove Group"}
+              buttonType={ButtonType.DarkButton}
+            />
           </div>
           <IngredientListEditor
             ingredients={ingGrp.ingredientList}
@@ -59,7 +57,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
         </div>
       ))}
       <Button 
-        onClicked={handleAdd}
+        onClick={handleAdd}
         icon={Icon.Plus}
         text={"Add Ingredient Group"}
         buttonType={ButtonType.PrimaryButton}
diff --git a/frontend/src/components/recipes/IngredientListEditor.tsx b/frontend/src/components/recipes/IngredientListEditor.tsx
index 492b15f..1b10eb8 100644
--- a/frontend/src/components/recipes/IngredientListEditor.tsx
+++ b/frontend/src/components/recipes/IngredientListEditor.tsx
@@ -51,19 +51,15 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
             value={ing.name}
             onChange={e => handleUpdate(index, "name", e.target.value)}
           />
-          <button
-            type="button"
-            className="dark-button"
+          <Button 
             onClick={() => handleRemove(index)}
-          >
-            <SvgIcon
-              icon = {Icon.X}
-            />
-          </button>
+            icon={Icon.X}
+            buttonType={ButtonType.DarkButton}
+          />
         </div>
       ))}
       <Button 
-        onClicked={handleAdd}
+        onClick={handleAdd}
         icon={Icon.Plus}
         text={"Add Ingredient"}
         buttonType={ButtonType.PrimaryButton}
diff --git a/frontend/src/components/recipes/RecipeDetailPage.tsx b/frontend/src/components/recipes/RecipeDetailPage.tsx
index 2bb952b..f732760 100644
--- a/frontend/src/components/recipes/RecipeDetailPage.tsx
+++ b/frontend/src/components/recipes/RecipeDetailPage.tsx
@@ -125,13 +125,13 @@ export default function RecipeDetailPage() {
       <div className="button-group">
         <Link
           to={ getRecipeEditUrl(recipe.id) }
-          className="primary-button"
+          className="basic-button primary-button-bg primary-button-text"
         >
           Bearbeiten
         </Link>
         <Link
           to={getRecipeListUrl()}
-          className="default-button"
+          className="basic-button default-button-bg default-button-text"
         >
           Zurueck
         </Link>
diff --git a/frontend/src/components/recipes/RecipeEditor.tsx b/frontend/src/components/recipes/RecipeEditor.tsx
index 56cdd2b..8b0f564 100644
--- a/frontend/src/components/recipes/RecipeEditor.tsx
+++ b/frontend/src/components/recipes/RecipeEditor.tsx
@@ -2,6 +2,7 @@ import { useState } from "react"
 import type { Recipe } from "../../types/recipe"
 import type { IngredientGroup } from "../../types/ingredientGroup"
 import { IngredientGroupListEditor } from "./IngredientGroupListEditor"
+import Button, { ButtonType } from "../basics/Button"
 
 type RecipeEditorProps = {
   recipe: Recipe
@@ -129,18 +130,15 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
 
       <div className="button-group">
         {/* Save Button */}
-        <button
-          className="primary-button"
+        <Button 
           onClick={() => handleSave(draft)}
-        >
-          Save
-        </button>
-        <button
-          className="default-button"
+          text={"Save"}
+          buttonType={ButtonType.PrimaryButton}
+        />
+        <Button 
           onClick={() => onCancel()}
-        >
-          Cancel
-        </button>
+          text={"Cancel"}
+        />
       </div>
     </div>
     )
diff --git a/frontend/src/components/recipes/RecipeListToolbar.tsx b/frontend/src/components/recipes/RecipeListToolbar.tsx
index 99d23ef..48cdedf 100644
--- a/frontend/src/components/recipes/RecipeListToolbar.tsx
+++ b/frontend/src/components/recipes/RecipeListToolbar.tsx
@@ -1,3 +1,5 @@
+import { ButtonType } from "../basics/Button"
+import Button from "../basics/Button"
 import SearchField from "../basics/SearchField"
 
 /**
@@ -22,12 +24,12 @@ export default function RecipeListToolbar({onSearchStringChanged, onAddClicked,
                 <div className="flex-1 md:flex-none md:max-w-[500px]">
                 <SearchField onSearchStringChanged={onSearchStringChanged} />
                 </div>
-                <button
-                className="primary-button flex-shrink-0"
-                onClick={onAddClicked}
-                >
-                Add recipe
-                </button>
+                <Button
+                    buttonType = {ButtonType.PrimaryButton}
+                    //className="flex-shrink-0"
+                    onClick={onAddClicked}
+                    text = "Add recipe"
+                />
             </div>
         </div>
     )