Move Intro into separate component

src/components/Designer.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="designer">
-    <div id="intro">
+    <Intro header="Welcome to Midari Profile Studio" :body="introBody" />
-      <h2>Welcome to Midari Profile Studio</h2>
-      <p>
-        Customize your profile and run the commands in any channel that has access to the Midari Bot.<br>
-        Your settings are not saved locally. Refreshing the page will reset all colors!<br>
-        This tool is still work in progress!
-      </p>
-    </div>
     <div class="flex-container"> <!-- ToDo: fix container -->
       <Preview :panelColor="panelColor" :backgroundColor="backgroundColor" />
       <div class="flex-item">
@@ -41,16 +34,20 @@
 <script>
 import Preview from './Preview.vue';
 import Commands from './Commands.vue';
+import Intro from './Intro.vue';
 
 export default {
   name: 'Designer',
-  components: { Preview, Commands },
+  components: { Preview, Commands, Intro },
   props: {
     msg: String
   },
   data: ()=>({
     panelColor: '3D985D',
-    backgroundColor: '303144'
+    backgroundColor: '303144',
+    introBody: `Customize your profile and run the commands in any channel that has access to the Midari Bot.<br>
+                Your settings are not saved locally. Refreshing the page will reset all colors!<br>
+                This tool is still work in progress!`
   })
 }
 </script>

src/components/Intro.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="intro">
+    <h2>{{ header }}</h2>
+    <p v-html="body">
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['header', 'body']
+}
+</script>
+
+<style lang="scss">
+@import url('../styles/intro.scss');
+</style>

src/styles/intro.scss

@@ -0,0 +1,20 @@
+#intro {
+    h2 {
+      text-align: center;
+    }
+  
+    p {
+      padding: 25px;
+      padding-bottom: 0;
+    }
+
+    width: 80%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 25px;
+  
+    @media (max-width: 680px) {
+      width: 100%;
+      padding: 25px 0;
+    }  
+}

src/styles/specifics.scss

@@ -1,20 +0,0 @@
-#intro {
-    h2 {
-      text-align: center;
-    }
-  
-    p {
-      padding: 25px;
-      padding-bottom: 0;
-    }
-
-    width: 80%;
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 25px;
-  
-    @media (max-width: 680px) {
-      width: 100%;
-      padding: 25px 0;
-    }  
-}