teaser event green

webapp/components/PostTeaser/PostTeaser.vue

@@ -20,6 +20,7 @@
           <hc-ribbon
             :class="[isPinned ? '--pinned' : '', post.image ? 'post-ribbon-w-img' : 'post-ribbon']"
             :text="ribbonText"
+            :typ="post.postType[0]"
           />
         </div>
       </client-only>
@@ -155,7 +156,7 @@ export default {
     ribbonText() {
       console.log(this.post)
       if (this.post.pinned) return this.$t('post.pinned')
-      if (this.post && this.post.postType === "Event") return this.$t('post.event')
+      if (this.post.postType[0] === "Event") return this.$t('post.event')
       return this.$t('post.name')
     },
   },

webapp/components/Ribbon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside class="ribbon">
+  <aside class="ribbon" :class="typ === 'Event' ? 'eventBg': ''">
     <p>{{ text }}</p>
   </aside>
 </template>
@@ -12,6 +12,10 @@ export default {
       type: String,
       default: '',
     },
+    typ: {
+      type: String,
+      default: 'blue'
+    }
   },
 }
 </script>
@@ -43,4 +47,11 @@ export default {
     }
   }
 }
+.eventBg {
+  background-color: $color-success-active;
+
+  &::before {
+      border-color: $color-success-active transparent transparent $color-success-active;
+    }
+}
 </style>