household banner: badge-member and holder mark in person theme

src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss

@@ -157,12 +157,19 @@ div.banner {
             span.badge-member {
                 flex-shrink: 0; flex-grow: 0; flex-basis: auto;
                 color: $white;
-                border: 1px solid #ffffff3b;
+                border: 1px solid transparentize($white, 0.75);
+                border-bottom: 3px solid transparentize( shade-color( $chill-green, 20%), 0.3);
                 border-radius: 8px;
-                padding: 0.4em 0.8em;
+                padding: 0.2em 0.7em;
                 margin-bottom: 0.2em;
                 margin-right: 0.3em;
-                &.holder { order: -1; }
+
+                &.holder {
+                    order: -1;
+                    .fa-holder .text-success {
+                        color: transparentize( shade-color( $chill-green, 20%), 0.3) !important;
+                    }
+                }
                 &.child { order: 2; }
             }
         }

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss

@@ -49,3 +49,15 @@ span.badge-person {
 span.badge-thirdparty {
     border-bottom-color: shade-color($chill-pink, 10%);
 }
+
+// household holder mark
+span.fa-holder {
+    width: 1em;
+    margin: -10px 0.3em -8px 0;
+    i:last-child {
+        font-weight: 900;
+        color: white;
+        font-size: 70%;
+        font-family: "Open Sans Extrabold";
+    }
+}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -160,17 +160,6 @@ export default {
 
 <style lang='scss'>
 
-span.fa-holder {
-   width: 1em;
-   margin: -10px 0.3em -8px 0;
-   i:last-child {
-      font-weight: 900;
-      color: white;
-      font-size: 70%;
-      font-family: "Open Sans Extrabold";
-   }
-}
-
 .lastname:before{
     content: " "
 }

src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig

@@ -21,16 +21,19 @@
                             </span>
 
                             {%- for m in members|slice(0, 5) -%}
+                                <a href="{{ path('chill_person_view', { person_id: m.person.id}) }}">
                                 <span
                                     class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
                                     title="{{ m.position.label.fr }}">
                                     {%- if m.holder %}
-                                        <span class="badge bg-chill-light-gray text-chill-gray">
+                                        <span class="fa-stack fa-holder" title="{{ 'household.holder'|trans }}">
-                                        {{ 'household.holder'|trans }}
+                                            <i class="fa fa-circle fa-stack-1x text-success"></i>
-                                    </span>
+                                            <i class="fa fa-stack-1x">T</i>
+                                        </span>
                                     {% endif -%}
-                                    {{- m.person|chill_entity_render_box({'addLink': false}) -}}
+                                    {{- m.person|chill_entity_render_box() -}}
                                 </span>
+                                </a>
                             {%- endfor -%}
 
                             {% if members|length > 5 %}