Fixed UI/UX issues with CareerExplorer and Modal (loading stick).

src/App.js

@@ -120,6 +120,11 @@ function App() {
                     Getting Started
                   </Link>
                 </li>
+                <li>
+                  <Link className="text-blue-600 hover:text-blue-800" to="/career-explorer">
+                    Career Explorer
+                  </Link>
+                </li>
                 <li>
                   <Link className="text-blue-600 hover:text-blue-800" to="/interest-inventory">
                     Interest Inventory

src/components/CareerExplorer.js

@@ -5,6 +5,7 @@ import CareerSuggestions from './CareerSuggestions.js';
 import CareerPrioritiesModal from './CareerPrioritiesModal.js';
 import CareerModal from './CareerModal.js';
 import CareerSearch from './CareerSearch.js';
+import {Button} from './ui/button.js';
 import axios from 'axios';
 
 const STATES = [
@@ -105,6 +106,7 @@ function CareerExplorer({  }) {
   };
 
   useEffect(() => {
+    setLoading(true);
   const fetchUserProfile = async () => {
     try {
       const token = localStorage.getItem('token');
@@ -162,6 +164,7 @@ function CareerExplorer({  }) {
     } catch (err) {
       console.error('Error fetching user profile:', err);
       setShowModal(true); // fallback if error
+      setLoading(false);
     }
   };
 
@@ -206,7 +209,7 @@ function CareerExplorer({  }) {
     const socCode = career.code;
     setSelectedCareer(career);
       setError(null);
-      setCareerDetails({});
+      setCareerDetails(null);
       setSalaryData([]);
       setEconomicProjections({});
 
@@ -216,19 +219,27 @@ function CareerExplorer({  }) {
     if (!socCode) {
       console.error('SOC Code is missing');
       setError('SOC Code is missing');
+       setLoading(false);
       return;
     }
 
     try {
       // CIP fetch
       const cipResponse = await fetch(`${apiUrl}/cip/${socCode}`);
-      if (!cipResponse.ok) throw new Error('Failed to fetch CIP Code');
+      if (!cipResponse.ok) {setError(`We're sorry, but specific details for "${career.title}" are not available at this time.`);
+      setCareerDetails({ error: `We're sorry, but detailed info for "${career.title}" isn't available right now.`});
+      setLoading(false);
+      return;
+    }
       const { cipCode } = await cipResponse.json();
       const cleanedCipCode = cipCode.replace('.', '').slice(0, 4);
 
       // Job details
       const jobDetailsResponse = await fetch(`${apiUrl}/onet/career-description/${socCode}`);
-      if (!jobDetailsResponse.ok) throw new Error('Failed to fetch job description');
+      if (!jobDetailsResponse.ok){setCareerDetails({ error: `We're sorry, but detailed info for "${career.title}" isn't available right now.`});
+  setLoading(false);
+  return;
+}
       const { description, tasks } = await jobDetailsResponse.json();
 
       // Salary
@@ -297,14 +308,16 @@ function CareerExplorer({  }) {
       setCareerDetails(updatedCareerDetails);
 
     } catch (error) {
-      console.error('Error processing career click:', error.message);
+  console.error('Error processing career click:', error.message);
-      setError('Failed to load data');
+  setCareerDetails({
+    error: `We're sorry, but detailed info for "${career.title}" isn't available right now.`
+      });
     } finally {
       setLoading(false);
     }
-  },
+      },
-  [userState, apiUrl, areaTitle, userZipcode]
+      [userState, apiUrl, areaTitle, userZipcode]
-);
+    );
   
     // ============= Let typed careers open PopoutPanel =============
     const handleCareerFromSearch = useCallback(
@@ -510,6 +523,7 @@ function CareerExplorer({  }) {
  };
 
   return (
+  
     <div className="career-explorer-container bg-white p-6 rounded shadow">
       {renderLoadingOverlay()}
       {showModal && (
@@ -519,7 +533,7 @@ function CareerExplorer({  }) {
         />
       )}
       <div className="flex justify-between items-center mb-4">
-        <h2 className="text-xl font-semibold">Explore Careers</h2>
+        <h2 className="text-xl font-semibold">Explore Careers - use the tools in this area to find your perfect career</h2>
         <CareerSearch
                 onCareerSelected={(careerObj) => {
                   console.log('[Dashboard] onCareerSelected =>', careerObj);
@@ -529,7 +543,7 @@ function CareerExplorer({  }) {
               />
       </div>
 
-      <h2 className="text-xl font-semibold mb-4">Career Comparison Matrix</h2>
+      <h2 className="text-xl font-semibold mb-4">Career Comparison</h2>
       {careerList.length ? (
         <table className="w-full mb-4">
           <thead>
@@ -588,7 +602,7 @@ function CareerExplorer({  }) {
                   <td className="border p-2">{recognitionRating}</td>
                   <td className="border p-2 font-bold">{matchScore.toFixed(1)}%</td>
                   <td className="border p-2">
-                    <button className="text-red-500" onClick={() => removeCareerFromList(career.code)}>Remove</button>
+                    <Button className="bg-red-600 text-black-500" onClick={() => removeCareerFromList(career.code)}>Remove</Button>
                   </td>
                 </tr>
               );

src/components/CareerModal.js

@@ -9,6 +9,19 @@ function CareerModal({ career, careerDetails, closeModal, addCareerToList }) {
 
   console.log('CareerModal props:', { career, careerDetails});
   
+  if (careerDetails?.error) {
+    return (
+      <div className="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center z-50">
+        <div className="bg-white rounded-lg shadow-lg p-6">
+          <p className="text-lg text-gray-700 mb-4">{careerDetails.error}</p>
+          <button onClick={closeModal} className="bg-red-500 text-white p-2 rounded">
+            Close
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   if (!careerDetails?.salaryData) {
   return (
     <div className="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center z-50">

src/components/CareerSearch.js

@@ -63,7 +63,7 @@ const CareerSearch = ({ onCareerSelected }) => {
 
   return (
     <div style={{ marginBottom: '1rem' }}>
-      <h3>Search for Career</h3>
+      <h3>Search for Career (select from suggestions)</h3>
       <input
         value={searchInput}
         onChange={(e) => setSearchInput(e.target.value)}