docs and background for details page

frontend/src/App.css

@@ -10,6 +10,10 @@
     @apply flex items-center w-screen justify-center min-h-screen bg-gray-50;
   }
 
+  .content-container {
+    @apply bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8
+  }
+
   /* headings */
   .content-title{
     @apply text-3xl font-black mb-8 text-blue-900;
@@ -61,7 +65,6 @@
   .dark-button-text{
     @apply text-white;
   }
-
   .transparent-button-bg {
     @apply bg-transparent hover:bg-transparent;
   }
@@ -71,7 +74,7 @@
 
   /* input fields like input and textarea */
   .input-field {
-    @apply p-2 w-full border rounded-md placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900;
+    @apply p-2 w-full border rounded-md bg-white placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900;
   }
 
   /* groups */

frontend/src/components/basics/BasicButtonDefinitions.ts

@@ -1,5 +1,8 @@
 import type { LucideIcon } from "lucide-react";
 
+/**
+ * Basic definitions used by all Button types, such as Button.tsx and ButtonLink.tsx
+ */
 export type BasicButtonProps = {
   /** Optional Lucide icon (e.g. Plus, X, Check) */
   icon?: LucideIcon;
@@ -15,20 +18,20 @@ export type BasicButtonProps = {
  */
 export const ButtonType = {
   DarkButton: {
-    textColor: "text-dark-button-text",
+    textColor: "dark-button-text",
-    backgroundColor: "bg-dark-button-bg",
+    backgroundColor: "dark-button-bg",
   },
   PrimaryButton: {
-    textColor: "text-primary-button-text",
+    textColor: "primary-button-text",
-    backgroundColor: "bg-primary-button-bg",
+    backgroundColor: "primary-button-bg",
   },
   DefaultButton: {
-    textColor: "text-default-button-text",
+    textColor: "default-button-text",
-    backgroundColor: "bg-default-button-bg",
+    backgroundColor: "default-button-bg",
   },
   TransparentButton: {
-    textColor: "text-transparent-button-text",
+    textColor: "transparent-button-text",
-    backgroundColor: "bg-transparent-button-bg",
+    backgroundColor: "transparent-button-bg",
   },
 } as const;
 

frontend/src/components/basics/Button.tsx

@@ -5,6 +5,9 @@ type ButtonProps = BasicButtonProps & {
   onClick: () => void;
 };
 
+/**
+ * Button component. Styles are defined in BasicButtonDefinitions.ts
+ */
 export default function Button({
   onClick,
   icon: Icon,
@@ -15,7 +18,7 @@ export default function Button({
 }: ButtonProps) {
   return (
     <button
-      className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
+      className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
       onClick={onClick}
       {...props}
     >

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -17,7 +17,7 @@ export default function RecipeDetailPage() {
   // the recipe loaded from the backend, don't change this! it's required for scaling
   const [recipe, setRecipe] = useState<RecipeModel | null>(null)
   // Working copy for re-calculating ingredients
-  const [recipeWorkingCopy, setRecipeWorkingCopy] = useState<RecipeModel|null>(null)
+  const [recipeWorkingCopy, setRecipeWorkingCopy] = useState<RecipeModel | null>(null)
   // load recipe data whenever id changes
   useEffect(() => {
     const loadRecipe = async () => {
@@ -26,7 +26,7 @@ export default function RecipeDetailPage() {
           // Fetch recipe data when editing an existing one
           console.log("loading recipe with id", id)
           const data = await fetchRecipe(id)
-            if(data.id != id){
+          if (data.id != id) {
             throw new Error("Id mismatch when loading recipes: " + id + " requested and " + data.id + " received!");
           }
           setRecipe(mapRecipeDtoToModel(data))
@@ -40,7 +40,7 @@ export default function RecipeDetailPage() {
   }, [id])
 
   // set original recipe data and working copy when recipe changes
-    useEffect( ()=> {
+  useEffect(() => {
     setRecipeWorkingCopy(recipe);
   }, [recipe])
 
@@ -76,9 +76,16 @@ export default function RecipeDetailPage() {
   }
 
   return (
-    <div className="p-6 max-w-2xl mx-auto">
+    /*Container spanning entire screen used to center content horizontally */
+    <div className="app-bg">
+      {/* Container defining the maximum width of the content */}
+      <div className="content-container">
+        {/* Header - remains in position when scrolling */}
+        <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
         <h1 className="content-title">{recipeWorkingCopy.title}</h1>
+      </div>
 
+      <div className="p-6 max-w-2xl mx-auto">
         {/* Recipe image */}
         {recipe.imageUrl && (
           <img
@@ -105,7 +112,7 @@ export default function RecipeDetailPage() {
         {/* Ingredients */}
         <h2 className="section-heading">Zutaten</h2>
         <ul>
-        {recipeWorkingCopy.ingredientGroupList.map((group,i) => (
+          {recipeWorkingCopy.ingredientGroupList.map((group, i) => (
             <div key={i}>
               {/* the title is optional, only print if present */}
               {group.title && group.title.trim() !== "" && (
@@ -151,6 +158,7 @@ export default function RecipeDetailPage() {
           />
         </div>
       </div>
-
+    </div>
+    </div>
   )
 }

frontend/src/components/recipes/RecipeListPage.tsx

@@ -41,7 +41,7 @@ export default function RecipeListPage() {
     /*Container spanning entire screen used to center content horizontally */
     <div className="app-bg">
       {/* Container defining the maximum width of the content */}
-      <div className="bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8">
+      <div className="content-container">
         {/* Header - remains in position when scrolling */}
         <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
           <h1 className="content-title">Recipes</h1>