Add a basic modal template to be used

resources/assets/styles/components/animations.css

@@ -34,3 +34,15 @@
     @apply .bg-red-dark;
   }
 }
+
+/*
+ * transition="modal"
+ */
+.modal-enter, .modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  animation: opacity 250ms linear;
+}

resources/assets/styles/components/buttons.css

@@ -12,6 +12,14 @@
     }
   }
 
+  &.btn-green {
+    @apply .bg-green .border-green-dark .border .text-white;
+
+    &:hover:enabled {
+      @apply .bg-green-dark .border-green-darker;
+    }
+  }
+
   &.btn-secondary {
     @apply .border .border-grey-light .text-grey-dark;
 

resources/assets/styles/components/modal.css

@@ -0,0 +1,10 @@
+.modal-mask {
+  @apply .fixed .pin .z-50 .overflow-auto .flex;
+  background: rgba(0, 0, 0, 0.7);
+  transition: opacity 250ms ease;
+
+  & > .modal-container {
+    @apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex;
+    transition: all 250ms ease;
+  }
+}