wip: continue implementation

assets/styles/components/button.css

@@ -0,0 +1,16 @@
+.btn {
+    @apply inline-flex space-x-1 justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4;
+    @apply bg-primary text-white hover:bg-primary/80 shadow-md;
+}
+
+.btn--small {
+    @apply text-xs py-1 px-2 rounded-md;
+}
+
+.btn--secondary {
+    @apply bg-secondary text-gray-800 hover:bg-secondary/80;
+}
+
+.btn--active {
+    @apply shadow-none;
+}

assets/styles/components/forms.css

@@ -0,0 +1,4 @@
+label.required:after {
+    @apply inline-block text-sm;
+    content: '*';
+}

assets/styles/components/menu.css

@@ -0,0 +1,12 @@
+.menu--main {
+    @apply flex items-center space-x-2;
+}
+
+.menu--main a {
+    @apply uppercase text-lg font-semibold pb-1 px-2 border-b-2 border-white;
+    @apply hover:border-primary;
+}
+
+.menu--main .current a {
+    @apply border-primary;
+}

assets/styles/components/toast.css

@@ -0,0 +1,20 @@
+@import "toastify-js/src/toastify.css";
+
+.toastify {
+    @apply shadow-lg rounded;
+}
+
+.toastify--success {
+    @apply text-gray-100;
+    background: theme('colors.emerald.600');
+}
+
+.toastify--warning {
+    @apply text-gray-100;
+    background: theme('colors.red.600');
+}
+
+.toastify--info {
+    @apply text-gray-100;
+    background: theme('colors.blue.600');
+}

assets/styles/components/tooltip.css

@@ -0,0 +1,18 @@
+@import "tippy.js/dist/tippy.css";
+
+.tippy-box {
+  background-color: theme('colors.primary');
+}
+
+.tippy-box[data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: theme('colors.primary');
+}
+.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: theme('colors.primary');
+}
+.tippy-box[data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: theme('colors.primary');
+}
+.tippy-box[data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: theme('colors.primary');
+}