[design proposal] adding a mixin to style social issue badge

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_debug.scss

@@ -3,7 +3,7 @@ body {
     div.responsive {
         position: fixed;
         top: 0;
-        left: 50%;
+        left: 0;
         background-color: #4a4d50;
         color: white;
         padding: 0.5em;

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_variables.scss

@@ -157,8 +157,10 @@ $chill-yellow:       $yellow;
 $chill-red:          $red;
 $chill-beige:        $beige;
 $chill-pink:         $pink;
-$chill-gray:         $gray-600;
 $chill-dark-gray:    $gray-800;
+$chill-gray:         $gray-600;
+$chill-l-gray:       $gray-400;
+$chill-ll-gray:      $gray-300;
 $chill-light-gray:   $gray-200;
 $chill-llight-gray:  $gray-100;
 // scss-docs-end theme-color-variables
@@ -185,8 +187,10 @@ $chill-colors: (
   "chill-red":          $chill-red,
   "chill-beige":        $chill-beige,
   "chill-pink":         $chill-pink,
-  "chill-gray":         $chill-gray,
   "chill-dark-gray":    $chill-dark-gray,
+  "chill-gray":         $chill-gray,
+  "chill-l-gray":       $chill-l-gray,
+  "chill-ll-gray":      $chill-ll-gray,
   "chill-light-gray":   $chill-light-gray,
   "chill-llight-gray":  $chill-llight-gray,
 );

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

@@ -1,7 +1,8 @@
 // Access to Bootstrap variables and mixins
 @import '~ChillMainAssets/module/bootstrap/shared';
 
-// Override Main generic assets
+// Complete/override Main generic assets
+@import './scss/mixins';
 @import './scss/render_box.scss';
 @import './scss/flex_table.scss';
 

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

@@ -0,0 +1,18 @@
+///
+///  Social Issue mixin
+//   define visual badge for all social issues
+///
+
+$social-issue-color: $chill-pink;
+
+@mixin badge_social_issue {
+    text-transform: capitalize !important;
+    font-weight: 500 !important;
+    border-left: 20px groove $social-issue-color;
+    &:before {
+        content: '\f04b';
+        font-family: ForkAwesome;
+        color: $social-issue-color;
+        margin: 0 0.3em 0 -0.7em;
+    }
+}

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

@@ -1,3 +1,5 @@
+/// variables
+
 /// CHILL ENTITY RENDER BOX
 .chill-entity {
 
@@ -11,6 +13,10 @@
     /// SOCIAL-ISSUE
     &.entity-social-issue {
         margin-right: 0.3em;
+        font-size: 120%;
+        span.badge {
+            @include badge_social_issue;
+        }
     }
 }
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="badge bg-chill-light-gray text-dark">{{ issue.text }}</span>
+  <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
 </template>
 
 <script>
@@ -10,10 +10,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'ChillMainAssets/module/bootstrap/shared';
+@import 'ChillPersonAssets/chill/scss/mixins';
+
 span.badge {
+   @include badge_social_issue;
    font-size: 95%;
-   text-transform: capitalize !important;
-   font-weight: 500 !important;
    margin-bottom: 5px;
    margin-right: 1em;
 }

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig

@@ -97,7 +97,7 @@
                                 <div class="wl-col list">
                                     {% for si in accompanying_period.socialIssues %}
                                         <p class="wl-item">
-                                            {{ si.title|localize_translatable_string }}
+                                            {{ si|chill_entity_render_box }}
                                         </p>
                                     {% endfor %}
                                 </div>

src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig

@@ -1,6 +1,6 @@
 {% set reversed_parents = parents|reverse %}
 <span class="chill-entity entity-social-issue">
-  <span class="badge bg-chill-pink">
+  <span class="badge bg-chill-l-gray text-dark">
     {%- for p in reversed_parents %}
     <span class="parent-{{ loop.revindex0 }}">
       {{ p.title|localize_translatable_string }}{{ options['default.separator'] }}

src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig

@@ -1,7 +1,7 @@
 {%  macro button_person(person) %}
     <li>
-        <a href="{{ path('chill_person_accompanying_period_list', { 'person_id' : person.id }) }}"
+        <a href="{{ path('chill_person_accompanying_course_new') }}"
-           class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying periods'|trans }}"><i class="fa fa-random"></i></a>
+           class="btn btn-sm btn-create change-icon" title="{{ 'Create an accompanying period'|trans }}"><i class="fa fa-random"></i></a>
     </li>
 {% endmacro %}