css and adding cancel button to editor

frontend/src/App.css

@@ -4,55 +4,76 @@
 
 /* Custom recipe app styles */
 @layer components{
-.app-container {
-  @apply p-4 flex;
-}
+  .app-container {
+    @apply p-4 flex;
+  }
 
-.sidebar {
-  @apply min-w-[16rem] bg-gray-50 p-4 w-1/3 border-r pr-4;
-}
+  .sidebar {
+    @apply min-w-[16rem] bg-gray-50 p-4 w-1/3 border-r pr-4;
+  }
 
-.sidebar-title {
-  @apply text-blue-900 font-bold mb-2;
-}
+  .sidebar-title {
+    @apply text-blue-900 font-bold mb-2;
+  }
 
-.sidebar-link {
-  @apply block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition
-}
+  .sidebar-link {
+    @apply block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition
+  }
 
-.sidebar-item-text {
-  @apply font-semibold text-blue-400
-}
+  .sidebar-item-text {
+    @apply font-semibold text-blue-400;
+  }
 
-.content-title{
-  @apply text-xl font-black mb-16 text-blue-300
-}
+  .content-title{
+    @apply text-3xl font-black mb-8 text-blue-400;
+  }
 
-.main-view {
-  @apply w-2/3 pl-4;
-}
+  .main-view {
+    @apply w-2/3 pl-4;
+  }
 
-.recipe-title {
-  @apply text-2xl font-bold;
-}
+  .recipe-image {
+    @apply my-4 w-64;
+  }
 
-.recipe-image {
-  @apply my-4 w-64;
-}
+  .section-heading {
+    @apply text-xl font-bold mb-2;
+  }
 
-.section-heading {
-  @apply text-2xl font-bold;
-}
+  .subsection-heading {
+    @apply font-semibold mb-2;
+  }
 
-.primary-button {
-  @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 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
+  }
 
-.default-button{
-  @apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 text-gray-600
-}
+  .default-button{
+    @apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 text-gray-600
+  }
 
-.input-field {
-  @apply border p-2 w-full mb-2;
-}
+  .dark-button{
+    @apply bg-gray-600 text-white rounded px-4 py-2
+  }
+
+  /* input field */
+  .input-field {
+    @apply border p-2 w-full mb-2 rounded;
+  }
+
+  .text-area {
+    @apply border p-2 w-full mb-2 rounded;
+  }
+
+  /* groups */
+  .button-group{
+    @apply flex gap-4 mt-4;
+  }
+  
+  /* lists */
+  .default-list-item {
+    @apply list-disc pl-6 mb-6
+  }
+  
 }

frontend/src/components/IngredientListEditor.tsx

@@ -24,31 +24,31 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
 
   return (
     <div>
-      <h3 className="font-semibold mb-2">Ingredients</h3>
+      <h3 className="subsection-heading">Ingredients</h3>
       {ingredients.map((ing, index) => (
         <div key={index} className="flex gap-2 mb-2 items-center">
           <input
             type="number"
-            className="border p-2 w-20"
+            className="input-field"
             placeholder="Amount"
             value={ing.amount}
             onChange={e => handleUpdate(index, "amount", e.target.value)}
           />
           <input
-            className="border p-2 w-20"
+            className="input-field w-20"
             placeholder="Unit"
             value={ing.unit ?? ""}
             onChange={e => handleUpdate(index, "unit", e.target.value)}
           />
           <input
-            className="border p-2 flex-1"
+            className="input-field"
             placeholder="Name"
             value={ing.name}
             onChange={e => handleUpdate(index, "name", e.target.value)}
           />
           <button
             type="button"
-            className="p-2 bg-red-500 text-white rounded"
+            className="dark-button"
             onClick={() => handleRemove(index)}
           >
             ✖
@@ -57,7 +57,7 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
       ))}
       <button
         type="button"
-        className="p-2 bg-green-500 text-white rounded"
+        className="primary-button"
         onClick={handleAdd}
       >
         ➕ Add Ingredient

frontend/src/components/RecipeDetailView.tsx

@@ -28,8 +28,8 @@ export default function RecipeDetailView() {
       )}
 
       {/* Ingredients */}
-      <h2 className="section-heading">Ingredients</h2>
-      <ul className="list-disc pl-6">
+      <h2 className="section-heading">Zutaten</h2>
+      <ul className="default-list-item">
         {recipe.ingredients.map((ing, i) => (
         <li key={i}>
           {ing.amount} {ing.unit ?? ""} {ing.name}
@@ -38,22 +38,22 @@ export default function RecipeDetailView() {
       </ul>
 
       {/* Instructions */}
-      <h2 className="section-heading">Instructions</h2>
+      <h2 className="section-heading">Zubereitung</h2>
       <p className="mb-6">{recipe.instructions}</p>
 
       {/* Action buttons */}
-      <div className="flex gap-8">
+      <div className="button-group">
         <Link
           to={`/recipe/${recipe.id}/edit`}
           className="primary-button"
         >
-          Edit
+          Bearbeiten
         </Link>
         <Link
           to="/"
           className="default-button"
         >
-          Back
+          Zurueck
         </Link>
       </div>
 

frontend/src/components/RecipeEditor.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react"
+import { Link } from "react-router-dom" // @todo replace cancel link with button and onCancel handler
 import type { Recipe } from "../types/recipe"
 import type { Ingredient } from "../types/ingredient"
 import {IngredientListEditor} from "./IngredientListEditor"
@@ -21,14 +22,14 @@ export default function RecipeEditor({ recipe, onSave }: RecipeEditorProps) {
    if (!recipe) return <div>Oops, there's no recipe in RecipeEditor...</div>
   return (
     <div className="p-4 gap-10">
-      <h2 className="section-heading">
+      <h2 className="content-title">
         {recipe.id ? "Edit Recipe" : "New Recipe"}
       </h2>
 
       {/* Title */}
-      <h3>Title</h3>
+      <h3 className="subsection-heading">Title</h3>
       <input
-        className="border p-2 w-full mb-2"
+        className="input-field"
         placeholder="Title"
         value={draft.title}
         onChange={e => setDraft({ ...draft, title: e.target.value })}
@@ -40,22 +41,30 @@ export default function RecipeEditor({ recipe, onSave }: RecipeEditorProps) {
         onChange={updateIngredients}
       />
 
-      <h3>Instructions</h3>
+      <h3 className="subsection-heading">Instructions</h3>
       {/* Instructions */}
       <textarea
-        className="border p-2 w-full mb-2"
+        className="text-area"
         placeholder="Instructions"
         value={draft.instructions}
         onChange={e => setDraft({ ...draft, instructions: e.target.value })}
       />
 
-      {/* Save Button */}
-      <button
-        className="p-2 bg-green-500 text-white rounded"
-        onClick={() => onSave(draft)}
-      >
-        💾 Save
-      </button>
+      <div className="button-group">
+        {/* Save Button */}
+        <button
+          className="primary-button"
+          onClick={() => onSave(draft)}
+        >
+          Save
+        </button>
+        <Link
+          to={`/recipe/${recipe.id}`}
+          className="default-button"
+        >
+          Cancel
+        </Link>
+      </div>
     </div>
     )
 }

frontend/src/index.css

@@ -16,6 +16,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
 /*a {
   font-weight: 500;
   color: #646cff;
@@ -23,14 +31,6 @@
 }
 a:hover {
   color : #8e8f9c;
-}*/
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
 }
 
 h1 {
@@ -69,3 +69,4 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+  */