fixes with countdown

src/components/CountdownCircleTimer.tsx

@@ -2,12 +2,13 @@ import { Component, createSignal, onMount, onCleanup } from "solid-js";
 
 interface CountdownCircleTimerProps {
   duration: number;
-  initialRemainingTime: number;
+  initialRemainingTime?: number;
   size: number;
   strokeWidth: number;
   colors: string;
-  children: (time: number) => any;
+  children: (props: { remainingTime: number }) => any;
   onComplete?: () => void;
+  isPlaying?: boolean;
 }
 
 const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
@@ -15,7 +16,7 @@ const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
   const circumference = radius * 2 * Math.PI;
 
   const [remainingTime, setRemainingTime] = createSignal(
-    props.initialRemainingTime
+    props.initialRemainingTime ?? props.duration
   );
 
   // Calculate progress (0 to 1)
@@ -87,7 +88,7 @@ const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
           transform: "translate(-50%, -50%)"
         }}
       >
-        {props.children(remainingTime())}
+        {props.children({ remainingTime: remainingTime() })}
       </div>
     </div>
   );

src/components/DeletionForm.tsx

@@ -36,7 +36,7 @@ export default function DeletionForm() {
     if (timer) {
       timerInterval = setInterval(
         () => calcRemainder(timer),
-        1000,
+        1000
       ) as unknown as number;
       onCleanup(() => {
         if (timerInterval) {
@@ -65,7 +65,7 @@ export default function DeletionForm() {
       const response = await fetch("/api/trpc/misc.sendDeletionRequestEmail", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email }),
+        body: JSON.stringify({ email })
       });
 
       const result = await response.json();
@@ -79,7 +79,7 @@ export default function DeletionForm() {
           }
           timerInterval = setInterval(
             () => calcRemainder(timer),
-            1000,
+            1000
           ) as unknown as number;
         }
       } else {
@@ -96,10 +96,10 @@ export default function DeletionForm() {
   };
 
   // Countdown timer render function
-  const renderTime = () => {
+  const renderTime = ({ remainingTime }: { remainingTime: number }) => {
     return (
       <div class="timer">
-        <div class="value">{countDown().toFixed(0)}</div>
+        <div class="value">{remainingTime.toFixed(0)}</div>
       </div>
     );
   };
@@ -136,7 +136,7 @@ export default function DeletionForm() {
                       loading()
                         ? "bg-lavender"
                         : "bg-maroon hover:brightness-125 active:scale-90"
-                    } flex w-36 justify-center rounded py-3 font-light text-white shadow-lg shadow-maroon transition-all duration-300 ease-out`}
+                    } shadow-maroon flex w-36 justify-center rounded py-3 font-light text-white shadow-lg transition-all duration-300 ease-out`}
                   >
                     <Show when={loading()} fallback="Send Deletion Request">
                       <LoadingSpinner height={24} width={24} />
@@ -162,8 +162,8 @@ export default function DeletionForm() {
             emailSent()
               ? "text-green"
               : error() !== ""
-              ? "text-red"
-              : "select-none opacity-0"
+                ? "text-red"
+                : "opacity-0 select-none"
           } mt-4 flex justify-center text-center italic transition-opacity duration-300 ease-in-out`}
         >
           <Show when={emailSent()} fallback={error()}>

src/components/blog/EditCommentModal.tsx

@@ -21,7 +21,7 @@ export default function EditCommentModal(props: EditCommentModalProps) {
   };
 
   return (
-    <div class="flex justify-center">
+    <div class="z-100 flex justify-center">
       <div class="fixed top-48 h-fit w-11/12 sm:w-4/5 md:w-2/3">
         <div
           id="edit_prompt"