fix(UI): spinner color in light theme (#1491)

Signed-off-by: axel7083 <[email protected]>
containers · Aug 6, 2024 · 6cda898 · 6cda898
1 parent 84decaf
commit 6cda898
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/packages/frontend/src/lib/RecipeStatus.svelte b/packages/frontend/src/lib/RecipeStatus.svelte
@@ -39,7 +39,7 @@ function onClick(): void {
         disabled={loading}
         class="border-2 justify-center relative rounded border-[var(--pd-button-secondary)] text-[var(--pd-button-secondary)] hover:bg-[var(--pd-button-secondary-hover)] hover:border-[var(--pd-button-secondary-hover)] hover:text-[var(--pd-button-text)] w-10 p-2 text-center cursor-pointer flex flex-row">
         {#if loading}
-          <Spinner size="1em" />
+          <Spinner class="text-[var(--pd-table-body-text-highlight)]" size="1em" />
         {:else}
           <div aria-label="download icon">
             <Fa size="sm" icon={faDownload} />

diff --git a/packages/frontend/src/lib/table/application/ColumnStatus.svelte b/packages/frontend/src/lib/table/application/ColumnStatus.svelte
@@ -5,11 +5,12 @@ import PodIcon from '../../images/PodIcon.svelte';
 import { Spinner, StatusIcon } from '@podman-desktop/ui-svelte';
 export let object: ApplicationState;
 
+let status: string;
 $: status = getApplicationStatus(object);
 </script>
 
 {#if status === 'STARTING'}
-  <Spinner />
+  <Spinner class="text-[var(--pd-table-body-text-highlight)]" />
 {:else}
   <StatusIcon size={22} status={status} icon={PodIcon} />
 {/if}
diff --git a/packages/frontend/src/lib/table/service/ServiceStatus.svelte b/packages/frontend/src/lib/table/service/ServiceStatus.svelte
@@ -47,7 +47,7 @@ function getStatus(): 'RUNNING' | 'STARTING' | 'DEGRADED' | '' {
 </script>
 
 {#if loading}
-  <Spinner />
+  <Spinner class="text-[var(--pd-table-body-text-highlight)]" />
 {:else}
   <button on:click={navigateToContainer}>
     <StatusIcon status={status} icon={ContainerIcon} />