From 9c251322163820b25115bd5726a46851bf84f2a4 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sat, 21 Aug 2021 12:38:26 +0200
Subject: [PATCH] socialissues badge style in multiselect

---
 .../Resources/public/chill/scss/mixins.scss   |  4 +--
 .../public/chill/scss/person_with_period.scss | 30 ++-----------------
 .../components/SocialIssue.vue                | 19 +++++++++---
 3 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
index ec6e8a791..488281914 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
@@ -14,7 +14,7 @@ $social-action-color: $orange;
         content: '\f04b';
         font-family: ForkAwesome;
         color: $social-issue-color;
-        margin: 0 0.3em 0 -0.7em;
+        margin: 0 0.3em 0 -0.75em;
     }
 }
 
@@ -31,6 +31,6 @@ $social-action-color: $orange;
         content: '\f04b';
         font-family: ForkAwesome;
         color: $social-action-color;
-        margin: 0 0.3em 0 -0.7em;
+        margin: 0 0.3em 0 -0.75em;
     }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss
index 2443c4295..6f7b24df0 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss
@@ -41,38 +41,12 @@ div.list-with-period {
          div.date {}
          div.user {}
       }
-   }
-
-
-      /*
-      div.header,
-      div.list-content {
-         width: calc(100% - 40px);
-         margin-left: 40px;
-      }
-      div.header {
-         position: relative;
-         a.btn {
-            position: absolute;
-            width: 30px;
-            height: 30px;
-            top: 10px;
-            left: -40px;
-            padding: 0;
-            i {
-               padding: 5px;
-            }
-         }
-         span.user {
-            margin-left: 1em;
-         }
-      }
-      div.list-content {
+      div.list {
          span.more {
             font-style: italic;
          }
       }
-      */
+   }
 }
 
 /// TODO
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index 951074b13..32ee00b71 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -73,16 +73,27 @@ export default {
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
 <style lang="scss">
+@import 'ChillMainAssets/module/bootstrap/shared';
+@import 'ChillPersonAssets/chill/scss/mixins';
+
    span.multiselect__tag {
-      background: var(--bs-chill-orange);
+      @include badge_social_issue;
+      background: $chill-l-gray;
+      color: $dark;
    }
    span.multiselect__option--highlight {
       &::after {
-         background: var(--bs-chill-green);
+         background: $green;
       }
-      &.multiselect__option--selected::after {
-         background: var(--bs-chill-red);
+      &.multiselect__option--selected {
+         &::after {
+            background: $red;
+         }
       }
    }
 </style>
+
+
+