admin dashboard refactoring

resources/js/components/Others/ColorLabel.vue

@@ -1,5 +1,5 @@
 <template>
-    <b class="color-label text-xs rounded-lg" :class="color">
+    <b class="color-label capitalize inline-block text-xs font-bold rounded-lg py-1 px-2" :class="color">
         <slot></slot>
     </b>
 </template>
@@ -16,10 +16,6 @@
     @import '/resources/sass/vuefilemanager/_mixins';
 
     .color-label {
-        text-transform: capitalize;
-        display: inline-block;
-        font-weight: 700;
-        padding: 4px 6px;
 
         &.purple {
             color: $purple;
@@ -41,12 +37,4 @@
             background: rgba($danger, 0.1);
         }
     }
-
-    @media only screen and (max-width: 1024px) {
-
-    }
-
-    .dark {
-
-    }
 </style>

resources/js/components/Others/Forms/FormLabel.vue

@@ -12,6 +12,7 @@
         <shield-icon v-if="icon === 'shield'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
         <bell-icon v-if="icon === 'bell'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
         <key-icon v-if="icon === 'key'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
+        <users-icon v-if="icon === 'users'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
         <b class="font-bold dark:text-gray-200 text-lg">
             <slot></slot>
         </b>
@@ -20,6 +21,7 @@
 
 <script>
     import {
+		UsersIcon,
 		ShieldIcon,
 		CreditCardIcon,
 		DollarSignIcon,
@@ -40,6 +42,7 @@
 			'icon'
 		],
         components: {
+			UsersIcon,
 			CreditCardIcon,
 			DollarSignIcon,
 			SmartphoneIcon,