From 3cb651518cd13d04de364f8a46482ab9620eac32 Mon Sep 17 00:00:00 2001
From: Artur Oliveira <artur.oliveira@hittelco.com>
Date: Tue, 16 Dec 2025 11:46:28 -0300
Subject: [PATCH] =?UTF-8?q?style(dashboard):=20melhorar=20estiliza=C3=A7?=
 =?UTF-8?q?=C3=A3o=20da=20tabela?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adiciona borda e sombra ao container da tabela
- Torna cabeçalho sticky para melhor leitura em rolagem
- Adiciona zebra striping nas linhas com `even:` e hover suave
- Mantém `Styles` existente para células e cabeçalho
---
 frontend/src/pages/Dashboard.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index cb9b023..cb9b619 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -36,10 +36,10 @@ export const Dashboard = () => {
                         <div className="p-4 text-text-secondary text-sm">Nenhum servidor encontrado.</div>
                     )}
                     {!loading && !error && servers.length > 0 && (
-                        <div className="overflow-x-auto">
-                            <table className="min-w-full divide-y divide-cardBorder">
-                                <thead className="bg-gray-50">
-                                    <tr>
+                        <div className="overflow-x-auto rounded-lg shadow-sm border border-cardBorder">
+                            <table className="min-w-full divide-y divide-cardBorder table-auto">
+                                <thead className="bg-gray-50 sticky top-0">
+                                    <tr className="text-left">
                                         <th className={Styles.tableHeadCell}>Nome</th>
                                         <th className={Styles.tableHeadCell}>IP</th>
                                         <th className={Styles.tableHeadCell}>Porta</th>
@@ -49,9 +49,9 @@ export const Dashboard = () => {
                                         <th className={Styles.tableHeadCell}>Banco</th>
                                     </tr>
                                 </thead>
-                                <tbody className="divide-y divide-cardBorder bg-white">
+                                <tbody className="bg-white divide-y divide-cardBorder">
                                     {servers.map((server) => (
-                                        <tr key={server.id} className="hover:bg-gray-50 transition-colors">
+                                        <tr key={server.id} className="hover:bg-gray-50 transition-colors even:bg-gray-50/50">
                                             <td className={Styles.rowCell}>{server.name}</td>
                                             <td className={Styles.rowCell}>{server.ip}</td>
                                             <td className={Styles.rowCell}>{server.port}</td>