feat: v-card-info

client/client-app.js

@@ -166,6 +166,7 @@ Vue.component('social-sharing', () => import(/* webpackPrefetch: true, webpackCh
 Vue.component('tags', () => import(/* webpackChunkName: "tags" */ './components/tags.vue'))
 Vue.component('unauthorized', () => import(/* webpackChunkName: "unauthorized" */ './components/unauthorized.vue'))
 Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue'))
+Vue.component('v-card-info', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-info.vue'))
 Vue.component('welcome', () => import(/* webpackChunkName: "welcome" */ './components/welcome.vue'))
 
 Vue.component('nav-footer', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/nav-footer.vue'))

client/components/admin/admin-mail.vue

@@ -97,8 +97,9 @@
                 v-form
                   v-toolbar(color='primary', dark, dense, flat)
                     v-toolbar-title.subtitle-1 {{ $t('admin:mail.dkim') }}
+                  v-card-info
+                    span {{ $t('admin:mail.dkimHint') }}
                   .pa-4
-                    .body-2.grey--text.text--darken-2 {{ $t('admin:mail.dkimHint') }}
                     v-switch(
                       v-model='config.useDKIM'
                       :label='$t(`admin:mail.dkimUse`)'

client/components/admin/admin-security.vue

@@ -17,8 +17,9 @@
               v-card.animated.fadeInUp
                 v-toolbar(color='red darken-2', dark, dense, flat)
                   v-toolbar-title.subtitle-1 Security
+                v-card-info(color='red')
+                  span Make sure to understand the implications before turning on / off a security feature.
                 v-card-text
-                  v-alert(outlined, color='red darken-2', icon='mdi-information-outline').body-2 Make sure to understand the implications before turning on / off a security feature.
                   v-switch.mt-3(
                     inset
                     label='Block IFrame Embedding'
@@ -106,8 +107,10 @@
               v-card.animated.fadeInUp.wait-p2s
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title.subtitle-1 {{ $t('admin:security.uploads') }}
+                v-card-info(color='blue')
+                  span {{$t('admin:security.uploadsInfo')}}
                 v-card-text
-                  v-text-field(
+                  v-text-field.mt-3(
                     outlined
                     :label='$t(`admin:security.maxUploadSize`)'
                     required

client/components/admin/admin-utilities.vue

@@ -62,12 +62,12 @@ export default {
           i18nKey: 'cache',
           isAvailable: true
         },
-        {
-          key: 'UtilityGraphEndpoint',
-          icon: 'mdi-graphql',
-          i18nKey: 'graphEndpoint',
-          isAvailable: false
-        },
+        // {
+        //   key: 'UtilityGraphEndpoint',
+        //   icon: 'mdi-graphql',
+        //   i18nKey: 'graphEndpoint',
+        //   isAvailable: false
+        // },
         {
           key: 'UtilityImportv1',
           icon: 'mdi-database-import',

client/components/common/v-card-chin.vue

 <template lang='pug'>
   div
     v-divider.my-0
-    v-card-actions(:class='dark ? "grey darken-4-l5" : "grey lighten-4"')
+    v-card-actions(:class='$vuetify.theme.dark ? "grey darken-4-l5" : "grey lighten-4"')
       slot
 </template>
 
 <script>
-export default {
-  computed: {
-    dark() { return this.$vuetify.theme.dark }
-  }
-}
+export default { }
 </script>

client/components/common/v-card-info.vue

+<template lang='pug'>
+  .v-card-info(:class='`is-` + color')
+    v-card-text(:class='colors.cls')
+      v-icon(:color='colors.icon', left) {{icon}}
+      slot
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'blue'
+    },
+    icon: {
+      type: String,
+      default: 'mdi-information-outline'
+    }
+  },
+  computed: {
+    colors () {
+      switch (this.color) {
+        case 'blue':
+          return {
+            cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'blue lighten-5 blue--text text--darken-3',
+            icon: 'blue lighten-3'
+          }
+        case 'red':
+          return {
+            cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'red lighten-5 red--text text--darken-2',
+            icon: 'red lighten-3'
+          }
+        default:
+          return {
+            cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'grey lighten-4',
+            icon: 'grey darken-2'
+          }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.v-card-info {
+  border-bottom: 1px solid #EEE;
+
+  &.is-blue {
+    border-bottom-color: mc('blue', '100');
+  }
+
+  &.is-red {
+    border-bottom-color: mc('red', '100');
+  }
+}
+</style>