refactor: image processing notifications

frontend/src/components/notifications/ProcessingImage.tsx

@@ -11,27 +11,29 @@ export const ProcessingImages: Component = () => {
 		Object.keys(notifications.state.ProcessingImages).length;
 
 	return (
-		<Show when={processingNumber() > 0}>
-			<Popover sameWidth gutter={4}>
-				<Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2">
+		<Popover sameWidth gutter={4}>
+			<Popover.Trigger class="w-full flex justify-between rounded-xl px-4 py-2">
+				<Show when={processingNumber() > 0}>
+					<p class="text-md">
+						Processing {processingNumber()}{" "}
+						{processingNumber() === 1 ? "image" : "images"}
+					</p>
+				</Show>
+				<Show
+					when={processingNumber() === 0}
+					fallback={<LoadingCircle status="loading" />}
+				>
+					<LoadingCircle status="complete" />
+				</Show>
+			</Popover.Trigger>
+			<Popover.Portal>
+				<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-white rounded-xl p-2">
 					<Show
-						when={processingNumber() > 0}
-						fallback={<p class="text-md">No images to process</p>}
+						when={
+							Object.entries(notifications.state.ProcessingImages).length > 0
+						}
+						fallback={<p>No images to process</p>}
 					>
-						<p class="text-md">
-							Processing {processingNumber()}{" "}
-							{processingNumber() === 1 ? "image" : "images"}
-						</p>
-					</Show>
-					<Show
-						when={processingNumber() === 0}
-						fallback={<LoadingCircle status="loading" />}
-					>
-						<LoadingCircle status="complete" />
-					</Show>
-				</Popover.Trigger>
-				<Popover.Portal>
-					<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl p-2">
 						<For each={Object.entries(notifications.state.ProcessingImages)}>
 							{([id, _image]) => (
 								<Show when={_image}>
@@ -54,9 +56,9 @@ export const ProcessingImages: Component = () => {
 								</Show>
 							)}
 						</For>
-					</Popover.Content>
-				</Popover.Portal>
-			</Popover>
-		</Show>
+					</Show>
+				</Popover.Content>
+			</Popover.Portal>
+		</Popover>
 	);
 };