simplification for duplicated when and re-implement .label class in case it is still used

app/assets/stylesheets/02_utils.scss

@@ -143,6 +143,20 @@
   vertical-align: super;
 }
 
+// Labels that we only want for screen readers
+// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
+.sr-only {
+  border: none;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  word-wrap: normal !important;
+}
+
 // generate spacer utility like bootstrap my-2 -> margin-left/right: 2 * $default-spacer
 // using $direction.key as css modifier, $direction.values to set css properties
 // scale it using $steps

app/assets/stylesheets/labels.scss

@@ -1,13 +1,13 @@
-// Labels that we only want for screen readers
-// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
-.sr-only {
-  border: none;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  width: 1px;
-  overflow: hidden;
-  position: absolute !important;
-  word-wrap: normal !important;
+@import "colors";
+@import "constants";
+
+.label {
+  display: inline-block;
+  padding: 4px $default-spacer;
+  background: $dark-grey;
+  border: 1px solid transparent;
+  color: #FFFFFF;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 18px;
 }

app/helpers/dossier_helper.rb

@@ -62,9 +62,7 @@ module DossierHelper
 
   def class_badge_state(state)
     case state
-    when Dossier.states.fetch(:en_construction)
-      'fr-badge--info'
-    when Dossier.states.fetch(:en_instruction)
+    when Dossier.states.fetch(:en_construction), Dossier.states.fetch(:en_instruction)
       'fr-badge--info'
     when Dossier.states.fetch(:accepte)
       'fr-badge--success'