artur.oliveira
/
hit-server-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(dashboard): melhorar estilização da tabela 

- 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
master
Artur Oliveira 2025-12-16 11:46:28 -03:00
parent 529918c37b
commit 3cb651518c
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/pages/Dashboard.tsx
View File

@ -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>