1 files changed, 23 insertions, 2 deletions
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index 6d03c820..632acc75 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -3,14 +3,16 @@ import { Button } from ".";
 import { PlayIcon } from "@heroicons/react/24/outline";
 import { useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
+import { useEffect, useState } from "react";
 
-let StyledButton = styled(Button)`
+let StyledButton = styled(Button)<{ color?: string | null }>`
   margin: auto;
   margin-top: 8px;
+  margin-bottom: 16px;
   display: grid;
   grid-template-columns: 30px 1fr;
   align-items: center;
-  background: #be1b55;
+  background: ${(props) => props.color || "#be1b55"};
 
   &:hover {
     transition-property: "background";
@@ -23,8 +25,27 @@ function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) {
     (state: RootStore) => state.config.vscMediaUrl
   );
 
+  const [buttonColor, setButtonColor] = useState<string | null>(
+    localStorage.getItem("continueButtonColor")
+  );
+
+  useEffect(() => {
+    const handleStorageChange = (e: any) => {
+      if (e.key === "continueButtonColor") {
+        // Update your state or do whatever you need to do here
+        setButtonColor(e.newValue);
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+
+    // Don't forget to cleanup the event listener
+    return () => window.removeEventListener("storage", handleStorageChange);
+  }, []);
+
   return (
     <StyledButton
+      color={buttonColor as any}
       hidden={props.hidden}
       style={{ fontSize: "10px" }}
       className="m-auto press-start-2p"