fix: admin UI improvements

client/components/admin/admin-analytics.vue

@@ -8,7 +8,7 @@
             .headline.primary--text.animated.fadeInLeft {{ $t('admin:analytics.title') }}
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:analytics.subtitle') }}
           v-spacer
-          v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p2s.mr-3(icon, outlined, color='grey', @click='refresh')
             v-icon mdi-refresh
           v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) mdi-check

client/components/admin/admin-api.vue

@@ -15,9 +15,9 @@
             status-indicator.mr-3(negative, pulse)
             .caption.red--text.animated.fadeInLeft {{$t('admin:api.disabled')}}
           v-spacer
-          v-btn.mr-3.animated.fadeInDown.wait-p2s(outlined, color='grey', large, @click='refresh')
+          v-btn.mr-3.animated.fadeInDown.wait-p2s(outlined, color='grey', icon, @click='refresh')
             v-icon mdi-refresh
-          v-btn.mr-3.animated.fadeInDown.wait-p1s(:color='enabled ? `red` : `green`', depressed, large, @click='globalSwitch', dark, :loading='isToggleLoading')
+          v-btn.mr-3.animated.fadeInDown.wait-p1s(:color='enabled ? `red` : `green`', depressed, @click='globalSwitch', dark, :loading='isToggleLoading')
             v-icon(left) mdi-power
             span(v-if='!enabled') {{$t('admin:api.enableButton')}}
             span(v-else) {{$t('admin:api.disableButton')}}

client/components/admin/admin-auth.vue

@@ -8,7 +8,9 @@
             .headline.primary--text.animated.fadeInLeft {{ $t('admin:auth.title') }}
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:auth.subtitle') }}
           v-spacer
-          v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p3s(icon, outlined, color='grey', href='https://docs.requarks.io/auth', target='_blank')
+            v-icon mdi-help-circle
+          v-btn.animated.fadeInDown.wait-p2s.mx-3(icon, outlined, color='grey', @click='refresh')
             v-icon mdi-refresh
           v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) mdi-check

client/components/admin/admin-comments.vue

@@ -8,9 +8,11 @@
             .headline.primary--text.animated.fadeInLeft {{$t('admin:comments.title')}}
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{$t('admin:comments.subtitle')}}
           v-spacer
-          v-btn.mx-1.animated.fadeInDown.wait-p2s(outlined, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p3s(icon, outlined, color='grey', href='https://docs.requarks.io/comments', target='_blank')
+            v-icon mdi-help-circle
+          v-btn.mx-3.animated.fadeInDown.wait-p2s(icon, outlined, color='grey', @click='refresh')
             v-icon mdi-refresh
-          v-btn.ml-1.animated.fadeInDown(color='success', @click='save', depressed, large)
+          v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) mdi-check
             span {{$t('common:actions.apply')}}
 

client/components/admin/admin-contribute.vue

@@ -27,7 +27,7 @@
               )
               v-tab
                 span GitHub
-                v-icon.my-1(size='24') mdi-github-circle
+                v-icon.my-1(size='24') mdi-github
               v-tab
                 span Patreon
                 img.my-1(src='/_assets/svg/icon-patreon.svg', style='height: 24px;')
@@ -46,22 +46,22 @@
               v-tab-item(:transition='false', :reverse-transition='false')
                 .body-2.pa-3 {{ $t('admin:contribute.github') }}
                 a.ml-3(href='https://github.com/users/NGPixel/sponsorship', :title='$t(`admin:contribute.becomeASponsor`)')
-                  img(src='/img/donate_github.svg', :alt='$t(`admin:contribute.becomeASponsor`)' style='width:200px;')
+                  img(src='/_assets/img/donate_github.svg', :alt='$t(`admin:contribute.becomeASponsor`)' style='width:200px;')
               v-tab-item(:transition='false', :reverse-transition='false')
                 .body-2.pa-3 {{ $t('admin:contribute.patreon') }}
                 a.ml-3(href='https://www.patreon.com/bePatron?u=16744039', :title='$t(`admin:contribute.becomeAPatron`)')
-                  img(src='/img/donate_patreon.png', :alt='$t(`admin:contribute.becomeAPatron`)' style='width:200px;')
+                  img(src='/_assets/img/donate_patreon.png', :alt='$t(`admin:contribute.becomeAPatron`)' style='width:200px;')
               v-tab-item(:transition='false', :reverse-transition='false')
                 .body-2.pa-3 {{ $t('admin:contribute.openCollective') }}
                 a.ml-3(href='https://opencollective.com/wikijs/donate', :title='$t(`admin:contribute.makeADonation`)')
-                  img(src='/img/donate_opencollective.png', :alt='$t(`admin:contribute.makeADonation`)' style='width:300px;')
+                  img(src='/_assets/img/donate_opencollective.png', :alt='$t(`admin:contribute.makeADonation`)' style='width:300px;')
               v-tab-item(:transition='false', :reverse-transition='false')
                 .body-2.pa-3 {{ $t('admin:contribute.paypal') }}
                 .ml-3
                   form(action='https://www.paypal.com/cgi-bin/webscr', method='post', target='_top')
                     input(type='hidden', name='cmd', value='_s-xclick')
                     input(type='hidden', name='hosted_button_id', value='FLV5X255Z9CJU')
-                    input(type='image', src='/img/donate_paypal.png', border='0', name='submit', title='PayPal - The safer, easier way to pay online!', alt='Donate with PayPal button')
+                    input(type='image', src='/_assets/img/donate_paypal.png', border='0', name='submit', title='PayPal - The safer, easier way to pay online!', alt='Donate with PayPal button')
                     img(alt='', border='0', src='https://www.paypal.com/en_CA/i/scr/pixel.gif', width='1', height='1')
               v-tab-item(:transition='false', :reverse-transition='false')
                 .body-2.pa-3 {{ $t('admin:contribute.ethereum') }}
@@ -69,7 +69,7 @@
                   .admin-contribute-ethaddress
                     strong Ethereum Address
                     span 0xE1d55C19aE86f6Bcbfb17e7f06aCe96BdBb22Cb5
-                  div: img(src='/img/donate_eth_qr.png')
+                  div: img(src='/_assets/img/donate_eth_qr.png')
               v-tab-item(:transition='false', :reverse-transition='false')
                 .body-2.pa-3 {{ $t('admin:contribute.tshirts') }}
                 v-card-actions.ml-2
@@ -81,7 +81,7 @@
             .body-2.pl-3
               ul
                 i18next(path='admin:contribute.submitAnIdea', tag='li')
-                  a(href='https://wiki.js.org/feedback', target='_blank') {{ $t('admin:contribute.submitAnIdeaLink') }}
+                  a(href='https://requests.requarks.io/wiki', target='_blank') {{ $t('admin:contribute.submitAnIdeaLink') }}
                 i18next(path='admin:contribute.foundABug', tag='li')
                   a(href='https://github.com/Requarks/wiki/issues', target='_blank') Github
                 i18next(path='admin:contribute.helpTranslate', tag='li')
@@ -159,7 +159,7 @@
             v-divider
             v-list-item
               v-list-item-avatar(tile)
-                img(src='/svg/logo-icons8.svg', alt='Icons8')
+                img(src='/_assets/svg/logo-icons8.svg', alt='Icons8')
               v-list-item-content
                 v-list-item-title Icons8
                 v-list-item-subtitle All the Icons You Need. Guaranteed.

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

@@ -8,13 +8,11 @@
             .headline.blue--text.text--darken-2 Edit Group
             .subtitle-1.grey--text {{group.name}}
           v-spacer
-          .caption.grey--text ID #[strong {{group.id}}]
-          v-divider.mx-3(vertical)
-          v-btn(color='grey', large, outlined, to='/groups')
+          v-btn(color='grey', icon, outlined, to='/groups')
             v-icon mdi-arrow-left
           v-dialog(v-model='deleteGroupDialog', max-width='500', v-if='!group.isSystem')
             template(v-slot:activator='{ on }')
-              v-btn.ml-2(color='red', large, outlined, v-on='on')
+              v-btn.ml-2(color='red', icon, outlined, v-on='on')
                 v-icon(color='red') mdi-trash-can-outline
             v-card
               .dialog-header.is-red Delete Group?
@@ -46,6 +44,9 @@
 
             v-tab-item(key='users', :transition='false', :reverse-transition='false')
               group-users(v-model='group', @refresh='refresh')
+          v-card-chin
+            v-spacer
+            .caption.grey--text.pr-2 Group ID #[strong {{group.id}}]
 </template>
 
 <script>

client/components/admin/admin-groups.vue

@@ -8,7 +8,7 @@
             .headline.blue--text.text--darken-2.animated.fadeInLeft Groups
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p4s Manage groups and their permissions
           v-spacer
-          v-btn.animated.fadeInDown.wait-p2s.mr-3(color='grey', outlined, @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p2s.mr-3(color='grey', outlined, @click='refresh', icon)
             v-icon mdi-refresh
           v-dialog(v-model='newGroupDialog', max-width='500')
             template(v-slot:activator='{ on }')

client/components/admin/admin-navigation.vue

@@ -8,7 +8,7 @@
             .headline.primary--text.animated.fadeInLeft {{$t('navigation.title')}}
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{$t('navigation.subtitle')}}
           v-spacer
-          v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p2s.mr-3(icon, outlined, color='grey', @click='refresh')
             v-icon mdi-refresh
           v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
             v-icon(left) mdi-check

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

@@ -23,13 +23,52 @@
             status-indicator.mr-3.ml-4(active, pulse)
             .caption.blue--text {{$t('common:page.global')}}
           v-spacer
-          v-btn.mx-1.animated.fadeInRight.wait-p4s(color='grey', large, outlined, to='/pages')
+          v-btn.animated.fadeInDown.wait-p3s(color='grey', icon, outlined, to='/pages')
             v-icon mdi-arrow-left
-          v-divider.mx-1.animated.fadeInRight.wait-p3s.mx-1(vertical)
+          v-menu(offset-y, origin='top right')
+            template(v-slot:activator='{ on }')
+              v-btn.mx-3.animated.fadeInDown.wait-p2s(color='black', v-on='on', depressed, dark)
+                span Actions
+                v-icon(right) mdi-chevron-down
+            v-list(dense, nav)
+              v-list-item(:href='`/` + page.locale + `/` + page.path')
+                v-list-item-icon
+                  v-icon(color='indigo') mdi-text-subject
+                v-list-item-title View
+              v-list-item(:href='`/e/` + page.locale + `/` + page.path')
+                v-list-item-icon
+                  v-icon(color='indigo') mdi-pencil
+                v-list-item-title Edit
+              v-list-item(@click='', disabled)
+                v-list-item-icon
+                  v-icon(color='grey') mdi-cube-scan
+                v-list-item-title Re-Render
+              v-list-item(@click='', disabled)
+                v-list-item-icon
+                  v-icon(color='grey') mdi-earth-remove
+                v-list-item-title Unpublish
+              v-list-item(:href='`/s/` + page.locale + `/` + page.path')
+                v-list-item-icon
+                  v-icon(color='indigo') mdi-code-tags
+                v-list-item-title View Source
+              v-list-item(:href='`/h/` + page.locale + `/` + page.path')
+                v-list-item-icon
+                  v-icon(color='indigo') mdi-history
+                v-list-item-title View History
+              v-list-item(@click='', disabled)
+                v-list-item-icon
+                  v-icon(color='grey') mdi-content-duplicate
+                v-list-item-title Duplicate
+              v-list-item(@click='', disabled)
+                v-list-item-icon
+                  v-icon(color='grey') mdi-content-save-move-outline
+                v-list-item-title Move / Rename
               v-dialog(v-model='deletePageDialog', max-width='500')
                 template(v-slot:activator='{ on }')
-              v-btn.mx-1.animated.fadeInDown.wait-p1s(color='red', large, outlined, v-on='on')
+                  v-list-item(v-on='on')
+                    v-list-item-icon
                       v-icon(color='red') mdi-trash-can-outline
+                    v-list-item-title Delete
                 v-card
                   .dialog-header.is-short.is-red
                     v-icon.mr-2(color='white') mdi-file-document-box-remove-outline
@@ -46,9 +85,9 @@
                     v-spacer
                     v-btn(text, @click='deletePageDialog = false', :disabled='loading') {{$t('common:actions.cancel')}}
                     v-btn(color='red darken-2', @click='deletePage', :loading='loading').white--text {{$t('common:actions.delete')}}
-          v-btn.ml-1.animated.fadeInDown(color='teal', large, outlined, @click='rerenderPage')
-            v-icon(left) mdi-cube-scan
-            span Re-render
+          v-btn.animated.fadeInDown(color='success', large, depressed, disabled)
+            v-icon(left) mdi-check
+            span Save Changes
       v-flex(xs12, lg6)
         v-card.animated.fadeInUp
           v-toolbar(color='primary', dense, dark, flat)
@@ -69,17 +108,11 @@
               v-list-item-content
                 v-list-item-title: .overline.grey--text Locale
                 v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.locale }}
-              v-list-item-action
-                v-btn(icon, x-small)
-                  v-icon(color='grey') mdi-pencil
             v-divider
             v-list-item
               v-list-item-content
                 v-list-item-title: .overline.grey--text Path
                 v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.path }}
-              v-list-item-action
-                v-btn(icon, x-small)
-                  v-icon(color='grey') mdi-pencil
             v-divider
             v-list-item
               v-list-item-content
@@ -90,27 +123,11 @@
               v-list-item-content
                 v-list-item-title: .overline.grey--text Content Type
                 v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.contentType || '?' }}
-
-        v-toolbar.elevation-2.mt-3.animated.fadeInUp.wait-p4s(:color='$vuetify.theme.dark ? `grey darken-3-d5` : `white`', dense)
-          v-spacer
-          v-btn(color='primary', text, :href='`/` + page.locale + `/` + page.path')
-            v-icon(left) mdi-text-subject
-            span View
-          v-divider.mx-2(vertical)
-          v-btn(color='primary', text, :href='`/e/` + page.locale + `/` + page.path')
-            v-icon(left) mdi-pencil
-            span Edit
-          v-divider.mx-2(vertical)
-          v-btn(color='primary', text, :href='`/s/` + page.locale + `/` + page.path')
-            v-icon(left) mdi-code-tags
-            span Source
-          v-divider.mx-2(vertical)
-          v-btn(color='primary', text, :href='`/h/` + page.locale + `/` + page.path')
-            v-icon(left) mdi-history
-            span History
-          v-spacer
-
-        .caption.mt-4.grey--text.animated.fadeInUp.wait-p6s Page Hash: {{ page.hash }}
+            v-divider
+            v-list-item
+              v-list-item-content
+                v-list-item-title: .overline.grey--text Page Hash
+                v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.hash }}
 
       v-flex(xs12, lg6)
         v-card.animated.fadeInUp.wait-p2s
@@ -137,25 +154,6 @@
                 v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.authorName }} #[em.caption ({{ page.authorEmail }})]
               v-list-item-action
                 v-list-item-action-text {{ page.updatedAt | moment('calendar') }}
-        v-card.mt-3.animated.fadeInUp.wait-p4s
-          v-toolbar(color='primary', dense, dark, flat)
-            v-icon.mr-2 mdi-history
-            span Recent History
-            v-spacer
-            v-chip(label, color='white', small).primary--text coming soon
-          v-timeline.mx-3(dense, clipped)
-            v-timeline-item(color='teal', small, v-if='page.createdAt !== page.updatedAt')
-              v-layout(justify-space-between)
-                v-flex(xs7).body-2 Page Modified by #[strong {{ page.authorName }}] #[em.caption ({{ page.authorEmail }})]
-                v-flex.text-right(xs5).caption.grey--text.text-darken-2 {{ page.updatedAt | moment('calendar') }}
-            v-timeline-item(hide-dot, small)
-              .body-2 ...
-              v-btn.mx-0.mt-1(outlined, color='grey', :href='`/h/` + page.locale + `/` + page.path') View Full History
-              .body-2 ...
-            v-timeline-item(color='pink', small)
-              v-layout(justify-space-between)
-                v-flex(xs7).body-2 Page created by #[strong {{ page.creatorName }}] #[em.caption ({{ page.creatorEmail }})]
-                v-flex.text-right(xs5).caption.grey--text.text-darken-2 {{ page.createdAt | moment('calendar') }}
 
     v-layout(row, align-center, v-else)
       v-progress-circular(indeterminate, width='2', color='grey')

client/components/admin/admin-pages.vue

@@ -8,39 +8,47 @@
             .headline.blue--text.text--darken-2.animated.fadeInLeft Pages
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p2s Manage pages
           v-spacer
-          v-btn.animated.fadeInDown.wait-p1s(color='grey', outlined, @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p1s(icon, color='grey', outlined, @click='refresh')
             v-icon.grey--text mdi-refresh
-          v-btn.animated.fadeInDown.mx-3(color='primary', outlined, large, @click='recyclebin', disabled)
+          v-btn.animated.fadeInDown.mx-3(color='primary', outlined, @click='recyclebin', disabled)
             v-icon(left) mdi-delete-outline
             span Recycle Bin
           v-btn.animated.fadeInDown(color='primary', depressed, large, to='pages/visualize')
             v-icon(left) mdi-graph
             span Visualize
-        v-card.wiki-form.mt-3.animated.fadeInUp
-          v-toolbar(flat, :color='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-5`', height='80')
-            v-spacer
+        v-card.mt-3.animated.fadeInUp
+          .pa-2.d-flex.align-center(:class='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-3`')
             v-text-field(
-              outlined
+              solo
+              flat
               v-model='search'
               prepend-inner-icon='mdi-file-search-outline'
               label='Search Pages...'
               hide-details
+              dense
+              style='max-width: 400px;'
               )
+            v-spacer
             v-select.ml-2(
-              outlined
+              solo
+              flat
               hide-details
+              dense
               label='Locale'
               :items='langs'
               v-model='selectedLang'
+              style='max-width: 250px;'
             )
             v-select.ml-2(
-              outlined
+              solo
+              flat
               hide-details
+              dense
               label='Publish State'
               :items='states'
               v-model='selectedState'
+              style='max-width: 250px;'
             )
-            v-spacer
           v-divider
           v-data-table(
             :items='filteredPages'

client/components/admin/admin-rendering.vue

@@ -5,9 +5,12 @@
         .admin-header
           img.animated.fadeInUp(src='/_assets/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text.animated.fadeInLeft Rendering
+            .headline.primary--text.animated.fadeInLeft {{ $t('admin:rendering.title') }}
+            .subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:rendering.subtitle') }}
           v-spacer
-          v-btn.mx-3.animated.fadeInDown.wait-p2s(outlined, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p3s(icon, outlined, color='grey', href='https://docs.requarks.io/rendering', target='_blank')
+            v-icon mdi-help-circle
+          v-btn.mx-3.animated.fadeInDown.wait-p2s(icon, outlined, color='grey', @click='refresh')
             v-icon mdi-refresh
           v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) mdi-check
@@ -15,7 +18,7 @@
 
       v-flex.animated.fadeInUp(lg3, xs12)
         v-toolbar(
-          color='primary'
+          color='blue darken-2'
           dense
           flat
           dark
@@ -66,7 +69,7 @@
       v-flex(lg9, xs12)
         v-card.wiki-form.animated.fadeInUp
           v-toolbar(
-            color='grey darken-1'
+            color='indigo'
             dark
             flat
             dense
@@ -82,6 +85,16 @@
               hide-details
               inset
               )
+          v-card-text.py-2.pl-4
+            .body-2.pt-3 {{currentRenderer.description}}
+            .body-2.pt-1.pb-5: a(href='https://docs.requarks.io/en/rendering', target='_blank') Documentation
+            i18next.body-2(path='admin:auth.strategyState', tag='div', v-if='currentRenderer.isEnabled')
+              v-chip(color='green', small, dark, label, place='state') {{$t('admin:auth.strategyStateActive')}}
+              span(v-if='selectedCore === `local`', place='locked') {{$t('admin:auth.strategyStateLocked')}}
+              span(v-else, place='locked', v-text='')
+            i18next.body-2(path='admin:auth.strategyState', tag='div', v-else)
+              v-chip(color='red', small, dark, label, place='state') {{$t('admin:auth.strategyStateInactive')}}
+          v-divider.mt-3
           v-card-text.pb-4.pt-2.pl-4
             .overline.my-5 Rendering Module Configuration
             .body-2.ml-3(v-if='!currentRenderer.config || currentRenderer.config.length < 1'): em This rendering module has no configuration options you can modify.
@@ -96,13 +109,14 @@
                 :hint='cfg.value.hint ? cfg.value.hint : ""'
                 persistent-hint
                 :class='cfg.value.hint ? "mb-2" : ""'
+                color='indigo'
               )
               v-switch(
                 v-else-if='cfg.value.type === "boolean"'
                 :key='cfg.key'
                 :label='cfg.value.title'
                 v-model='cfg.value.value'
-                color='primary'
+                color='indigo'
                 :hint='cfg.value.hint ? cfg.value.hint : ""'
                 persistent-hint
                 inset
@@ -116,6 +130,7 @@
                 :hint='cfg.value.hint ? cfg.value.hint : ""'
                 persistent-hint
                 :class='cfg.value.hint ? "mb-2" : ""'
+                color='indigo'
                 )
               v-divider.my-5(v-if='idx < currentRenderer.config.length - 1')
           v-card-chin

client/components/admin/admin-search.vue

@@ -8,12 +8,14 @@
             .headline.primary--text.animated.fadeInLeft {{$t('admin:search.title')}}
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{$t('admin:search.subtitle')}}
           v-spacer
-          v-btn.mx-1.animated.fadeInDown.wait-p2s(outlined, color='grey', @click='refresh', large)
+          v-btn.mr-3.animated.fadeInDown.wait-p3s(icon, outlined, color='grey', href='https://docs.requarks.io/search', target='_blank')
+            v-icon mdi-help-circle
+          v-btn.animated.fadeInDown.wait-p2s(icon, outlined, color='grey', @click='refresh')
             v-icon mdi-refresh
-          v-btn.mx-2.animated.fadeInDown.wait-p1s(color='black', dark, large, depressed, @click='rebuild')
+          v-btn.mx-3.animated.fadeInDown.wait-p1s(color='black', dark, depressed, @click='rebuild')
             v-icon(left) mdi-cached
             span {{$t('admin:search.rebuildIndex')}}
-          v-btn.ml-1.animated.fadeInDown(color='success', @click='save', depressed, large)
+          v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) mdi-check
             span {{$t('common:actions.apply')}}
 

client/components/admin/admin-storage.vue

@@ -8,7 +8,9 @@
             .headline.primary--text.animated.fadeInLeft {{$t('admin:storage.title')}}
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{$t('admin:storage.subtitle')}}
           v-spacer
-          v-btn.mx-3.animated.fadeInDown.wait-p2s(outlined, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p3s(icon, outlined, color='grey', href='https://docs.requarks.io/storage', target='_blank')
+            v-icon mdi-help-circle
+          v-btn.mx-3.animated.fadeInDown.wait-p2s(icon, outlined, color='grey', @click='refresh')
             v-icon mdi-refresh
           v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) mdi-check

client/components/admin/admin-tags.vue

@@ -8,7 +8,7 @@
             .headline.primary--text.animated.fadeInLeft {{$t('tags.title')}}
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{$t('tags.subtitle')}}
           v-spacer
-          v-btn.animated.fadeInDown(outlined, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown(outlined, color='grey', @click='refresh', icon)
             v-icon mdi-refresh
         v-container.pa-0.mt-3(fluid, grid-list-lg)
           v-layout(row)

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

@@ -8,6 +8,8 @@
             .headline.blue--text.text--darken-2.animated.fadeInLeft {{$t('admin:users.edit')}}
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{user.name}}
           v-spacer
+          i18next.pr-4.caption.grey--text.animated.fadeInDown(path='admin:users.id', tag='div')
+            strong(place='id') {{user.id}}
           template(v-if='user.isActive')
             status-indicator.mr-3(positive, pulse)
             .caption.green--text {{$t('admin:users.active')}}
@@ -21,14 +23,11 @@
             status-indicator.mr-3.ml-4(intermediary, pulse)
             .caption.deep-orange--text {{$t('admin:users.unverified')}}
           v-spacer
-          i18next.caption.grey--text.animated.fadeInRight.wait-p5s(path='admin:users.id', tag='div')
-            strong(place='id') {{user.id}}
-          v-divider.animated.fadeInRight.wait-p4s.ml-3(vertical)
-          v-btn.ml-3.animated.fadeInDown.wait-p3s(color='grey', large, outlined, to='/users')
+          v-btn.ml-3.animated.fadeInDown.wait-p3s(color='grey', icon, outlined, to='/users')
             v-icon mdi-arrow-left
           v-menu(offset-y, origin='top right')
             template(v-slot:activator='{ on }')
-              v-btn.ml-3.animated.fadeInDown.wait-p2s(color='indigo', v-on='on', large, depressed, dark)
+              v-btn.ml-3.animated.fadeInDown.wait-p2s(color='black', v-on='on', depressed, dark)
                 span Actions
                 v-icon(right) mdi-chevron-down
             v-list(dense, nav)

client/components/admin/admin-users.vue

@@ -8,31 +8,36 @@
             .headline.blue--text.text--darken-2.animated.fadeInLeft Users
             .subtitle-1.grey--text.animated.fadeInLeft.wait-p2s Manage users
           v-spacer
-          v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', large, @click='refresh')
+          v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', icon, @click='refresh')
             v-icon mdi-refresh
           v-btn.animated.fadeInDown(color='primary', large, depressed, @click='createUser')
             v-icon(left) mdi-plus
             span New User
-        v-card.wiki-form.mt-3.animated.fadeInUp
-          v-toolbar(flat, :color='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-5`', height='80')
-            v-spacer
+        v-card.mt-3.animated.fadeInUp
+          .pa-2.d-flex.align-center(:class='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-3`')
             v-text-field(
-              outlined
+              solo
+              flat
               v-model='search'
               prepend-inner-icon='mdi-account-search-outline'
               label='Search Users...'
               hide-details
+              style='max-width: 400px;'
+              dense
               )
-            v-select.ml-2(
-              outlined
+            v-spacer
+            v-select(
+              solo
+              flat
               hide-details
               label='Identity Provider'
               :items='strategies'
               v-model='filterStrategy'
               item-text='title'
               item-value='key'
+              style='max-width: 300px;'
+              dense
             )
-            v-spacer
           v-divider
           v-data-table(
             v-model='selected'
@@ -172,7 +177,7 @@ export default {
       update: (data) => {
         return _.concat({
           key: 'all',
-          title: 'All'
+          title: 'All Providers'
         }, data.authentication.strategies)
       },
       watchLoading (isLoading) {

client/components/editor/editor-modal-editorselect.vue

@@ -15,7 +15,7 @@
                     ripple
                     )
                     v-card-text.text-center(@click='')
-                      img(src='/svg/editor-icon-api.svg', alt='API', style='width: 36px; opacity: .5;')
+                      img(src='/_assets/svg/editor-icon-api.svg', alt='API', style='width: 36px; opacity: .5;')
                       .body-2.blue--text.mt-2.text--lighten-2 API Docs
                       .caption.blue--text.text--lighten-1 REST / GraphQL
                     v-fade-transition
@@ -35,7 +35,7 @@
                     ripple
                     )
                     v-card-text.text-center(@click='')
-                      img(src='/svg/editor-icon-wikitext.svg', alt='WikiText', style='width: 36px; opacity: .5;')
+                      img(src='/_assets/svg/editor-icon-wikitext.svg', alt='WikiText', style='width: 36px; opacity: .5;')
                       .body-2.blue--text.mt-2.text--lighten-2 Blog
                       .caption.blue--text.text--lighten-1 Timeline of Posts
                     v-fade-transition
@@ -53,7 +53,7 @@
                 ripple
                 )
                 v-card-text.text-center(@click='selectEditor("code")')
-                  img(src='/svg/editor-icon-code.svg', alt='Code', style='width: 36px;')
+                  img(src='/_assets/svg/editor-icon-code.svg', alt='Code', style='width: 36px;')
                   .body-2.primary--text.mt-2 Code
                   .caption.grey--text Raw HTML
             v-flex(xs4)
@@ -63,7 +63,7 @@
                 ripple
                 )
                 v-card-text.text-center(@click='selectEditor("markdown")')
-                  img(src='/svg/editor-icon-markdown.svg', alt='Markdown', style='width: 36px;')
+                  img(src='/_assets/svg/editor-icon-markdown.svg', alt='Markdown', style='width: 36px;')
                   .body-2.primary--text.mt-2 Markdown
                   .caption.grey--text Plain Text Formatting
             v-flex(xs4)
@@ -75,7 +75,7 @@
                     ripple
                     )
                     v-card-text.text-center(@click='')
-                      img(src='/svg/editor-icon-tabular.svg', alt='Tabular', style='width: 36px; opacity: .5;')
+                      img(src='/_assets/svg/editor-icon-tabular.svg', alt='Tabular', style='width: 36px; opacity: .5;')
                       .body-2.blue--text.mt-2.text--lighten-2 Tabular
                       .caption.blue--text.text--lighten-1 Excel-like
                     v-fade-transition
@@ -93,7 +93,7 @@
                 ripple
                 )
                 v-card-text.text-center(@click='selectEditor("ckeditor")')
-                  img(src='/svg/editor-icon-ckeditor.svg', alt='Visual Editor', style='width: 36px;')
+                  img(src='/_assets/svg/editor-icon-ckeditor.svg', alt='Visual Editor', style='width: 36px;')
                   .body-2.mt-2.primary--text Visual Editor
                   .caption.grey--text Rich-text WYSIWYG
         .caption.blue--text.text--lighten-2 {{$t('editor:select.cannotChange')}}

client/components/welcome.vue

@@ -2,7 +2,7 @@
   v-app
     .onboarding
       .onboarding-content
-        img.animated.fadeIn(src='/svg/logo-wikijs.svg', alt='Wiki.js')
+        img.animated.fadeIn(src='/_assets/svg/logo-wikijs.svg', alt='Wiki.js')
         .headline.animated.fadeInUp {{ $t('welcome.title') }}
         .subtitle-1.mt-3.animated.fadeInUp.wait-p1s {{ $t('welcome.subtitle') }}
         v-btn.mt-5.animated.fadeInUp.wait-p2s(color='primary', :href='`/e/` + locale + `/home`', x-large)