fix: update icon color from 'text-secondary' to 'text-foreground' in multiple preview tables

Author: ErwanDecoster

src/index.css

@@ -234,71 +234,44 @@
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
-
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
   --background: var(--color-grey-900);
   --foreground: var(--color-grey-50);
 
-  --card: oklch(0.208 0.042 265.755);
-  --card-foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755); 
+  --card-foreground: oklch(0.984 0.003 247.858); 
 
-  --popover: var(--color-grey-800);
-  --popover-foreground: var(--color-grey-50);
+  --popover: var(--color-grey-800); 
+  // used in footer ! addressChip ! and Select
+  --popover-foreground: var(--color-grey-50); 
 
-  --tooltip: var(--color-grey-800);
-  --tooltip-foreground: var(--color-grey-50);
-  --tooltip-border: var(--color-grey-700);
+  --tooltip: var(--color-grey-800); 
+  // used in Table ! and Tooltip
+  --tooltip-foreground: var(--color-grey-50); 
+  // used in Tooltip
 
-  --primary: var(--color-yellow-300);
+  --primary: var(--color-yellow-300); 
   --primary-foreground: var(--color-grey-900);
 
-  --secondary: var(--color-grey-600);
-  --secondary-foreground: var(--color-grey-50);
+  --secondary: var(--color-grey-600); 
+  --secondary-foreground: var(--color-grey-50); 
 
   --muted: var(--color-grey-700);
   --muted-foreground: var(--color-grey-300);
 
-  --intermediate: var(--color-grey-500);
-  --intermediate-foreground: var(--color-grey-200);
+  --intermediate: var(--color-grey-500); // used in scrollbar
+  --intermediate-foreground: var(--color-grey-200); // used in footer
 
   --accent: var(--color-grey-600);
   --accent-foreground: var(--color-white);
 
   --destructive: var(--color-red-500);
-  --border: var(--color-white);
+  /* --border: var(--color-white); */
+  --border: var(--color-grey-600); 
   --input: var(--color-grey-400);
   --ring: var(--color-primary);
-
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-
-  --sidebar: oklch(0.208 0.042 265.755);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
 }
 
 @layer base {

src/modules/apps/AppsPreviewTable.tsx

@@ -39,7 +39,7 @@ export function AppsPreviewTable({ className }: { className?: string }) {
     <div className={cn(className, 'flex flex-col gap-2')}>
       <div className="flex items-center justify-between">
         <h2 className="flex items-center gap-2 font-sans">
-          <AppIcon size={20} className="text-secondary" />
+          <AppIcon size={20} className="text-foreground" />
           Latest apps deployed
           {apps.data && apps.isError && (
             <span className="text-muted-foreground text-sm font-light">

src/modules/datasets/DatasetsPreviewTable.tsx

@@ -39,7 +39,7 @@ export function DatasetsPreviewTable({ className }: { className?: string }) {
     <div className={cn(className, 'flex flex-col gap-2')}>
       <div className="flex items-center justify-between">
         <h2 className="flex items-center gap-2 font-sans">
-          <DatasetIcon size={20} className="text-secondary" />
+          <DatasetIcon size={20} className="text-foreground" />
           Latest datasets deployed
           {datasets.data && datasets.isError && (
             <span className="text-muted-foreground text-sm font-light">

src/modules/deals/DealsPreviewTable.tsx

@@ -39,7 +39,7 @@ export function DealsPreviewTable({ className }: { className?: string }) {
     <div className={cn(className, 'flex flex-col gap-2')}>
       <div className="flex items-center justify-between">
         <h2 className="flex items-center gap-2 font-sans">
-          <DealIcon size={20} className="text-secondary" />
+          <DealIcon size={20} className="text-foreground" />
           Latest deals
           {deals.data && deals.isError && (
             <span className="text-muted-foreground text-sm font-light">

src/modules/tasks/TasksPreviewTable.tsx

@@ -39,7 +39,7 @@ export function TasksPreviewTable({ className }: { className?: string }) {
     <div className={cn(className, 'flex flex-col gap-2')}>
       <div className="flex items-center justify-between">
         <h2 className="flex items-center gap-2 font-sans">
-          <TaskIcon size={20} className="text-secondary" />
+          <TaskIcon size={20} className="text-foreground" />
           Latest tasks
           {tasks.data && tasks.isError && (
             <span className="text-muted-foreground text-sm font-light">

src/modules/workerpools/WorkerpoolsPreviewTable.tsx

@@ -39,7 +39,7 @@ export function WorkerpoolsPreviewTable({ className }: { className?: string }) {
     <div className={cn(className, 'flex flex-col gap-2')}>
       <div className="flex items-center justify-between">
         <h2 className="flex items-center gap-2 font-sans">
-          <WorkerpoolIcon size={20} className="text-secondary" />
+          <WorkerpoolIcon size={20} className="text-foreground" />
           Latest workerpools deployed
           {workerpools.data && workerpools.isError && (
             <span className="text-muted-foreground text-sm font-light">