refact css tailwind

resources/sass/components/_btn.scss

@@ -1,40 +1,57 @@
 // Button
 
 .btn {
-    @apply border bg-primary-400 text-white py-2 px-4 shadow-sm rounded-md cursor-pointer;
+    @apply border border-transparent bg-gray-600 text-white font-semibold py-2 px-4 shadow-sm rounded cursor-pointer;
 
     &:hover {
-        @apply text-white bg-primary-600 transition-all duration-300;
+        @apply text-white bg-gray-800 transition-all duration-300;
     }
 
     svg {
         @apply w-4 fill-current mr-2 inline;
     }
+
+    &.svg {
+        @apply px-2;
+
+        svg {
+            @apply mr-0;
+        }
+    }
 }
 
 .btn-primary {
     @extend .btn;
-    @apply bg-primary-600;
+    @apply bg-blue-600 border-blue-600;
 
     &:hover {
-        @apply bg-primary-800;
+        @apply bg-blue-800;
     }
 }
 
 .btn-secondary {
     @extend .btn;
-    @apply bg-primary-600;
+    @apply bg-blue-400;
 
     &:hover {
-        @apply bg-primary-800;
+        @apply bg-blue-600;
     }
 }
 
 .btn-alert {
     @extend .btn;
-    @apply bg-red-600 text-white;
+    @apply bg-red border-red;
 
     &:hover {
-        @apply bg-red-800;
+        @apply bg-red-dark;
+    }
+}
+
+.btn-success {
+    @extend .btn;
+    @apply bg-green border-green;
+
+    &:hover {
+        @apply bg-green-dark;
     }
 }