From f6b1528f2c16783743e6f36c381d653aa2749880 Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Thu, 20 Jun 2024 20:32:54 +0200
Subject: [PATCH] refactor: light mode for Services page

---
 .../service/ServiceColumnModelName.svelte     |  4 +--
 .../table/service/ServiceColumnName.svelte    |  2 +-
 .../src/pages/InferenceServers.svelte         | 30 ++++++++++---------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/lib/table/service/ServiceColumnModelName.svelte b/packages/frontend/src/lib/table/service/ServiceColumnModelName.svelte
index f9c18d4c1..a1cdcd430 100644
--- a/packages/frontend/src/lib/table/service/ServiceColumnModelName.svelte
+++ b/packages/frontend/src/lib/table/service/ServiceColumnModelName.svelte
@@ -4,13 +4,13 @@ export let object: InferenceServer;
 </script>
 
 {#if object.models.length === 1}
-  <span class="text-sm text-gray-700">
+  <span class="text-sm text-[var(--pd-table-body-text)]">
     {object.models[0].name}
   </span>
 {:else}
   <ul>
     {#each object.models as model}
-      <li class="text-sm text-gray-700">{model.name}</li>
+      <li class="text-sm text-[var(--pd-table-body-text)]">{model.name}</li>
     {/each}
   </ul>
 {/if}
diff --git a/packages/frontend/src/lib/table/service/ServiceColumnName.svelte b/packages/frontend/src/lib/table/service/ServiceColumnName.svelte
index f7921efeb..f17cebe21 100644
--- a/packages/frontend/src/lib/table/service/ServiceColumnName.svelte
+++ b/packages/frontend/src/lib/table/service/ServiceColumnName.svelte
@@ -10,7 +10,7 @@ function openDetails() {
 
 <button
   title="Open service details"
-  class="text-sm text-gray-700 w-full text-ellipsis overflow-hidden"
+  class="text-sm text-[var(--pd-table-body-text-highlight)] w-full text-ellipsis overflow-hidden"
   on:click="{() => openDetails()}">
   {object.container.containerId}
 </button>
diff --git a/packages/frontend/src/pages/InferenceServers.svelte b/packages/frontend/src/pages/InferenceServers.svelte
index 78cb1282d..1cdb26ae0 100644
--- a/packages/frontend/src/pages/InferenceServers.svelte
+++ b/packages/frontend/src/pages/InferenceServers.svelte
@@ -65,21 +65,23 @@ function createNewService() {
               row="{row}"
               bind:selectedItemsNumber="{selectedItemsNumber}" />
           {:else}
-            <div role="status">
-              There is no model service. You can <a
-                href="{'javascript:void(0);'}"
-                class="underline"
-                role="button"
-                title="Create a new Model Service"
-                on:click="{createNewService}">create one now</a
-              >.
+            <div class="text-[var(--pd-details-body-text)]">
+              <div role="status">
+                There is no model service. You can <a
+                  href="{'javascript:void(0);'}"
+                  class="underline"
+                  role="button"
+                  title="Create a new Model Service"
+                  on:click="{createNewService}">create one now</a
+                >.
+              </div>
+              <p>
+                A model service offers a configurable endpoint via an OpenAI-compatible web server, facilitating a
+                seamless integration of AI capabilities into existing applications. Upon initialization, effortlessly
+                access detailed service information and generate code snippets in multiple programming languages to ease
+                application integration.
+              </p>
             </div>
-            <p>
-              A model service offers a configurable endpoint via an OpenAI-compatible web server, facilitating a
-              seamless integration of AI capabilities into existing applications. Upon initialization, effortlessly
-              access detailed service information and generate code snippets in multiple programming languages to ease
-              application integration.
-            </p>
           {/if}
         </div>
       </div>