Add subtitle to contentblock, style instrument widget

client/src/components/ContentBlock.vue

@@ -12,6 +12,7 @@
         </a>
       </div>
 
+      <p v-if="subtitle !== ''" class="content-block__subtitle text-regular">{{subtitle}}</p>
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
 
       <component v-for="component in contentBlock.contents"
@@ -51,6 +52,11 @@
   import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
+  const INSTRUMENTS = {
+    base_communication: 'Sprache & Kommunikation',
+    base_society: 'Gesellschaft'
+  }
+
   export default {
     props: ['contentBlock', 'parent'],
 
@@ -79,6 +85,14 @@
     computed: {
       specialClass() {
         return `content-block--${this.contentBlock.type.toLowerCase()}`
+      },
+      subtitle() {
+        const contentType = this.contentBlock.type.toLowerCase()
+        if (!(contentType in INSTRUMENTS)) {
+          return ''
+        }
+
+        return `Instrument - ${INSTRUMENTS[contentType]}`
       }
     },
 
@@ -134,6 +148,10 @@
       line-height: 1.5;
     }
 
+    &__subtitle {
+      margin-bottom: 0 !important;
+    }
+
     &__actions {
       position: absolute;
       left: -70px;
@@ -146,12 +164,16 @@
     }
 
     &--base_communication {
-      @include content-box($color-accent-1);
+      @include content-box($color-accent-1-list);
+
+      .content-block__subtitle {
+        color: $color-accent-1-dark;
+      }
     }
 
     &--task {
       @include light-border(bottom);
-      
+
       .content-block__title {
         color: $color-brand;
         margin-top: $default-padding;
@@ -163,7 +185,11 @@
     }
 
     &--base_society {
-      @include content-box($color-accent-2);
+      @include content-box($color-accent-2-list);
+
+      .content-block__subtitle {
+        color: $color-accent-2-dark;
+      }
     }
 
     /deep/ p {

client/src/components/content-blocks/InstrumentWidget.vue

@@ -2,7 +2,7 @@
   <div class="instrument-widget">
     <div class="instrument-widget__description" v-html="value.description"></div>
     <router-link class="instrument-widget__button button" tag="button"
-                 :to="{name: 'instrument', params: { slug: value.slug }}">Instrument lesen
+                 :to="{name: 'instrument', params: { slug: value.slug }}">Instrument anzeigen
     </router-link>
   </div>
 </template>

client/src/styles/_mixins.scss

@@ -57,14 +57,14 @@
 
 }
 
-@mixin content-box($main-color) {
+@mixin content-box($color-list) {
-  background-color: rgba($main-color, 0.15);
+  background-color: nth($color-list, 2);
   padding: 15px;
   align-items: start;
   border-radius: $default-border-radius;
 
   /deep/ .button {
-    border-color: $main-color;
+    border-color: nth($color-list, 1);
     background-color: $color-white;
   }
 }

client/src/styles/_typography.scss

@@ -72,3 +72,13 @@ input, textarea, select, button {
   margin-bottom: 7.5px;
   font-weight: 600;
 }
+
+.text-regular {
+  font-family: $sans-serif-font-family;
+  font-weight: $font-weight-regular;
+  font-size: toRem(18px);
+
+  &--small {
+    font-size: toRem(16px);
+  }
+}

client/src/styles/_variables.scss

@@ -19,6 +19,9 @@ $color-accent-5-dark: #09496F;
 $color-accent-5: #004E7C;
 $color-accent-5: #DBE6EC;
 
+$color-accent-1-list: $color-accent-1 $color-accent-1-light $color-accent-1-dark;
+$color-accent-2-list: $color-accent-2 $color-accent-2-light $color-accent-2-dark;
+
 /* brand */
 $color-brand-dark: #138E72;
 $color-brand: #17A887;