Refactoring

frontend/src/App.css

@@ -21,15 +21,15 @@
     }
 
     .content-title {
-        @apply text-3xl font-black mb-8 text-blue-900;
+        @apply text-3xl font-black pb-6 text-blue-900;
     }
 
     .section-heading {
-        @apply text-xl font-bold mb-2;
+        @apply text-xl font-bold pb-2 pt-4;
     }
 
     .subsection-heading {
-        @apply font-semibold mb-2 mt-4;
+        @apply font-semibold pb-2 pt-4;
     }
 
     /* icons */
@@ -50,7 +50,7 @@
 
     /* buttons */
     .basic-button {
-        @apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap;
+        @apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed;
     }
 
     .default-button-bg {
@@ -105,7 +105,7 @@
     }
 
     .ingredient-group-card {
-        @apply py-4 border-b border-gray-400;
+        @apply pb-4 border-b border-gray-400;
     }
 
     .circular-container {

frontend/src/components/basics/Button.tsx

@@ -1,8 +1,9 @@
-import { defaultIconSize } from "./SvgIcon";
+import {defaultIconSize} from "./SvgIcon";
-import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions";
+import {type BasicButtonProps, ButtonType} from "./BasicButtonDefinitions";
 
 type ButtonProps = BasicButtonProps & {
     onClick: () => void;
+    disabled?: boolean;
 };
 
 /**
@@ -14,12 +15,14 @@ export default function Button({
                                    text,
                                    buttonType = ButtonType.DefaultButton,
                                    className = "",
+                                   disabled = false,
                                    ...props
-}: ButtonProps) {
+                               }: ButtonProps) {
     return (
         <button
             className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
             onClick={onClick}
+            disabled={disabled}
             {...props}
         >
             <div className="flex items-center gap-2">

frontend/src/components/basics/NumberedListItem.tsx

@@ -1,6 +1,6 @@
 type NumberedListItemProps = {
-    /** Number to be displayed in front of text */
+    /** Index of the element. Index + 1 is displayed in circle */
-    elementNumber: number;
+    index: number;
     /** List item text */
     text: string;
 }
@@ -10,11 +10,11 @@ type NumberedListItemProps = {
  * @param elementNumber Number to be displayed
  * @param text Text to be displayed
  */
-export function NumberedListItem({elementNumber, text}: NumberedListItemProps) {
+export function NumberedListItem({index, text}: NumberedListItemProps) {
     return <li className="flex items-start gap-4">
         {/* Step number circle */}
         <div className="circular-container">
-            {elementNumber}
+            {index + 1}
         </div>
 
         {/* Step text */}

frontend/src/components/recipes/IngredientGroupListEditor.tsx

@@ -2,22 +2,22 @@
  * Editor for ingredient groups
  */
 
-import type { IngredientModel } from "../../models/IngredientModel"
+import type {IngredientModel} from "../../models/IngredientModel"
-import type { IngredientGroupModel } from "../../models/IngredientGroupModel"
+import type {IngredientGroupModel} from "../../models/IngredientGroupModel"
 import Button from "../basics/Button"
-import { IngredientListEditor } from "./IngredientListEditor"
+import {IngredientListEditor} from "./IngredientListEditor"
-import { Plus } from "lucide-react"
+import {Plus} from "lucide-react"
-import { ButtonType } from "../basics/BasicButtonDefinitions"
+import {ButtonType} from "../basics/BasicButtonDefinitions"
 
 type IngredientGroupListEditorProps = {
     ingredientGroupList: IngredientGroupModel[]
     onChange: (ingredientGroupList: IngredientGroupModel[]) => void
 }
 
-export function IngredientGroupListEditor({ ingredientGroupList, onChange }: IngredientGroupListEditorProps) {
+export function IngredientGroupListEditor({ingredientGroupList, onChange}: IngredientGroupListEditorProps) {
-  const handleUpdate = (index: number, field: keyof IngredientGroupModel, value: string|IngredientModel[] ) => {
+    const handleUpdate = (index: number, field: keyof IngredientGroupModel, value: string | IngredientModel[]) => {
         const updated = ingredientGroupList.map((ingGrp, i) =>
-      i === index ? { ...ingGrp, [field]: value} : ingGrp
+            i === index ? {...ingGrp, [field]: value} : ingGrp
         )
         onChange(updated)
     }
@@ -26,7 +26,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
     }
 
     const handleAdd = () => {
-    onChange([...ingredientGroupList, { title: "", ingredientList: [] }])
+        onChange([...ingredientGroupList, {title: "", ingredientList: []}])
     }
 
     const handleRemove = (index: number) => {
@@ -34,53 +34,36 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
     }
     return (
         <div>
-      {/* remove bottom margin from this headings the group card has a top padding */}
+            <h2 className="section-heading">Zutaten</h2>
-      <h3 className="subsection-heading" >Ingredient Groups</h3>
+            <div>
                 {ingredientGroupList.map((ingGrp, index) => (
                     <div key={index} className="ingredient-group-card mb-4">
                         <div className="horizontal-input-group columns-2">
                             <input
                                 className="input-field"
-              placeholder="Group title (Optional)"
+                                placeholder="Titel (Optional)"
-              value = {ingGrp.title}
+                                value={ingGrp.title}
-              onChange={ e => handleUpdate(index, "title", e.target.value)}
+                                onChange={e => handleUpdate(index, "title", e.target.value)}
                             />
                             <Button
                                 onClick={() => handleRemove(index)}
-              text={"Remove Group"}
+                                text={"Gruppe entfernen"}
                                 buttonType={ButtonType.DarkButton}
                             />
                         </div>
                         <IngredientListEditor
                             ingredients={ingGrp.ingredientList}
-            onChange={list => updateIngredientList(index,list)}
+                            onChange={list => updateIngredientList(index, list)}
                         />
                     </div>
                 ))}
+            </div>
             <Button
                 onClick={handleAdd}
                 icon={Plus}
-        text={"Add Ingredient Group"}
+                text={"Gruppe hinzufügen"}
                 buttonType={ButtonType.PrimaryButton}
             />
         </div>
     )
 }
-
-/*
-
-<button
-        type="button"
-        className="primary-button mt-4"
-        onClick={handleAdd}
-      >
-        <div 
-        className="flex col-2 gap-2 -ml-1"
-        >
-          <SvgIcon
-            icon={Icon.Plus}
-            color={"text-gray-600"}
-          />
-          Add Ingredient Group
-        </div>
-      </button>*/

frontend/src/components/recipes/IngredientListEditor.tsx

@@ -1,7 +1,7 @@
-import { Plus, X } from "lucide-react"
+import {Plus, X} from "lucide-react"
-import type { IngredientModel } from "../../models/IngredientModel"
+import type {IngredientModel} from "../../models/IngredientModel"
 import Button from "../basics/Button"
-import { ButtonType } from "../basics/BasicButtonDefinitions"
+import {ButtonType} from "../basics/BasicButtonDefinitions"
 
 /**
  * Editor for handling the ingredient list
@@ -12,16 +12,16 @@ type IngredientListEditorProps = {
     onChange: (ingredients: IngredientModel[]) => void
 }
 
-export function IngredientListEditor({ ingredients, onChange }: IngredientListEditorProps) {
+export function IngredientListEditor({ingredients, onChange}: IngredientListEditorProps) {
     const handleUpdate = (index: number, field: keyof IngredientModel, value: string | number) => {
         const updated = ingredients.map((ing, i) =>
-      i === index ? { ...ing, [field]: field === "amount" ? Number(value) : value } : ing
+            i === index ? {...ing, [field]: field === "amount" ? Number(value) : value} : ing
         )
         onChange(updated)
     }
 
     const handleAdd = () => {
-    onChange([...ingredients, { name: "", amount: 0, unit: "" }])
+        onChange([...ingredients, {name: "", amount: 0, unit: ""}])
     }
 
     const handleRemove = (index: number) => {
@@ -30,19 +30,18 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
 
     return (
         <div>
-      <h3 className="subsection-heading">Ingredients</h3>
             {ingredients.map((ing, index) => (
                 <div key={index} className="horizontal-input-group">
                     <input
                         type="number"
                         className="input-field"
-            placeholder="Amount"
+                        placeholder="Menge"
                         value={ing.amount}
                         onChange={e => handleUpdate(index, "amount", e.target.value)}
                     />
                     <input
                         className="input-field w-20"
-            placeholder="Unit"
+                        placeholder="Einheit"
                         value={ing.unit ?? ""}
                         onChange={e => handleUpdate(index, "unit", e.target.value)}
                     />
@@ -62,7 +61,7 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
             <Button
                 onClick={handleAdd}
                 icon={Plus}
-        text={"Add Ingredient"}
+                text={"Zutat hinzufügen"}
                 buttonType={ButtonType.PrimaryButton}
             />
         </div>

frontend/src/components/recipes/InstructionStepListDesktopEditor.tsx

@@ -2,24 +2,14 @@
  * Desktop editor using drag-and-drop via @dnd-kit
  */
 
-import {
+import {closestCenter, DndContext, PointerSensor, useSensor, useSensors,} from "@dnd-kit/core";
-  DndContext,
+import {arrayMove, SortableContext, verticalListSortingStrategy,} from "@dnd-kit/sortable";
-  closestCenter,
+import type {InstructionStepModel} from "../../models/InstructionStepModel";
-  PointerSensor,
+import {InstructionStepDesktopListItem} from "./InstructionStepDesktopListItem";
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  SortableContext,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import type { InstructionStepModel } from "../../models/InstructionStepModel";
-import { InstructionStepDesktopListItem } from "./InstructionStepDesktopListItem";
-import { instructionStepListEditorMethods } from "./InstructionStepListEditor";
 import Button from "../basics/Button";
-import { Plus } from "lucide-react";
+import {Plus} from "lucide-react";
-import { ButtonType } from "../basics/BasicButtonDefinitions";
+import {ButtonType} from "../basics/BasicButtonDefinitions";
+import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
 
 type InstructionStepListDesktopEditorProps = {
     instructionStepList: InstructionStepModel[];
@@ -29,16 +19,16 @@ type InstructionStepListDesktopEditorProps = {
 export function InstructionStepListDesktopEditor({
                                                      instructionStepList,
                                                      onChange,
-}: InstructionStepListDesktopEditorProps) {
+                                                 }: InstructionStepListDesktopEditorProps) {
-  const { handleUpdate, handleAdd, handleRemove } = instructionStepListEditorMethods(
+    const {handleUpdate, handleAdd, handleRemove} = instructionStepListEditorMethods(
         instructionStepList,
         onChange
     );
 
-  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }));
+    const sensors = useSensors(useSensor(PointerSensor, {activationConstraint: {distance: 8}}));
 
     const handleDragEnd = (event: any) => {
-    const { active, over } = event;
+        const {active, over} = event;
         if (active.id !== over.id) {
             /* find element by internal id
              * Caution! Due to new elements not having a real ID yet, each list item has an internal ID
@@ -55,7 +45,7 @@ export function InstructionStepListDesktopEditor({
 
     return (
         <div>
-      <h3 className="subsection-heading mb-3">Zubereitung</h3>
+            <h2 className="section-heading mb-2">Zubereitung</h2>
             <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
                 <SortableContext
                     items={instructionStepList.map((i) => i.internalId)}

frontend/src/components/recipes/InstructionStepListEditor.tsx

@@ -6,10 +6,10 @@
  * - Common functionality for adding, removing, and updating steps is centralized.
  */
 
-import { useState, useEffect } from "react";
+import {useEffect, useState} from "react";
-import type { InstructionStepModel } from "../../models/InstructionStepModel";
+import type {InstructionStepModel} from "../../models/InstructionStepModel";
-import { InstructionStepListDesktopEditor } from "./InstructionStepListDesktopEditor";
+import {InstructionStepListDesktopEditor} from "./InstructionStepListDesktopEditor";
-import { InstructionStepListMobileEditor } from "./InstructionStepListMobileEditor";
+import {InstructionStepListMobileEditor} from "./InstructionStepListMobileEditor";
 
 /**
  * Props for the hybrid InstructionStepListEditor
@@ -25,7 +25,7 @@ type InstructionStepListEditorProps = {
 export function InstructionStepListEditor({
                                               instructionStepList,
                                               onChange,
-}: InstructionStepListEditorProps) {
+                                          }: InstructionStepListEditorProps) {
     const [isTouch, setIsTouch] = useState(false);
 
     useEffect(() => {
@@ -45,42 +45,3 @@ export function InstructionStepListEditor({
     );
 }
 
-/**
- * ======= Shared hook for common logic =======
- *
- * Provides add/remove/update functionality used by both mobile and desktop editors.
- */
-export function instructionStepListEditorMethods(
-  instructionStepList: InstructionStepModel[],
-  onChange: (steps: InstructionStepModel[]) => void
-) {
-  /**
-   * Update the text of a specific step
-   */
-  const handleUpdate = (index: number, value: string) => {
-    const updated = instructionStepList.map((step, i) =>
-      i === index ? { ...step, text: value } : step
-    );
-    onChange(updated);
-  };
-
-  /**
-   * Add a new step at the end
-   */
-  const handleAdd = () => {
-    onChange([...instructionStepList, 
-        { 
-            text: "", 
-            internalId: crypto.randomUUID() // add internalId required for drag & drop
-        }]);
-  };
-
-  /**
-   * Remove a step by index
-   */
-  const handleRemove = (index: number) => {
-    onChange(instructionStepList.filter((_, i) => i !== index));
-  };
-
-  return { handleUpdate, handleAdd, handleRemove };
-}

frontend/src/components/recipes/InstructionStepListEditorMethods.ts

@@ -0,0 +1,41 @@
+import type {InstructionStepModel} from "../../models/InstructionStepModel.ts";
+
+/**
+ * ======= Shared hook for common logic =======
+ *
+ * Provides add/remove/update functionality used by both mobile and desktop editors.
+ */
+export function instructionStepListEditorMethods(
+    instructionStepList: InstructionStepModel[],
+    onChange: (steps: InstructionStepModel[]) => void
+) {
+    /**
+     * Update the text of a specific step
+     */
+    const handleUpdate = (index: number, value: string) => {
+        const updated = instructionStepList.map((step, i) =>
+            i === index ? {...step, text: value} : step
+        );
+        onChange(updated);
+    };
+
+    /**
+     * Add a new step at the end
+     */
+    const handleAdd = () => {
+        onChange([...instructionStepList,
+            {
+                text: "",
+                internalId: crypto.randomUUID() // add internalId required for drag & drop
+            }]);
+    };
+
+    /**
+     * Remove a step by index
+     */
+    const handleRemove = (index: number) => {
+        onChange(instructionStepList.filter((_, i) => i !== index));
+    };
+
+    return {handleUpdate, handleAdd, handleRemove};
+}

frontend/src/components/recipes/InstructionStepListMobileEditor.tsx

@@ -2,11 +2,11 @@
  * Mobile editor using Up/Down buttons for reordering
  */
 
-import { ArrowDown, ArrowUp, Plus, X } from "lucide-react";
+import {ArrowDown, ArrowUp, Plus, X} from "lucide-react";
-import type { InstructionStepModel } from "../../models/InstructionStepModel";
+import type {InstructionStepModel} from "../../models/InstructionStepModel";
 import Button from "../basics/Button";
-import { instructionStepListEditorMethods } from "./InstructionStepListEditor";
+import {ButtonType} from "../basics/BasicButtonDefinitions";
-import { ButtonType } from "../basics/BasicButtonDefinitions";
+import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
 
 type InstructionStepListEditorMobileProps = {
     instructionStepList: InstructionStepModel[];
@@ -16,8 +16,8 @@ type InstructionStepListEditorMobileProps = {
 export function InstructionStepListMobileEditor({
                                                     instructionStepList,
                                                     onChange,
-}: InstructionStepListEditorMobileProps) {
+                                                }: InstructionStepListEditorMobileProps) {
-  const { handleUpdate, handleAdd, handleRemove } = instructionStepListEditorMethods(
+    const {handleUpdate, handleAdd, handleRemove} = instructionStepListEditorMethods(
         instructionStepList,
         onChange
     );
@@ -32,6 +32,8 @@ export function InstructionStepListMobileEditor({
     };
 
     return (
+        <div>
+            <h2 className="section-heading mb-2">Zubereitung</h2>
             <div className="flex flex-col gap-3">
                 {instructionStepList.map((step, index) => (
                     <div
@@ -39,7 +41,7 @@ export function InstructionStepListMobileEditor({
                         className="flex items-start gap-3 bg-gray-50 rounded-xl p-3 shadow-sm"
                     >
                         <div className="flex flex-col items-center pt-1">
-            <div className="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-sm font-semibold text-gray-800">
+                            <div className="circular-container">
                                 {index + 1}
                             </div>
                             <div className="flex flex-col mt-2">
@@ -47,17 +49,19 @@ export function InstructionStepListMobileEditor({
                                     icon={ArrowUp}
                                     onClick={() => moveStep(index, "up")}
                                     buttonType={ButtonType.TransparentButton}
+                                    disabled={index === 0} // disable if first item
                                 />
                                 <Button
                                     icon={ArrowDown}
                                     onClick={() => moveStep(index, "down")}
                                     buttonType={ButtonType.TransparentButton}
+                                    disabled={index === instructionStepList.length - 1} // disable if last item
                                 />
                             </div>
                         </div>
 
                         <textarea
-            className="input-field w-full min-h-[60px] resize-none overflow-hidden"
+                            className="input-field w-full min-h-[120px] resize-none overflow-hidden"
                             placeholder={`Schritt ${index + 1}`}
                             value={step.text}
                             onChange={(e) => handleUpdate(index, e.target.value)}
@@ -83,5 +87,6 @@ export function InstructionStepListMobileEditor({
                     className="mt-4"
                 />
             </div>
+        </div>
     );
 }

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -80,7 +80,7 @@ export default function RecipeDetailPage() {
             <div className="content-container">
                 {/* Header - remains in position when scrolling */}
                 <div className="sticky-header">
-                    <h1 className="content-title mb-0">{recipeWorkingCopy.title}</h1>
+                    <h1 className="content-title mb-0 pb-0">{recipeWorkingCopy.title}</h1>
                 </div>
 
                 {/* Content */}
@@ -132,7 +132,7 @@ export default function RecipeDetailPage() {
                     {/* Instructions - @todo add reasonable list delegate component*/}
                     <ol className="space-y-4">
                         {recipe.instructionStepList.map((step, j) => (
-                            <NumberedListItem key={j} elementNumber={j + 1} text={step.text}/>
+                            <NumberedListItem key={j} index={j} text={step.text}/>
                         ))}
                     </ol>
 

frontend/src/components/recipes/RecipeEditor.tsx

@@ -1,11 +1,11 @@
-import { useState } from "react"
+import {useState} from "react"
-import type { RecipeModel } from "../../models/RecipeModel"
+import type {RecipeModel} from "../../models/RecipeModel"
-import type { IngredientGroupModel } from "../../models/IngredientGroupModel"
+import type {IngredientGroupModel} from "../../models/IngredientGroupModel"
-import { IngredientGroupListEditor } from "./IngredientGroupListEditor"
+import {IngredientGroupListEditor} from "./IngredientGroupListEditor"
 import Button from "../basics/Button"
-import { InstructionStepListEditor } from "./InstructionStepListEditor"
+import {InstructionStepListEditor} from "./InstructionStepListEditor"
-import type { InstructionStepModel } from "../../models/InstructionStepModel"
+import type {InstructionStepModel} from "../../models/InstructionStepModel"
-import { ButtonType } from "../basics/BasicButtonDefinitions"
+import {ButtonType} from "../basics/BasicButtonDefinitions"
 
 type RecipeEditorProps = {
     recipe: RecipeModel
@@ -18,7 +18,7 @@ type RecipeEditorProps = {
  * ingredients (with amount, unit, name), instructions, and image URL.
  * @todo adapt to ingredientGroups!
  */
-export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorProps) {
+export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorProps) {
     /** draft of the new recipe */
     const [draft, setDraft] = useState<RecipeModel>(recipe)
     /** Error list */
@@ -29,7 +29,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
      * @param ingredientGroupList updated ingredient groups and ingredients
      */
     const updateIngredientGroupList = (ingredientGroupList: IngredientGroupModel[]) => {
-    setDraft({ ...draft, ingredientGroupList })
+        setDraft({...draft, ingredientGroupList})
     }
 
     /**
@@ -37,7 +37,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
      * @param instructionStepList updated instructions
      */
     const updateInstructionList = (instructionStepList: InstructionStepModel[]) => {
-    setDraft({ ...draft, instructionStepList })
+        setDraft({...draft, instructionStepList})
     }
 
     /**
@@ -60,12 +60,12 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
         if (!draft.ingredientGroupList || draft.ingredientGroupList.length === 0) {
             newErrors.ingredients = true
         } else {
-      let isAnyIngredientListEmpty = draft.ingredientGroupList.some(
+            const isAnyIngredientListEmpty = draft.ingredientGroupList.some(
                 ingGrp => {
                     return !ingGrp.ingredientList || ingGrp.ingredientList.length === 0
                 }
             )
-      if(isAnyIngredientListEmpty){
+            if (isAnyIngredientListEmpty) {
                 newErrors.ingredients = true
             }
         }
@@ -84,23 +84,26 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
     if (!recipe) return <div>Oops, there's no recipe in RecipeEditor...</div>
     // @todo add handling of images
     return (
-    <div className="p-4 gap-10">
+        /*Container spanning entire screen used to center content horizontally */
-      <h2 className="content-title">
+        <div className="app-bg">
-        {recipe.id ? "Edit Recipe" : "New Recipe"}
+            {/* Container defining the maximum width of the content */}
-      </h2>
+            <div className="content-container">
+                <h1 className="content-title border-b-2 border-gray-300">
+                    {recipe.id ? "Rezept bearbeiten" : "Neues Rezept"}
+                </h1>
 
                 {/* Title */}
-      <h3 className="subsection-heading">Title</h3>
+                <h2 className="section-heading">Titel</h2>
                 <input
                     className={`input-field ${errors.title ? "error-text" : ""}`}
-        placeholder="Title"
+                    placeholder="Titel"
                     value={draft.title}
-        onChange={e => setDraft({ ...draft, title: e.target.value })}
+                    onChange={e => setDraft({...draft, title: e.target.value})}
                 />
                 {/* Servings */}
-      <h3 className="subsection-heading">Servings</h3>
+                <h2 className="section-heading">Portionen</h2>
                 <div className="columns-3 gap-2 flex items-center">
-        <label>For</label>
+                    <label>Für</label>
                     <input
                         type="number"
                         className="input-field w-20"
@@ -114,7 +117,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
                     />
                     <input
                         className="input-field"
-          placeholder="Persons"
+                        placeholder="Personen"
                         value={draft.servings.unit}
                         onChange={e => {
                             const tempServings = draft.servings
@@ -131,7 +134,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
                     />
                 </div>
 
-      {/* Instruction List*/ }
+                {/* Instruction List*/}
                 <InstructionStepListEditor
                     instructionStepList={draft.instructionStepList}
                     onChange={updateInstructionList}
@@ -142,14 +145,15 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
                     {/* Save Button */}
                     <Button
                         onClick={() => handleSave(draft)}
-          text={"Save"}
+                        text={"Speichern"}
                         buttonType={ButtonType.PrimaryButton}
                     />
                     <Button
                         onClick={() => onCancel()}
-          text={"Cancel"}
+                        text={"Abbrechen"}
                     />
                 </div>
             </div>
+        </div>
     )
 }