feat: Add style changes for filter

Author: anitta-keyvalue

src/components/TableHeader.tsx

@@ -100,8 +100,9 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
                             onChange={(e) => column.setFilter?.(e.target.value)}
                             placeholder={`Filter ${column.title || column.id}...`}
                             style={{
-                              color: theme.table?.header?.textColor,
-                              borderColor: theme.table?.header?.textColor,
+                              color: theme.table?.filter?.textColor,
+                              borderColor: theme.table?.filter?.borderColor,
+                              backgroundColor: theme.table?.filter?.background,
                             }}
                           />
                         </div>

src/defaultThemeProps.ts

@@ -2,27 +2,30 @@ import type { ThemeProps } from './types/theme';
 
 export const defaultThemeProps: ThemeProps = {
   colors: {
-    primaryColor: '#007bff',
-    textColor: '#212529',
-    borderColor: '#dee2e6',
     background: '#ffffff',
+    primaryColor: '#3498db',
+    borderColor: '#e0e0e0',
   },
   table: {
     header: {
-      background: '#e9ecef',
-      textColor: '#495057',
-      borderColor: '#dee2e6',
+      background: '#2c3e50',
+      textColor: '#ffffff',
     },
     row: {
       mainBackground: '#ffffff',
       nestedBackground: '#f8f9fa',
-      expandedBackground: '#e9ecef',
-      hoverBackground: '#f8f9fa',
+      expandedBackground: '#f1f3f5',
     },
     cell: {
-      textColor: '#212529',
-      borderColor: '#dee2e6',
-      nestedPadding: '1rem',
+      textColor: '#333333',
+      borderColor: '#e0e0e0',
+    },
+    filter: {
+      background: 'transparent',
+      textColor: '#ffffff',
+      borderColor: '#ffffff',
+      focusBorderColor: '#3498db',
+      placeholderColor: 'rgba(255, 255, 255, 0.7)',
     },
   },
   pagination: {

src/themes.ts

@@ -2,27 +2,30 @@ import type { ThemeProps } from './types/theme';
 
 export const lightTheme: ThemeProps = {
   colors: {
+    background: '#ffffff',
     primaryColor: '#007bff',
-    textColor: '#212529',
     borderColor: '#dee2e6',
-    background: '#ffffff',
   },
   table: {
     header: {
       background: '#e9ecef',
       textColor: '#495057',
+    },
+    cell: {
+      textColor: '#212529',
       borderColor: '#dee2e6',
     },
     row: {
       mainBackground: '#ffffff',
       nestedBackground: '#f8f9fa',
       expandedBackground: '#e9ecef',
-      hoverBackground: '#f8f9fa',
     },
-    cell: {
-      textColor: '#212529',
-      borderColor: '#dee2e6',
-      nestedPadding: '1rem',
+    filter: {
+      background: 'transparent',
+      textColor: '#495057',
+      borderColor: '#495057',
+      focusBorderColor: '#007bff',
+      placeholderColor: 'rgba(73, 80, 87, 0.7)',
     },
   },
   pagination: {
@@ -47,27 +50,30 @@ export const lightTheme: ThemeProps = {
 
 export const darkTheme: ThemeProps = {
   colors: {
+    background: '#212529',
     primaryColor: '#0d6efd',
-    textColor: '#ffffff',
     borderColor: '#495057',
-    background: '#212529',
   },
   table: {
     header: {
       background: '#2b3035',
       textColor: '#e9ecef',
+    },
+    cell: {
+      textColor: '#e9ecef',
       borderColor: '#495057',
     },
     row: {
       mainBackground: '#343a40',
       nestedBackground: '#2b3035',
       expandedBackground: '#212529',
-      hoverBackground: '#2b3035',
     },
-    cell: {
+    filter: {
+      background: 'transparent',
       textColor: '#e9ecef',
-      borderColor: '#495057',
-      nestedPadding: '1rem',
+      borderColor: '#e9ecef',
+      focusBorderColor: '#0d6efd',
+      placeholderColor: 'rgba(233, 236, 239, 0.7)',
     },
   },
   pagination: {

src/types/theme.ts

@@ -3,29 +3,32 @@ export type Theme = {
   light: ThemeProps;
 };
 
-export type ThemeProps = {
+export interface ThemeProps {
   colors?: {
+    background?: string;
     primaryColor?: string;
-    textColor?: string;
     borderColor?: string;
-    background?: string;
   };
   table?: {
     header?: {
       background?: string;
       textColor?: string;
+    };
+    cell?: {
+      textColor?: string;
       borderColor?: string;
     };
     row?: {
       mainBackground?: string;
       nestedBackground?: string;
       expandedBackground?: string;
-      hoverBackground?: string;
     };
-    cell?: {
+    filter?: {
+      background?: string;
       textColor?: string;
       borderColor?: string;
-      nestedPadding?: string;
+      focusBorderColor?: string;
+      placeholderColor?: string;
     };
   };
   pagination?: {
@@ -46,4 +49,4 @@ export type ThemeProps = {
   expandIcon?: {
     color?: string;
   };
-}; 
+}