From f13a683371d9a2e21c94ce5724031db468b032cf Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 18 Feb 2020 08:47:41 +0100
Subject: [PATCH] UI improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 CHANGELOG.md                                  |   1 +
 js/src/components/Account/ParticipantCard.vue |   2 +-
 js/src/components/Event/DateCalendarIcon.vue  |   2 +-
 js/src/components/Event/EventCard.vue         | 102 +++++++++---------
 .../ParticipationWithAccount.vue              |   5 +-
 .../Participation/UnloggedParticipation.vue   |   5 +-
 js/src/components/Utils/Subtitle.vue          |  32 ++++++
 js/src/i18n/ar.json                           |   2 +-
 js/src/i18n/be.json                           |   2 +-
 js/src/i18n/ca.json                           |   2 +-
 js/src/i18n/de.json                           |   2 +-
 js/src/i18n/en_US.json                        |   2 +-
 js/src/i18n/fi.json                           |   2 +-
 js/src/i18n/fr_FR.json                        |   2 +-
 js/src/i18n/nl.json                           |   2 +-
 js/src/i18n/oc.json                           |   2 +-
 js/src/i18n/pl.json                           |   2 +-
 js/src/i18n/pt_BR.json                        |   2 +-
 js/src/i18n/sv.json                           |   2 +-
 js/src/variables.scss                         |  28 ++++-
 js/src/views/Admin/Dashboard.vue              |  12 +--
 js/src/views/Event/Edit.vue                   |  19 ++--
 js/src/views/Event/Event.vue                  |  11 +-
 js/src/views/Event/MyEvents.vue               |  27 ++---
 js/src/views/Group/Group.vue                  |  10 +-
 js/src/views/Home.vue                         |  20 ++--
 js/src/views/User/Register.vue                |  34 +++---
 27 files changed, 199 insertions(+), 135 deletions(-)
 create mode 100644 js/src/components/Utils/Subtitle.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7fbf76b58..7c2fb1bef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ Also make sure to remove the `EnvironmentFile=` line from the systemd service an
 - Possibility to delete your account
 
 ### Changed
+- Improved a bit color theme
 - Signature validation also now checks if `Date` header has acceptable values
 - Actor profiles are now stale after two days and have to be refetched
 - Actor keys are rotated some time after sending a `Delete` activity
diff --git a/js/src/components/Account/ParticipantCard.vue b/js/src/components/Account/ParticipantCard.vue
index cafac377b..fa8c83533 100644
--- a/js/src/components/Account/ParticipantCard.vue
+++ b/js/src/components/Account/ParticipantCard.vue
@@ -25,7 +25,7 @@
           </figure>
         </div>
         <div class="media-content">
-          <span class="title" ref="title">{{ actorDisplayName }}</span><br>
+          <span ref="title">{{ actorDisplayName }}</span><br>
           <small class="has-text-grey" v-if="participant.actor.domain">@{{ participant.actor.preferredUsername }}@{{ participant.actor.domain }}</small>
           <small class="has-text-grey" v-else>@{{ participant.actor.preferredUsername }}</small>
         </div>
diff --git a/js/src/components/Event/DateCalendarIcon.vue b/js/src/components/Event/DateCalendarIcon.vue
index ea2f3644f..dab903c04 100644
--- a/js/src/components/Event/DateCalendarIcon.vue
+++ b/js/src/components/Event/DateCalendarIcon.vue
@@ -56,6 +56,7 @@ export default class DateCalendarIcon extends Vue {
 
     span {
       display: block;
+      font-weight: 600;
 
       &.month {
         color: #fa3e3e;
@@ -66,7 +67,6 @@ export default class DateCalendarIcon extends Vue {
       }
 
       &.day {
-        font-weight: 300;
         font-size: 20px;
         line-height: 20px;
       }
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index c17a2be64..8e0c75fe4 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -31,24 +31,41 @@ A simple card for an event
     <div class="card-image">
       <figure class="image is-16by9" :style="`background-image: url('${event.picture ? event.picture.url : '/img/mobilizon_default_card.png'}')`">
         <div class="tag-container" v-if="event.tags">
-          <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-secondary">{{ tag.title }}</b-tag>
+          <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-light">{{ tag.title }}</b-tag>
         </div>
       </figure>
     </div>
-    <div class="content">
-      <div class="title-wrapper">
-        <div class="date-component">
+    <div class="card-content">
+      <div class="media">
+        <div class="media-left">
           <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />
         </div>
-        <h2 class="title" ref="title">{{ event.title }}</h2>
+        <div class="media-content">
+          <p class="event-title">{{ event.title }}</p>
+          <div class="event-subtitle" v-if="event.physicalAddress">
+<!--            <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>-->
+            <span>
+                {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}
+            </span>
+          </div>
+        </div>
       </div>
-      <span class="organizer-place-wrapper">
-        <span v-if="actorDisplayName && actorDisplayName !== '@'">{{ $t('By {name}', { name: actorDisplayName }) }}</span>
-        <span v-if="event.physicalAddress && (event.physicalAddress.locality || event.physicalAddress.description)">
-          {{ event.physicalAddress.locality || event.physicalAddress.description }}
-        </span>
-      </span>
     </div>
+<!--    <div class="date-and-title">-->
+<!--      <div class="date-component">-->
+<!--        <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />-->
+<!--      </div>-->
+<!--      <div class="title-wrapper">-->
+<!--        <h4>{{ event.title }}</h4>-->
+<!--        <div class="organizer-place-wrapper has-text-grey">-->
+<!--          <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>-->
+<!--           ·-->
+<!--          <span v-if="event.physicalAddress">-->
+<!--            {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}-->
+<!--          </span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
 <!--    <div v-if="!mergedOptions.hideDetails" class="details">-->
 <!--      <div v-if="event.participants.length > 0 &&-->
 <!--      mergedOptions.loggedPerson &&-->
@@ -76,7 +93,7 @@ A simple card for an event
 import { IEvent, IEventCardOptions, ParticipantRole } from '@/types/event.model';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
-import { Person } from '@/types/actor';
+import { Actor, Person } from '@/types/actor';
 
 @Component({
   components: {
@@ -100,9 +117,8 @@ export default class EventCard extends Vue {
     return { ...this.defaultOptions, ...this.options };
   }
 
-  get actorDisplayName(): string {
-    const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
-    return actor.displayName();
+  get actor(): Actor {
+    return Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
   }
 
 }
@@ -145,20 +161,16 @@ export default class EventCard extends Vue {
       position: absolute;
       top: 10px;
       right: 0;
-      margin-right: -5px;
+      margin-right: -3px;
       z-index: 10;
       max-width: 40%;
 
       span.tag {
         margin: 5px auto;
-        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
-        /*word-break: break-all;*/
         text-overflow: ellipsis;
         overflow: hidden;
         display: block;
-        /*text-align: right;*/
         font-size: 1em;
-        /*padding: 0 1px;*/
         line-height: 1.75em;
       }
     }
@@ -172,47 +184,33 @@ export default class EventCard extends Vue {
       }
     }
 
-    div.content {
-      padding: 5px;
-      background: $secondary;
+    .card-content {
+      padding: 0.5rem;
 
-      div.title-wrapper {
-        display: flex;
-
-        div.date-component {
-          flex: 0;
-          margin-right: 16px;
-        }
-
-        .title {
+      .event-title {
+        font-size: 1.25rem;
+        line-height: 1.25rem;
           display: -webkit-box;
           -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;  
+          -webkit-box-orient: vertical;
           overflow: hidden;
-          font-weight: 400;
-          font-size: 1.4em;
-          margin-top: auto;
-          min-height: 3.4rem;
-        }
+          min-height: 2.4rem;
       }
-      span.organizer-place-wrapper {
-        display: flex;
-        padding: 0 0.5rem 0.3rem;
+
+      .event-subtitle {
+        font-size: 0.85rem;
+          display: inline-flex;
+          flex-wrap: wrap;
 
         span {
-          padding-right: 0.25rem;
-        }
+            width: 15rem;
+            display: block;
+            overflow: hidden;
 
-        span:not(:last-child):after {
-          content: '-';
-          padding-left: 0.25rem;
-        }
+            flex-grow: 1;
 
-        span:last-child {
-          flex: 1;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
       }
     }
diff --git a/js/src/components/Participation/ParticipationWithAccount.vue b/js/src/components/Participation/ParticipationWithAccount.vue
index e5536e7a7..de30cae1f 100644
--- a/js/src/components/Participation/ParticipationWithAccount.vue
+++ b/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;
diff --git a/js/src/components/Participation/UnloggedParticipation.vue b/js/src/components/Participation/UnloggedParticipation.vue
index 93b3b321b..09e5dfa1b 100644
--- a/js/src/components/Participation/UnloggedParticipation.vue
+++ b/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,
diff --git a/js/src/components/Utils/Subtitle.vue b/js/src/components/Utils/Subtitle.vue
new file mode 100644
index 000000000..0c89ed75e
--- /dev/null
+++ b/js/src/components/Utils/Subtitle.vue
@@ -0,0 +1,32 @@
+<template>
+    <h3>
+        <span>
+            <slot />
+        </span>
+    </h3>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class Subtitle extends Vue {
+}
+</script>
+<style lang="scss" scoped>
+    @import "@/variables.scss";
+
+    h3 {
+        display: block;
+        margin: 15px 0 30px;
+
+        span {
+            background: $secondary;
+            display: inline;
+            padding: 3px 8px;
+            color: #3A384C;
+            font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+            font-weight: 400;
+            font-size: 32px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/js/src/i18n/ar.json b/js/src/i18n/ar.json
index 0d59e022c..6c8e70aee 100644
--- a/js/src/i18n/ar.json
+++ b/js/src/i18n/ar.json
@@ -17,7 +17,7 @@
     "Approve": "قبول",
     "Are you sure you want to cancel your participation at event \"{title}\"?": "هل أنت متأكد مِن أنك تريد الغاء مشاركتك في فعالية \"{title}\"؟",
     "Avatar": "الصورة الرمزية",
-    "By {name}": "حسب {name}",
+    "By @{username}": "حسب @{username}",
     "Cancel": "الغاء",
     "Cancel creation": "إلغاء الإنشاء",
     "Cancel edition": "إلغاء التحرير",
diff --git a/js/src/i18n/be.json b/js/src/i18n/be.json
index 7459a9c9e..3bfb6f276 100644
--- a/js/src/i18n/be.json
+++ b/js/src/i18n/be.json
@@ -28,7 +28,7 @@
     "Are you sure you want to delete this event? This action cannot be reverted.": "Вы сапраўды хочаце выдаліць гэту падзею? Гэта дзеянне нельга адмяніць.",
     "Avatar": "Аватар",
     "Before you can login, you need to click on the link inside it to validate your account": "Каб увайсці з уліковым запісам, патрэбна спачатку перайсці па спасылцы, якая прыйшла вам у лісце",
-    "By {name}": "Ад {name}",
+    "By @{username}": "Ад @{username}",
     "Cancel": "Адмяніць",
     "Cancel creation": "Адмяніць стварэнне",
     "Cancel edition": "Адмяніць рэдагаванне",
diff --git a/js/src/i18n/ca.json b/js/src/i18n/ca.json
index be49cad87..631e8ed15 100644
--- a/js/src/i18n/ca.json
+++ b/js/src/i18n/ca.json
@@ -28,7 +28,7 @@
     "Are you sure you want to delete this event? This action cannot be reverted.": "Segur que vols esborrar aquesta activitat? Aquesta acció és irreversible.",
     "Avatar": "Avatar",
     "Before you can login, you need to click on the link inside it to validate your account": "Per a validar el compte i poder entrar, has de clicar l'enllaç que t'hem enviat en el mail",
-    "By {name}": "De {name}",
+    "By @{username}": "De @{username}",
     "Cancel": "Canceŀla",
     "Cancel creation": "Canceŀla la creació",
     "Cancel edition": "Canceŀla l'edició",
diff --git a/js/src/i18n/de.json b/js/src/i18n/de.json
index 31959e1a4..b2cfc7235 100644
--- a/js/src/i18n/de.json
+++ b/js/src/i18n/de.json
@@ -28,7 +28,7 @@
     "Are you sure you want to delete this event? This action cannot be reverted.": "Bist Du dir sicher, dass Du diese Veranstaltung löschen möchtest? Dies kann nicht rückgängig gemacht werden.",
     "Avatar": "Profilbild",
     "Before you can login, you need to click on the link inside it to validate your account": "Bevor Du dich einloggen kannst, musst Du den Link anklicken, um deinen Account zu überprüfen.",
-    "By {name}": "Nach {name}",
+    "By @{username}": "Nach @{username}",
     "Cancel": "Abbrechen",
     "Cancel creation": "Erstellung abbrechen",
     "Cancel edition": "Bearbeiten abbrechen",
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 555deb4b7..07ce2c0fe 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -37,7 +37,7 @@
 	"Avatar": "Avatar",
 	"Back to previous page": "Back to previous page",
 	"Before you can login, you need to click on the link inside it to validate your account": "Before you can login, you need to click on the link inside it to validate your account",
-	"By {name}": "By {name}",
+	"By @{username}": "By @{username}",
 	"Cancel anonymous participation": "Cancel anonymous participation",
 	"Cancel creation": "Cancel creation",
 	"Cancel edition": "Cancel edition",
diff --git a/js/src/i18n/fi.json b/js/src/i18n/fi.json
index ef002891c..ab6ea63f5 100644
--- a/js/src/i18n/fi.json
+++ b/js/src/i18n/fi.json
@@ -35,7 +35,7 @@
     "Avatar": "Avatar",
     "Back to previous page": "Palaa edelliselle sivulle",
     "Before you can login, you need to click on the link inside it to validate your account": "Sinun on ennen sisäänkirjautumista vahvistettava tilisi napsauttamalla siinä olevaa linkkiä",
-    "By {name}": "Tehnyt {name}",
+    "By @{username}": "Tehnyt @{username}",
     "Cancel": "Peruuta",
     "Cancel anonymous participation": "Peruuta anonyymi osallistuminen",
     "Cancel creation": "Peruuta luonti",
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 847fac4a9..eb6987bfa 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -37,7 +37,7 @@
     "Avatar": "Avatar",
     "Back to previous page": "Retour à la page précédente",
     "Before you can login, you need to click on the link inside it to validate your account": "Avant que vous puissiez vous enregistrer, vous devez cliquer sur le lien à l'intérieur pour valider votre compte",
-    "By {name}": "Par {name}",
+    "By @{username}": "Par @{username}",
     "Cancel": "Annuler",
     "Cancel anonymous participation": "Annuler ma participation anonyme",
     "Cancel creation": "Annuler la création",
diff --git a/js/src/i18n/nl.json b/js/src/i18n/nl.json
index bb6ffd24f..ad932ae49 100644
--- a/js/src/i18n/nl.json
+++ b/js/src/i18n/nl.json
@@ -22,7 +22,7 @@
     "Are you sure you want to delete this event? This action cannot be reverted.": "Bent u zeker dat u dit evenement wil verwijderen? Dit kan niet ongedaan gemaakt worden.",
     "Avatar": "Profielfoto",
     "Before you can login, you need to click on the link inside it to validate your account": "Voordat u zich kan aanmelden, moet u op de link erin klikken om uw account te valideren",
-    "By {name}": "Door {name}",
+    "By @{username}": "Door @{username}",
     "Cancel": "Annuleren",
     "Cancel creation": "Aanmaken annuleren",
     "Cancel edition": "Bewerken annuleren",
diff --git a/js/src/i18n/oc.json b/js/src/i18n/oc.json
index 04578a543..3bb216854 100644
--- a/js/src/i18n/oc.json
+++ b/js/src/i18n/oc.json
@@ -38,7 +38,7 @@
     "Avatar": "Avatar",
     "Back to previous page": "Tornar a pas pagina precedenta",
     "Before you can login, you need to click on the link inside it to validate your account": "Abans que poscatz vos marcar, devètz clicar lo ligam dedins per validar lo compte",
-    "By {name}": "Per {name}",
+    "By @{username}": "Per @{username}",
     "Cancel": "Anullar",
     "Cancel anonymous participation": "Anullar la participacion anonima",
     "Cancel creation": "Anullar la creacion",
diff --git a/js/src/i18n/pl.json b/js/src/i18n/pl.json
index 5b5cf9681..8271f31a3 100644
--- a/js/src/i18n/pl.json
+++ b/js/src/i18n/pl.json
@@ -20,7 +20,7 @@
     "Are you sure you want to delete this event? This action cannot be reverted.": "Czy na pewno chcesz usunąć to wydarzenie? To działanie nie może zostać odwrócone.",
     "Avatar": "Awatar",
     "Before you can login, you need to click on the link inside it to validate your account": "Zanim się zalogujesz, musisz odwiedzić odnośnik znajdujący się w niej, aby potwierdzić swoje konto",
-    "By {name}": "Od {name}",
+    "By @{username}": "Od @{username}",
     "Cancel": "Anuluj",
     "Cancel creation": "Anuluj tworzenie",
     "Cancel edition": "Anuluj edycję",
diff --git a/js/src/i18n/pt_BR.json b/js/src/i18n/pt_BR.json
index e436b127a..de388042a 100644
--- a/js/src/i18n/pt_BR.json
+++ b/js/src/i18n/pt_BR.json
@@ -35,7 +35,7 @@
     "Avatar": "Avatar",
     "Back to previous page": "Voltar à página anterior",
     "Before you can login, you need to click on the link inside it to validate your account": "Antes de você poder começar, você precisa clicar no link que está no interior para validar a sua conta",
-    "By {name}": "Por {name}",
+    "By @{username}": "Por @{username}",
     "Cancel": "Cancelar",
     "Cancel anonymous participation": "Cancelar participação anônima",
     "Cancel creation": "Cancelar a criação",
diff --git a/js/src/i18n/sv.json b/js/src/i18n/sv.json
index 33c30b11e..be35dcddb 100644
--- a/js/src/i18n/sv.json
+++ b/js/src/i18n/sv.json
@@ -26,7 +26,7 @@
     "Are you sure you want to delete this event? This action cannot be reverted.": "Är du säker på att du vill radera det här evenemanget? Den här handlingen kan inte ångras.",
     "Avatar": "Avatar",
     "Before you can login, you need to click on the link inside it to validate your account": "Innan du loggar in måste du klicka på länken inuti det för att validera ditt konto",
-    "By {name}": "Av {name}",
+    "By @{username}": "Av @{username}",
     "Cancel": "Avbryt",
     "Cancel creation": "Avbryt skapandet",
     "Cancel edition": "Avbryt redigeringen",
diff --git a/js/src/variables.scss b/js/src/variables.scss
index 0a3d71bcb..1884011a5 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -2,10 +2,10 @@
 
 $primary: #424056;
 $primary-invert: findColorInvert($primary);
-$secondary: #FAB12D;
+$secondary: #ffcc85;
 $secondary-invert: findColorInvert($secondary);
 
-$success: #78cc8a;
+$success: #0ECCAF;
 $success-invert: findColorInvert($success);
 $info: #36bcd4;
 $info-invert: findColorInvert($info);
@@ -39,4 +39,28 @@ $hero-body-padding-medium: 6rem 1.5rem;
 
 main > .container {
     background: $white;
+}
+
+$title-color: #3C376E;
+$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+$title-weight: 700;
+$title-size: 40px;
+$title-sub-size: 45px;
+$title-sup-size: 30px;
+
+$subtitle-color: #3A384C;
+$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+$subtitle-weight: 400;
+$subtitle-size: 32px;
+$subtitle-sub-size: 30px;
+$subtitle-sup-size: 15px;
+.title {
+    margin: 30px auto 45px;
+}
+
+.subtitle {
+    background: $secondary;
+    display: inline;
+    padding: 3px 8px;
+    margin: 15px auto 30px;
 }
\ No newline at end of file
diff --git a/js/src/views/Admin/Dashboard.vue b/js/src/views/Admin/Dashboard.vue
index 57c6228a7..4923a21e4 100644
--- a/js/src/views/Admin/Dashboard.vue
+++ b/js/src/views/Admin/Dashboard.vue
@@ -7,22 +7,22 @@
                     <div class="tile is-parent is-vertical is-6">
                         <article class="tile is-child box">
                             <p class="title">{{ dashboard.numberOfEvents }}</p>
-                            <p class="subtitle">{{ $t('Published events')}}</p>
+                            <p>{{ $t('Published events')}}</p>
                         </article>
                         <article class="tile is-child box">
                             <p class="title">{{ dashboard.numberOfComments}}</p>
-                            <p class="subtitle">{{ $t('Comments')}}</p>
+                            <p>{{ $t('Comments')}}</p>
                         </article>
                     </div>
                     <div class="tile is-parent is-vertical">
                         <article class="tile is-child box">
                             <p class="title">{{ dashboard.numberOfUsers }}</p>
-                            <p class="subtitle">{{ $t('Users')}}</p>
+                            <p>{{ $t('Users')}}</p>
                         </article>
                         <router-link :to="{ name: RouteName.REPORTS}">
                             <article class="tile is-child box">
                                 <p class="title">{{ dashboard.numberOfReports }}</p>
-                                <p class="subtitle">{{ $t('Opened reports')}}</p>
+                                <p>{{ $t('Opened reports')}}</p>
                             </article>
                         </router-link>
                     </div>
@@ -41,14 +41,14 @@
                 <div class="tile is-parent">
                     <router-link :to="{ name: RouteName.RELAYS }">
                         <article class="tile is-child box">
-                            <p class="subtitle">{{ $t('Instances') }}</p>
+                            <span>{{ $t('Instances') }}</span>
                         </article>
                     </router-link>
                 </div>
                 <div class="tile is-parent">
                     <router-link :to="{ name: RouteName.ADMIN_SETTINGS }">
                         <article class="tile is-child box">
-                            <p class="subtitle">{{ $t('Settings') }}</p>
+                            <span>{{ $t('Settings') }}</span>
                         </article>
                     </router-link>
                 </div>
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index 458fc2f6a..bfe37dc8c 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -9,9 +9,9 @@
       </h1>
 
       <form ref="form">
-        <h2 class="subtitle">
+        <subtitle>
           {{ $t('General information') }}
-        </h2>
+        </subtitle>
         <picture-upload v-model="pictureFile" :textFallback="$t('Headline picture')" />
 
         <b-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]">
@@ -50,9 +50,9 @@
           </b-select>
         </b-field>-->
 
-        <h2 class="subtitle">
+        <subtitle>
           {{ $t('Who can view this event and participate') }}
-        </h2>
+        </subtitle>
           <div class="field">
             <b-radio v-model="event.visibility"
                      name="eventVisibility"
@@ -118,9 +118,9 @@
           </b-field> -->
         </div>
 
-        <h2 class="subtitle">
+        <subtitle>
           {{ $t('Public comment moderation') }}
-        </h2>
+        </subtitle>
 
         <div class="field">
           <b-radio v-model="event.options.commentModeration"
@@ -146,9 +146,9 @@
           </b-radio>
         </div>
 
-        <h2 class="subtitle">
+        <subtitle>
           {{ $t('Status') }}
-        </h2>
+        </subtitle>
 
         <b-field>
           <b-radio-button v-model="event.status"
@@ -302,11 +302,12 @@ import { RouteName } from '@/router';
 import 'intersection-observer';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
+import Subtitle from '@/components/Utils/Subtitle.vue';
 
 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
 
 @Component({
-  components: { IdentityPickerWrapper, AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor: EditorComponent },
+  components: { Subtitle, IdentityPickerWrapper, AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor: EditorComponent },
   apollo: {
     currentActor: CURRENT_ACTOR_CLIENT,
     tags: TAGS,
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index 81877e3b6..fc08dfb5a 100644
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -173,7 +173,7 @@
                 <div class="organizer">
                   <span>
                     <span v-if="event.organizerActor">
-                      {{ $t('By {name}', {name: event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername}) }}
+                      {{ $t('By @{username}', {username: event.organizerActor.preferredUsername}) }}
                     </span>
                     <figure v-if="event.organizerActor.avatar" class="image is-48x48">
                       <img
@@ -188,9 +188,9 @@
           </section>
           <section class="description section" :class="{ exists: event.description }">
             <div class="description-container container">
-              <h3 class="title">
+              <subtitle>
                 {{ $t('About this event') }}
-              </h3>
+              </subtitle>
               <p v-if="!event.description">
                 {{ $t("The event organizer didn't add any description.") }}
               </p>
@@ -202,7 +202,7 @@
           </section>
         <section class="comments section" ref="commentsObserver">
           <a href="#comments">
-            <h3 class="title" id="comments">{{ $t('Comments') }}</h3>
+            <subtitle id="comments">{{ $t('Comments') }}</subtitle>
           </a>
           <comment-tree v-if="loadComments" :event="event" />
         </section>
@@ -312,9 +312,11 @@ import {
         removeAnonymousParticipation,
 } from '@/services/AnonymousParticipationStorage';
 import { IConfig } from '@/types/config.model';
+import Subtitle from '@/components/Utils/Subtitle.vue';
 
 @Component({
   components: {
+    Subtitle,
     ActorLink,
     EventFullDate,
     EventCard,
@@ -848,6 +850,7 @@ export default class Event extends EventMixin {
           word-break: break-word;
           font-size: 1.7em;
           margin-bottom: 0;
+          margin-top: 0;
         }
 
         span small {
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
index 9a09939bb..04578a9b4 100644
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -5,9 +5,9 @@
         </h1>
         <b-loading :active.sync="$apollo.loading"></b-loading>
         <section v-if="futureParticipations.length > 0">
-            <h2 class="subtitle">
+            <subtitle>
                 {{ $t('Upcoming') }}
-            </h2>
+            </subtitle>
             <transition-group name="list" tag="p">
                 <div v-for="month in monthlyFutureParticipations" :key="month[0]">
                     <h3 class="upcoming-month">{{ month[0] }}</h3>
@@ -27,9 +27,9 @@
             </div>
         </section>
         <section v-if="drafts.length > 0">
-            <h2 class="subtitle">
+            <subtitle>
                 {{ $t('Drafts') }}
-            </h2>
+            </subtitle>
             <div class="columns is-multiline">
                 <EventCard
                         v-for="draft in drafts"
@@ -40,9 +40,9 @@
             </div>
         </section>
         <section v-if="pastParticipations.length > 0">
-            <h2 class="subtitle">
+            <subtitle>
                 {{ $t('Past events') }}
-            </h2>
+            </subtitle>
             <transition-group name="list" tag="p">
                 <div v-for="month in monthlyPastParticipations" :key="month[0]">
                     <h3>{{ month[0] }}</h3>
@@ -73,10 +73,12 @@ import { LOGGED_USER_PARTICIPATIONS, LOGGED_USER_DRAFTS } from '@/graphql/actor'
 import { EventModel, IEvent, IParticipant, Participant, ParticipantRole } from '@/types/event.model';
 import EventListCard from '@/components/Event/EventListCard.vue';
 import EventCard from '@/components/Event/EventCard.vue';
+import Subtitle from '@/components/Utils/Subtitle.vue';
 
 
 @Component({
   components: {
+    Subtitle,
     EventCard,
     EventListCard,
   },
@@ -221,19 +223,6 @@ export default class MyEvents extends Vue {
     }
 
     section {
-        & > h2 {
-            display: block;
-            color: $primary;
-            font-size: 2.5rem;
-            text-decoration: underline;
-            text-decoration-color: $secondary;
-        }
-
-        h3 {
-            margin-top: 2rem;
-            font-weight: bold;
-        }
-
         .upcoming-month {
             text-transform: capitalize;
         }
diff --git a/js/src/views/Group/Group.vue b/js/src/views/Group/Group.vue
index dc86ef296..289bcef46 100644
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@@ -24,9 +24,9 @@
         </div>
       </div>
       <section class="box" v-if="group.organizedEvents.length > 0">
-        <h2 class="subtitle">
+        <subtitle>
           {{ $t('Organized') }}
-        </h2>
+        </subtitle>
         <div class="columns">
           <EventCard
             v-for="event in group.organizedEvents"
@@ -38,9 +38,9 @@
         </div>
       </section>
       <section v-if="group.members.length > 0">
-        <h2 class="subtitle">
+        <subtitle>
           {{ $t('Members') }}
-        </h2>
+        </subtitle>
         <div class="columns">
           <span
             v-for="member in group.members"
@@ -60,6 +60,7 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { FETCH_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { IGroup } from '@/types/actor';
+import Subtitle from '@/components/Utils/Subtitle.vue';
 
 @Component({
   apollo: {
@@ -76,6 +77,7 @@ import { IGroup } from '@/types/actor';
     },
   },
   components: {
+    Subtitle,
     EventCard,
   },
 })
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index df9e55bf7..e3028f36d 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -4,7 +4,7 @@
         <div class="hero-body">
           <div class="container">
             <h1 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h1>
-            <p class="subtitle">{{ $t('Join {instance}, a Mobilizon instance', { instance: config.name }) }}
+            <p>{{ $t('Join {instance}, a Mobilizon instance', { instance: config.name }) }}</p>
             <p class="instance-description">{{ config.description }}</p>
             <!-- We don't invite to find other instances yet -->
             <!-- <p v-if="!config.registrationsOpen">
@@ -41,18 +41,18 @@
         <div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
           <span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
             <date-component :date="row[0]" />
-            <h3 class="subtitle"
+            <subtitle
               v-if="isToday(row[0])">
               {{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }}
-            </h3>
-            <h3 class="subtitle"
+            </subtitle>
+            <subtitle
                 v-else-if="isTomorrow(row[0])">
               {{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }}
-            </h3>
-            <h3 class="subtitle"
+            </subtitle>
+            <subtitle
                 v-else-if="isInLessThanSevenDays(row[0])">
                 {{ $tc('You have one event in {days} days.', row[1].length, {count: row[1].length, days: calculateDiffDays(row[0])}) }}
-            </h3>
+            </subtitle>
           </span>
           <div>
             <EventListCard
@@ -114,6 +114,7 @@ import { EventModel, IEvent, IParticipant, Participant, ParticipantRole } from '
 import DateComponent from '@/components/Event/DateCalendarIcon.vue';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
+import Subtitle from '@/components/Utils/Subtitle.vue';
 
 @Component({
   apollo: {
@@ -149,6 +150,7 @@ import { IConfig } from '@/types/config.model';
     },
   },
   components: {
+    Subtitle,
     DateComponent,
     EventListCard,
     EventCard,
@@ -367,6 +369,10 @@ export default class Home extends Vue {
     margin-top: -3px;
     background: lighten($secondary, 20%);
 
+    .title {
+      color: $primary;
+    }
+
     .column figure.image img {
       max-width: 400px;
     }
diff --git a/js/src/views/User/Register.vue b/js/src/views/User/Register.vue
index 3197c1553..b4769ea10 100644
--- a/js/src/views/User/Register.vue
+++ b/js/src/views/User/Register.vue
@@ -10,26 +10,30 @@
     <section>
       <div class="columns">
         <div class="column">
-          <div class="content">
-            <h2 class="title">{{ $t('Features') }}</h2>
-            <ul>
-              <li>{{ $t('Create and manage several identities from the same account') }}</li>
-              <li>{{ $t('Create, edit or delete events') }}</li>
-              <li>{{ $t('Register for an event by choosing one of your identities') }}</li>
-            </ul>
+          <div>
+            <subtitle>{{ $t('Features') }}</subtitle>
+            <div class="content">
+              <ul>
+                <li>{{ $t('Create and manage several identities from the same account') }}</li>
+                <li>{{ $t('Create, edit or delete events') }}</li>
+                <li>{{ $t('Register for an event by choosing one of your identities') }}</li>
+              </ul>
+            </div>
           </div>
           <router-link :to="{ name: RouteName.ABOUT }">
             {{ $t('Learn more') }}
           </router-link>
           <hr>
           <div class="content">
-            <h2 class="title">{{ $t('About this instance') }}</h2>
-            <p>
-              {{ $t("Your local administrator resumed its policy:") }}
-            </p>
-            <ul>
-              <li>{{ $t('Enjoy discovering Mobilizon!') }}</li>
-            </ul>
+            <subtitle>{{ $t('About this instance') }}</subtitle>
+            <div class="content">
+              <p>
+                {{ $t("Your local administrator resumed its policy:") }}
+              </p>
+              <ul>
+                <li>{{ $t('Enjoy discovering Mobilizon!') }}</li>
+              </ul>
+            </div>
 <!--            <p>-->
 <!--              {{ $t('Please read the full rules') }}-->
 <!--            </p>-->
@@ -107,8 +111,10 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import { RouteName } from '@/router';
 import { IConfig } from '@/types/config.model';
 import { CONFIG } from '@/graphql/config';
+import Subtitle from '@/components/Utils/Subtitle.vue';
 
 @Component({
+  components: { Subtitle },
   metaInfo() {
     return {
       // if no subcomponents specify a metaInfo.title, this title will be used