chore: light mode Recipe details page (#1317)

* chore: light mode `Recipe details` page Fixes #1286 Signed-off-by: Jeff MAURY <[email protected]>
containers · Jul 9, 2024 · a956fff · a956fff
1 parent ad8e33b
commit a956fff
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 13 deletions.
diff --git a/packages/frontend/src/lib/ContentDetailsLayout.svelte b/packages/frontend/src/lib/ContentDetailsLayout.svelte
@@ -19,7 +19,7 @@ const toggle = () => {
         <div
           class:hidden="{!open}"
           class:block="{open}"
-          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"
+          class="h-fit lg:bg-[var(--pd-content-card-bg)] lg:text-[var(--pd-content-card-title)] 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">

diff --git a/packages/frontend/src/lib/RecipeDetails.svelte b/packages/frontend/src/lib/RecipeDetails.svelte
@@ -74,7 +74,7 @@ const deleteLocalClone = () => {
 };
 </script>
 
-<div class="w-full bg-charcoal-700 rounded-md p-4">
+<div class="w-full bg-[var(--pd-content-bg)] rounded-md p-4">
   <div class="flex flex-row items-center">
     {#if appState && appState.pod}
       <div class="grow flex overflow-hidden whitespace-nowrap items-center" aria-label="app-status">
@@ -109,7 +109,7 @@ const deleteLocalClone = () => {
     </div>
   {/if}
 </div>
-<div class="flex flex-col w-full space-y-4 rounded-md bg-charcoal-700 p-4">
+<div class="flex flex-col w-full space-y-4 rounded-md bg-[var(--pd-content-bg)] p-4">
   {#if model}
     <div class="flex flex-col space-y-2">
       <div class="flex flex-row justify-between">
@@ -126,17 +126,17 @@ const deleteLocalClone = () => {
             class="h-full" />
         </div>
       </div>
-      <div class="bg-charcoal-900 min-w-[200px] grow flex flex-col p-2 rounded-md space-y-3">
+      <div class="bg-[var(--pd-content-card-bg)] min-w-[200px] grow flex flex-col p-2 rounded-md space-y-3">
         <div class="flex justify-between items-center">
-          <span class="text-sm" aria-label="model-selected">{model?.name}</span>
+          <span class="text-sm text-[var(--pd-content-card-text)]" aria-label="model-selected">{model?.name}</span>
           {#if recipe?.recommended?.includes(model.id)}
             <i class="fas fa-star fa-xs text-gray-900" title="Recommended model"></i>
           {/if}
         </div>
         {#if model?.license}
           <div class="flex flex-row space-x-2">
             <div
-              class="bg-charcoal-400 text-gray-600 text-xs font-thin px-2.5 py-0.5 rounded-md"
+              class="bg-[var(--pd-label-bg)] text-[var(--pd-label-text)] text-xs font-thin px-2.5 py-0.5 rounded-md"
               aria-label="license-model">
               {model.license}
             </div>

diff --git a/packages/frontend/src/lib/notification/ContainerConnectionStatusInfo.svelte b/packages/frontend/src/lib/notification/ContainerConnectionStatusInfo.svelte
@@ -7,8 +7,6 @@ import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConne
 import { Button } from '@podman-desktop/ui-svelte';
 
 export let connectionInfo: ContainerConnectionInfo;
-type BannerBackgroundColor = 'light' | 'dark';
-export let background: BannerBackgroundColor = 'light';
 
 let title: string | undefined = '';
 let description: string | undefined = '';
@@ -79,9 +77,7 @@ function executeCommand() {
 
 {#if title && description}
   <div
-    class="w-full {background === 'light'
-      ? 'bg-charcoal-500'
-      : 'bg-charcoal-800'} border-t-[3px] border-amber-500 p-4 mt-5 shadow-inner"
+    class="w-full bg-[var(--pd-content-card-bg)] text-[var(--pd-content-card-text)] border-t-[3px] border-amber-500 p-4 mt-5 shadow-inner"
     aria-label="Container connection info banner">
     <div class="flex flex-row space-x-3">
       <div class="flex">

diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
@@ -79,7 +79,7 @@ export function goToUpPage(): void {
         <svelte:fragment slot="header">
           {#if connectionInfo}
             <div class="px-4">
-              <ContainerConnectionStatusInfo connectionInfo="{connectionInfo}" background="dark" />
+              <ContainerConnectionStatusInfo connectionInfo="{connectionInfo}" />
             </div>
           {/if}
         </svelte:fragment>
@@ -106,7 +106,7 @@ export function goToUpPage(): void {
       {#each recipe?.categories || [] as categoryId}
         <Card
           title="{categories.find(category => category.id === categoryId)?.name || '?'}"
-          classes="bg-charcoal-800 p-1 text-xs w-fit" />
+          classes="bg-[var(--pd-label-bg)] p-1 text-xs w-fit" />
       {/each}
     </div>
   </svelte:fragment>