Improve hover highlight UI effects for cards in dark mode

In light mode a change in elevation changes the drop shadow, but this is 
all but invisible in dark mode, so I added a highlight to the cards when 
hovering to show that the card can be expanded with a click

app/imports/ui/properties/components/actions/ActionCard.vue

@@ -94,6 +94,7 @@
         />
       </template>
     </div>
+    <card-highlight :active="hovering" />
   </v-card>
 </template>
 
@@ -107,6 +108,7 @@ import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import RollPopup from '/imports/ui/components/RollPopup.vue';
 import MarkdownText from '/imports/ui/components/MarkdownText.vue';
 import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
+import CardHighlight from '/imports/ui/components/CardHighlight.vue';
 
 export default {
   components: {
@@ -115,6 +117,7 @@ export default {
     MarkdownText,
     PropertyIcon,
     RollPopup,
+    CardHighlight
   },
   inject: {
     context: {

app/imports/ui/properties/components/attributes/AttributeCard.vue

@@ -2,6 +2,8 @@
   <v-card
     :hover="hasClickListener"
     @click="click"
+    @mouseover="hasClickListener ? hovering = true : undefined"
+    @mouseleave="hasClickListener ? hovering = false : undefined"
   >
     <div class="layout align-center">
       <roll-popup
@@ -31,6 +33,7 @@
         {{ model.name }}
       </v-card-title>
     </div>
+    <card-highlight :active="hasClickListener && hovering" />
   </v-card>
 </template>
 
@@ -39,10 +42,12 @@
   import RollPopup from '/imports/ui/components/RollPopup.vue';
   import doCheck from '/imports/api/engine/actions/doCheck.js';
   import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
+  import CardHighlight from '/imports/ui/components/CardHighlight.vue';
 
   export default {
     components: {
       RollPopup,
+      CardHighlight,
     },
     inject: {
       context: {
@@ -57,6 +62,7 @@
     },
     data(){return {
       checkLoading: false,
+      hovering: false,
     }},
     computed: {
       hasClickListener(){

app/imports/ui/properties/components/attributes/ResourceCard.vue

@@ -43,11 +43,17 @@
         </div>
       </div>
     </v-layout>
+    <card-highlight :active="hover" />
   </v-card>
 </template>
 
 <script lang="js">
+import CardHighlight from '/imports/ui/components/CardHighlight.vue';
+
 	export default {
+    components: {
+      CardHighlight,
+    },
     inject: {
       context: { default: {} }
     },

app/imports/ui/properties/components/persona/NoteCard.vue

@@ -6,6 +6,8 @@
     :dark="model.color && isDark"
     :light="model.color && !isDark"
     @click="clickProperty(model._id)"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
   >
     <v-card-title class="text-h6">
       {{ model.name }}
@@ -16,23 +18,39 @@
         :model="model.summary"
       />
     </v-card-text>
+    <card-highlight
+      :active="hover"
+      :dark="theme.isDark"
+    />
   </v-card>
 </template>
 
 <script lang="js">
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+import CardHighlight from '/imports/ui/components/CardHighlight.vue';
 
 export default {
 	components: {
 		PropertyDescription,
+    CardHighlight,
 	},
+  inject: {
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
 	props: {
 		model: {
       type: Object,
       required: true,
     },
 	},
+  data(){ return{
+    hover: false,
+  }},
   computed: {
     isDark(){
       return isDarkColor(this.model.color);