fix: groups edit tabs UI

Author: NGPixel

client/components/admin/admin-groups-edit.vue

@@ -27,10 +27,16 @@
             v-icon(left) mdi-check
             span Update Group
         v-card.mt-3
-          v-tabs(v-model='tab', :background-color='$vuetify.theme.dark ? "primary" : "grey darken-2"', fixed-tabs, slider-color='white', show-arrows, dark)
-            v-tab(key='permissions') Permissions
-            v-tab(key='rules') Page Rules
-            v-tab(key='users') Users
+          v-tabs.grad-tabs(v-model='tab', :color='$vuetify.theme.dark ? `blue` : `primary`', fixed-tabs, show-arrows, icons-and-text)
+            v-tab(key='permissions')
+              span Permissions
+              v-icon mdi-lock-pattern
+            v-tab(key='rules')
+              span Page Rules
+              v-icon mdi-file-lock
+            v-tab(key='users')
+              span Users
+              v-icon mdi-account-group
 
             v-tab-item(key='permissions', :transition='false', :reverse-transition='false')
               group-permissions(v-model='group', @refresh='refresh')

client/scss/app.scss

@@ -11,6 +11,7 @@
 @import 'components/v-data-table';
 @import 'components/v-dialog';
 @import 'components/v-form';
+@import 'components/v-tabs';
 
 // @import '../libs/twemoji/twemoji-awesome';
 // @import '../libs/prism/prism.css';

client/scss/components/v-tabs.scss

@@ -0,0 +1,10 @@
+.grad-tabs > .v-tabs-bar {
+  background-image: linear-gradient(to top, rgba(#000, .025), transparent);
+  border-bottom: 1px solid rgba(#000, .1);
+  border-radius: 4px 4px 0 0;
+
+  @at-root .theme--dark & {
+    background-image: linear-gradient(to bottom, rgba(#FFF, .05), transparent);
+    border-bottom-color: transparent;
+  }
+}