Update Leaderboard page: Apply LiveView tab style and improve Filter Matrix card design

src/components/AssetsFilter.vue

@@ -1,40 +1,22 @@
 <template>
-    <Tabs :value="selectedAsset" @update:value="onTabChange" class="assets-filter-container">
-      <TabList>
-        <Tab 
-          v-for="asset in availableAssets" 
-          :key="asset.value" 
-          :value="asset.value"
-        >
-          <div class="flex align-items-center gap-2">
-            <img 
-              :src="getAssetImage(asset.value)" 
-              :alt="asset.label"
-              class="asset-image-small"
-            />
-            <span class="font-bold">{{ asset.label }}</span>
-          </div>
-        </Tab>
-      </TabList>
-    </Tabs>
+  <div class="assets-filter-toolbar">
+    <div class="asset-tabs">
+      <button
+        v-for="asset in availableAssets"
+        :key="asset.value"
+        class="asset-tab"
+        :class="{ 'is-active': asset.value === selectedAsset }"
+        @click="onTabChange(asset.value)"
+      >
+        {{ asset.label }}
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
-import Tab from 'primevue/tab'
-import TabPanels from 'primevue/tabpanels'
-import TabPanel from 'primevue/tabpanel'
-
 export default {
   name: 'AssetsFilter',
-  components: {
-    Tabs,
-    TabList,
-    Tab,
-    TabPanels,
-    TabPanel
-  },
   props: {
     modelValue: { type: Array, default: () => [] },
     assetOptions: { type: Array, default: () => [] }
@@ -77,15 +59,54 @@ export default {
 </script>
 
 <style scoped>
-.assets-filter-container {
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
+:root {
+  --ama-start: 239, 68, 68;
+  --ama-end: 249, 115, 22;
+  --ink-900: #111827;
+  --surface-0: #ffffff;
+  --bd-subtle: #e5e7eb;
+}
+
+.assets-filter-toolbar {
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.asset-tabs {
+  display: inline-flex;
+  gap: 6px;
+  padding: 4px;
+  border-radius: 12px;
+  background: var(--surface-0);
+  border: 1px solid var(--bd-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
 }
-.asset-image-small {
-  width: 20px;
-  height: 20px;
-  object-fit: contain;
-  flex-shrink: 0;
+
+.asset-tab {
+  min-width: 54px;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ink-900);
+  font-weight: 800;
+  letter-spacing: .02em;
+  cursor: pointer;
+  transition: all .2s ease;
+}
+
+.asset-tab:hover {
+  color: rgb(var(--ama-end));
+  border-color: rgba(var(--ama-end), .28);
+}
+
+.asset-tab.is-active {
+  color: #fff;
+  border: none;
+  background: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  box-shadow: 0 0 0 1px rgba(var(--ama-end), .22), 0 8px 18px rgba(var(--ama-end), .22);
 }
 </style>

src/views/LeaderboardView.vue

@@ -22,13 +22,12 @@
         <div class="flex gap-2 align-items-stretch">
           <!-- Desktop filter panel -->
           <div class="col-panel desktop-filter-panel" style="flex: 1; min-width: 280px;">
-            <Card class="mb-2 card-full compact-card content-card">
+            <Card class="mb-2 card-full compact-card content-card filter-matrix-card">
               <template #title>
-                <div class="mb-4 ama-gradient" style="font-size: 20px; font-weight: 800">Filter Matrix</div>
-                <Divider />
+                <div class="filter-matrix-title">Filter Matrix</div>
               </template>
               <template #content>
-                <div>
+                <div class="filter-matrix-content">
                   <AgentFilters v-model="filters" :nameOptions="nameOptions" :assetOptions="assetOptions" :modelOptions="modelOptions" :strategyOptions="strategyOptions" :dateBounds="dateBounds" />
                 </div>
               </template>
@@ -402,17 +401,45 @@ export default {
   display: flex;
   flex-direction: column;
   background: #ffffff;
-  border: 1px solid var(--bd-soft);
+  border: 1px solid #e5e7eb;
   border-radius: 16px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.04);
   transition: all 0.2s ease;
 }
 
 .card-full:hover {
-  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
   transform: translateY(-1px);
 }
 
+/* Filter Matrix Card Special Styling */
+.filter-matrix-card {
+  background: linear-gradient(135deg, #fefefe 0%, #fafbfc 100%);
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04);
+}
+
+.filter-matrix-card:hover {
+  transform: none;
+}
+
+.filter-matrix-title {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  background: linear-gradient(90deg, rgb(239, 68, 68), rgb(249, 115, 22));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 8px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #f3f4f6;
+}
+
+.filter-matrix-content {
+  padding-top: 8px;
+}
+
 .card-full :deep(.p-card-body) {
   display: flex;
   flex-direction: column;