blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: unify filter UI, add custom to-from date picker, and ensure all buttons use pointer cursors

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-07 15:18:32 -03:00
parent b048c963dd
commit df5f60e540
4 changed files with 68 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/Clients.tsx
View File

@@ -90,7 +90,7 @@ const Clients = () => {
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value as SortOption)}
className="appearance-none bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border text-zinc-700 dark:text-dark-text text-sm rounded-xl pl-9 pr-8 py-2.5 focus:outline-none focus:border-brand-primary transition-all shadow-sm cursor-pointer"
className="appearance-none bg-dark-card border border-dark-border text-dark-text text-sm rounded-xl pl-9 pr-8 py-2.5 focus:outline-none focus:border-brand-primary transition-colors shadow-sm cursor-pointer"
>
<option value="recent">Mais Recentes</option>
<option value="spent_desc">Maior Gasto</option>
@@ -107,7 +107,7 @@ const Clients = () => {
placeholder="Buscar cliente..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full md:w-64 bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border text-zinc-900 dark:text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20 transition-all shadow-sm"
className="w-full md:w-64 bg-dark-card border border-dark-border text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary transition-colors shadow-sm"
/>
</div>
</div>
@@ -141,7 +141,7 @@ const Clients = () => {
<td className="px-6 py-2.5 text-right">
<Link
to={`/clients/${encodeURIComponent(client.name)}`}
className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity"
className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity cursor-pointer"
>
Ver detalhes
<ChevronRight className="w-3.5 h-3.5 ml-1" />
@@ -163,7 +163,7 @@ const Clients = () => {
setItemsPerPage(Number(e.target.value));
setCurrentPage(1);
}}
className="bg-zinc-50 dark:bg-dark-input border border-zinc-200 dark:border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer"
className="bg-dark-card border border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer text-dark-text"
>
<option value={10}>10</option>
<option value={20}>20</option>
@@ -181,14 +181,14 @@ const Clients = () => {
<button
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
disabled={currentPage === 1}
className="p-1 rounded-lg border border-zinc-200 dark:border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:bg-zinc-50 dark:hover:bg-dark-input transition-colors text-zinc-600 dark:text-dark-text"
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
>
<ChevronLeft className="w-5 h-5" />
</button>
<button
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages || totalPages === 0}
className="p-1 rounded-lg border border-zinc-200 dark:border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:bg-zinc-50 dark:hover:bg-dark-input transition-colors text-zinc-600 dark:text-dark-text"
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
>
<ChevronRight className="w-5 h-5" />
</button>

10
src/pages/Products.tsx
View File

@@ -86,7 +86,7 @@ const Products = () => {
placeholder="Buscar por nome ou ID..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full md:w-64 bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border text-zinc-900 dark:text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20 transition-all shadow-sm"
className="w-full md:w-64 bg-dark-card border border-dark-border text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary transition-colors shadow-sm"
/>
</div>
</div>
@@ -122,7 +122,7 @@ const Products = () => {
<td className="px-6 py-2.5 text-right">
<Link
to={`/products/${product.id}`}
className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity bg-brand-primary/10 px-3 py-1.5 rounded-lg"
className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity bg-brand-primary/10 px-3 py-1.5 rounded-lg cursor-pointer"
>
<TrendingUp className="w-3.5 h-3.5 mr-1.5" />
Ver Gráfico
@@ -144,7 +144,7 @@ const Products = () => {
setItemsPerPage(Number(e.target.value));
setCurrentPage(1);
}}
className="bg-zinc-50 dark:bg-dark-input border border-zinc-200 dark:border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer"
className="bg-dark-card border border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer text-dark-text"
>
<option value={10}>10</option>
<option value={20}>20</option>
@@ -162,14 +162,14 @@ const Products = () => {
<button
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
disabled={currentPage === 1}
className="p-1 rounded-lg border border-zinc-200 dark:border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:bg-zinc-50 dark:hover:bg-dark-input transition-colors text-zinc-600 dark:text-dark-text"
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
>
<ChevronLeft className="w-5 h-5" />
</button>
<button
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages || totalPages === 0}
className="p-1 rounded-lg border border-zinc-200 dark:border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:bg-zinc-50 dark:hover:bg-dark-input transition-colors text-zinc-600 dark:text-dark-text"
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
>
<ChevronRight className="w-5 h-5" />
</button>