Har lagt til checkboxes fra mui på ingredients og steps under recipeDetail

client/src/components/recipe/RecipeDetail.tsx

@@ -2,6 +2,8 @@ import type { Recipe } from '../../types/recipe';
 import RestaurantIcon from '@mui/icons-material/Restaurant';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { Rating } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 // Sier hva komponenten får inn.
 type RecipeDetailProps = {
@@ -50,19 +52,39 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                 <ul>
                     {recipe.ingredients.map((ingredient) => (
                         <li key={ingredient.ingredientId}>
-                            <label>
-                                <input type="checkbox" /> {ingredient.amount} {ingredient.unit} {ingredient.name}
-                            </label>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        sx={{
+                                            color: 'var(--color-olive)',
+                                            '&.Mui-checked': { color: 'var(--color-olive)' },
+                                        }}
+                                    />
+                                }
+                                label={`${ingredient.amount} ${ingredient.unit} ${ingredient.name}`}
+                            />
                         </li>
                     ))}
                 </ul>
             </section>
             <section className="border border-olive bg-background rounded-lg p-4">
                 <h2 className="text-2xl font-semibold">Steg</h2>
-                <ol className="list-decimal list-inside">
+                <ol>
                     {recipe.steps.map((step) => (
                         <li key={step.stepId}>
-                            {step.instruction}
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        sx={{
+                                            color: 'var(--color-olive)',
+                                            '&.Mui-checked': { color: 'var(--color-olive)' },
+                                        }}
+                                    />
+                                }
+                                label={`${step.order}. ${step.instruction}`}
+                                labelPlacement="start"
+                                sx={{ width: '100%', justifyContent: 'space-between', ml: 0 }}
+                            />
                         </li>
                     ))}
                 </ol>