Refactor meal category colors from blue/green/brown to orange/amber/yellow

Author: rgzpaul

create.php

@@ -15,14 +15,14 @@
             'protein' => 10,
             'carbs' => 50,
             'fat' => 5,
-            'color' => 'blue'
+            'color' => 'amber'
         ],
         [
             'name' => 'Chicken Salad',
             'protein' => 30,
             'carbs' => 15,
             'fat' => 18,
-            'color' => 'green'
+            'color' => 'orange'
         ]
     ];
     file_put_contents($mealsFile, json_encode($initialMeals, JSON_PRETTY_PRINT));
@@ -356,9 +356,9 @@ class="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-ston
                     <label for="color" class="block text-sm font-medium text-stone-600 mb-1.5">Category</label>
                     <select id="color" name="color"
                         class="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:border-transparent transition-all">
-                        <option value="blue">Protein-rich</option>
-                        <option value="brown">Snacks</option>
-                        <option value="orange">Mixed</option>
+                        <option value="orange">Protein-rich</option>
+                        <option value="amber">Mixed</option>
+                        <option value="yellow">Snacks</option>
                     </select>
                 </div>
 
@@ -497,10 +497,9 @@ class="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-ston
                         <label for="edit-color" class="block text-sm font-medium text-stone-600 mb-1.5">Category</label>
                         <select id="edit-color" name="color"
                             class="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:border-transparent transition-all">
-                            <option value="blue">Protein-rich</option>
-                            <option value="green">Vegetables</option>
-                            <option value="brown">Snacks</option>
-                            <option value="orange">Mixed</option>
+                            <option value="orange">Protein-rich</option>
+                            <option value="amber">Mixed</option>
+                            <option value="yellow">Snacks</option>
                         </select>
                     </div>
 

index.php

@@ -16,42 +16,42 @@
             'protein' => 10,
             'carbs' => 50,
             'fat' => 5,
-            'color' => 'green'
+            'color' => 'amber'
         ],
         [
             'name' => 'Chicken Salad',
             'protein' => 30,
             'carbs' => 15,
             'fat' => 18,
-            'color' => 'blue'
+            'color' => 'orange'
         ],
         [
             'name' => 'Protein Shake',
             'protein' => 25,
             'carbs' => 10,
             'fat' => 3,
-            'color' => 'blue'
+            'color' => 'orange'
         ],
         [
             'name' => 'Salmon with Rice',
             'protein' => 35,
             'carbs' => 40,
             'fat' => 15,
-            'color' => 'orange'
+            'color' => 'amber'
         ],
         [
             'name' => 'Greek Yogurt',
             'protein' => 15,
             'carbs' => 8,
             'fat' => 5,
-            'color' => 'blue'
+            'color' => 'orange'
         ],
         [
             'name' => 'Banana',
             'protein' => 1,
             'carbs' => 27,
             'fat' => 0,
-            'color' => 'brown'
+            'color' => 'yellow'
         ]
     ];
     file_put_contents($mealsFile, json_encode($initialMeals, JSON_PRETTY_PRINT));
@@ -117,7 +117,7 @@ function calculateKcal($protein, $carbs, $fat)
             'protein' => $mealToAdd['protein'],
             'carbs' => $mealToAdd['carbs'],
             'fat' => $mealToAdd['fat'],
-            'color' => isset($mealToAdd['color']) ? $mealToAdd['color'] : 'blue'
+            'color' => isset($mealToAdd['color']) ? $mealToAdd['color'] : 'orange'
         ];
         $dailyMeals[$targetDate]['meals'][] = $newMeal;
 
@@ -308,7 +308,7 @@ function calculateKcal($protein, $carbs, $fat)
             'protein' => $meal['protein'],
             'carbs' => $meal['carbs'],
             'fat' => $meal['fat'],
-            'color' => isset($meal['color']) ? $meal['color'] : 'blue',
+            'color' => isset($meal['color']) ? $meal['color'] : 'orange',
             'count' => 1,
             'indices' => [$index]
         ];
@@ -445,17 +445,17 @@ function calculateKcal($protein, $carbs, $fat)
                             <button type="submit" name="add_meal"
                                 class="meal-button h-full w-full
                                 <?php
-                                $buttonColor = isset($meal['color']) ? $meal['color'] : 'grey';
+                                $buttonColor = isset($meal['color']) ? $meal['color'] : 'orange';
                                 switch ($buttonColor) {
-                                    case 'brown':
-                                        echo 'bg-amber-700 hover:bg-amber-800';
+                                    case 'yellow':
+                                        echo 'bg-yellow-500 hover:bg-yellow-600';
                                         break;
-                                    case 'orange':
-                                        echo 'bg-orange-500 hover:bg-orange-600';
+                                    case 'amber':
+                                        echo 'bg-amber-500 hover:bg-amber-600';
                                         break;
-                                    case 'blue':
+                                    case 'orange':
                                     default:
-                                        echo 'bg-blue-600 hover:bg-blue-700';
+                                        echo 'bg-orange-500 hover:bg-orange-600';
                                         break;
                                 }
                                 ?> text-white py-3 px-3 rounded-lg text-left pr-8">

sort.js

@@ -73,16 +73,15 @@ if (mealContainer) {
 
     // Extract color class from class list
     const colorA = Array.from(buttonA.classList).find(cls =>
-      cls.startsWith('bg-stone-') && !cls.includes('hover'));
+      (cls.startsWith('bg-orange-') || cls.startsWith('bg-amber-') || cls.startsWith('bg-yellow-')) && !cls.includes('hover'));
     const colorB = Array.from(buttonB.classList).find(cls =>
-      cls.startsWith('bg-stone-') && !cls.includes('hover'));
+      (cls.startsWith('bg-orange-') || cls.startsWith('bg-amber-') || cls.startsWith('bg-yellow-')) && !cls.includes('hover'));
 
     // Define color order (darker shades first)
     const colorOrder = {
-      'bg-stone-800': 1,
-      'bg-stone-700': 2,
-      'bg-stone-600': 3,
-      'bg-stone-500': 4
+      'bg-orange-500': 1,
+      'bg-amber-500': 2,
+      'bg-yellow-500': 3
     };
 
     return (colorOrder[colorA] || 5) - (colorOrder[colorB] || 5);