From 9614fefe05821b6189f51b5273efa3f9d4e368a3 Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Fri, 20 Mar 2026 20:20:09 +0100
Subject: [PATCH] Translate UI to polish

---
 js/views/Filter.js     |  32 ++++++------
 js/views/RecipeList.js | 112 ++++++++++++++++++++---------------------
 2 files changed, 71 insertions(+), 73 deletions(-)

diff --git a/js/views/Filter.js b/js/views/Filter.js
index 1fd9fb2..285692b 100644
--- a/js/views/Filter.js
+++ b/js/views/Filter.js
@@ -3,46 +3,48 @@ export function getFilterHTML() {
     <div id="filter-view" class="absolute inset-0 bg-white z-50 hidden flex-col">
         <div class="p-4 border-b border-gray-200 flex items-center justify-between mt-4">
             <button onclick="closeFilters()" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-full transition-colors"><i class="fas fa-arrow-left text-lg"></i></button>
-            <h2 class="text-lg font-semibold text-black">Filters</h2>
-            <button class="px-2 text-sm font-medium text-gray-500 hover:text-black transition-colors">Reset</button>
+            <h2 class="text-lg font-semibold text-black">Filtry</h2>
+            <button class="px-2 text-sm font-medium text-gray-500 hover:text-black transition-colors">Wyczyść</button>
         </div>
 
         <div class="flex-1 overflow-y-auto p-6 space-y-8">
             <div>
-                <h3 class="text-base font-semibold text-black mb-4">Meal Time</h3>
+                <h3 class="text-base font-semibold text-black mb-4">Pora posiłku</h3>
                 <div class="flex flex-wrap gap-2.5">
-                    <button class="px-4 py-2 bg-gray-900 text-white rounded-full text-sm font-medium transition-colors">Breakfast</button>
-                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Lunch</button>
-                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Dinner</button>
-                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Supper</button>
+                    <button class="px-4 py-2 bg-gray-900 text-white rounded-full text-sm font-medium transition-colors">Śniadanie</button>
+                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Drugie śniadanie</button>
+                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Obiad</button>
+                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Podwieczorek</button>
+                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Kolacja</button>
+                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Przekąska</button>
                 </div>
             </div>
 
             <div>
-                <h3 class="text-base font-semibold text-black mb-4">Dietary & Tags</h3>
+                <h3 class="text-base font-semibold text-black mb-4">Dieta i tagi</h3>
                 <div class="flex flex-wrap gap-2.5">
-                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Vegetarian</button>
-                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Vegan</button>
-                    <button class="px-4 py-2 bg-gray-900 text-white rounded-full text-sm font-medium transition-colors">High Protein</button>
+                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Wegetariańska</button>
+                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Wegańska</button>
+                    <button class="px-4 py-2 bg-gray-900 text-white rounded-full text-sm font-medium transition-colors">Wysokobiałkowe</button>
                 </div>
             </div>
 
             <div>
                 <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-base font-semibold text-black">Max Prep Time</h3>
+                    <h3 class="text-base font-semibold text-black">Maks. czas przygotowania</h3>
                     <span id="time-display" class="text-sm font-medium text-gray-600">30 min</span>
                 </div>
                 <div class="px-1">
                     <input type="range" id="prep-time-slider" min="5" max="120" step="5" value="30" class="w-full appearance-none bg-transparent">
                     <div class="flex justify-between text-xs text-gray-400 mt-3 font-medium">
-                        <span>5m</span><span>30m</span><span>1h</span><span>2h+</span>
+                        <span>5 min</span><span>30 min</span><span>1 godz.</span><span>2 godz.+</span>
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="p-4 border-t border-gray-200 bg-white mt-auto">
-            <button onclick="closeFilters()" class="w-full bg-gray-900 hover:bg-black text-white py-3.5 rounded-xl font-semibold shadow-sm transition-colors text-sm">Show 12 Results</button>
+            <button onclick="closeFilters()" class="w-full bg-gray-900 hover:bg-black text-white py-3.5 rounded-xl font-semibold shadow-sm transition-colors text-sm">Pokaż 12 wyników</button>
         </div>
     </div>
     `;
@@ -55,7 +57,7 @@ export function setupFilter() {
     if(timeSlider) {
         timeSlider.addEventListener('input', (e) => {
             const val = e.target.value;
-            timeDisplay.textContent = val >= 120 ? '120+ min' : `${val} min`;
+            timeDisplay.textContent = val >= 120 ? 'ponad 120 min' : `${val} min`;
         });
     }
 }
\ No newline at end of file
diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js
index 25df931..43c8d16 100644
--- a/js/views/RecipeList.js
+++ b/js/views/RecipeList.js
@@ -4,7 +4,7 @@ export function getRecipeListHTML() {
         <div class="p-4 border-b border-gray-200 mt-4 bg-white">
             <div class="flex items-center w-full border border-gray-300 rounded-lg bg-white focus-within:border-gray-400 transition-colors">
                 <div class="pl-3 pr-2 text-gray-400"><i class="fas fa-search"></i></div>
-                <input type="text" placeholder="Search recipes..." class="flex-1 py-2.5 bg-transparent outline-none text-gray-600 placeholder-gray-400 text-sm">
+                <input type="text" placeholder="Szukaj przepisów..." class="flex-1 py-2.5 bg-transparent outline-none text-gray-600 placeholder-gray-400 text-sm">
                 <div class="w-px h-6 bg-gray-200"></div>
                 <button onclick="openFilters()" class="px-4 text-gray-700 hover:text-black flex items-center justify-center transition-colors">
                     <i class="fas fa-sliders-h"></i>
@@ -12,27 +12,23 @@ export function getRecipeListHTML() {
             </div>
         </div>
 
-        <div class="px-5 py-4 pb-2 bg-gray-50">
-            <h2 class="text-xl font-medium">24 Recipes Found</h2>
-        </div>
-
-        <div class="flex-1 overflow-y-auto px-4 pb-24 bg-gray-50">
+        <div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-gray-50">
             <div class="grid grid-cols-2 gap-3">
                 
                 <div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
                     <div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
-                        <span class="text-white font-medium text-xs">Pancakes</span>
+                        <span class="text-white font-medium text-xs">Placki</span>
                     </div>
                     <div class="p-3 flex flex-col flex-1">
-                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Fluffy Pancakes</h3>
-                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Classic breakfast pancakes</p>
+                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Puszyste placki</h3>
+                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Klasyczne placki na śniadanie</p>
                         <div class="mt-auto">
                             <div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
-                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>15m</span></div>
-                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>320 cal</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>15 min</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>320 kcal</span></div>
                             </div>
                             <div class="flex flex-wrap gap-1">
-                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Breakfast</span>
+                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Śniadanie</span>
                             </div>
                         </div>
                     </div>
@@ -40,18 +36,18 @@ export function getRecipeListHTML() {
 
                 <div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
                     <div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
-                        <span class="text-white font-medium text-xs">Salad</span>
+                        <span class="text-white font-medium text-xs">Sałatka</span>
                     </div>
                     <div class="p-3 flex flex-col flex-1">
-                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Chicken Salad</h3>
-                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Healthy greens with grilled chicken</p>
+                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Sałatka z kurczakiem</h3>
+                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Zielone warzywa z grillowanym kurczakiem</p>
                         <div class="mt-auto">
                             <div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
-                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>20m</span></div>
-                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>250 cal</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>20 min</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>250 kcal</span></div>
                             </div>
                             <div class="flex flex-wrap gap-1">
-                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Lunch</span>
+                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Obiad</span>
                             </div>
                         </div>
                     </div>
@@ -59,18 +55,18 @@ export function getRecipeListHTML() {
 
                 <div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
                     <div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
-                        <span class="text-white font-medium text-xs">Pasta</span>
+                        <span class="text-white font-medium text-xs">Makaron</span>
                     </div>
                     <div class="p-3 flex flex-col flex-1">
-                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Tomato Basil Pasta</h3>
-                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Rich garlic and tomato sauce</p>
+                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Makaron z pomidorami i bazylią</h3>
+                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Aromatyczny sos pomidorowy z czosnkiem</p>
                         <div class="mt-auto">
                             <div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
-                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>30m</span></div>
-                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>450 cal</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>30 min</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>450 kcal</span></div>
                             </div>
                             <div class="flex flex-wrap gap-1">
-                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Dinner</span>
+                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Kolacja</span>
                             </div>
                         </div>
                     </div>
@@ -78,18 +74,18 @@ export function getRecipeListHTML() {
                 
                 <div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
                     <div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
-                        <span class="text-white font-medium text-xs">Smoothie</span>
+                        <span class="text-white font-medium text-xs">Koktajl</span>
                     </div>
                     <div class="p-3 flex flex-col flex-1">
-                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Berry Smoothie</h3>
-                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Mixed berries and yogurt power blend</p>
+                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Koktajl owocowy</h3>
+                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Mix jagód i jogurtu</p>
                         <div class="mt-auto">
                             <div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
-                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>5m</span></div>
-                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>180 cal</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>5 min</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>180 kcal</span></div>
                             </div>
                             <div class="flex flex-wrap gap-1">
-                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Snack</span>
+                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Przekąska</span>
                             </div>
                         </div>
                     </div>
@@ -97,18 +93,18 @@ export function getRecipeListHTML() {
 
                 <div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
                     <div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
-                        <span class="text-white font-medium text-xs">Avocado Toast</span>
+                        <span class="text-white font-medium text-xs">Tost z awokado</span>
                     </div>
                     <div class="p-3 flex flex-col flex-1">
-                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Avocado Toast</h3>
-                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Sourdough with smashed avocado</p>
+                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Tost z awokado</h3>
+                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Chleb na zakwasie z rozgniecionym awokado</p>
                         <div class="mt-auto">
                             <div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
-                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>10m</span></div>
-                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>220 cal</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>10 min</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>220 kcal</span></div>
                             </div>
                             <div class="flex flex-wrap gap-1">
-                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Breakfast</span>
+                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Śniadanie</span>
                             </div>
                         </div>
                     </div>
@@ -116,18 +112,18 @@ export function getRecipeListHTML() {
 
                 <div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
                     <div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
-                        <span class="text-white font-medium text-xs">Salmon</span>
+                        <span class="text-white font-medium text-xs">Łosoś</span>
                     </div>
                     <div class="p-3 flex flex-col flex-1">
-                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Grilled Salmon</h3>
-                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Fresh salmon with lemon butter</p>
+                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Grillowany łosoś</h3>
+                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Świeży łosoś z masłem cytrynowym</p>
                         <div class="mt-auto">
                             <div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
-                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>25m</span></div>
-                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>380 cal</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>25 min</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>380 kcal</span></div>
                             </div>
                             <div class="flex flex-wrap gap-1">
-                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Dinner</span>
+                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Kolacja</span>
                             </div>
                         </div>
                     </div>
@@ -138,15 +134,15 @@ export function getRecipeListHTML() {
                         <span class="text-white font-medium text-xs">Tacos</span>
                     </div>
                     <div class="p-3 flex flex-col flex-1">
-                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Beef Tacos</h3>
-                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Spicy ground beef with fresh salsa</p>
+                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Tacos z wołowiną</h3>
+                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Pikantna mielona wołowina ze świeżą salsą</p>
                         <div class="mt-auto">
                             <div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
-                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>20m</span></div>
-                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>410 cal</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>20 min</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>410 kcal</span></div>
                             </div>
                             <div class="flex flex-wrap gap-1">
-                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Dinner</span>
+                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Kolacja</span>
                             </div>
                         </div>
                     </div>
@@ -154,18 +150,18 @@ export function getRecipeListHTML() {
 
                 <div onclick="openRecipeDetail()" class="border border-gray-200 rounded-xl overflow-hidden shadow-sm flex flex-col bg-white cursor-pointer hover:shadow-md transition-shadow">
                     <div class="h-32 bg-[#d4d4d4] relative flex items-center justify-center">
-                        <span class="text-white font-medium text-xs">Oatmeal</span>
+                        <span class="text-white font-medium text-xs">Owsianka</span>
                     </div>
                     <div class="p-3 flex flex-col flex-1">
-                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Oatmeal Bowl</h3>
-                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Warm oats with honey and nuts</p>
+                        <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-black mb-1 line-clamp-1">Miska owsianki</h3>
+                        <p class="text-gray-500 text-xs mb-3 line-clamp-2">Ciepła owsianka z miodem i orzechami</p>
                         <div class="mt-auto">
                             <div class="flex items-center justify-between text-[11px] text-gray-600 font-medium mb-2">
-                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>10m</span></div>
-                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>210 cal</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-clock text-gray-400"></i><span>10 min</span></div>
+                                <div class="flex items-center gap-1"><i class="fas fa-fire text-gray-400"></i><span>210 kcal</span></div>
                             </div>
                             <div class="flex flex-wrap gap-1">
-                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Breakfast</span>
+                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-[10px] rounded-md font-medium">Śniadanie</span>
                             </div>
                         </div>
                     </div>
@@ -175,11 +171,11 @@ export function getRecipeListHTML() {
         </div>
 
         <div class="absolute bottom-0 w-full bg-white border-t border-gray-200 flex justify-between px-6 py-3 pb-6 z-20">
-            <button class="flex flex-col items-center gap-1 text-black"><i class="fas fa-book text-xl"></i><span class="text-[11px] font-medium">Recipes</span></button>
-            <button class="flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700"><i class="far fa-calendar-alt text-xl"></i><span class="text-[11px] font-medium">Planner</span></button>
-            <button class="flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700"><i class="fas fa-shopping-cart text-xl"></i><span class="text-[11px] font-medium">Shopping</span></button>
-            <button class="flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700"><i class="fas fa-box text-xl"></i><span class="text-[11px] font-medium">Inventory</span></button>
+            <button class="flex flex-col items-center gap-1 text-black"><i class="fas fa-book text-xl"></i><span class="text-[11px] font-medium">Przepisy</span></button>
+            <button class="flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700"><i class="far fa-calendar-alt text-xl"></i><span class="text-[11px] font-medium">Planer</span></button>
+            <button class="flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700"><i class="fas fa-shopping-cart text-xl"></i><span class="text-[11px] font-medium">Zakupy</span></button>
+            <button class="flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700"><i class="fas fa-box text-xl"></i><span class="text-[11px] font-medium">Zapasy</span></button>
         </div>
     </div>
     `;
-}
\ No newline at end of file
+}