footer fix

src/components/Footer/Footer.jsx

@@ -5,11 +5,9 @@ import { fetchDatabaseVersion, triggerFullImport } from '../../services/api';
 function Footer() {
   const [dbVersion, setDbVersion] = useState(null);
   const [importing, setImporting] = useState(false);
-  const [error, setError] = useState(null);
-  const [showModal, setShowModal] = useState(false);
   const [modalMessage, setModalMessage] = useState('');
+  const [showModal, setShowModal] = useState(false);
 
-  // Fetch DB version on mount
   useEffect(() => {
     fetchDatabaseVersion()
       .then(data => setDbVersion(data.database_version))
@@ -22,7 +20,6 @@ function Footer() {
 
   const handleImport = async () => {
     setImporting(true);
-    setError(null);
     try {
       const result = await triggerFullImport();
       const data = await fetchDatabaseVersion();
@@ -39,18 +36,21 @@ function Footer() {
 
   return (
     <>
-      <div className="footer">
+      <footer className="footer">
         <span>DB Version: {dbVersion || 'Loading...'}</span>
         <button onClick={handleImport} disabled={importing}>
           {importing ? 'Importing...' : 'Full Import'}
         </button>
-      </div>
+      </footer>
 
       {showModal && (
-        <div className="import-modal">
-          <div>{modalMessage}</div>
-          <button onClick={() => setShowModal(false)}>Close</button>
-        </div>
+        <>
+          <div className="modal-backdrop" onClick={() => setShowModal(false)} />
+          <div className="import-modal">
+            <div>{modalMessage}</div>
+            <button onClick={() => setShowModal(false)}>Close</button>
+          </div>
+        </>
       )}
     </>
   );