From 12a02ef1f8540f45526b9ea9392a90ae894726a6 Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Tue, 19 Aug 2025 18:49:04 +1200
Subject: [PATCH] small design changes on /recipe/new

---
 src/pages/recipe/new.astro | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/pages/recipe/new.astro b/src/pages/recipe/new.astro
index cf61601..ba5de1d 100644
--- a/src/pages/recipe/new.astro
+++ b/src/pages/recipe/new.astro
@@ -14,6 +14,17 @@ async function submitRecipe() {
 <SiteLayout>
     <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
         <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
+
+            <div class="flex mb-2 items-center">
+                <p class="text-[28pt] mr-auto">New Recipe</p>
+                <button
+                    id="btn-save"
+                    class="px-1 w-15 h-9 bg-green-500 rounded-lg"
+                >
+                    Save
+                </button>
+            </div>
+
             <div class="relative">
                 <input 
                     id="photo" 
@@ -61,7 +72,7 @@ async function submitRecipe() {
                     placeholder="Work Time"
                 />
                 <input
-                    id="rec-waititme"
+                    id="rec-waittime"
                     type="text"
                     class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
                     placeholder="Wait Time"
@@ -76,7 +87,7 @@ async function submitRecipe() {
 
 
             <div class="flex flex-row align-middle items-center">
-                <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
+                <p class="mt-4 text-[22pt] font-bold">Ingredients</p>
                 <button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
             </div>
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
@@ -104,7 +115,7 @@ async function submitRecipe() {
             </table>
         </div>
         
-        <div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
+        <div class="flex mt-4 md:mt-20 md:flex-2/3 w-full flex-col md:ml-3">
             <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
 
             <!-- Steps -->