From c666ae7b5a7038a35f854b91f821ea02088c7a7d Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Fri, 21 Jun 2024 16:21:14 +0200
Subject: [PATCH] refactor: light mode for playgrounds page (#1258)

Signed-off-by: Philippe Martin <phmartin@redhat.com>
---
 .../playground/PlaygroundColumnModel.svelte   |  2 +-
 .../playground/PlaygroundColumnName.svelte    |  2 +-
 .../frontend/src/pages/Playgrounds.svelte     | 44 ++++++++++---------
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/src/lib/table/playground/PlaygroundColumnModel.svelte b/packages/frontend/src/lib/table/playground/PlaygroundColumnModel.svelte
index e501e668c..018a9727b 100644
--- a/packages/frontend/src/lib/table/playground/PlaygroundColumnModel.svelte
+++ b/packages/frontend/src/lib/table/playground/PlaygroundColumnModel.svelte
@@ -6,6 +6,6 @@ import { catalog } from '/@/stores/catalog';
 $: name = $catalog.models.find(r => r.id === object.modelId)?.name;
 </script>
 
-<div class="text-sm text-gray-300 overflow-hidden text-ellipsis">
+<div class="text-sm text-[var(--pd-table-body-text)] overflow-hidden text-ellipsis">
   {name}
 </div>
diff --git a/packages/frontend/src/lib/table/playground/PlaygroundColumnName.svelte b/packages/frontend/src/lib/table/playground/PlaygroundColumnName.svelte
index 5ca6439e6..d8cd62209 100644
--- a/packages/frontend/src/lib/table/playground/PlaygroundColumnName.svelte
+++ b/packages/frontend/src/lib/table/playground/PlaygroundColumnName.svelte
@@ -9,7 +9,7 @@ function openDetails() {
 </script>
 
 <button on:click="{() => openDetails()}">
-  <div class="text-sm text-gray-300 overflow-hidden text-ellipsis">
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] overflow-hidden text-ellipsis">
     {object.name}
   </div>
 </button>
diff --git a/packages/frontend/src/pages/Playgrounds.svelte b/packages/frontend/src/pages/Playgrounds.svelte
index a1cef84f2..42fb3c906 100644
--- a/packages/frontend/src/pages/Playgrounds.svelte
+++ b/packages/frontend/src/pages/Playgrounds.svelte
@@ -37,28 +37,30 @@ const openServicesPage = () => {
           {#if $conversations.length > 0}
             <Table kind="playground" data="{$conversations}" columns="{columns}" row="{row}"></Table>
           {:else}
-            <div role="status">
-              There is no playground environment. You can <a
-                href="{'javascript:void(0);'}"
-                class="underline"
-                role="button"
-                title="Create a new Playground environment"
-                on:click="{createNewPlayground}">create one now</a
-              >.
+            <div class="text-[var(--pd-details-body-text)]">
+              <div role="status">
+                There is no playground environment. You can <a
+                  href="{'javascript:void(0);'}"
+                  class="underline"
+                  role="button"
+                  title="Create a new Playground environment"
+                  on:click="{createNewPlayground}">create one now</a
+                >.
+              </div>
+              <p>
+                Playground environments allow for experimenting with available models in a local environment. An
+                intuitive user prompt helps in exploring the capabilities and accuracy of various models and aids in
+                finding the best model for the use case at hand.
+              </p>
+              <p>
+                Once started, each playground ships with a generic chat client to interact with the model service. The <button
+                  class="underline"
+                  title="Open the Services page"
+                  on:click="{openServicesPage}">Services</button>
+                page allows for accessing running model services and provides further details and code snippets to interact
+                with them.
+              </p>
             </div>
-            <p>
-              Playground environments allow for experimenting with available models in a local environment. An intuitive
-              user prompt helps in exploring the capabilities and accuracy of various models and aids in finding the
-              best model for the use case at hand.
-            </p>
-            <p>
-              Once started, each playground ships with a generic chat client to interact with the model service. The <button
-                class="underline"
-                title="Open the Services page"
-                on:click="{openServicesPage}">Services</button>
-              page allows for accessing running model services and provides further details and code snippets to interact
-              with them.
-            </p>
           {/if}
         </div>
       </div>