visual tweaks

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>

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>

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-100 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-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 ? '' : ''}

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>

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>