refact css tailwind

resources/sass/components/_base.scss

@@ -0,0 +1,32 @@
+.text-shadow {
+    text-shadow: 1px 1px 2px #000;
+}
+
+.left-8 {
+    left: 2rem;
+}
+
+.left-80 {
+    left: 20rem;
+}
+
+.-bottom-12 {
+    bottom: -3rem;
+}
+
+.max-h-64 {
+    max-height: 16rem;
+}
+
+.max-w-64 {
+    max-width: 16rem;
+}
+
+.max-h-48 {
+    max-height: 12rem;
+}
+
+.max-w-48 {
+    max-width: 12rem;
+}
+

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;
     }
 }

resources/sass/components/_elements.scss

@@ -1,57 +1,37 @@
 // Elements
 
-.text-shadow {
-    text-shadow: 1px 1px 2px #000;
-}
-
-.left-8 {
-    left: 2rem;
-}
-
-.left-80 {
-    left: 20rem;
-}
-
-.-bottom-12 {
-    bottom: -3rem;
-}
-
-.max-h-64 {
-    max-height: 16rem;
-}
-
-@for $i from 1 through 9 {
-
-    .bg-primary-#{$i}00 {
-        @apply bg-green-#{$i}00;
-    }
-
-    .hover:bg-primary-#{$i}00 {
-        @apply bg-green-#{$i}00;
-    }
-
-    .bg-secondary-#{$i}00 {
-        @apply bg-blue-#{$i}00;
-    }
-
-    .text-primary-#{$i}00 {
-        @apply text-gray-#{$i}00;
-    }
-
-    .hover:text-primary-#{$i}00 {
-        @apply text-gray-#{$i}00;
-    }
-}
+//@for $i from 1 through 9 {
+//
+//    .bg-primary-#{$i}00 {
+//        @apply bg-green-#{$i}00;
+//    }
+//
+//    .hover:bg-primary-#{$i}00 {
+//        @apply bg-green-#{$i}00;
+//    }
+//
+//    .bg-secondary-#{$i}00 {
+//        @apply bg-blue-#{$i}00;
+//    }
+//
+//    .text-primary-#{$i}00 {
+//        @apply text-gray-#{$i}00;
+//    }
+//
+//    .hover:text-primary-#{$i}00 {
+//        @apply text-gray-#{$i}00;
+//    }
+//}
 
 .page-title {
-    @apply text-3xl font-bold text-primary-900;
+    @apply text-3xl font-bold text-gray-900;
 }
 
 a {
-    @apply text-primary-700;
+    @apply text-gray-700;
 
     &:hover {
-        @apply text-primary-900;
+        @apply text-gray-900;
     }
 }
 
@@ -73,10 +53,10 @@ a {
     @apply shadow;
 
     &-header {
-        @apply flex justify-between items-center px-4 py-2 rounded bg-primary-400 font-bold cursor-pointer;
+        @apply flex justify-between items-center px-4 py-2 text-white bg-gray-800 font-bold cursor-pointer;
 
         svg {
-            @apply w-8 text-primary-600 fill-current;
+            @apply w-8 fill-current;
         }
     }
 
@@ -91,15 +71,15 @@ a {
     }
 
     &-content {
-        @apply px-4 py-2;
+        @apply px-4 py-2 bg-white;
     }
 }
 
 .card {
-    @apply bg-primary-300 rounded;
+    @apply bg-gray-300 rounded text-black;
 
     svg {
-        @apply max-w-full max-h-64 m-auto fill-current;
+        @apply max-w-full max-h-48 max-w-48 m-auto fill-current;
     }
 
     h2 {
@@ -107,10 +87,10 @@ a {
     }
 
     &:hover {
-        @apply bg-primary-500;
+        @apply bg-gray-500 text-gray-700;
 
         h2 {
-            @apply text-primary-700;
+            @apply text-gray-700;
         }
     }
 }

resources/sass/components/nav.scss

@@ -1,14 +1,14 @@
 
 nav {
-    @apply w-48;
+    @apply w-48 h-screen bg-gray-800 flex flex-col justify-between shadow;
     transition: width 0.3s;
 
     svg {
-        @apply fill-current text-primary-600 w-12 p-2;
+        @apply fill-current text-gray-300 w-12 p-2;
         transition: color 0.3s;
 
         &:hover {
-            @apply text-primary-800;
+            @apply text-white;
         }
     }
 
@@ -22,24 +22,24 @@ nav {
     }
 
     .nav-item {
-        @apply flex items-center;
-
+        @apply flex items-center text-gray-100;
+        transition: background-color 0.3s;
 
         span {
             @apply font-bold text-xl ml-2 overflow-hidden truncate;
             transition: width 0.3s;
 
             &:hover {
-                @apply text-primary-800;
+                @apply text-white;
             }
         }
 
         &:hover {
-            @apply bg-primary-500;
+            @apply bg-gray-900;
 
             span,
             svg {
-                @apply text-primary-800;
+                @apply text-white;
             }
         }
     }