Merge branch 'form-submission-thank-you-page'

* form-submission-thank-you-page:
  Cleanup
  Remove testing page render
  Add icon svg on the submission thank you page
  Make codes more readable
  Make the submission thank you page vertically centered
  Fix the identation of codes
  Implement the submission thank you page
  Define a custom layout for submission thank you page

app/assets/stylesheets/application.css.scss

@@ -25,6 +25,7 @@ $light: #fff;
 
 @import 'bulma/bulma';
 
+@import "checkmark-icon";
 @import './demo';
 
 .is-font-logo {
@@ -35,6 +36,10 @@ $light: #fff;
   height: 100%;
 }
 
+.is-vcentered {
+  height: 100vh;
+}
+
 .content {
   padding: 30px 60px 50px;
 
@@ -43,8 +48,6 @@ $light: #fff;
   }
 }
 
-
-
 body {
   min-height: 100vh;
 }
@@ -66,4 +69,14 @@ body {
 
 .submission-table tbody {
   font-size: 0.75em;
+}
+
+.inline-svg svg {
+  display: inline
+}
+
+.svg-icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
 }

app/assets/stylesheets/checkmark-icon.css.scss

@@ -0,0 +1,89 @@
+@-webkit-keyframes checkmark {
+  0% {
+    stroke-dashoffset: 100px
+  }
+
+  100% {
+    stroke-dashoffset: 200px
+  }
+}
+
+@-ms-keyframes checkmark {
+  0% {
+    stroke-dashoffset: 100px
+  }
+
+  100% {
+    stroke-dashoffset: 200px
+  }
+}
+
+@keyframes checkmark {
+  0% {
+    stroke-dashoffset: 100px
+  }
+
+  100% {
+    stroke-dashoffset: 0px
+  }
+}
+
+@-webkit-keyframes checkmark-circle {
+  0% {
+    stroke-dashoffset: 480px
+  }
+
+  100% {
+    stroke-dashoffset: 960px;
+
+  }
+}
+
+@-ms-keyframes checkmark-circle {
+  0% {
+    stroke-dashoffset: 240px
+  }
+
+  100% {
+    stroke-dashoffset: 480px
+  }
+}
+
+@keyframes checkmark-circle {
+  0% {
+    stroke-dashoffset: 480px
+  }
+
+  100% {
+    stroke-dashoffset: 960px
+  }
+}
+
+@keyframes colored-circle {
+  0% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: 100
+  }
+}
+
+.svg-icon-checkmark svg polyline {
+  -webkit-animation: checkmark 0.30s ease-in-out 0.9s backwards;
+  animation: checkmark 0.30s ease-in-out 0.9s backwards
+}
+
+.svg-icon-checkmark svg g {
+  stroke: $success;
+}
+.svg-icon-checkmark svg circle {
+  -webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
+  animation: checkmark-circle 0.8s ease-in-out backwards;
+}
+
+.svg-icon-checkmark svg circle#colored {
+  -webkit-animation: colored-circle 0.8s ease-in-out 0.9s backwards;
+  animation: colored-circle 0.8s ease-in-out 0.9s backwards;
+  fill: $success;
+}