From 47cb55930d1e280d4a748f0408681750d35a098a Mon Sep 17 00:00:00 2001
From: Unknown <donramonloco+github@gmail.com>
Date: Mon, 3 Sep 2018 14:38:04 +0200
Subject: [PATCH] Add special class to content block

---
 client/src/components/ContentBlock.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index fb747bc9..99ffdfd1 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content-block">
+  <div class="content-block" :class="specialClass">
     <h4>{{contentBlock.title}}</h4>
 
     <component v-for="component in contentBlock.contents" :key="component.id" :is="component.type"
@@ -25,14 +25,32 @@
       'student_entry': StudentEntry,
       'image_block': ImageBlock,
       Task
+    },
+
+    computed: {
+      specialClass() {
+        return `content-block--${this.contentBlock.type.toLowerCase()}`
+      }
     }
   }
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
   .content-block {
     margin-bottom: 2.5em;
 
+    &--yellow {
+      background-color: rgba($color-accent-1, 0.15);
+      border: 1px solid $color-accent-1;
+      padding: 15px;
+
+      /deep/ .button {
+        border-color: $color-accent-1;
+      }
+    }
+
     /deep/ p {
       line-height: 1.5;
       margin-bottom: 1em;