Upload 2 files

frontend/src/pages/MissionHubs.jsx

@@ -91,21 +91,21 @@ const MissionHubs = () => {
   return (
     <div className="max-w-7xl mx-auto">
       <div className="text-center mb-12">
-        <h1 className="text-4xl font-bold text-gray-800 mb-4">Mission Hubs</h1>
-        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+        <h1 className="text-4xl font-bold text-gray-800 dark:text-white mb-4">Mission Hubs</h1>
+        <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
           Explore our 6 Systems-Based Missions designed to transform the Sustainable Development Goals 
           into integrated, actionable roadmaps for policy, projects, finance, and metrics.
         </p>
         <div className="mt-6">
           {backendStatus === 'OK' ? (
-            <span className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800">
+            <span className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
               <svg className="mr-2 h-3 w-3 text-green-400" fill="currentColor" viewBox="0 0 8 8">
                 <circle cx="4" cy="4" r="3" />
               </svg>
               Connected to backend
             </span>
           ) : (
-            <span className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
+            <span className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
               <svg className="mr-2 h-3 w-3 text-yellow-400" fill="currentColor" viewBox="0 0 8 8">
                 <circle cx="4" cy="4" r="3" />
               </svg>
@@ -131,11 +131,11 @@ const MissionHubs = () => {
                 <div className={`${mission.color} mission-icon text-white shadow-lg`}>
                   {mission.name.charAt(0)}
                 </div>
-                <h3 className="text-2xl font-bold text-gray-800 mb-3">{mission.name}</h3>
-                <p className="text-gray-600 mb-6">{mission.description}</p>
+                <h3 className="text-2xl font-bold text-gray-800 dark:text-white mb-3">{mission.name}</h3>
+                <p className="text-gray-600 dark:text-gray-300 mb-6">{mission.description}</p>
                 <div className="flex justify-between items-center">
-                  <span className="text-sm text-gray-500">Click for details</span>
-                  <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <span className="text-sm text-gray-500 dark:text-gray-400">Click for details</span>
+                  <svg className="w-6 h-6 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
                   </svg>
                 </div>
@@ -148,19 +148,19 @@ const MissionHubs = () => {
       {/* Mission Details Modal */}
       {selectedMission && (
         <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-3xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+          <div className="bg-white dark:bg-slate-800 rounded-3xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
             <div className="p-8">
               <div className="flex justify-between items-start mb-6">
                 <div>
                   <div className={`${selectedMission.color} mission-icon w-24 h-24 text-4xl`}>
                     {selectedMission.name.charAt(0)}
                   </div>
-                  <h2 className="text-3xl font-bold text-gray-800 mt-4">{selectedMission.name}</h2>
-                  <p className="text-xl text-gray-600">{selectedMission.description}</p>
+                  <h2 className="text-3xl font-bold text-gray-800 dark:text-white mt-4">{selectedMission.name}</h2>
+                  <p className="text-xl text-gray-600 dark:text-gray-300">{selectedMission.description}</p>
                 </div>
                 <button 
                   onClick={closeMissionDetails}
-                  className="text-gray-500 hover:text-gray-700 bg-gray-100 rounded-full p-2"
+                  className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 bg-gray-100 dark:bg-slate-700 rounded-full p-2"
                 >
                   <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
@@ -169,13 +169,13 @@ const MissionHubs = () => {
               </div>
 
               <div className="mt-8">
-                <h3 className="text-2xl font-semibold text-gray-800 mb-4">Objectives</h3>
-                <p className="text-gray-700 text-lg bg-gray-50 p-6 rounded-2xl">{selectedMission.objectives}</p>
+                <h3 className="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Objectives</h3>
+                <p className="text-gray-700 dark:text-gray-300 text-lg bg-gray-50 dark:bg-slate-700 p-6 rounded-2xl">{selectedMission.objectives}</p>
               </div>
 
               <div className="mt-8">
-                <h3 className="text-2xl font-semibold text-gray-800 mb-4">Target Actors</h3>
-                <p className="text-gray-700 text-lg bg-gray-50 p-6 rounded-2xl">{selectedMission.target_actors}</p>
+                <h3 className="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Target Actors</h3>
+                <p className="text-gray-700 dark:text-gray-300 text-lg bg-gray-50 dark:bg-slate-700 p-6 rounded-2xl">{selectedMission.target_actors}</p>
               </div>
 
               <div className="mt-10 flex justify-end">