css and adding cancel button to editor

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