From 8d7071c24aa6380cfa9da69512774cb0435be5ac Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 31 Oct 2024 09:05:12 +0100
Subject: [PATCH] Follow-up fixes for the styling page

Fixes the following issues with the styling page:
* The table header background wasn't themed correctly.
* The filters looked weird on smaller screens.
* Filtering was case-sensitive.
---
 src/app/pages/component-viewer/token-table.scss | 8 +++-----
 src/app/pages/component-viewer/token-table.ts   | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/component-viewer/token-table.scss b/src/app/pages/component-viewer/token-table.scss
index 0defe3e7..088b21c7 100644
--- a/src/app/pages/component-viewer/token-table.scss
+++ b/src/app/pages/component-viewer/token-table.scss
@@ -10,7 +10,7 @@ thead {
   position: sticky;
   top: 0;
   left: 0;
-  background: #fdfbff;
+  background: var(--mat-sys-surface);
   z-index: 1;
 }
 
@@ -19,10 +19,8 @@ thead {
   align-items: center;
   margin: 24px 0;
   width: 100%;
-}
-
-.filters mat-form-field {
-  margin-right: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
 }
 
 .name-field {
diff --git a/src/app/pages/component-viewer/token-table.ts b/src/app/pages/component-viewer/token-table.ts
index 1e3b4d90..7001074a 100644
--- a/src/app/pages/component-viewer/token-table.ts
+++ b/src/app/pages/component-viewer/token-table.ts
@@ -38,11 +38,11 @@ export class TokenTable {
   protected typeFilter = signal<TokenType | null>(null);
   protected types: TokenType[] = ['base', 'color', 'typography', 'density'];
   protected filteredTokens = computed(() => {
-    const name = this.nameFilter().trim();
+    const name = this.nameFilter().trim().toLowerCase();
     const typeFilter = this.typeFilter();
 
     return this.tokens().filter(token =>
-      (!name || token.overridesName.includes(name)) &&
+      (!name || token.overridesName.toLowerCase().includes(name)) &&
       (!typeFilter || token.type === typeFilter));
   });