From 1e5f5ff506dbcab6ff2a1cabbbf9619d39334161 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 8 May 2024 19:26:31 +0530
Subject: [PATCH] Convert

---
 .../cast/src/components/PairingComplete.tsx   | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/web/apps/cast/src/components/PairingComplete.tsx b/web/apps/cast/src/components/PairingComplete.tsx
index 3d56ace853..6681ccb648 100644
--- a/web/apps/cast/src/components/PairingComplete.tsx
+++ b/web/apps/cast/src/components/PairingComplete.tsx
@@ -4,31 +4,14 @@ import { FilledCircleCheck } from "./FilledCircleCheck";
 export const PairingComplete: React.FC = () => {
     return (
         <PairingComplete_>
-            <div
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                    flexDirection: "column",
-                    textAlign: "center",
-                }}
-            >
+            <Items>
                 <FilledCircleCheck />
-                <h2
-                    style={{
-                        marginBottom: 0,
-                    }}
-                >
-                    Pairing Complete
-                </h2>
-                <p
-                    style={{
-                        lineHeight: "1.5rem",
-                    }}
-                >
+                <h2>Pairing Complete</h2>
+                <p>
                     We're preparing your album.
                     <br /> This should only take a few seconds.
                 </p>
-            </div>
+            </Items>
         </PairingComplete_>
     );
 };
@@ -38,4 +21,17 @@ const PairingComplete_ = styled("div")`
     min-height: 100svh;
     justify-content: center;
     align-items: center;
+
+    line-height: 1.5rem;
+
+    h2 {
+        margin-block-end: 0;
+    }
+`;
+
+const Items = styled("div")`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
 `;