Refactor to use Tailwind

src/pages/Wifi.jsx

@@ -44,16 +44,17 @@ export default function Wifi() {
 
   return (
     <PageLayout title="Configuração Wi-Fi">
-      {msg && <div className="message">{msg}</div>}
+      {msg && <div className="p-2 mb-2 bg-gray-200 rounded">{msg}</div>}
 
       {loading ? (
         <p>A carregar...</p>
       ) : (
-        <form className="form" onSubmit={(e) => { e.preventDefault(); save(); }}>
-          <div className="form-group">
-            <label htmlFor="ssid">SSID:</label>
+        <form className="flex flex-col gap-4" onSubmit={(e) => { e.preventDefault(); save(); }}>
+          <div>
+            <label className="block mb-1" htmlFor="ssid">SSID:</label>
             <select
               id="ssid"
+              className="border border-gray-300 rounded px-3 py-2 w-full"
               value={config.ssid}
               onChange={e => setConfig({ ...config, ssid: e.target.value })}
             >
@@ -64,18 +65,19 @@ export default function Wifi() {
             </select>
           </div>
 
-          <div className="form-group">
-            <label htmlFor="password">Palavra-passe:</label>
+          <div>
+            <label className="block mb-1" htmlFor="password">Palavra-passe:</label>
             <input
               id="password"
               type="password"
+              className="border border-gray-300 rounded px-3 py-2 w-full"
               value={config.password}
               onChange={e => setConfig({ ...config, 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>
       )}