From bfd7d3bfec9c8a69f752bd6857a213c8211450be Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Sat, 9 May 2026 01:48:16 -0700
Subject: [PATCH] refactor(ui): align history filters controls

---
 web/src/tabs/HistoryTab.tsx | 88 +++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/web/src/tabs/HistoryTab.tsx b/web/src/tabs/HistoryTab.tsx
index 1f41b40..f550860 100644
--- a/web/src/tabs/HistoryTab.tsx
+++ b/web/src/tabs/HistoryTab.tsx
@@ -7,6 +7,7 @@ import {
 import { useCanonicalLifecycle } from '../hooks/useCanonicalLifecycle';
 import { fetchTradeHistory } from '../lib/tradeHistoryApi';
 import { fetchPositionsBootstrap } from '../lib/positionsApi';
+import { Button, Input, Select } from '../components/ui/Primitives';
 
 
 interface TradeRecord {
@@ -411,26 +412,24 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
                     </div>
 
                     <div className="flex gap-2 bg-white/5 p-1 rounded-xl shadow-inner border border-white/5">
-                        <button
+                        <Button
+                            type="button"
                             onClick={() => setSelectedProfileId('all')}
-                            className={`px-6 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${selectedProfileId === 'all'
-                                ? 'bg-[var(--bl-success)] text-black shadow-[0_0_20px_var(--bl-success-muted)]'
-                                : 'text-gray-400 hover:text-white hover:bg-white/5'
-                                }`}
+                            variant={selectedProfileId === 'all' ? 'secondary' : 'ghost'}
+                            size="sm"
                         >
                             Global
-                        </button>
+                        </Button>
                         {profiles.map(p => (
-                            <button
+                            <Button
                                 key={p.id}
+                                type="button"
                                 onClick={() => setSelectedProfileId(p.id)}
-                                className={`px-6 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${selectedProfileId === p.id
-                                    ? 'bg-[var(--bl-success)] text-black shadow-[0_0_20px_var(--bl-success-muted)]'
-                                    : 'text-gray-400 hover:text-white hover:bg-white/5'
-                                    }`}
+                                variant={selectedProfileId === p.id ? 'secondary' : 'ghost'}
+                                size="sm"
                             >
                                 {p.name}
-                            </button>
+                            </Button>
                         ))}
                     </div>
                 </div>
@@ -504,49 +503,58 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
                         </tr>
                         <tr className="bg-white/[0.015] text-left align-top">
                             <th className="px-6 py-2">
-                                <select
+                                <Select
                                     value={selectedProfileId}
                                     onChange={(e) => setSelectedProfileId(e.target.value)}
-                                    className="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] font-semibold text-gray-200 focus:outline-none focus:ring-2 focus:ring-[var(--bl-focus-ring-muted)]"
-                                >
-                                    <option value="all">All Profiles</option>
-                                    {profiles.map((profileOption) => (
-                                        <option key={profileOption.id} value={profileOption.id}>
-                                            {profileOption.name}
-                                        </option>
-                                    ))}
-                                </select>
+                                    controlSize="sm"
+                                    variant="muted"
+                                    options={[
+                                        { value: 'all', label: 'All Profiles' },
+                                        ...profiles.map((profileOption) => ({
+                                            value: profileOption.id,
+                                            label: profileOption.name,
+                                        })),
+                                    ]}
+                                />
                             </th>
                             <th className="px-6 py-2">
                                 <div className="flex flex-col gap-1">
-                                    <input
+                                    <Input
                                         type="date"
                                         value={historyDateFrom}
                                         onChange={(e) => setHistoryDateFrom(e.target.value)}
-                                        className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-[var(--bl-focus-ring-muted)]"
+                                        controlSize="sm"
+                                        variant="muted"
                                     />
-                                    <input
+                                    <Input
                                         type="date"
                                         value={historyDateTo}
                                         onChange={(e) => setHistoryDateTo(e.target.value)}
-                                        className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-[var(--bl-focus-ring-muted)]"
+                                        controlSize="sm"
+                                        variant="muted"
                                     />
                                     <div className="flex items-center gap-2">
-                                        <button
+                                        <Button
+                                            type="button"
                                             onClick={() => {
                                                 setHistoryDateFrom('');
                                                 setHistoryDateTo('');
                                             }}
-                                            className="px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
+                                            variant="ghost"
+                                            size="sm"
+                                            className="min-h-7 px-2 text-[9px]"
                                         >
                                             Clear
-                                        </button>
-                                        <button
+                                        </Button>
+                                        <Button
+                                            type="button"
                                             onClick={() => setHistorySortDirection((current) => current === 'desc' ? 'asc' : 'desc')}
-                                            className="px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
+                                            variant="ghost"
+                                            size="sm"
+                                            className="min-h-7 px-2 text-[9px]"
                                         >
                                             {historySortDirection === 'desc' ? 'Newest' : 'Oldest'}
-                                        </button>
+                                        </Button>
                                     </div>
                                 </div>
                             </th>
@@ -646,23 +654,27 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
                                         -{Math.min(historyPage * HISTORY_PAGE_SIZE, sortedHistory.length)} of {sortedHistory.length}
                                     </span>
                                     <div className="flex items-center gap-2">
-                                        <button
+                                        <Button
+                                            type="button"
                                             onClick={() => setHistoryPage((current) => Math.max(1, current - 1))}
                                             disabled={historyPage === 1}
-                                            className="px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
+                                            variant="outline"
+                                            size="sm"
                                         >
                                             Prev
-                                        </button>
+                                        </Button>
                                         <span className="text-[10px] uppercase tracking-widest text-gray-500">
                                             Page {historyPage} / {historyTotalPages}
                                         </span>
-                                        <button
+                                        <Button
+                                            type="button"
                                             onClick={() => setHistoryPage((current) => Math.min(historyTotalPages, current + 1))}
                                             disabled={historyPage >= historyTotalPages}
-                                            className="px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
+                                            variant="outline"
+                                            size="sm"
                                         >
                                             Next
-                                        </button>
+                                        </Button>
                                     </div>
                                 </div>
                             </td>