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 { 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) {
     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

@@ -34,20 +34,20 @@ 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}
                                 onChange={e => handleUpdate(index, "title", e.target.value)}
                             />
                             <Button
                                 onClick={() => handleRemove(index)}
-              text={"Remove Group"}
+                                text={"Gruppe entfernen"}
                                 buttonType={ButtonType.DarkButton}
                             />
                         </div>
@@ -57,30 +57,13 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
                         />
                     </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

@@ -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,
-  PointerSensor,
-  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 {ButtonType} from "../basics/BasicButtonDefinitions";
+import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
 
 type InstructionStepListDesktopEditorProps = {
     instructionStepList: InstructionStepModel[];
@@ -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,7 +6,7 @@
  * - 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 {InstructionStepListDesktopEditor} from "./InstructionStepListDesktopEditor";
 import {InstructionStepListMobileEditor} from "./InstructionStepListMobileEditor";
@@ -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

@@ -5,8 +5,8 @@
 import {ArrowDown, ArrowUp, Plus, X} from "lucide-react";
 import type {InstructionStepModel} from "../../models/InstructionStepModel";
 import Button from "../basics/Button";
-import { instructionStepListEditorMethods } from "./InstructionStepListEditor";
 import {ButtonType} from "../basics/BasicButtonDefinitions";
+import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
 
 type InstructionStepListEditorMobileProps = {
     instructionStepList: InstructionStepModel[];
@@ -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

@@ -60,7 +60,7 @@ 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
                 }
@@ -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})}
                 />
                 {/* 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
@@ -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>
     )
 }