1 files changed, 46 insertions, 5 deletions
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
index 5119031..1cc43cd 100644
--- a/iridescence/src/components/admin/NewProduct.vue
+++ b/iridescence/src/components/admin/NewProduct.vue
@@ -1,23 +1,64 @@
 <template>
   <div id="addNewProduct">
-    <button class="button is-primary">
+    <button class="button is-primary" @click="toggleModal">
       + Add New
     </button>
-    <NewProductModal v-if="modalEnabled"></NewProductModal>
+    <div class="modal is-active" v-if="modalEnabled">
+      <transition
+        name="modalTransition"
+        enter-active-class="animate__animated animate__animate__fadeIn animate__faster"
+        leave-active-class="animate__animated animate__animate__fadeOut animate__faster"
+      >
+        <div class="modal-background" v-if="modalEnabled"></div>
+      </transition>
+      <transition
+        name="cardTransition"
+        enter-active-class="animate__animated animate__fadeInDownBig animate__faster"
+        leave-active-class="animate__animated animate__animate__fadeOut animate__faster"
+      >
+        <div class="modal-card" v-if="modalEnabled">
+          <header class="modal-card-head">
+            <p class="modal-card-title">Add a new product</p>
+            <button class="delete" @click="toggleModal"></button>
+          </header>
+          <section class="modal-card-body">
+            <ProductEditCard v-bind:current-product="product"></ProductEditCard>
+          </section>
+          <footer class="modal-card-foot"></footer>
+        </div>
+      </transition>
+    </div>
   </div>
 </template>
 
 <script>
-import NewProductModal from "./NewProductModal.vue";
+import ProductEditCard from "./ProductEditCard.vue";
+
 export default {
   name: "AddNewProduct",
   components: {
-    NewProductModal
+    ProductEditCard
   },
   data: function() {
     return {
-      modalEnabled: true
+      modalEnabled: false,
+      product: {
+        id: 0,
+        name: "",
+        quantity: 0,
+        cents: 0,
+        imgPath: "",
+        description: "",
+        featured: false,
+        categories: []
+      },
+      addAnother: false
     };
+  },
+  methods: {
+    toggleModal() {
+      this.modalEnabled = !this.modalEnabled;
+    }
   }
 };
 </script>