fix: streamline admin UI with common save actions

client/components/admin.vue

@@ -20,6 +20,9 @@
         v-list-tile(to='/pages')
           v-list-tile-avatar: v-icon insert_drive_file
           v-list-tile-title {{ $t('admin:pages.title') }}
+          v-list-tile-action
+            v-chip(small, disabled, color='grey lighten-4')
+              .caption.grey--text 123
         v-list-tile(to='/theme')
           v-list-tile-avatar: v-icon palette
           v-list-tile-title {{ $t('admin:theme.title') }}
@@ -32,7 +35,6 @@
           v-list-tile-avatar: v-icon perm_identity
           v-list-tile-title {{ $t('admin:users.title') }}
           v-list-tile-action
-            .justify-end
             v-chip(small, disabled, color='grey lighten-4')
               .caption.grey--text 1
         v-divider.my-2
@@ -158,11 +160,14 @@ export default {
   }
 }
 
-.admin-header-icon {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+.admin-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 
+  &-title {
+    margin-left: 1rem;
+  }
 }
 
 </style>

client/components/admin/admin-api.vue

 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') call_split
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') call_split
+          .admin-header-title
             .headline.blue--text.text--darken-2 API
             .subheading.grey--text Manage keys to access the API
-    v-card
-      v-card-title
-        v-btn(color='green', dark)
+          v-spacer
+          v-btn(outline, color='grey', large)
+            v-icon refresh
+          v-btn(color='green', dark, depressed, large)
             v-icon(left) power_settings_new
             | Enable API
-        v-btn(color='primary', dark)
+          v-btn(color='primary', depressed, large)
             v-icon(left) add
             | New API Key
-        v-btn(icon)
-          v-icon.grey--text refresh
-        v-spacer
-        v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
+        v-card.mt-3
           v-data-table(
             v-model='selected'
             :items='items',

client/components/admin/admin-auth.vue

 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') lock_outline
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') lock_outline
+          .admin-header-title
             .headline.primary--text Authentication
             .subheading.grey--text Configure the authentication settings of your wiki
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
+
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='settings'): v-icon settings
             v-tab(v-for='strategy in activeStrategies', :key='strategy.key') {{ strategy.title }}
 
@@ -108,15 +119,6 @@
                       multiple
                       chips
                       )
-
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
-
 </template>
 
 <script>

client/components/admin/admin-contribute.vue

 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') favorite
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') favorite
+          .admin-header-title
             .headline.primary--text {{ $t('admin:contribute.title') }}
             .subheading.grey--text {{ $t('admin:contribute.subtitle') }}
-    v-card.pa-3
+          v-spacer
+          v-btn(depressed, color='primary', href='https://opencollective.com/wikijs', large)
+            v-icon(left) local_atm
+            span {{ $t('admin:contribute.makeADonation') }}
+        v-card.mt-3
+          v-card-text
             i18next.body-1.pl-3(path='admin:contribute.openSource', tag='div')
               v-icon(color='red') favorite
               a(href='https://requarks.io', target='_blank') requarks.io
@@ -14,7 +22,7 @@
             v-subheader {{ $t('admin:contribute.fundOurWork') }}
             .body-1.pl-3 {{ $t('admin:contribute.openCollective') }}
             v-card-actions.ml-2
-        v-btn(depressed, color='primary', href='https://opencollective.com/wikijs')
+              v-btn(outline, color='primary', href='https://opencollective.com/wikijs')
                 v-icon(left) local_atm
                 span {{ $t('admin:contribute.makeADonation') }}
             .body-1.mt-3.pl-3 {{ $t('admin:contribute.tshirts') }}
@@ -39,9 +47,10 @@
                 li {{ $t('admin:contribute.talkToFriends') }}
                 i18next(path='admin:contribute.followUsOnTwitter', tag='li')
                   a(href='https://twitter.com/requarks', target='_blank') Twitter
-    v-card
           v-toolbar(color='teal', dense, dark)
             .subheading Sponsors
+            v-spacer
+            v-btn(outline, small, href='https://opencollective.com/wikijs/order/1273') Become a Sponsor
           v-list(two-line, dense)
             template(v-for='(sponsor, idx) in sponsors')
               v-list-tile(:key='sponsor.id')
@@ -59,9 +68,10 @@
                   v-btn(icon, :href='sponsor.website', target='_blank')
                     v-icon(color='grey') public
               v-divider(v-if='idx < sponsors.length - 1')
-    v-card
           v-toolbar(color='blue-grey', dense, dark)
             .subheading Backers
+            v-spacer
+            v-btn(outline, small, href='https://opencollective.com/wikijs/order/1272') Become a Backer
           v-list(two-line, dense)
             template(v-for='(backer, idx) in backers')
               v-list-tile(:key='backer.id')

client/components/admin/admin-dashboard.vue

 <template lang='pug'>
-  v-card(tile, flat :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .headline.primary--text {{ $t('admin:dashboard.title') }}
-      .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
   v-container(fluid, grid-list-lg)
     v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') dashboard
+          .admin-header-title
+            .headline.primary--text {{ $t('admin:dashboard.title') }}
+            .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
       v-flex(xs12 md6 lg4 xl3 d-flex)
         v-card.primary.dashboard-card(dark)
           v-card-text

client/components/admin/admin-dev.vue

 <template lang='pug'>
-  div
-    v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') weekend
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') weekend
+          .admin-header-title
             .headline.primary--text Developer Tools
             .subheading.grey--text ¯\_(ツ)_/¯
+
+        v-card.mt-3
           v-tabs(
             v-model='selectedTab'
-      :color='$vuetify.dark ? "primary" : "grey lighten-4"'
+            color='grey darken-2'
             fixed-tabs
-      :slider-color='$vuetify.dark ? "white" : "primary"'
+            slider-color='white'
             show-arrows
+            dark
             @input='tabChanged'
             )
             v-tab(key='0') Graph API Playground

client/components/admin/admin-editor.vue

 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') transform
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') transform
+          .admin-header-title
             .headline.primary--text Editor
             .subheading.grey--text Configure the content editor
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
+
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='settings'): v-icon settings
             v-tab(key='code') Markdown
 
@@ -20,14 +31,6 @@
                 v-form
                   v-subheader Editor Configuration
                   .body-1.ml-3 This editor has no configuration options you can modify.
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
-
 </template>
 
 <script>

client/components/admin/admin-general.vue

 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
+  v-container(fluid, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') widgets
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') widgets
+          .admin-header-title
             .headline.primary--text {{ $t('admin:general.title') }}
             .subheading.grey--text {{ $t('admin:general.subtitle') }}
+          v-spacer
+          v-btn(color='success', depressed, @click='save', large)
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
@@ -15,17 +21,48 @@
                       .subheading {{ $t('admin:general.siteInfo') }}
                   v-subheader General
                   .px-3.pb-3
-                    v-text-field(label='Site Title', required, :counter='50', v-model='siteTitle', prepend-icon='public')
+                    v-text-field(
+                      outline
+                      background-color='grey lighten-2'
+                      label='Site Title'
+                      required
+                      :counter='50'
+                      v-model='siteTitle'
+                      prepend-icon='public'
+                      )
                   v-divider
                   v-subheader SEO
                   .px-3.pb-3
-                    v-text-field(label='Site Description', :counter='255', prepend-icon='public')
-                    v-text-field(label='Site Keywords', :counter='255', prepend-icon='public')
-                    v-select(label='Meta Robots', chips, tags, :items='metaRobots', v-model='metaRobotsSelection', prepend-icon='public')
+                    v-text-field(
+                      outline
+                      background-color='grey lighten-2'
+                      label='Site Description'
+                      :counter='255'
+                      prepend-icon='public'
+                      )
+                    v-text-field(
+                      outline
+                      background-color='grey lighten-2'
+                      label='Site Keywords'
+                      :counter='255'
+                      prepend-icon='public'
+                      )
+                    v-select(
+                      outline
+                      background-color='grey lighten-2'
+                      label='Meta Robots'
+                      chips
+                      tags
+                      :items='metaRobots'
+                      v-model='metaRobotsSelection'
+                      prepend-icon='public'
+                      )
                   v-divider
                   v-subheader Analytics
                   .px-3.pb-3
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       label='Google Analytics ID'
                       :counter='255'
                       prepend-icon='public'
@@ -36,6 +73,8 @@
                   v-subheader Footer Copyright
                   .px-3.pb-3
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       label='Company / Organization Name'
                       v-model='company'
                       :counter='255'
@@ -43,11 +82,6 @@
                       persistent-hint
                       hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.'
                       )
-                  v-card-chin
-                    v-spacer
-                    v-btn(color='primary', @click='save')
-                      v-icon(left) chevron_right
-                      span Save
             v-flex(lg6 xs12)
               v-card
                 v-toolbar(color='primary', dark, dense, flat)
@@ -81,11 +115,6 @@
                     persistent-hint
                     hint='Uncheck this box if you don\'t want Henry, Wiki.js mascot, to be displayed on client-facing pages.'
                     )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', @click='save')
-                    v-icon(left) chevron_right
-                    span Save
 
               v-card.mt-3
                 v-toolbar(color='primary', dark, dense, flat)
@@ -107,11 +136,6 @@
                     persistent-hint
                     hint='Allow users to have their own personal wiki.'
                     )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', @click='save')
-                    v-icon(left) chevron_right
-                    span Save
 
 </template>
 

client/components/admin/admin-groups.vue

 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') people
+  v-container(fluid, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') people
+          .admin-header-title
             .headline.blue--text.text--darken-2 Groups
             .subheading.grey--text Manage groups and their permissions
-    v-card
-      v-card-title
+          v-spacer
+          v-btn(color='grey', outline, @click='refresh', large)
+            v-icon refresh
           v-dialog(v-model='newGroupDialog', max-width='500')
-          v-btn(color='primary', dark, slot='activator')
+            v-btn(color='primary', depressed, slot='activator', large)
               v-icon(left) add
-            | New Group
+              span New Group
             v-card
               .dialog-header.is-short New Group
               v-card-text
@@ -18,10 +22,7 @@
                 v-spacer
                 v-btn(flat, @click='newGroupDialog = false') Cancel
                 v-btn(color='primary', @click='createGroup') Create
-        v-btn(icon, @click='refresh')
-          v-icon.grey--text refresh
-        v-spacer
-        v-text-field(solo, append-icon='search', label='Search', single-line, hide-details, v-model='search')
+        v-card.mt-3
           v-data-table(
             :items='groups'
             :headers='headers'

client/components/admin/admin-locale.vue

 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
-    v-layout(row wrap)
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') language
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') language
+          .admin-header-title
             .headline.primary--text {{ $t('admin:locale.title') }}
             .subheading.grey--text {{ $t('admin:locale.subtitle') }}
+          v-spacer
+          v-btn(color='success', depressed, @click='save', large, :loading='loading')
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
@@ -14,6 +20,8 @@
                     .subheading {{ $t('admin:locale.settings') }}
                 v-card-text
                   v-select(
+                    outline
+                    background-color='grey lighten-2'
                     :items='installedLocales'
                     prepend-icon='language'
                     v-model='selectedLocale'
@@ -40,11 +48,6 @@
                     persistent-hint
                     :hint='namespacing ? $t("admin:locale.autoUpdate.hintWithNS") : $t("admin:locale.autoUpdate.hint")'
                   )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', :loading='loading', @click='save')
-                    v-icon(left) chevron_right
-                    span {{ $t('common:actions.save') }}
 
               v-card.mt-3
                 v-toolbar(color='primary', dark, dense, flat)
@@ -92,11 +95,6 @@
                           v-list-tile-sub-title(v-html='data.item.nativeName')
                         v-list-tile-action
                           v-checkbox(:input-value='data.tile.props.value', color='primary', value)
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', :loading='loading', @click='save')
-                    v-icon(left) chevron_right
-                    span {{ $t('common:actions.save') }}
             v-flex(lg6 xs12)
               v-card
                 v-toolbar(color='teal', dark, dense, flat)

client/components/admin/admin-logging.vue

 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') graphic_eq
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') graphic_eq
+          .admin-header-title
             .headline.primary--text Logging
             .subheading.grey--text Configure the system logger(s)
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='black', dark, depressed, @click='toggleConsole', large)
+            v-icon(left) keyboard
+            span View Console
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
+
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='settings'): v-icon settings
             v-tab(v-for='logger in activeLoggers', :key='logger.key') {{ logger.title }}
 
@@ -87,20 +101,6 @@
                           persistent-hint
                         )
 
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-btn(color='black', dark, @click='toggleConsole')
-        v-icon(left) keyboard
-        span View Console
-      v-btn(color='black', dark)
-        v-icon(left) layers_clear
-        span Purge Logs
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
-
     logging-console(v-model='showConsole')
 </template>
 

client/components/admin/admin-navigation.vue

 <template lang='pug'>
-  v-container(fluid, fill-height)
+  v-container(fluid, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') near_me
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') near_me
+          .admin-header-title
             .headline.primary--text {{$t('navigation.title')}}
             .subheading.grey--text {{$t('navigation.subtitle')}}
+          v-spacer
+          v-btn(color='success', depressed, @click='save', large)
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
         v-container.pa-0.mt-3(fluid, grid-list-lg)
           v-layout(row)
             v-flex(style='flex: 0 0 350px;')
               v-card
-                v-list.primary.py-2(dense, dark)
+                v-list.py-2(dense, dark, :class='navTree.length < 1 ? "grey lighten-4" : "primary"')
+                  v-list-tile(v-if='navTree.length < 1')
+                    v-list-tile-avatar: v-icon(color='grey') explore_off
+                    v-list-tile-content
+                      .caption.grey--text {{$t('navigation.emptyList')}}
                   draggable(v-model='navTree')
                     template(v-for='navItem in navTree')
                       v-list-tile(
@@ -48,9 +58,6 @@
                       v-list-tile(@click='addItem("divider")')
                         v-list-tile-avatar: v-icon power_input
                         v-list-tile-title {{$t('navigation.divider')}}
-                  v-btn.ml-2(color='success', depressed, block, @click='save')
-                    v-icon(left) check
-                    span {{$t('common:actions.save')}}
             v-flex
               v-card(v-if='current.kind === "link"')
                 v-toolbar(dense, color='blue', flat, dark)
@@ -112,8 +119,8 @@
                   v-icon(left) delete
                   span {{$t('navigation.delete', { kind: $t('navigation.divider') })}}
               v-card(v-else)
-                v-card-text.grey--text {{$t('navigation.noSelectionText')}}
-
+                v-card-text.grey--text(v-if='navTree.length > 0') {{$t('navigation.noSelectionText')}}
+                v-card-text.grey--text(v-else) {{$t('navigation.noItemsText')}}
 </template>
 
 <script>

client/components/admin/admin-pages.vue

 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') insert_drive_file
+  v-container(fluid, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') insert_drive_file
+          .admin-header-title
             .headline.blue--text.text--darken-2 Pages
             .subheading.grey--text Manage pages
-    v-card
-      v-card-title
-        v-btn(color='primary', dark, slot='activator')
-          v-icon(left) add
-          | New Page
-        v-btn(icon, @click='refresh')
-          v-icon.grey--text refresh
           v-spacer
-        v-text-field(solo, append-icon='search', label='Search', single-line, hide-details, v-model='search')
+          v-btn(color='grey', outline, @click='refresh', large)
+            v-icon.grey--text refresh
+          v-btn(color='primary', depressed, @click='save', large)
+            v-icon(left) add
+            span New Page
+        v-card.mt-3
           v-data-table(
             :items='groups'
             :headers='headers'

client/components/admin/admin-rendering.vue

 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
-    v-layout(row wrap)
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') system_update_alt
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') system_update_alt
+          .admin-header-title
             .headline.primary--text Rendering
             .subheading.grey--text Configure how content is rendered
-        v-layout.mt-3(row wrap)
-          v-flex(lg3 xs12)
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
+
+      v-flex(lg3, xs12)
         v-toolbar(
           color='primary'
           dense
@@ -51,7 +59,7 @@
                     status-indicator(v-else, negative, pulse)
                 v-divider.my-0(v-if='n < core.children.length - 1')
 
-          v-flex(lg9 xs12)
+      v-flex(lg9, xs12)
         v-card
           v-toolbar(
             color='grey darken-1'
@@ -107,11 +115,6 @@
                 )
               v-divider.my-3(v-if='idx < currentRenderer.config.length - 1')
           v-card-chin
-                v-btn(
-                  color='primary'
-                  )
-                  v-icon(left) check
-                  span Apply Configuration
             v-spacer
             .caption.pr-3.grey--text Module: {{ currentRenderer.key }}
 </template>

client/components/admin/admin-search.vue

 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') search
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') search
+          .admin-header-title
             .headline.primary--text Search Engine
             .subheading.grey--text Configure the search capabilities of your wiki
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='black', dark, large, depressed)
+            v-icon(left) cached
+            span Rebuild Index
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
+
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='settings'): v-icon settings
             v-tab(v-for='engine in activeEngines', :key='engine.key') {{ engine.title }}
 
@@ -70,18 +84,6 @@
                       persistent-hint
                       :class='cfg.value.hint ? "mb-2" : ""'
                       )
-
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-btn(color='black', dark)
-        v-icon(left) refresh
-        | Rebuild Index
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
-
 </template>
 
 <script>

client/components/admin/admin-storage.vue

 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') storage
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') storage
+          .admin-header-title
             .headline.primary--text Storage
             .subheading.grey--text Set backup and sync targets for your content
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
+
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='settings'): v-icon settings
             v-tab(v-for='tgt in activeTargets', :key='tgt.key') {{ tgt.title }}
 
@@ -96,15 +107,6 @@
                     .pb-3 Content is always pushed to the storage target, overwriting any existing content. This is the default and safest choice for backup scenarios.
                     strong Pull from target
                     .pb-3 Content is always pulled from the storage target, overwriting any local content which already exists. This choice is usually reserved for single-use content import. Caution with this option as any local content will always be overwritten!
-
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
-
 </template>
 
 <script>

client/components/admin/admin-system.vue

 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
+  v-container(fluid, grid-list-lg)
     v-layout(row, wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') tune
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') tune
+          .admin-header-title
             .headline.primary--text {{ $t('admin:system.title') }}
             .subheading.grey--text {{ $t('admin:system.subtitle') }}
         v-layout.mt-3(row wrap)

client/components/admin/admin-theme.vue

 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
+  v-container(fluid, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') palette
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') palette
+          .admin-header-title
             .headline.primary--text Theme
             .subheading.grey--text Modify the look &amp; feel of your wiki
+          v-spacer
+          v-btn(color='success', depressed, @click='save', large, :loading='loading')
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
@@ -15,6 +21,8 @@
                 v-card-text
                   v-select(
                     :items='themes'
+                    outline
+                    background-color='grey lighten-2'
                     prepend-icon='palette'
                     v-model='selectedTheme'
                     label='Site Theme'
@@ -35,11 +43,6 @@
                     persistent-hint
                     hint='Not recommended for accessibility. May not be supported by all themes.'
                     )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', :loading='loading', @click='save')
-                    v-icon(left) chevron_right
-                    span Save
               v-card.mt-3
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
@@ -57,7 +60,7 @@
                     )
                   v-textarea.mt-2(
                     v-model='injectHeader'
-                    label='Site Header'
+                    label='Head HTML Injection'
                     outline
                     background-color='grey lighten-1'
                     color='primary'
@@ -67,7 +70,7 @@
                     )
                   v-textarea.mt-2(
                     v-model='injectFooter'
-                    label='Site Footer'
+                    label='Body HTML Injection'
                     outline
                     background-color='grey lighten-1'
                     color='primary'
@@ -75,11 +78,6 @@
                     hint='HTML code to be injected just before the closing body tag'
                     auto-grow
                     )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', :loading='loading', @click='save')
-                    v-icon(left) chevron_right
-                    span Save
             v-flex(lg6 xs12)
               v-card
                 v-toolbar(color='teal', dark, dense, flat)

client/components/admin/admin-users.vue

 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') perm_identity
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') perm_identity
+          .admin-header-title
             .headline.blue--text.text--darken-2 Users
             .subheading.grey--text Manage users
-    v-card
-      v-card-title
-        v-btn(color='primary', dark)
-          v-icon(left) add
-          | New User
-        v-btn(color='primary', dark)
-          v-icon(left) lock_outline
-          | Authorize User
-        v-btn(icon)
-          v-icon.grey--text refresh
           v-spacer
-        v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
+          v-btn(outline, color='grey', large)
+            v-icon refresh
+          v-btn(color='primary', large, depressed)
+            v-icon(left) lock_outline
+            span Authorize User
+          v-btn(color='primary', large, depressed)
+            v-icon(left) add
+            span New User
+        v-card.mt-3
           v-data-table(
             v-model='selected'
             :items='items',

client/components/admin/admin-utilities.vue

 <template lang='pug'>
-  div
-    v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') build
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') build
+          .admin-header-title
             .headline.primary--text Utilities
             .subheading.grey--text Maintenance and troubleshooting tools
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='tools') Tools
             v-tab(key='cache') Cache
             v-tab(key='telemetry') Telemetry
             v-tab(key='support') Support
 
             v-tab-item(key='tools', :transition='false', :reverse-transition='false')
-        v-container(fluid, grid-list-lg, :class='$vuetify.dark ? "" : "grey lighten-5"')
+              v-container.pa-2(fluid, grid-list-sm, :class='$vuetify.dark ? "" : "grey lighten-5"')
                 v-layout(row, wrap)
                   v-flex(xs12, sm6)
                     v-card