Welcome component improvements (#854)

Ref: #851

This PR adds improvements to welcome component:
- loop videos,
- clickable step dots - each dot redirect to it's own step,
- larger video box,
- remove bottom border in video.

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>
               ))}
@@ -175,12 +178,15 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
         <Box
           as="video"
           src={activeStepData.video}
-          width="xs"
+          width="24rem"
           height="full"
           autoPlay
           muted
+          loop
           objectFit="cover"
           roundedRight="xl"
+          outline="1px solid #f6ead5"
+          outlineOffset="-1px"
         />
       </SimpleGrid>
     </>

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({