From 93e298a9f138d053a7d21de5f92778d575c40e6c Mon Sep 17 00:00:00 2001
From: fred <>
Date: Tue, 5 Aug 2025 15:09:52 -0700
Subject: [PATCH] visual tweaks

---
 frontend/src/components/AddBulkIngredients.tsx | 4 ++--
 frontend/src/components/AddBulkSteps.tsx       | 4 ++--
 frontend/src/components/RecipeBookTabs.tsx     | 6 +++---
 frontend/src/pages/About.tsx                   | 2 +-
 frontend/src/pages/RecipePage.tsx              | 6 ++----
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/AddBulkIngredients.tsx b/frontend/src/components/AddBulkIngredients.tsx
index ee6bc26..1ece958 100644
--- a/frontend/src/components/AddBulkIngredients.tsx
+++ b/frontend/src/components/AddBulkIngredients.tsx
@@ -35,14 +35,14 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
 
   return (
     <div>
-      <p>Please enter each ingredient on a new line:</p>
+      <h3 className="text-xl font-bold">Ingredients:</h3>
       <textarea
         rows={8}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
-        placeholder="Enter ingredients separated by newline..."
+        placeholder="Enter ingredients separated by new line"
         className="mb-4 p-2 border border-gray-300 rounded w-full"
       />
     </div>
diff --git a/frontend/src/components/AddBulkSteps.tsx b/frontend/src/components/AddBulkSteps.tsx
index 5757de3..71b966a 100644
--- a/frontend/src/components/AddBulkSteps.tsx
+++ b/frontend/src/components/AddBulkSteps.tsx
@@ -47,14 +47,14 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
 
   return (
     <div>
-      <p>Please enter each step on a new line:</p>
+      <h3 className="text-xl font-bold">Steps:</h3>
       <textarea
         rows={8}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
-        placeholder="Enter steps separated by newline..."
+        placeholder="Enter steps separated by new line"
         className="mb-4 p-2 border border-gray-300 rounded w-full"
       />
     </div>
diff --git a/frontend/src/components/RecipeBookTabs.tsx b/frontend/src/components/RecipeBookTabs.tsx
index 4d573d4..5ba2c38 100644
--- a/frontend/src/components/RecipeBookTabs.tsx
+++ b/frontend/src/components/RecipeBookTabs.tsx
@@ -59,10 +59,10 @@ const RecipeBookTabs = () => {
                 key={tab.id}
                 to={tab.id}
                 className={`
-                  relative px-6 py-3 rounded-t-lg font-medium text-sm transform
+                  relative px-6 py-3 rounded-t-lg font-bold text-sm transform text-amber-800
                   ${isActive
-                    ? 'bg-amber-100 text-amber-800 scale-105 z-10 border-t-2 border-amber-200'
-                    : 'bg-amber-200 text-amber-600 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
+                    ? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
+                    : 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
                   }
                   before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 
                   ${isActive ? '' : ''}
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index a5df281..47f25f0 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -3,7 +3,7 @@ function About() {
   return (
     <div className="about page-outer">
       <div>
-        <h2 className="text-xl">I made this app using the following components:</h2>
+        <h2 className="text-xl">This app uses the following components:</h2>
         <h2 className="mt-4 font-bold text-xl">Frontend:</h2>
         <ul><li>React</li><li>TypeScript</li><li>Vite</li></ul>
         <h2 className="mt-4 font-bold text-xl">Backend:</h2>
diff --git a/frontend/src/pages/RecipePage.tsx b/frontend/src/pages/RecipePage.tsx
index d4bf9fe..83ff1ad 100644
--- a/frontend/src/pages/RecipePage.tsx
+++ b/frontend/src/pages/RecipePage.tsx
@@ -68,14 +68,13 @@ function RecipePage() {
           <div className="grid lg:grid-cols-2 gap-6 mb-6">
             <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
               <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
-                <span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
                 Ingredients:
               </h4>
               <ul className="space-y-2">
                 {recipe.ingredients.map((ingredient: Ingredient, index) => (
                   <li key={index} className="text-gray-700 flex items-start">
                     <span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
-                    <span className="font-medium">{ingredient.raw}</span>
+                    <span className="font-medium text-left">{ingredient.raw}</span>
                   </li>
                 ))}
               </ul>
@@ -83,7 +82,6 @@ function RecipePage() {
 
             <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
               <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
-                <span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
                 Instructions:
               </h4>
               <ol className="space-y-3">
@@ -92,7 +90,7 @@ function RecipePage() {
                     <span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
                       {recipe.steps[parseInt(stepNumber)].step_number}
                     </span>
-                    <span className="leading-relaxed">{recipe.steps[parseInt(stepNumber)].instruction}</span>
+                    <span className="leading-relaxed text-left">{recipe.steps[parseInt(stepNumber)].instruction}</span>
                   </li>
                 ))}
               </ol>