fix participant card export

js/src/common.scss

@@ -12,6 +12,11 @@ a.out,
   text-decoration-thickness: 2px;
 }
 
+main {
+  > section > .columns {
+    min-height: 50vh;
+  }
+}
 
 .section {
   padding: 1rem 1% 4rem;
@@ -51,6 +56,7 @@ $color-black: #000;
 .fade-leave-active {
   transition: opacity 0.5s;
 }
+
 .fade-enter,
 .fade-leave-to {
   opacity: 0;
@@ -60,7 +66,7 @@ body {
   // background: #f7f8fa;
   background: $body-background-color;
   font-family: BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Segoe UI",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   /*main {*/
   /*  margin: 1rem auto 0;*/
@@ -69,6 +75,7 @@ body {
 
 #mobilizon > .container > .message {
   margin: 1rem auto auto;
+
   .message-header {
     button.delete {
       background: #4a4a4a;
@@ -83,43 +90,63 @@ body {
 
 $list-background-color: $scheme-main !default;
 $list-shadow: 0 2px 3px rgba($scheme-invert, 0.1),
-  0 0 0 1px rgba($scheme-invert, 0.1) !default;
+0 0 0 1px rgba($scheme-invert, 0.1) !default;
 $list-radius: $radius !default;
 
 $list-item-border: 1px solid $border !default;
 $list-item-color: $text !default;
 $list-item-active-background-color: $purple-1 !default;
-$list-item-active-color: $link-invert !default;
-$list-item-hover-background-color: $background !default;
+$list-item-active-color: $white !default;
+$list-item-hover-background-color: $chapril_blue_light !default;
 
 .list-item {
   display: block;
   padding: 0.5em 1em;
+
   &:not(a) {
     color: $list-item-color;
   }
+
   &:first-child {
     border-top-left-radius: $list-radius;
     border-top-right-radius: $list-radius;
   }
+
   &:last-child {
     border-bottom-left-radius: $list-radius;
     border-bottom-right-radius: $list-radius;
   }
+
   &:not(:last-child) {
     border-bottom: $list-item-border;
   }
+
   &.is-active {
     background-color: $list-item-active-background-color;
     color: $list-item-active-color;
   }
 }
 
-a.list-item {
-  background-color: $list-item-hover-background-color;
-  cursor: pointer;
+a.router-link-active {
+  color: $list-item-active-color;
+  padding: 0.25em;
 }
 
+a {
+  &.list-item {
+    background-color: $list-item-hover-background-color;
+    cursor: pointer;
+  }
+
+  .subtitle {
+    color: $white;
+    padding: 0.25em;
+    display: block !important;
+  }
+}
+.title{
+  margin: 1rem auto 1.5rem !important;
+}
 .setting-title {
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -133,20 +160,54 @@ a.list-item {
   }
 }
 
-.hero-body{
+.breadcrumb {
+  a{
+    padding: 0.5em;
+  }
+  li:first-child a
+  {
+    padding-left: 0.5em;
+  }
+  .router-link-active,
+  .is-active {
+    background: $info !important;
+    color: $white !important;
+  }
+}
+
+
+.hero-body {
   background-color: $chapril_blue_light;
 }
 
-.columns{
-  background: white;
+.columns {
+  background: $white;
 }
-.setting-menu-item .router-link-active,
-.router-link-active{
-  background-color: $purple-1;
+
+.setting-menu-item {
+  background-color: $yellow-4;
+
+  .router-link-active,
+  .router-link-active {
+    background-color: $info;
+    color: $white;
+
+    a {
+      color: $white;
+      font-weight: 600 !important;
+      text-decoration: none;
+    }
+  }
 }
-.date-component{
+.date-component-container{
+  .datetime-container{
+    margin-right: 1em;
+  }
+}
+.date-component {
   background-color: $chapril_blue_light !important;
 }
-.time.datetime-container span.month{
-  color : $primary-invert;
+
+.time.datetime-container span.month {
+  color: $primary-invert;
 }

js/src/components/Account/ParticipantCard.vue

@@ -65,7 +65,8 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IParticipant, ParticipantRole } from "../../types/participant.model";
+import { ParticipantRole } from "@/types/enums";
+import { IParticipant } from "@/types/participant.model";
 import { IPerson, Person } from "../../types/actor";
 
 @Component

js/src/router/index.ts

@@ -147,6 +147,12 @@ const router = new Router({
       component: () =>
         import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
       meta: { requiredAuth: false },
+    },{
+      path: "/test-view",
+      name: 'test-view',
+      component: () =>
+        import(/* webpackChunkName: "testing" */ "../views/TestingView.vue"),
+      meta: { requiredAuth: false },
     },
     {
       path: "*",

js/src/variables.scss

@@ -36,6 +36,7 @@ $purple-1: mix($chapril_blue, #757199);
 /**
  * Background
  */
+$white:   #fff ;
 $purple-2: mix($chapril_blue, #cdcaea);
 $purple-3: mix($chapril_blue, #e6e4f4);
 
@@ -57,7 +58,7 @@ $background-color-darker: darken($background-color,10%);
 
 $success: mix($chapril_blue, #0d8758);
 $success-invert: findColorInvert($success);
-$info: mix($chapril_blue, #36bcd4);
+$info:  mix($chapril_blue, #36bcd4) ;
 $info-invert: findColorInvert($info);
 $danger: mix($chapril_blue, #ff2e54);
 $danger-invert: findColorInvert($danger);

js/src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container content">
     <div class="hero intro is-small is-primary">
       <div class="hero-body">
         <div class="container">