fix skills UI bugs and icon consistency for skills

app/imports/ui/properties/treeNodeViews/ProficiencyTreeNode.vue

@@ -0,0 +1,32 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <proficiency-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :class="selected && 'primary--text'"
+      :color="model.color"
+      :value="model.value"
+    />
+    <div class="text-no-wrap text-truncate">
+      <template v-if="model.stats && model.stats.length">
+        {{ model.stats.join(', ') }}
+      </template>
+      <template v-else>
+        {{ title }}
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+// Most of this was copied from EffectViewer and should probably be generalised
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
+
+export default {
+  components: {
+    ProficiencyIcon,
+  },
+  mixins: [treeNodeViewMixin]
+}
+</script>