Cleanup

app/assets/stylesheets/application.css.scss

@@ -25,6 +25,7 @@ $light: #fff;
 
 @import 'bulma/bulma';
 
+@import "checkmark-icon";
 @import './demo';
 
 .is-font-logo {
@@ -64,88 +65,7 @@ body {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
-.animation-ctn {
+.inline-svg svg {
-  text-align: center;
-  margin-top: 5em;
-}
-
-@-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
-  }
-}
-
-/* other styles */
-/* .svg svg {
-    display: none
-}
- */
-.inlinesvg .svg svg {
   display: inline
 }
 
@@ -153,25 +73,4 @@ body {
   align-items: center;
   display: inline-flex;
   justify-content: center;
-  height: 154px;
-  width: 154px;
-}
-
-/* .svg img {
-    display: none
-} */
-
-.svg-icon--order-success 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--order-success svg circle {
-  -webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
-  animation: checkmark-circle 0.8s ease-in-out backwards;
-}
-
-.svg-icon--order-success 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;
 }

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;
+}

app/views/submissions/create.html.erb

@@ -1,32 +1,24 @@
  <div class="container">
    <div class="columns is-vcentered">
-     <div class="column is-family-secondary has-text-centered is-half is-offset-one-quarter">
+     <div class="column has-text-centered is-half is-offset-one-quarter">
-       <div>
+           <div class="svg-icon svg-icon-checkmark inline-svg">
-         <div class="animation-ctn">
-           <div class="svg-icon svg-icon--order-success svg">
              <svg xmlns="http://www.w3.org/2000/svg" width="154px" height="154px">
-               <g fill="none" stroke="#22AE73" stroke-width="2">
+               <g fill="none" stroke-width="2">
                  <circle cx="77" cy="77" r="72" style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;">
                  </circle>
-                 <circle id="colored" fill="#22AE73" cx="77" cy="77" r="72"
+                 <circle id="colored" cx="77" cy="77" r="72"
                    style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;"></circle>
                  <polyline class="st0" stroke="#fff" stroke-width="10" points="43.5,77.8 63.7,97.9 112.2,49.4 "
                    style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;" />
                </g>
              </svg>
            </div>
-         </div>
+       <h1 class="title">Thank You!</h1>
-
+       <p class="subtitle is-5">We received your submission.</p>
-       </div>
+       <p>
-       <h1 class=" has-text-black is-size-1 has-text-weight-semibold">Thank You!
+        <button onclick="window.history.back()" class="button is-success">Back to previous page</button>
-       </h1><br>
+       <p>
-       <p class="is-size-5 has-text-black ">We received your submission.</p><br>
-       <div class="">
-         <button onclick="window.history.back()" class="button is-success is-medium">Back to previous page</button>
-       </div>
 
      </div>
-
    </div>
-
  </div>