From 24c3f245c9c5a27246b699c586583a0e555fc6fd Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sun, 3 Nov 2019 15:13:57 +0100
Subject: [PATCH] Updated component import

---
 src/App.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 88585a4..98feead 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,17 +5,13 @@
     </header>
 
     <h2>Quick info</h2>
-    <dict-table :collection="getSebinData.generic" :keyHeader="`Key`" :valueHeader="`Value`"></dict-table>
+    <data-table :data="getSebinData.generic" :headers="['Key', 'Value']"></data-table>
 
     <h2>Colors</h2>
-    <dict-table
-      :collection="getSebinData.colors"
-      :keyHeader="`Body Part`"
-      :valueHeader="`Color (hex)`"
-    ></dict-table>
+    <data-table :data="getSebinData.colors" :headers="['Body Part', 'Color Value (hex)', 'Color']"></data-table>
 
     <h2>Penis</h2>
-    <dict-table :collection="getSebinData.penis" :keyHeader="`Key`" :valueHeader="`Value`"></dict-table>
+    <data-table :data="getSebinData.penis" :headers="['Key', 'Value', 'Color']"></data-table>
 
     <h2>Anatomy</h2>
     <p>Sebin is a bipedal plantigrade. His body is mostly covered by red scales with yellow chest plates running from below his chin over his torso all the way down between his legs and underside of his tail. His physique is athletic to muscular. His fingers and toes are equipped sharp black claws. Brown spikes run along his spine down to the tip of his tail. His tail is about one meter in length.</p>
@@ -34,12 +30,12 @@
 </template>
 
 <script>
-import DictTable from "./components/DictionaryTable.vue";
+import DataTable from "./components/DataTable.vue";
 
 export default {
   name: "app",
   components: {
-    DictTable
+    DataTable
   },
   data() {
     return {
@@ -157,13 +153,13 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-  margin-top: 60px;
+  width: 60em;
+  margin: auto;
 }
 
 header {