From c32b767d9b652e037961a382d16fd9505b4c710e Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 6 Jan 2022 16:56:51 +0100
Subject: [PATCH] Notifications list template

---
 .../Notification/NotificationReadToggle.vue   |  18 +-
 .../views/Notification/create.html.twig       |  34 ++-
 .../views/Notification/edit.html.twig         |  32 ++-
 ...extension_list_notifications_for.html.twig |   6 +-
 .../views/Notification/list.html.twig         | 218 +++++++++---------
 .../views/Notification/show.html.twig         | 130 +++++------
 .../translations/messages.fr.yml              |  11 +-
 .../Resources/public/chill/scss/badge.scss    |   5 +
 .../showInNotification.html.twig              |   2 +-
 9 files changed, 233 insertions(+), 223 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
index c45cf1ba6..467fd40ea 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
@@ -108,26 +108,28 @@ export default {
 </script>
 
 <style lang="scss">
-.notification {
-    h6 {
+div.notification {
+    h2, h6 {
+        a {
+            text-decoration: none;
+        }
         &::before {
             font-family: "ForkAwesome";
             font-size: 80%;
+            margin-right: 0.3em;
         }
     }
-    .read {
-        h6 {
+    div.read {
+        h2, h6 {
             font-weight: 500;
             &::before {
-                //content: "\f2b6";  //envelope-open
                 content: "\f2b7";  //envelope-open-o
             }
         }
     }
-    .unread {
-        h6 {
+    div.unread {
+        h2, h6 {
             &::before {
-                //content: "\f0e0";  //envelope
                 content: "\f003";  //envelope-o
             }
         }
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/create.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/create.html.twig
index edf9f3581..2e0dbdd77 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/create.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/create.html.twig
@@ -11,26 +11,24 @@
 {% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-md-10">
-        {% include handler.template(notification) with handler.templateData(notification) %}
+<div class="col-10">
+    {% include handler.template(notification) with handler.templateData(notification) %}
 
-        {{ form_start(form, { 'attr': { 'id': 'notification' }}) }}
+    {{ form_start(form, { 'attr': { 'id': 'notification' }}) }}
 
-        {{ form_row(form.title) }}
-        {{ form_row(form.addressees) }}
-        {{ form_row(form.message) }}
+    {{ form_row(form.title) }}
+    {{ form_row(form.addressees) }}
+    {{ form_row(form.message) }}
 
-        {{ form_end(form) }}
-        <ul class="record_actions sticky-form-buttons">
-            <li class="cancel">
-                <a href="{{ chill_return_path_or('chill_main_homepage') }}" class="btn btn-cancel">{{ 'Cancel'|trans|chill_return_path_label }}</a>
-            </li>
-            <li>
-                <button type="submit" form="notification" class="btn btn-save">{{ 'Save'|trans }}</button>
-            </li>
-        </ul>
-
-    </div>
+    {{ form_end(form) }}
+    
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ chill_return_path_or('chill_main_homepage') }}" class="btn btn-cancel">{{ 'Cancel'|trans|chill_return_path_label }}</a>
+        </li>
+        <li>
+            <button type="submit" form="notification" class="btn btn-save">{{ 'Save'|trans }}</button>
+        </li>
+    </ul>
 </div>
 {% endblock %}
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/edit.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/edit.html.twig
index edf9f3581..b2aaa7842 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/edit.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/edit.html.twig
@@ -11,26 +11,24 @@
 {% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-md-10">
-        {% include handler.template(notification) with handler.templateData(notification) %}
+<div class="col-10">
+    {% include handler.template(notification) with handler.templateData(notification) %}
 
-        {{ form_start(form, { 'attr': { 'id': 'notification' }}) }}
+    {{ form_start(form, { 'attr': { 'id': 'notification' }}) }}
 
-        {{ form_row(form.title) }}
-        {{ form_row(form.addressees) }}
-        {{ form_row(form.message) }}
+    {{ form_row(form.title) }}
+    {{ form_row(form.addressees) }}
+    {{ form_row(form.message) }}
 
-        {{ form_end(form) }}
-        <ul class="record_actions sticky-form-buttons">
-            <li class="cancel">
-                <a href="{{ chill_return_path_or('chill_main_homepage') }}" class="btn btn-cancel">{{ 'Cancel'|trans|chill_return_path_label }}</a>
-            </li>
-            <li>
-                <button type="submit" form="notification" class="btn btn-save">{{ 'Save'|trans }}</button>
-            </li>
-        </ul>
+    {{ form_end(form) }}
 
-    </div>
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ chill_return_path_or('chill_main_homepage') }}" class="btn btn-cancel">{{ 'Cancel'|trans|chill_return_path_label }}</a>
+        </li>
+        <li>
+            <button type="submit" form="notification" class="btn btn-save">{{ 'Save'|trans }}</button>
+        </li>
+    </ul>
 </div>
 {% endblock %}
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig
index 0235ab4f7..ea61b5dce 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig
@@ -1,4 +1,4 @@
-<div class="list-group notification my-2">
+<div class="list-group my-2 notification notification-box">
     <div class="list-group-item">
         <h4>{{ 'notification.Sent'|trans }}</h4>
     </div>
@@ -10,13 +10,13 @@
                 {% if notification.sender == app.user %}
 
                     <h6>
-                        <abbr title="{{ 'Le ' ~ notification.date|format_date('long') }}" class="ms-1">
+                        <abbr title="{{ 'Le ' ~ notification.date|format_date('long') ~ '\n' ~ notification.title }}">
                             {{ notification.date|format_datetime('short','short') }}
                         </abbr>
+                        {# Vue component #}
                         <span class="notification_toggle_read_status"
                             data-notification-id="{{ notification.id }}"
                             data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
-
                             data-show-button-url="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
                             data-button-class="btn-outline-primary"
                             data-button-text="false"
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig
index 24fd4404a..f6017eb03 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig
@@ -1,6 +1,6 @@
 {% extends "@ChillMain/layout.html.twig"  %}
 
-{% block title 'notification.List'|trans %}
+{% block title 'notification.My own notifications'|trans %}
 
 {% block js %}
   {{ parent() }}
@@ -13,115 +13,119 @@
 {% endblock %}
 
 {% block content %}
-    <div id="container content">
-        <div class="row">
-            <div class="grid-8 centered">
-                <h1>{{ block('title') }}</h1>
+<div class="col-10 notification notification-list">
 
-                <ul class="nav nav-tabs">
-                    <li class="nav-item">
-                        <a class="nav-link {% if step == 'inbox' %}active{% endif %}" href="{{ path('chill_main_notification_my') }}">
-                            {{ 'notification.Notifications received'|trans }}
-                            {% if unreads['inbox'] > 0 %}
-                                <span class="badge rounded-pill bg-danger">
-                                    {{ unreads['inbox'] }}
-                                </span>
-                            {% endif %}
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link {% if step == 'sent' %}active{% endif %}" href="{{ path('chill_main_notification_sent') }}">
-                            {{ 'notification.Notifications sent'|trans }}
-                            {% if unreads['sent'] > 0 %}
-                                <span class="badge rounded-pill bg-danger">
-                                    {{ unreads['sent'] }}
-                                </span>
-                            {% endif %}
-                        </a>
-                    </li>
-                </ul>
+    <h1>{{ block('title') }}</h1>
 
-                {% if datas|length == 0 %}
-                    {% if step == 'inbox' %}
-                        <p class="chill-no-data-statement">{{ 'notification.Any notification received'|trans }}</p>
-                    {% else %}
-                        <p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
-                    {% endif %}
-                {% else %}
-                    <div class="flex-table">
-                        {% for data in datas %}
-                            {% set notification = data.notification %}
-                            <div class="item-bloc {% if not notification.isReadBy(app.user) %}unread{% else %}read{% endif %}">
-                                <div class="item-row">
-                                    <h2>
-                                        <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
-                                            {{ notification.title }}
-                                        </a>
-                                        {% if not notification.isReadBy(app.user) %}
-                                            <div class="badge bg-danger">{{ 'notification.is_unread'|trans }}</div>
-                                        {% endif %}
-                                        {% if notification.isSystem %}
-                                            <div class="badge bg-chill-green">{{ 'notification.is_system'|trans }}</div>
-                                        {% endif %}
-
-                                    </h2>
-                                </div>
-                                <div class="item-row">
-                                        <div class="item-col">
-                                            {% if step == 'inbox' and not notification.isSystem %}
-                                                {{ 'notification.from'|trans }}: {{ notification.sender|chill_entity_render_string }}
-                                            {% else %}
-                                                &nbsp;
-                                            {% endif %}
-                                        </div>
-                                    <div class="item-col">{{ 'notification.adressees'|trans }}
-                                        <ul>
-                                            {% for a in notification.addressees %}
-                                                <li>
-                                                    {{ a|chill_entity_render_string }}
-                                                </li>
-                                            {% endfor %}
-                                        </ul>
-                                    </div>
-                                    <div class="item-col">{{ notification.date|format_datetime('long', 'short') }}</div>
-                                </div>
-                                <div class="item-row">
-                                    <div>
-                                        <blockquote class="chill-user-quote">
-                                            {{ notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
-                                        </blockquote>
-                                    </div>
-                                </div>
-                                <div class="item-row separator">
-                                    {% include data.template with data.template_data %}
-                                </div>
-                                <div class="item-row separator">
-                                    <ul class="record_actions">
-                                        <li>
-                                            <span class="notification_toggle_read_status"
-                                                data-notification-id="{{ notification.id }}"
-                                                data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
-                                            ></span>
-                                        </li>
-                                        {% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}
-                                            <li>
-                                                <a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': notification.id}) }}" class="btn btn-edit"></a>
-                                            </li>
-                                        {% endif %}
-                                        {% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', notification) %}
-                                            <li>
-                                                <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}" class="btn btn-show"></a>
-                                            </li>
-                                        {% endif %}
-                                    </ul>
-                                </div>
-                            </div>
-                        {% endfor %}
-
-                    </div>
+    <ul class="nav nav-pills justify-content-center">
+        <li class="nav-item">
+            <a class="nav-link {% if step == 'inbox' %}active{% endif %}" href="{{ path('chill_main_notification_my') }}">
+                {{ 'notification.Notifications received'|trans }}
+                {% if unreads['inbox'] > 0 %}
+                    <span class="badge rounded-pill bg-danger">
+                        {{ unreads['inbox'] }}
+                    </span>
                 {% endif %}
-            </div>
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link {% if step == 'sent' %}active{% endif %}" href="{{ path('chill_main_notification_sent') }}">
+                {{ 'notification.Notifications sent'|trans }}
+                {% if unreads['sent'] > 0 %}
+                    <span class="badge rounded-pill bg-danger">
+                        {{ unreads['sent'] }}
+                    </span>
+                {% endif %}
+            </a>
+        </li>
+    </ul>
+
+    {% if datas|length == 0 %}
+        {% if step == 'inbox' %}
+            <p class="chill-no-data-statement">{{ 'notification.Any notification received'|trans }}</p>
+        {% else %}
+            <p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
+        {% endif %}
+    {% else %}
+        <div class="flex-table">
+            {% for data in datas %}
+                {% set notification = data.notification %}
+                <div class="item-bloc {% if not notification.isReadBy(app.user) %}unread{% else %}read{% endif %}">
+                    <div class="item-row">
+                        <h2>
+                            <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
+                                {{ notification.title }}
+                            </a>
+                        </h2>
+                    </div>
+                    <div class="item-row">
+                        <div class="item-col">
+                            <div class="notification-from">
+                                {% if step == 'inbox' %}
+                                    <abbr title="{{ 'notification.received_from'|trans }}">
+                                        {{ 'notification.from'|trans }}:
+                                    </abbr>
+                                    {% if not notification.isSystem %}
+                                        <span class="badge-user">
+                                            {{ notification.sender|chill_entity_render_string }}
+                                        </span>
+                                    {% else %}
+                                        <span class="badge-user system">{{ 'notification.is_system'|trans }}</span>
+                                    {% endif %}
+                                {% endif %}
+                            </div>
+                            <div class="notification-to">
+                                {% if notification.addressees|length > 0 %}
+                                    <abbr title="{{ 'notification.sent_to'|trans }}">
+                                        {{ 'notification.to'|trans }}:
+                                    </abbr>
+                                {% endif %}
+                                {% for a in notification.addressees %}
+                                    <span class="badge-user">
+                                        {{ a|chill_entity_render_string }}
+                                    </span>
+                                {% endfor %}
+                            </div>
+                        </div>
+                        <div class="item-col">{{ notification.date|format_datetime('long', 'short') }}</div>
+                    </div>
+                    <div class="item-row separator">
+                        {% include data.template with data.template_data %}
+                    </div>
+                    <div class="item-row row">
+                        <div>
+                            <blockquote class="chill-user-quote">
+                                {{ notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
+                            </blockquote>
+                        </div>
+                    </div>
+                    <div class="item-row separator">
+                        <ul class="record_actions">
+                            <li>
+                                {# Vue component #}
+                                <span class="notification_toggle_read_status"
+                                    data-notification-id="{{ notification.id }}"
+                                    data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
+                                ></span>
+                            </li>
+                            {% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}
+                                <li>
+                                    <a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': notification.id}) }}"
+                                       class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
+                                </li>
+                            {% endif %}
+                            {% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', notification) %}
+                                <li>
+                                    <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
+                                       class="btn btn-show" title="{{ 'Show'|trans }}"></a>
+                                </li>
+                            {% endif %}
+                        </ul>
+                    </div>
+                </div>
+            {% endfor %}
 
         </div>
-    </div>
+    {% endif %}
+</div>
 {% endblock content %}
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
index faab0a8cb..a688b3203 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
@@ -13,87 +13,87 @@
 {% endblock %}
 
 {% block content %}
-    <div class="row">
-        <div class="col-md-10">
-            <h1>{{ notification.title }}</h1>
+<div class="col-10">
 
-            <div>
-                {% include handler.getTemplate(notification) with handler.getTemplateData(notification) %}
-            </div>
+    <h1>{{ notification.title }}</h1>
 
-            <div>
-                {# à remplacer par un commentEmbeddable #}
-                {{ notification.message|chill_markdown_to_html }}
-            </div>
+    <div>
+        {% include handler.getTemplate(notification) with handler.getTemplateData(notification) %}
+    </div>
 
-            {% if notification.comments|length > 0 %}
-                {% for comment in notification.comments %}
-                    {% if editedCommentForm is null or editedCommentId != comment.id %}
-                    <div>
-                        <a id="comment-{{ comment.id }}"></a>
-                        <blockquote class="chill-user-quote">
-                            {{ comment.content|chill_markdown_to_html }}
-                        </blockquote>
+    <div>
+        {# à remplacer par un commentEmbeddable #}
+        {{ notification.message|chill_markdown_to_html }}
+    </div>
 
-                        {% if is_granted('CHILL_MAIN_NOTIFICATION_COMMENT_EDIT', comment) %}
+    {% if notification.comments|length > 0 %}
+        {% for comment in notification.comments %}
+            {% if editedCommentForm is null or editedCommentId != comment.id %}
+                <div>
+                    <a id="comment-{{ comment.id }}"></a>
+                    <blockquote class="chill-user-quote">
+                        {{ comment.content|chill_markdown_to_html }}
+                    </blockquote>
+
+                    {% if is_granted('CHILL_MAIN_NOTIFICATION_COMMENT_EDIT', comment) %}
                         <ul class="record_actions">
                             <li>
                                 <a href="{{ chill_path_forward_return_path('chill_main_notification_show', { '_fragment': 'comment-'~comment.id, 'edit': comment.id, 'id': notification.id }) }}" class="btn btn-edit"></a>
                             </li>
                         </ul>
-                        {% endif %}
-                    </div>
-                    {% else %}
-                    <div>
-                        <a id="comment-{{ comment.id }}"></a>
-                        {{ form_start(editedCommentForm) }}
-                        {{ form_widget(editedCommentForm) }}
-
-                        <input type="hidden" name="form" value="edit" />
-
-                        <ul class="record_actions">
-                            <li class="cancel">
-                                <a href="{{ chill_path_forward_return_path('chill_main_notification_show', { '_fragment': 'comment-'~comment.id, 'id': notification.id }) }}" class="btn btn-cancel"></a>
-                            </li>
-                            <li>
-                                <button type="submit" class="btn btn-save"></button>
-                            </li>
-                        </ul>
-                        {{ form_end(editedCommentForm) }}
-                    </div>
                     {% endif %}
-                {% endfor %}
+                </div>
+            {% else %}
+                <div>
+                    <a id="comment-{{ comment.id }}"></a>
+                    {{ form_start(editedCommentForm) }}
+                    {{ form_widget(editedCommentForm) }}
+
+                    <input type="hidden" name="form" value="edit" />
+
+                    <ul class="record_actions">
+                        <li class="cancel">
+                            <a href="{{ chill_path_forward_return_path('chill_main_notification_show', { '_fragment': 'comment-'~comment.id, 'id': notification.id }) }}" class="btn btn-cancel"></a>
+                        </li>
+                        <li>
+                            <button type="submit" class="btn btn-save"></button>
+                        </li>
+                    </ul>
+                    {{ form_end(editedCommentForm) }}
+                </div>
             {% endif %}
+        {% endfor %}
+    {% endif %}
 
-            {% if appendCommentForm is not null %}
-            <div>
-                {{ form_start(appendCommentForm) }}
-                {{ form_widget(appendCommentForm) }}
+    {% if appendCommentForm is not null %}
+        <div>
+            {{ form_start(appendCommentForm) }}
+            {{ form_widget(appendCommentForm) }}
 
-                <input type="hidden" name="form" value="append" />
+            <input type="hidden" name="form" value="append" />
 
-                <ul class="record_actions">
-                    <li>
-                        <button type="submit" class="btn btn-save">{{ 'notification.append_comment'|trans }}</button>
-                    </li>
-                </ul>
-                {{ form_end(appendCommentForm) }}
-            </div>
-            {% endif %}
-
-            <ul class="record_actions sticky-form-buttons">
-                <li class="cancel">
-                    <a href="{{ chill_return_path_or('chill_main_notification_my') }}" class="btn btn-cancel">
-                        {{ 'Cancel'|trans|chill_return_path_label }}
-                    </a>
-                </li>
+            <ul class="record_actions">
                 <li>
-                    <span class="notification_toggle_read_status"
-                        data-notification-id="{{ notification.id }}"
-                        data-notification-current-is-read="1"
-                    ></span>
+                    <button type="submit" class="btn btn-save">{{ 'notification.append_comment'|trans }}</button>
                 </li>
             </ul>
+            {{ form_end(appendCommentForm) }}
         </div>
-    </div>
+    {% endif %}
+
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ chill_return_path_or('chill_main_notification_my') }}" class="btn btn-cancel">
+                {{ 'Cancel'|trans|chill_return_path_label }}
+            </a>
+        </li>
+        <li>
+            {# Vue component #}
+            <span class="notification_toggle_read_status"
+                data-notification-id="{{ notification.id }}"
+                data-notification-current-is-read="1"
+            ></span>
+        </li>
+    </ul>
+</div>
 {% endblock content %}
diff --git a/src/Bundle/ChillMainBundle/translations/messages.fr.yml b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
index 542a1311c..622042e20 100644
--- a/src/Bundle/ChillMainBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
@@ -353,21 +353,24 @@ Created for: Créé pour
 Created by: Créé par
 
 notification:
+    My own notifications: Mes notifications
     Notify: Envoyer une notification
     Notification created: Notification envoyée
     Any notification received: Aucune notification reçue
     Any notification sent: Aucune notification envoyée
     Notifications received: Notifications reçues
-    Notifications sent: Notification envoyées
+    Notifications sent: Notifications envoyées
     comment_appended: Commentaire ajouté
     append_comment: Ajouter un commentaire
     comment_updated: Commentaire mis à jour
     is_unread: Non-lue
-    is_system: Notification automatique
+    is_system: notification automatique
     list: Notifications
     Sent: Envoyé
-    sent_to: Envoyé à
+    to: À
+    sent_to: Destinataire(s)
+    from: De
+    received_from: Expéditeur
     you were notified by %sender%:  Vous avez été notifié par %sender%
     you were notified by system: Vous avez été notifié automatiquement
-    to: À
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
index b0147ebdf..46c13d152 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
@@ -20,6 +20,11 @@ span.badge-thirdparty {
 
 span.badge-user {
     border-bottom-width: 1px;
+    &.system {
+        background-color: $chill-llight-gray;
+        font-style: italic;
+        color: $chill-gray;
+    }
 }
 span.badge-person {
     border-bottom-color: $chill-green;
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/showInNotification.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/showInNotification.html.twig
index 92eb251b0..19b1f4559 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/showInNotification.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/showInNotification.html.twig
@@ -2,7 +2,7 @@
 {% if period is not null %}
     {% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', period) %}
         <a href="{{ path('chill_person_accompanying_course_index', {'accompanying_period_id': notification.relatedEntityId })  }}">
-            Go to Acc. period.
+            Show and Go to Accompanying Course
         </a>
     {% else %}
         You are getting a notification for a period you are not allowed to see. This is the minimal details: {{ period.id }}