Change the way we setup router-links

client/src/components/rooms/RoomWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-link :to="link" tag="div" class="room-widget" :class="roomClass">
+  <router-link :to="{name: 'room', params: {slug: slug}}" tag="div" class="room-widget" :class="roomClass">
     <div class="room-widget__content">
       <h2 class="room-widget__title">{{title}}</h2>
       <room-group-widget v-bind="userGroup"></room-group-widget>
@@ -30,9 +30,6 @@
     computed: {
       roomClass() {
         return `room-widget--${this.appearance}`
-      },
-      link() {
-        return `/room/${this.slug}`
       }
     }
   }

client/src/layouts/DefaultLayout.vue

@@ -67,6 +67,14 @@
       background-color: $red;
     }
 
+    &--green { // todo: define a better name when usage is clear
+      background-color: $green;
+    }
+
+    &--brown { // todo: define a better name when usage is clear
+      background-color: $brown;
+    }
+
     &__header {
       grid-area: h;
       display: -ms-grid;

client/src/pages/room.vue

@@ -37,7 +37,7 @@
 
     beforeDestroy() {
       this.$store.dispatch('showFilter');
-      // this.$store.dispatch('setSpecialContainerClass', '');
+      this.$store.dispatch('setSpecialContainerClass', '');
     },
 
     created() {