Uniformize success/error alerts across forms

src/pages/Connectivity.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { get, post } from '../api';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 const Connectivity = () => {
   const [loading, setLoading] = useState(true);
@@ -45,20 +46,20 @@ const Connectivity = () => {
   // Salvar configuração Wi-Fi
   const saveWifi = async () => {
     try {
-      await post('/api/v1/config/wifi', wifiConfig);  // Envia as configurações de Wi-Fi para o servidor
-      setWifiMsg('Configuração Wi-Fi gravada!');
+      await post('/api/v1/config/wifi', wifiConfig);
+      setWifiMsg('Alterações guardadas com sucesso!');
     } catch (error) {
-      setWifiMsg('Erro ao gravar Wi-Fi.');
+      setWifiMsg('Erro ao guardar alterações.');
     }
   };
 
   // Salvar configuração MQTT
   const saveMqtt = async () => {
     try {
-      await post('/api/v1/config/mqtt', mqttConfig);  // Envia as configurações de MQTT para o servidor
-      setMqttMsg('Configuração MQTT gravada!');
+      await post('/api/v1/config/mqtt', mqttConfig);
+      setMqttMsg('Alterações guardadas com sucesso!');
     } catch (error) {
-      setMqttMsg('Erro ao gravar MQTT.');
+      setMqttMsg('Erro ao guardar alterações.');
     }
   };
 
@@ -70,7 +71,7 @@ const Connectivity = () => {
 
 
           <h2 className="text-xl font-semibold mt-4">Configuração Wi-Fi</h2>
-          {wifiMsg && <div className="p-2 bg-gray-200 rounded mb-2">{wifiMsg}</div>}
+          {wifiMsg && <Alert type={wifiMsg.startsWith('Erro') ? 'error' : 'success'}>{wifiMsg}</Alert>}
           <form className="flex flex-col gap-4" onSubmit={e => { e.preventDefault(); saveWifi(); }}>
 
 
@@ -113,7 +114,7 @@ const Connectivity = () => {
           </form>
 
           <h2 className="text-xl font-semibold mt-6">Configuração MQTT</h2>
-          {mqttMsg && <div className="p-2 bg-gray-200 rounded mb-2">{mqttMsg}</div>}
+          {mqttMsg && <Alert type={mqttMsg.startsWith('Erro') ? 'error' : 'success'}>{mqttMsg}</Alert>}
           <form className="flex flex-col gap-4" onSubmit={e => { e.preventDefault(); saveMqtt(); }}>
             <div>
               <label className="flex items-center gap-2">