From 77ebec5804932e30d2d3f96d42c7d3f6d5343b77 Mon Sep 17 00:00:00 2001
From: Rafal Czajkowski <rafal.czajkowski@thesis.co>
Date: Wed, 13 Nov 2024 15:51:38 +0100
Subject: [PATCH 1/4] Update the stepper component in Welcome modal

Make the step dots clickable. Each dot should redirect to it's own step.
---
 dapp/src/components/WelcomeModal.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx
index eed64e40e..35e27efd3 100644
--- a/dapp/src/components/WelcomeModal.tsx
+++ b/dapp/src/components/WelcomeModal.tsx
@@ -124,11 +124,14 @@ const stepIndicatorStyleProps: StepIndicatorProps = {
   bgColor: "orange.50",
   position: "relative",
   opacity: "0.15",
+  _hover: {
+    cursor: "pointer",
+  },
 }
 
 function WelcomeModalBase({ closeModal }: BaseModalProps) {
   // Cast to fix eslint error: `unbound-method`.
-  const { activeStep, goToNext } = useSteps({
+  const { activeStep, goToNext, setActiveStep } = useSteps({
     index: 0,
     count: steps.length,
   }) as UseStepsReturn & { goToNext: () => void }
@@ -159,7 +162,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
           >
             <Stepper index={activeStep} gap="3">
               {steps.map((step) => (
-                <Step key={step.id}>
+                <Step key={step.id} onClick={() => setActiveStep(step.id)}>
                   <StepIndicator {...stepIndicatorStyleProps} />
                 </Step>
               ))}

From 594731bb9fad7d6ae8809b56d9cbf941d85b16ff Mon Sep 17 00:00:00 2001
From: Rafal Czajkowski <rafal.czajkowski@thesis.co>
Date: Wed, 13 Nov 2024 15:53:44 +0100
Subject: [PATCH 2/4] Loop videos in Welcome component

---
 dapp/src/components/WelcomeModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx
index 35e27efd3..0a795b1dc 100644
--- a/dapp/src/components/WelcomeModal.tsx
+++ b/dapp/src/components/WelcomeModal.tsx
@@ -182,6 +182,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
           height="full"
           autoPlay
           muted
+          loop
           objectFit="cover"
           roundedRight="xl"
         />

From 4037bf0c78f1cefb3f50998dba0a73349f675007 Mon Sep 17 00:00:00 2001
From: Rafal Czajkowski <rafal.czajkowski@thesis.co>
Date: Wed, 13 Nov 2024 15:55:13 +0100
Subject: [PATCH 3/4] Make the video box larger in Welcome component

---
 dapp/src/components/WelcomeModal.tsx | 2 +-
 dapp/src/theme/Modal.ts              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx
index 0a795b1dc..2a442f0f9 100644
--- a/dapp/src/components/WelcomeModal.tsx
+++ b/dapp/src/components/WelcomeModal.tsx
@@ -178,7 +178,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
         <Box
           as="video"
           src={activeStepData.video}
-          width="xs"
+          width="24rem"
           height="full"
           autoPlay
           muted
diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts
index 17426b4da..7e6f1fc66 100644
--- a/dapp/src/theme/Modal.ts
+++ b/dapp/src/theme/Modal.ts
@@ -83,7 +83,7 @@ const variants = {
 }
 
 const sizeXl = multiStyleConfig.definePartsStyle({
-  dialog: { maxW: "50.75rem" },
+  dialog: { maxW: "52rem" },
 })
 
 const sizeLg = multiStyleConfig.definePartsStyle({

From 57555560721cd6195e742bf000c8806687491d7f Mon Sep 17 00:00:00 2001
From: Rafal Czajkowski <rafal.czajkowski@thesis.co>
Date: Wed, 13 Nov 2024 16:04:42 +0100
Subject: [PATCH 4/4] Remove bottom border in video in Welcome component

---
 dapp/src/components/WelcomeModal.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx
index 2a442f0f9..add9c7fe0 100644
--- a/dapp/src/components/WelcomeModal.tsx
+++ b/dapp/src/components/WelcomeModal.tsx
@@ -185,6 +185,8 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
           loop
           objectFit="cover"
           roundedRight="xl"
+          outline="1px solid #f6ead5"
+          outlineOffset="-1px"
         />
       </SimpleGrid>
     </>