diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/BulkActions.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/BulkActions.jsx
index 4a17e4e..daa90f4 100644
--- a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/BulkActions.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/BulkActions.jsx
@@ -99,7 +99,7 @@ const BulkActions = ({ onRefresh }) => {
key={action.id}
onClick={action.onClick}
disabled={isLoading}
- className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-xl hover:bg-blue-50 hover:border-blue-200 hover:text-blue-600 text-sm transition-all disabled:opacity-50"
+ className="flex items-center gap-2 px-4 py-2 text-gray-500 bg-white border border-gray-200 rounded-xl hover:bg-blue-50 hover:border-blue-200 hover:text-blue-600 text-sm transition-all disabled:opacity-50"
>
{isLoading ? (
diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx
index 29fdfc1..f5cd6c4 100644
--- a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx
@@ -1,17 +1,21 @@
import { useState, useEffect } from 'react';
import { ChevronRight, RefreshCw, FolderPlus } from 'lucide-react';
import api from "@services/common/api";
+import { useAdminTheme } from '@context/AdminThemeContext';
// ============================================
// SKELETON (Private)
// ============================================
-const CategorySkeleton = () => (
-
- {[1, 2, 3, 4].map(i => (
-
- ))}
-
-);
+const CategorySkeleton = () => {
+ const { isDark } = useAdminTheme();
+ return (
+
+ {[1, 2, 3, 4].map(i => (
+
+ ))}
+
+ );
+};
// ============================================
// MAIN COMPONENT
@@ -19,6 +23,7 @@ const CategorySkeleton = () => (
const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, setAllCategories }) => {
const [categories, setCategories] = useState([]);
const [loading, setLoading] = useState(true);
+ const { isDark } = useAdminTheme();
// ------------------------------------
// FALLBACK DATA
@@ -64,13 +69,13 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
// ------------------------------------
return (
-
+
{/* Header */}
-
Categories
+
Categories
@@ -87,7 +92,7 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
onClick={() => onCategoryChange(cat.categoryId)}
className={`w-full flex items-center justify-between p-3 rounded-xl transition-all ${selectedCategory === cat.categoryId
? 'bg-blue-600 text-white shadow-md shadow-blue-200'
- : 'hover:bg-blue-50 text-gray-600'
+ : isDark ? 'hover:bg-gray-700 text-gray-400' : 'hover:bg-blue-50 text-gray-600'
}`}
>
@@ -101,7 +106,7 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
>
{cat.foodIds.length}
-
+
))}
@@ -111,7 +116,7 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
{/* Add Category */}