feat: enable light mode for Playground details page (#1335)

* feat: enable light mode for Playground details page Signed-off-by: lstocchi <[email protected]> * fix: fix formatter Signed-off-by: lstocchi <[email protected]> --------- Signed-off-by: lstocchi <[email protected]>
containers · Jul 5, 2024 · 5365e75 · 5365e75
1 parent a49eb18
commit 5365e75
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 35 deletions.
diff --git a/packages/frontend/src/lib/ContentDetailsLayout.svelte b/packages/frontend/src/lib/ContentDetailsLayout.svelte
@@ -19,24 +19,24 @@ const toggle = () => {
         <div
           class:hidden="{!open}"
           class:block="{open}"
-          class="h-fit lg:bg-charcoal-800 lg:rounded-l-md lg:mt-5 lg:py-4 max-lg:block"
+          class="h-fit lg:bg-[var(--pd-content-card-bg)] lg:text-[var(--pd-content-card-text)] lg:rounded-l-md lg:mt-5 lg:py-4 max-lg:block"
           aria-label="{`${detailsLabel} panel`}">
           <div class="flex flex-col px-4 space-y-4 mx-auto">
             <div class="w-full flex flex-row justify-between max-lg:hidden">
               <span class="text-base">{detailsTitle}</span>
               <button on:click="{toggle}" aria-label="{`hide ${detailsLabel}`}"
-                ><i class="fas fa-angle-right text-gray-900"></i></button>
+                ><i class="fas fa-angle-right text-[var(--pd-content-card-icon)]"></i></button>
             </div>
             <slot name="details" />
           </div>
         </div>
         <div
           class:hidden="{open}"
           class:block="{!open}"
-          class="bg-charcoal-800 mt-5 p-4 rounded-md h-fit max-lg:hidden"
+          class="bg-[var(--pd-content-card-bg)] mt-5 p-4 rounded-md h-fit max-lg:hidden"
           aria-label="{`toggle ${detailsLabel}`}">
           <button on:click="{toggle}" aria-label="{`show ${detailsLabel}`}"
-            ><i class="fas fa-angle-left text-gray-900"></i></button>
+            ><i class="fas fa-angle-left text-[var(--pd-content-card-icon)]"></i></button>
         </div>
       </div>
     </div>

diff --git a/packages/frontend/src/lib/RangeInput.svelte b/packages/frontend/src/lib/RangeInput.svelte
@@ -8,7 +8,7 @@ export let value: number;
 
 <div>
   <div class="flex flex-row items-center">
-    <span class="w-full uppercase text-gray-700">{name}</span>
+    <span class="w-full uppercase text-[var(--pd-content-card-text)]">{name}</span>
     <input
       bind:value="{value}"
       type="number"
@@ -17,7 +17,7 @@ export let value: number;
       max="{max}"
       step="{step}"
       placeholder="{name}"
-      class="p-2 w-24 text-right outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700" />
+      class="p-2 w-24 text-right outline-none text-sm bg-[var(--pd-content-card-bg)] rounded-sm text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)]" />
   </div>
   <div class="w-full">
     <input
@@ -29,6 +29,6 @@ export let value: number;
       placeholder="{name}"
       bind:value="{value}"
       aria-label="{`${name} slider`}"
-      class="w-full h-1 bg-violet-600 rounded-lg appearance-none accent-violet-600 cursor-pointer range-xs mt-2" />
+      class="w-full h-1 bg-[var(--pd-button-primary-bg)] rounded-lg appearance-none accent-[var(--pd-button-primary-bg)] cursor-pointer range-xs mt-2" />
   </div>
 </div>
diff --git a/packages/frontend/src/lib/conversation/ChatMessage.svelte b/packages/frontend/src/lib/conversation/ChatMessage.svelte
@@ -45,22 +45,22 @@ function elapsedTime(msg: AssistantChat): string {
 </script>
 
 <div>
-  <div class="text-lg" class:text-right="{isAssistantChat(message)}">
+  <div class="text-lg text-[var(--pd-content-header)]" class:text-right="{isAssistantChat(message)}">
     {roles[message.role]}
   </div>
   <div
-    class="p-4 rounded-md"
-    class:bg-charcoal-400="{isUserChat(message)}"
-    class:bg-charcoal-800="{isSystemPrompt(message)}"
-    class:bg-charcoal-900="{isAssistantChat(message)}"
+    class="p-4 rounded-md text-[var(--pd-content-card-text)]"
+    class:bg-[var(--pd-content-card-bg)]="{isUserChat(message)}"
+    class:bg-[var(--pd-content-bg)]="{isSystemPrompt(message)}"
+    class:bg-[var(--pd-content-card-inset-bg)]="{isAssistantChat(message)}"
     class:ml-8="{isAssistantChat(message)}"
     class:mr-8="{isUserChat(message)}">
     {#each getMessageParagraphs(message) as paragraph}
       <p>{paragraph}</p>
     {/each}
   </div>
   {#if isAssistantChat(message)}
-    <div class="text-sm text-gray-400 text-right" aria-label="elapsed">
+    <div class="text-sm text-[var(--pd-content-header)] text-right" aria-label="elapsed">
       {elapsedTime(message)} s
     </div>
   {/if}

diff --git a/packages/frontend/src/lib/conversation/ConversationActions.svelte b/packages/frontend/src/lib/conversation/ConversationActions.svelte
@@ -4,6 +4,7 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import ListItemButtonIcon from '/@/lib/button/ListItemButtonIcon.svelte';
 import type { Conversation } from '@shared/src/models/IPlaygroundMessage';
 export let conversation: Conversation;
+export let detailed: boolean = false;
 
 function deleteConversation() {
   studioClient.requestDeleteConversation(conversation.id).catch((err: unknown) => {
@@ -12,4 +13,4 @@ function deleteConversation() {
 }
 </script>
 
-<ListItemButtonIcon icon="{faTrash}" onClick="{deleteConversation}" title="Delete conversation" />
+<ListItemButtonIcon icon="{faTrash}" detailed="{detailed}" onClick="{deleteConversation}" title="Delete conversation" />
diff --git a/packages/frontend/src/lib/conversation/SystemPromptBanner.svelte b/packages/frontend/src/lib/conversation/SystemPromptBanner.svelte
@@ -49,7 +49,7 @@ onMount(() => {
 });
 </script>
 
-<div class="bg-charcoal-800 rounded-md w-full px-4 py-2">
+<div class="bg-[var(--pd-content-card-bg)] text-[var(--pd-content-card-text)] rounded-md w-full px-4 py-2">
   <div class="flex items-center gap-x-2">
     <Fa icon="{faTerminal}" />
     <span class="grow">Define a system prompt</span>
@@ -70,11 +70,11 @@ onMount(() => {
       on:input="{onChange}"
       aria-label="system-prompt-textarea"
       bind:value="{systemPrompt}"
-      class="w-full p-2 mt-2 outline-none bg-charcoal-600 rounded-sm text-gray-700 placeholder-gray-700 resize-none"
+      class="w-full p-2 mt-2 outline-none bg-[var(--pd-content-card-inset-bg)] rounded-sm text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)] resize-none"
       rows="3"
       placeholder="Provide system prompt to define general context, instructions or guidelines to be used with each query"
     ></textarea>
-    <span role="alert" class="text-red-500 pt-1" class:hidden="{!error}">{error}</span>
+    <span role="alert" class="text-[var(--pd-input-field-error-text)] pt-1" class:hidden="{!error}">{error}</span>
   </div>
-  <span class="mt-2 text-gray-800" class:hidden="{editing || !systemPrompt}">{systemPrompt}</span>
+  <span class="mt-2 text-[var(--pd-content-card-text)]" class:hidden="{editing || !systemPrompt}">{systemPrompt}</span>
 </div>
diff --git a/packages/frontend/src/pages/Playground.svelte b/packages/frontend/src/pages/Playground.svelte
@@ -155,22 +155,20 @@ export function goToUpPage(): void {
       </div>
     </svelte:fragment>
     <svelte:fragment slot="subtitle">
-      <div class="flex gap-x-2 items-center">
+      <div class="flex gap-x-2 items-center text-[var(--pd-content-sub-header)]">
         {#if model}
           <div class="text-xs" aria-label="Model name">
             <a href="/model/{model.id}">{model.name}</a>
           </div>
-          <Badge icon="{faMicrochip}" content="{model.hw}" background="bg-charcoal-700" />
+          <Badge icon="{faMicrochip}" content="{model.hw}" background="bg-[var(--pd-label-bg)]" />
         {/if}
       </div>
     </svelte:fragment>
     <svelte:fragment slot="actions">
-      <div class="bg-charcoal-800 rounded-lg">
-        <ConversationActions conversation="{conversation}" />
-      </div>
+      <ConversationActions detailed conversation="{conversation}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
-      <div class="flex flex-col w-full h-full bg-charcoal-500">
+      <div class="flex flex-col w-full h-full bg-[var(--pd-content-bg)]">
         <div class="h-full overflow-auto" bind:this="{scrollable}">
           <ContentDetailsLayout detailsTitle="Settings" detailsLabel="settings">
             <svelte:fragment slot="content">
@@ -194,18 +192,19 @@ export function goToUpPage(): void {
               </div>
             </svelte:fragment>
             <svelte:fragment slot="details">
-              <div class="text-gray-800 text-xs">Next prompt will use these settings</div>
-              <div class="bg-charcoal-600 w-full rounded-md text-xs p-4">
+              <div class="text-[var(--pd-content-card-text)] text-xs">Next prompt will use these settings</div>
+              <div
+                class="bg-[var(--pd-content-card-inset-bg)] text-[var(--pd-content-card-text)] w-full rounded-md text-xs p-4">
                 <div class="mb-4 flex flex-col">Model Parameters</div>
                 <div class="flex flex-col space-y-4" aria-label="parameters">
                   <div class="flex flex-row">
                     <div class="w-full">
                       <RangeInput name="temperature" min="0" max="2" step="0.1" bind:value="{temperature}" />
                     </div>
                     <Tooltip left>
-                      <Fa icon="{faCircleInfo}" />
+                      <Fa class="text-[var(--pd-content-card-icon)]" icon="{faCircleInfo}" />
                       <svelte:fragment slot="tip">
-                        <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs" aria-label="tooltip">
+                        <div class="inline-block py-2 px-4 rounded-md text-xs" aria-label="tooltip">
                           What sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output
                           more random, while lower values like 0.2 will make it more focused and deterministic.
                         </div>
@@ -217,9 +216,9 @@ export function goToUpPage(): void {
                       <RangeInput name="max tokens" min="-1" max="32768" step="1" bind:value="{max_tokens}" />
                     </div>
                     <Tooltip left>
-                      <Fa icon="{faCircleInfo}" />
+                      <Fa class="text-[var(--pd-content-card-icon)]" icon="{faCircleInfo}" />
                       <svelte:fragment slot="tip">
-                        <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs" aria-label="tooltip">
+                        <div class="inline-block py-2 px-4 rounded-md text-xs" aria-label="tooltip">
                           The maximum number of tokens that can be generated in the chat completion.
                         </div>
                       </svelte:fragment>
@@ -230,9 +229,9 @@ export function goToUpPage(): void {
                       <RangeInput name="top-p" min="0" max="1" step="0.1" bind:value="{top_p}" />
                     </div>
                     <Tooltip left>
-                      <Fa icon="{faCircleInfo}" />
+                      <Fa class="text-[var(--pd-content-card-icon)]" icon="{faCircleInfo}" />
                       <svelte:fragment slot="tip">
-                        <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs" aria-label="tooltip">
+                        <div class="inline-block py-2 px-4 rounded-md text-xs" aria-label="tooltip">
                           An alternative to sampling with temperature, where the model considers the results of the
                           tokens with top_p probability mass. So 0.1 means only the tokens comprising the top 10%
                           probability mass are considered.
@@ -246,16 +245,16 @@ export function goToUpPage(): void {
           </ContentDetailsLayout>
         </div>
         {#if errorMsg}
-          <div class="text-red-500 text-sm p-2">{errorMsg}</div>
+          <div class="text-[var(--pd-input-field-error-text)] text-sm p-2">{errorMsg}</div>
         {/if}
-        <div class="flex flex-row flex-none w-full px-4 py-2 bg-charcoal-800">
+        <div class="flex flex-row flex-none w-full px-4 py-2 bg-[var(--pd-content-card-bg)]">
           <textarea
             aria-label="prompt"
             bind:value="{prompt}"
             use:requestFocus
             on:keydown="{handleKeydown}"
             rows="2"
-            class="w-full p-2 outline-none text-sm rounded-sm bg-charcoal-800 text-white placeholder-white"
+            class="w-full p-2 outline-none text-sm rounded-sm bg-[var(--pd-content-card-inset-bg)] text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)]"
             placeholder="Type your prompt here"
             disabled="{!sendEnabled}"></textarea>