UI improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Participation/ParticipationWithAccount.vue

@@ -8,7 +8,7 @@
                     </div>
                     <vertical-divider :content="$t('Or')" />
                     <div class="column">
-                        <h3 class="subtitle">{{ $t('I have an account on another Mobilizon instance.')}}</h3>
+                        <subtitle>{{ $t('I have an account on another Mobilizon instance.')}}</subtitle>
                         <p>{{ $t('Other software may also support this.') }}</p>
                         <p>{{ $t('We will redirect you to your instance in order to interact with this event') }}</p>
                         <form @submit.prevent="redirectToInstance">
@@ -41,9 +41,10 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { RouteName } from '@/router';
 import VerticalDivider from '@/components/Utils/VerticalDivider.vue';
+import Subtitle from '@/components/Utils/Subtitle.vue';
 
 @Component({
-  components: { VerticalDivider },
+  components: { Subtitle, VerticalDivider },
 })
 export default class ParticipationWithAccount extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;

js/src/components/Participation/UnloggedParticipation.vue

@@ -2,7 +2,7 @@
     <section class="section container hero">
         <div class="hero-body" v-if="event">
             <div class="container">
-                <h2 class="subtitle">{{ $t('You wish to participate to the following event')}}</h2>
+                <subtitle>{{ $t('You wish to participate to the following event')}}</subtitle>
                 <EventListViewCard v-if="event" :event="event" />
                 <div class="columns has-text-centered">
                     <div class="column">
@@ -58,9 +58,10 @@ import { EventModel, IEvent } from '@/types/event.model';
 import VerticalDivider from '@/components/Utils/VerticalDivider.vue';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
+import Subtitle from '@/components/Utils/Subtitle.vue';
 
 @Component({
-  components: { VerticalDivider, EventListViewCard, EventListCard },
+  components: { VerticalDivider, EventListViewCard, EventListCard, Subtitle },
   apollo: {
     event: {
       query: FETCH_EVENT,