chore: update ProviderResultPage to light mode (#8286)

podman-desktop · Aug 2, 2024 · 5205368 · 5205368
1 parent ae09775
commit 5205368
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/packages/renderer/src/lib/ui/ProviderResultPage.svelte b/packages/renderer/src/lib/ui/ProviderResultPage.svelte
@@ -156,19 +156,19 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
   <div class="h-full flex flex-row space-x-8">
     <div class="h-full overflow-y-auto w-1/3">
       {#each providers as provider}
-        <div role="row" class="rounded-lg bg-charcoal-700 mb-4 p-4 flex flex-col">
+        <div role="row" class="rounded-lg bg-[var(--pd-content-bg)] mb-4 p-4 flex flex-col">
           <div class="flex flex-row items-center">
             <span class="grow">{provider.info.label}</span>
             {#if provider.state === 'running'}
               <Spinner size="12"></Spinner>
             {/if}
             {#if provider.state === 'failed'}
-              <span class="text-red-600 mt-1">
+              <span class="text-[var(--pd-state-error)] mt-1">
                 <Fa size="1.1x" icon={faExclamationTriangle} />
               </span>
             {/if}
             {#if provider.state === 'canceled'}
-              <span class="text-gray-500">
+              <span class="text-[var(--pd-modal-text)]">
                 <Fa size="1.1x" icon={faCircleMinus} />
               </span>
             {/if}
@@ -180,10 +180,10 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
             {/if}
           </div>
           {#if provider.error}
-            <div class="text-red-500 text-sm">{provider.error}</div>
+            <div class="text-[var(--pd-state-error)] text-sm">{provider.error}</div>
           {/if}
           {#if provider.state === 'canceled'}
-            <div class="text-gray-900 text-sm">Canceled by user</div>
+            <div class="text-[var(--pd-content-text)] text-sm">Canceled by user</div>
           {/if}
         </div>
       {/each}
@@ -192,7 +192,7 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
       {#each filtered as result}
         <div
           role="row"
-          class="rounded-r-lg bg-charcoal-700 mb-4 mr-4 p-4 border-l-2"
+          class="rounded-r-lg bg-[var(--pd-content-bg)] mb-4 mr-4 p-4 border-l-2"
           class:border-l-red-600={result.check.severity === 'critical'}
           class:border-l-amber-500={result.check.severity === 'high'}
           class:border-l-gray-800={result.check.severity === 'medium'}
@@ -208,7 +208,7 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
               ><Fa size="1.1x" class="mt-1" icon={getIcon(result.check)} />
             </span>
             <div class="font-bold">{result.check.name}</div>
-            <div class="text-gray-900 text-sm grow text-right">Reported by {result.provider.label}</div>
+            <div class="text-[var(--pd-content-text)] text-sm grow text-right">Reported by {result.provider.label}</div>
           </div>
           {#if result.check.markdownDescription}
             <div class="mt-4">{result.check.markdownDescription}</div>

diff --git a/packages/renderer/src/lib/ui/ToggleButton.svelte b/packages/renderer/src/lib/ui/ToggleButton.svelte
@@ -21,13 +21,13 @@ function onclick(): void {
 <button
   disabled={disabled}
   class="first:rounded-l last:rounded-r"
-  class:bg-charcoal-500={!disabled && !selected}
-  class:hover:bg-charcoal-300={!disabled && !selected}
-  class:bg-charcoal-200={!disabled && selected}
-  class:hover:bg-charcoal-100={!disabled && selected}
-  class:bg-charcoal-700={disabled}
-  class:hover:bg-charcoal-700={disabled}
-  class:text-gray-900={disabled}
+  class:bg-[var(--pd-content-card-carousel-card-bg)]={!disabled && !selected}
+  class:hover:bg-[var(--pd-content-card-carousel-card-hover-bg)]={!disabled && !selected}
+  class:bg-[var(--pd-content-card-selected-bg)]={!disabled && selected}
+  class:hover:bg-[var(--pd-button-tab-hover-border)]={!disabled && selected}
+  class:bg-[var(--pd-content-card-carousel-disabled-nav)]={disabled}
+  class:hover:bg-[var(--pd-content-card-carousel-disabled-nav)]={disabled}
+  class:text-[var(--pd-action-button-disabled-text)]={disabled}
   class:cursor-not-allowed={disabled}
   on:click={onclick}>
   <div class="flex flex-row items-center space-x-2 px-2 py-1 text-xs">