Refactor to use Tailwind

src/pages/Connectivity.jsx

@@ -78,41 +78,43 @@ const Connectivity = () => {
             </div>
           )}
 
-          <h2>Configuração Wi-Fi</h2>
-          {wifiMsg && <div className="message">{wifiMsg}</div>}
-          <form className="form" onSubmit={e => { e.preventDefault(); saveWifi(); }}>
-            
-            <div className="form-group">
-              <label htmlFor="wifi-ssid">SSID:</label>
+          <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>}
+          <form className="flex flex-col gap-4" onSubmit={e => { e.preventDefault(); saveWifi(); }}>
+
+            <div>
+              <label className="block mb-1" htmlFor="wifi-ssid">SSID:</label>
               <input
                 id="wifi-ssid"
                 type="text"
+                className="border border-gray-300 rounded px-3 py-2 w-full"
                 value={wifiConfig.ssid}
                 onChange={e => setWifiConfig({ ...wifiConfig, ssid: e.target.value })}
               />
             </div>
 
 
-            <div className="form-group">
-              <label htmlFor="wifi-password">Palavra-passe:</label>
+            <div>
+              <label className="block mb-1" htmlFor="wifi-password">Palavra-passe:</label>
               <input
                 id="wifi-password"
                 type="password"
+                className="border border-gray-300 rounded px-3 py-2 w-full"
                 value={wifiConfig.password}
                 onChange={e => setWifiConfig({ ...wifiConfig, password: e.target.value })}
               />
             </div>
 
-            <div className="button-grid">
-              <button type="submit">Guardar</button>
+            <div>
+              <button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700" type="submit">Guardar</button>
             </div>
           </form>
 
-          <h2>Configuração MQTT</h2>
-          {mqttMsg && <div className="message">{mqttMsg}</div>}
-          <form className="form" onSubmit={e => { e.preventDefault(); saveMqtt(); }}>
-            <div className="form-group">
-              <label className="checkbox-label">
+          <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>}
+          <form className="flex flex-col gap-4" onSubmit={e => { e.preventDefault(); saveMqtt(); }}>
+            <div>
+              <label className="flex items-center gap-2">
                 Ativar MQTT
                 <input
                   type="checkbox"
@@ -122,58 +124,62 @@ const Connectivity = () => {
               </label>
             </div>
 
-            <div className="form-group">
-              <label htmlFor="mqtt-host">Host:</label>
+            <div>
+              <label className="block mb-1" htmlFor="mqtt-host">Host:</label>
               <input
                 id="mqtt-host"
                 type="text"
+                className="border border-gray-300 rounded px-3 py-2 w-full"
                 value={mqttConfig.host}
                 onChange={e => setMqttConfig({ ...mqttConfig, host: e.target.value })}
               />
             </div>
 
-            <div className="form-group">
-              <label htmlFor="mqtt-port">Porta:</label>
+            <div>
+              <label className="block mb-1" htmlFor="mqtt-port">Porta:</label>
               <input
                 id="mqtt-port"
                 type="number"
+                className="border border-gray-300 rounded px-3 py-2 w-full"
                 value={mqttConfig.port}
                 onChange={e => setMqttConfig({ ...mqttConfig, port: parseInt(e.target.value || 0) })}
               />
             </div>
 
-            <div className="form-group">
-              <label htmlFor="mqtt-username">Utilizador:</label>
+            <div>
+              <label className="block mb-1" htmlFor="mqtt-username">Utilizador:</label>
               <input
                 id="mqtt-username"
                 type="text"
+                className="border border-gray-300 rounded px-3 py-2 w-full"
                 value={mqttConfig.username}
                 onChange={e => setMqttConfig({ ...mqttConfig, username: e.target.value })}
               />
             </div>
 
-            <div className="form-group">
-              <label htmlFor="mqtt-password">Palavra-passe:</label>
+            <div>
+              <label className="block mb-1" htmlFor="mqtt-password">Palavra-passe:</label>
               <input
                 id="mqtt-password"
                 type="password"
+                className="border border-gray-300 rounded px-3 py-2 w-full"
                 value={mqttConfig.password}
                 onChange={e => setMqttConfig({ ...mqttConfig, password: e.target.value })}
               />
             </div>
 
-            <div className="form-group">
-              <label htmlFor="mqtt-topic">Tópico:</label>
+            <div>
+              <label className="block mb-1" htmlFor="mqtt-topic">Tópico:</label>
               <input
                 id="mqtt-topic"
                 type="text"
+                className="border border-gray-300 rounded px-3 py-2 w-full"
                 value={mqttConfig.topic}
                 onChange={e => setMqttConfig({ ...mqttConfig, topic: e.target.value })}
               />
             </div>
-
-            <div className="button-grid">
-              <button type="submit">Guardar</button>
+            <div>
+              <button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700" type="submit">Guardar</button>
             </div>
           </form>
         </>