From d91ac1ace7875d7a80398e26b313b20311935c57 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Tue, 8 Apr 2025 13:40:23 +0200
Subject: [PATCH] refactor: Update PeerConnectionDisconnectedOverlay to use
 Card component for better UI structure

---
 ui/src/components/VideoOverlay.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/VideoOverlay.tsx b/ui/src/components/VideoOverlay.tsx
index fe1f120..e34cf10 100644
--- a/ui/src/components/VideoOverlay.tsx
+++ b/ui/src/components/VideoOverlay.tsx
@@ -6,7 +6,7 @@ import { LuPlay } from "react-icons/lu";
 
 import { Button, LinkButton } from "@components/Button";
 import LoadingSpinner from "@components/LoadingSpinner";
-import { GridCard } from "@components/Card";
+import Card, { GridCard } from "@components/Card";
 
 interface OverlayContentProps {
   children: React.ReactNode;
@@ -153,10 +153,11 @@ export function ConnectionFailedOverlay({
 
 interface PeerConnectionDisconnectedOverlay {
   show: boolean;
-  setupPeerConnection: () => Promise<void>;
 }
 
-export function PeerConnectionDisconnectedOverlay({ show }: ConnectionErrorOverlayProps) {
+export function PeerConnectionDisconnectedOverlay({
+  show,
+}: PeerConnectionDisconnectedOverlay) {
   return (
     <AnimatePresence>
       {show && (
@@ -185,12 +186,14 @@ export function PeerConnectionDisconnectedOverlay({ show }: ConnectionErrorOverl
                     </ul>
                   </div>
                   <div className="flex items-center gap-x-2">
-                    <div className="flex flex-col items-center gap-y-2">
-                      <LoadingSpinner className="h-4 w-4 text-blue-800 dark:text-blue-200" />
-                      <p className="text-sm text-slate-700 dark:text-slate-300">
-                        Retrying connection...
-                      </p>
-                    </div>
+                    <Card>
+                      <div className="flex items-center gap-x-2 p-4">
+                        <LoadingSpinner className="h-4 w-4 text-blue-800 dark:text-blue-200" />
+                        <p className="text-sm text-slate-700 dark:text-slate-300">
+                          Retrying connection...
+                        </p>
+                      </div>
+                    </Card>
                   </div>
                 </div>
               </div>