feat: styling

frontend/src/notifications/ProcessingImages.tsx

@@ -2,15 +2,16 @@ import { Popover } from "@kobalte/core/popover";
 import { type Component, For, Show } from "solid-js";
 import { base } from "../network";
 import { useNotifications } from "../ProtectedRoute";
-import { useSearchImageContext } from "../contexts/SearchImageContext";
 
-const LoadingCircle: Component<{ status: "loading" | "complete" }> = (
-	props,
-) => {
+const LoadingCircle: Component<{
+	status: "loading" | "complete";
+	class?: string;
+}> = (props) => {
 	switch (props.status) {
 		case "loading":
 			return (
 				<svg
+					class={props.class}
 					width="24"
 					height="24"
 					viewBox="0 0 24 24"
@@ -29,6 +30,7 @@ const LoadingCircle: Component<{ status: "loading" | "complete" }> = (
 		case "complete":
 			return (
 				<svg
+					class={props.class}
 					width="24"
 					height="24"
 					viewBox="0 0 24 24"
@@ -51,7 +53,7 @@ export const ProcessingImages: Component = () => {
 	const notifications = useNotifications();
 
 	return (
-		<Popover>
+		<Popover sameWidth gutter={4}>
 			<Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2">
 				<p class="text-md">Processing Images</p>
 				<Show
@@ -61,12 +63,12 @@ export const ProcessingImages: Component = () => {
 					<LoadingCircle status="complete" />
 				</Show>
 			</Popover.Trigger>
-			<Popover.Content class="w-96 flex flex-col gap-2 bg-slate-800 rounded-xl">
+			<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl">
 				<For each={Object.entries(notifications.state.ProcessingImages)}>
 					{([id, _image]) => (
 						<Show when={_image}>
 							{(image) => (
-								<div class="flex gap-2">
+								<div class="flex gap-2 w-full justify-center">
 									<img
 										class="w-16 h-16 aspect-square"
 										alt="processing"
@@ -75,6 +77,9 @@ export const ProcessingImages: Component = () => {
 									<div class="flex flex-col gap-1">
 										<p class="text-slate-100">{image().ImageName}</p>
 									</div>
+									<div class="ml-auto px-4 py-2 flex place-items-center">
+										<LoadingCircle status="loading" class="ml-auto" />
+									</div>
 								</div>
 							)}
 						</Show>