feat(15): styling step 5

15-multi-step-form/src/main/resources/public/out.css

@@ -1030,6 +1030,16 @@ video {
   padding-right: 0.75rem;
 }
 
+.py-32 {
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1466,6 +1476,14 @@ html {
     margin-top: 1.25rem;
   }
 
+  .md\:mt-4 {
+    margin-top: 1rem;
+  }
+
+  .md\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -1534,6 +1552,10 @@ html {
     width: 100%;
   }
 
+  .md\:w-20 {
+    width: 5rem;
+  }
+
   .md\:grow {
     flex-grow: 1;
   }
@@ -1574,6 +1596,10 @@ html {
     align-items: flex-end;
   }
 
+  .md\:justify-center {
+    justify-content: center;
+  }
+
   .md\:justify-between {
     justify-content: space-between;
   }

15-multi-step-form/src/main/resources/templates/step5.html

@@ -97,12 +97,12 @@
         </summary>
         <section
           id="multipage-form-container"
-          class="flex flex-col gap-y-4 items-center py-8 py-20 px-6 -mt-20 w-11/12 bg-white rounded-xl md:px-24 md:mt-0 md:w-full drop-shadow-xl md:drop-shadow-none"
+          class="flex flex-col gap-y-4 items-center py-20 px-8 -mt-20 w-11/12 bg-white rounded-xl md:row-span-2 md:justify-center md:px-24 md:mt-0 md:w-full md:h-full drop-shadow-xl md:drop-shadow-none"
         >
             <!-- Step 5 start -->
 
-          <img src="../public/images/icon-thank-you.svg" alt="" class="mb-2 w-14 h-14" />
+          <img src="../public/images/icon-thank-you.svg" alt="" class="mb-2 w-14 h-14 md:w-20 md:h-20" />
-          <h2 class="text-2xl font-bold">Thank you!</h2>
+          <h2 class="text-2xl font-bold md:mt-2 md:text-4xl text-marine-blue">Thank you!</h2>
           <p class="text-center text-cool-gray">
             Thanks for confirming your subscription! We hope you have fun
             using our platform. If you ever need support, please feel free

15-multi-step-form/src/main/scala/multistepform/Models.scala

@@ -49,7 +49,7 @@ object Models {
 
   final case class Answers(
       sessionId: String = "",
-      currentStep: Int = 4,
+      currentStep: Int = 5,
       step1: StepAnswers.Step1 = StepAnswers.Step1(),
       step2: StepAnswers.Step2 = StepAnswers.Step2(),
       step3: StepAnswers.Step3 = StepAnswers.Step3(