feat: enhance weather fetching experience with loading state and notifications

frontend/src/components/Header.tsx

@@ -21,7 +21,7 @@ const Header: React.FC = () => {
         </button>
       </header>
       {apiCard && (
-        <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
+        <div className="fixed inset-0 bg-gray-800 bg-opacity-40 flex items-center justify-center z-50">
           <div className="bg-white rounded-xl shadow-lg p-8 w-full max-w-md relative">
             <button
               className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-xl"