reskin QuizScroll, QuizFinishedFail, move quiz scroll scss into SFC

Author: jeffreywhitaker

src/components/QuizScroll.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="quiz-scroll" ref="scroll">
-    <div class="scroll-graphic"></div>
     <div class="scroll-head">
       <div class="scroll-title">
         <slot name="title"></slot>
       </div>
     </div>
+    <div class="divider" />
     <div class="scroll-body" ref="body">
       <slot name="default"></slot>
     </div>
@@ -17,3 +17,62 @@ export default {
   name: "quizScroll"
 };
 </script>
+
+<style lang="scss" scoped>
+.quiz-scroll {
+  width: 550px;
+  height: 650px;
+  display: flex;
+  margin-top: 30px;
+  flex-direction: column;
+  border: 8px solid #c2cfe1;
+  background: url("/images/module-background.png");
+  background-size: cover;
+
+  .divider {
+    height: 5px;
+    width: 100%;
+    background-color: #c2cfe1;
+  }
+
+  .scroll-head {
+    .scroll-title {
+      text-align: center;
+      margin-top: 10px;
+      font-size: 50px;
+      top: 42px;
+      color: white !important;
+      font-family: "buWicked";
+    }
+  }
+
+  .scroll-body {
+    text-align: center;
+    margin-top: 30px;
+    padding: 0 40px;
+    font-size: 22px;
+
+    .asset {
+      text-align: center;
+      margin-bottom: 35px;
+    }
+
+    .scroll-content {
+      width: 420px;
+      margin-left: auto;
+      margin-right: auto;
+      font-size: 24px;
+      color: #031e41 !important;
+      font-family: "Barrow2Light";
+      letter-spacing: 2px;
+      text-align: left;
+      white-space: pre-wrap;
+
+      pre {
+        font-size: 18px;
+        white-space: pre-wrap;
+      }
+    }
+  }
+}
+</style>

src/styles/quiz-scroll.scss

@@ -1,7 +1,6 @@
 .cwhq-app {
   @import './colors.scss';
   @import './application.scss';
-  @import './quiz-scroll.scss';
   @import './quiz-answer.scss';
   @import './quiz-need-help.scss';
   @import './quiz-bar-rank.scss';

src/styles/styles.scss

@@ -4,7 +4,7 @@
       <quiz-scroll>
         <template v-slot:title>It's Over!</template>
         <template v-slot:default>
-          <div style="padding-left:130px; padding-right: 130px;">
+          <div>
             Sorry {{ firstName }}, your mission has ended.
             <br />
             <br />