Updated component import

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
+    <data-table :data="getSebinData.colors" :headers="['Body Part', 'Color Value (hex)', 'Color']"></data-table>
-      :collection="getSebinData.colors"
-      :keyHeader="`Body Part`"
-      :valueHeader="`Color (hex)`"
-    ></dict-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;
+  width: 60em;
-  margin-top: 60px;
+  margin: auto;
 }
 
 header {