From a1b6912dce326d10ebf179b82d850f35dcdfb588 Mon Sep 17 00:00:00 2001
From: Minzkraut <minzkraut@gmail.com>
Date: Thu, 17 Mar 2022 06:07:08 +0100
Subject: [PATCH] Move Intro into separate component

---
 src/components/Designer.vue | 17 +++++++----------
 src/components/Intro.vue    | 17 +++++++++++++++++
 src/styles/intro.scss       | 20 ++++++++++++++++++++
 src/styles/specifics.scss   | 20 --------------------
 4 files changed, 44 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Intro.vue
 create mode 100644 src/styles/intro.scss

diff --git a/src/components/Designer.vue b/src/components/Designer.vue
index cbe0690..2c5af93 100644
--- a/src/components/Designer.vue
+++ b/src/components/Designer.vue
@@ -1,13 +1,6 @@
 <template>
   <div class="designer">
-    <div id="intro">
-      <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>
+    <Intro header="Welcome to Midari Profile Studio" :body="introBody" />
     <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>
diff --git a/src/components/Intro.vue b/src/components/Intro.vue
new file mode 100644
index 0000000..e3d2969
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/styles/intro.scss b/src/styles/intro.scss
new file mode 100644
index 0000000..7c5d56e
--- /dev/null
+++ b/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;
+    }  
+}
\ No newline at end of file
diff --git a/src/styles/specifics.scss b/src/styles/specifics.scss
index 810b328..e69de29 100644
--- a/src/styles/specifics.scss
+++ b/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;
-    }  
-}
\ No newline at end of file