From 5e1fdd656512ed7bc2e5a8159635a33c08fcca44 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:22:27 +0530
Subject: [PATCH] Use

---
 ...ssfullyOverlay.tsx => PairingComplete.tsx} | 29 ++++---------------
 web/apps/cast/src/pages/slideshow.tsx         |  4 +--
 2 files changed, 7 insertions(+), 26 deletions(-)
 rename web/apps/cast/src/components/{PairedSuccessfullyOverlay.tsx => PairingComplete.tsx} (59%)

diff --git a/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx b/web/apps/cast/src/components/PairingComplete.tsx
similarity index 59%
rename from web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
rename to web/apps/cast/src/components/PairingComplete.tsx
index 3e5cd582b0..3d56ace853 100644
--- a/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
+++ b/web/apps/cast/src/components/PairingComplete.tsx
@@ -1,22 +1,9 @@
 import { styled } from "@mui/material";
 import { FilledCircleCheck } from "./FilledCircleCheck";
 
-export const PairedSuccessfullyOverlay: React.FC = () => {
+export const PairingComplete: React.FC = () => {
     return (
-        <div
-            style={{
-                position: "fixed",
-                top: 0,
-                right: 0,
-                height: "100%",
-                width: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                zIndex: 100,
-                backgroundColor: "black",
-            }}
-        >
+        <PairingComplete_>
             <div
                 style={{
                     display: "flex",
@@ -42,19 +29,13 @@ export const PairedSuccessfullyOverlay: React.FC = () => {
                     <br /> This should only take a few seconds.
                 </p>
             </div>
-        </div>
+        </PairingComplete_>
     );
 };
 
-export const PairingSuccessful_ = styled("div")`
-    position: fixed;
-    top: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
+const PairingComplete_ = styled("div")`
     display: flex;
+    min-height: 100svh;
     justify-content: center;
     align-items: center;
-    z-index: 100;
-    background-color: black;
 `;
diff --git a/web/apps/cast/src/pages/slideshow.tsx b/web/apps/cast/src/pages/slideshow.tsx
index 98426a8579..50317dca87 100644
--- a/web/apps/cast/src/pages/slideshow.tsx
+++ b/web/apps/cast/src/pages/slideshow.tsx
@@ -1,5 +1,5 @@
 import log from "@/next/log";
-import { PairedSuccessfullyOverlay } from "components/PairedSuccessfullyOverlay";
+import { PairingComplete } from "components/PairingComplete";
 import { SlideView } from "components/Slide";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -48,7 +48,7 @@ export default function Slideshow() {
 
     console.log("Rendering slideshow", { loading, imageURL, nextImageURL });
 
-    if (loading) return <PairedSuccessfullyOverlay />;
+    if (loading) return <PairingComplete />;
 
     return <SlideView url={imageURL} nextURL={nextImageURL} />;
 }