Alteração modal CPF

src/App.css

@@ -35,4 +35,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}

src/components/patients/PatientForm.jsx

@@ -105,18 +105,17 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
 
   const handleSubmit = async () => {
     if (!formData.full_name || !formData.cpf || !formData.sex || !formData.birth_date){
+      console.log(formData.full_name, formData.cpf, formData.sex, formData.birth_date)
       setErrorModalMsg('Por favor, preencha Nome, CPF, Gênero e data de nascimento.');
-      setShowModal404(true);
+      setShowModal404(true); 
-      
+      return
     }
-
    
     onSave({
       ...formData,bmi:12.0
     });
   
   };
-  
   return (
     <div className="card p-3">
       <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>

src/pages/PatientCadastroManager.jsx

@@ -3,9 +3,12 @@ import PatientForm from '../components/patients/PatientForm';
 import API_KEY from '../components/utils/apiKeys';
 import { useAuth } from '../components/utils/AuthProvider';
 import { useNavigate } from 'react-router-dom';
+
 function PatientCadastroManager( {setCurrentPage} ) {
   const navigate = useNavigate()
   const [showModal, setShowModal] = useState(false);
+  const [infosModal, setInfosModal] = useState({title:'', message:''});
+
   const { getAuthorizationHeader, isAuthenticated } = useAuth();
   const [formData, setFormData] = useState({})
  
@@ -43,10 +46,13 @@ function PatientCadastroManager( {setCurrentPage} ) {
       console.log("Erro ao salvar paciente:", data);
       if (data.code === "23505") {
         setShowModal(true);
+        setInfosModal({
+          title: 'Erro ao salvar paciente',
+          message: 'CPF já cadastrado. Por favor, verifique o CPF informado.'
+        });
       }
     }
     else{
-     
       console.log("ATUALIZADO COM SUCESSO");
       navigate('/pacientes')
     }
@@ -56,24 +62,19 @@ function PatientCadastroManager( {setCurrentPage} ) {
   }
 };
 
-
   return (
     <>
       <div className="page-heading">
-
           {showModal &&(
           <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
           <div className="modal-dialog">
             <div className="modal-content">
-              <div className="modal-header">
+              <div className="modal-header bg-danger text-white">
-                <h5 className="modal-title">Ops! Este CPF já está cadastrado</h5>
+                <h5 className="modal-title">{infosModal.title}</h5>
                 <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
               </div>
               <div className="modal-body">
-                <div className="text-center mb-3">
+                <p>{infosModal.message}</p>
-                 
-                </div>
-               
               </div>
               <div className="modal-footer">
                 <button