Update styling

client/src/components/ui/Toggle.vue

@@ -1,6 +1,7 @@
 <template>
   <label
     :for="id"
+    :class="{'toggle--bordered': bordered}"
     class="toggle">
     <input
       :id="id"
@@ -26,6 +27,10 @@
         type: Boolean,
         default: false,
       },
+      bordered: {
+        type: Boolean,
+        default: true
+      }
     },
 
     data() {
@@ -43,13 +48,16 @@
   @import '~styles/helpers';
 
   .toggle {
-    @include default-box-shadow;
-    border-radius: $round-border-radius;
-    border: 1px solid $color-silver;
-    padding: $small-spacing $medium-spacing;
     display: flex;
     cursor: pointer;
 
+    &--bordered {
+      @include default-box-shadow;
+      border-radius: $round-border-radius;
+      border: 1px solid $color-silver;
+      padding: $small-spacing $medium-spacing;
+    }
+
     &__toggle-wrapper {
       background-color: $color-silver;
       width: 42px;

client/src/layouts/DefaultLayout.vue

@@ -4,7 +4,9 @@
     class="container skillbox layout">
     <navigation-sidebar/>
     <profile-sidebar/>
-    <header-bar class="header layout__header"/>
+    <header-bar
+      class="header layout__header"
+      v-if="showHeader"/>
 
     <router-view
       :key="$route.fullPath"
@@ -37,6 +39,9 @@
       showFilter() {
         return this.$route.meta.filter;
       },
+      showHeader() {
+        return !this.$route.meta.hideHeader;
+      },
       specialContainerClass() {
         let cls = this.$store.state.specialContainerClass;
         return [cls ? `layout--${cls}` : '', {'skillbox--show-filter': this.showFilter}];

client/src/layouts/SimpleLayout.vue

@@ -26,7 +26,12 @@
     },
 
     computed: {
-      enableFooter: enableFooter,
+      enableFooter() {
+        if (this.$route.meta.hideFooter) {
+          return false;
+        }
+        return enableFooter();
+      }
     },
 
     methods: {

client/src/styles/mixins/_typography.scss

@@ -107,11 +107,15 @@
   font-size: toRem(18px);
 }
 
-@mixin default-link {
+@mixin link-base {
   font-size: toRem(14px);
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   cursor: pointer;
+}
+
+@mixin default-link {
+  @include link-base;
 
   &--active {
     color: $color-brand;