chore: add light mode to k8s tables (podman-desktop#7584)

feloy · Jun 11, 2024 · 654ee75 · 654ee75
1 parent 622e691
commit 654ee75
Show file tree

Hide file tree

Showing 16 changed files with 33 additions and 23 deletions.
diff --git a/packages/renderer/src/lib/deployments/DeploymentColumnName.spec.ts b/packages/renderer/src/lib/deployments/DeploymentColumnName.spec.ts
@@ -41,7 +41,7 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(deployment.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking works', async () => {

diff --git a/packages/renderer/src/lib/deployments/DeploymentColumnName.svelte b/packages/renderer/src/lib/deployments/DeploymentColumnName.svelte
@@ -11,5 +11,7 @@ function openDetails() {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetails()}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
 </button>
diff --git a/packages/renderer/src/lib/deployments/DeploymentColumnPods.spec.ts b/packages/renderer/src/lib/deployments/DeploymentColumnPods.spec.ts
@@ -39,5 +39,5 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(deployment.ready + ' / ' + deployment.replicas);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-xs');
-  expect(text).toHaveClass('text-gray-500');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
diff --git a/packages/renderer/src/lib/deployments/DeploymentColumnPods.svelte b/packages/renderer/src/lib/deployments/DeploymentColumnPods.svelte
@@ -4,6 +4,6 @@ import type { DeploymentUI } from './DeploymentUI';
 export let object: DeploymentUI;
 </script>
 
-<div class="text-xs text-gray-500">
+<div class="text-xs text-[var(--pd-table-body-text-highlight)]">
   {object.ready} / {object.replicas}
 </div>
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.spec.ts b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.spec.ts
@@ -64,7 +64,7 @@ test('Expect simple column styling with single path ingress', async () => {
   const text = screen.getByText(backend);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-500');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect simple column styling with multiple paths ingress', async () => {
@@ -110,11 +110,11 @@ test('Expect simple column styling with multiple paths ingress', async () => {
   const firstElement = screen.getByText(backends[0]);
   expect(firstElement).toBeInTheDocument();
   expect(firstElement).toHaveClass('text-sm');
-  expect(firstElement).toHaveClass('text-gray-500');
+  expect(firstElement).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
   const secondElement = screen.getByText(backends[1]);
   expect(secondElement).toBeInTheDocument();
   expect(secondElement).toHaveClass('text-sm');
-  expect(secondElement).toHaveClass('text-gray-500');
+  expect(secondElement).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect simple column styling with route', async () => {
@@ -137,5 +137,5 @@ test('Expect simple column styling with route', async () => {
   const text = screen.getByText(backend);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-500');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.svelte b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.svelte
@@ -9,5 +9,5 @@ const ingressRouteUtils = new IngressRouteUtils();
 </script>
 
 {#each ingressRouteUtils.getBackends(object) as backend}
-  <div class="text-sm text-gray-500">{backend}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)]">{backend}</div>
 {/each}
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.spec.ts b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.spec.ts
@@ -53,7 +53,7 @@ test('Expect simple column styling with Ingress', async () => {
   const text = screen.getByText(ingressUI.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking on Ingress works', async () => {
@@ -76,7 +76,7 @@ test('Expect simple column styling with Route', async () => {
   const text = screen.getByText(routeUI.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking on Route works', async () => {

diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.svelte b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.svelte
@@ -18,5 +18,7 @@ function openDetails() {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetails()}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
 </button>
diff --git a/packages/renderer/src/lib/node/NodeColumnName.spec.ts b/packages/renderer/src/lib/node/NodeColumnName.spec.ts
@@ -41,7 +41,7 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(node.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking works', async () => {

diff --git a/packages/renderer/src/lib/node/NodeColumnName.svelte b/packages/renderer/src/lib/node/NodeColumnName.svelte
@@ -11,5 +11,7 @@ function openDetails() {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetails()}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
 </button>
diff --git a/packages/renderer/src/lib/pod/PodColumnAge.spec.ts b/packages/renderer/src/lib/pod/PodColumnAge.spec.ts
@@ -44,5 +44,5 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(pod.age);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-700');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
diff --git a/packages/renderer/src/lib/pod/PodColumnAge.svelte b/packages/renderer/src/lib/pod/PodColumnAge.svelte
@@ -5,6 +5,6 @@ import type { PodInfoUI } from './PodInfoUI';
 export let object: PodInfoUI;
 </script>
 
-<div class="text-sm text-gray-700">
+<div class="text-sm text-[var(--pd-table-body-text-highlight)]">
   <StateChange state="{object.status}">{object.age}</StateChange>
 </div>
diff --git a/packages/renderer/src/lib/pod/PodColumnName.spec.ts b/packages/renderer/src/lib/pod/PodColumnName.spec.ts
@@ -46,12 +46,12 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(pod.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 
   const id = screen.getByText(pod.shortId);
   expect(id).toBeInTheDocument();
   expect(id).toHaveClass('text-xs');
-  expect(id).toHaveClass('text-violet-400');
+  expect(id).toHaveClass('text-[var(--pd-table-body-text-sub-secondary)]');
 });
 
 test('Expect clicking works', async () => {

diff --git a/packages/renderer/src/lib/pod/PodColumnName.svelte b/packages/renderer/src/lib/pod/PodColumnName.svelte
@@ -16,6 +16,8 @@ function openDetailsPod(pod: PodInfoUI) {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetailsPod(object)}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
-  <div class="text-xs text-violet-400">{object.shortId}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
+  <div class="text-xs text-[var(--pd-table-body-text-sub-secondary)]">{object.shortId}</div>
 </button>
diff --git a/packages/renderer/src/lib/service/ServiceColumnName.spec.ts b/packages/renderer/src/lib/service/ServiceColumnName.spec.ts
@@ -42,7 +42,7 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(service.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking works', async () => {

diff --git a/packages/renderer/src/lib/service/ServiceColumnName.svelte b/packages/renderer/src/lib/service/ServiceColumnName.svelte
@@ -11,8 +11,10 @@ function openDetails() {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetails()}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
   {#if object.loadBalancerIPs}
-    <div class="text-xs text-violet-400">{object.loadBalancerIPs}</div>
+    <div class="text-xs text-[var(--pd-table-body-text-sub-secondary)]">{object.loadBalancerIPs}</div>
   {/if}
 </button>