Start to fix missing project-steps styles

src/assets/css/src/3.utilities.icons.css

@@ -74,16 +74,22 @@
 [data-icon="chevron-single-left"] { 
   --icon: var(--icon-chevron-single-left)
 }
-[data-icon="votre-brief"] { 
+[data-icon="votre-brief"],
+[data-icon="clientBrief"] { 
   --icon: var(--icon-votre-brief)
 }
-[data-icon="offre-commerciale"] { 
+[data-icon="offre-commerciale"],
+[data-icon="proposal"] { 
   --icon: var(--icon-offre-commerciale)
 }
-[data-icon="brief-enrichi"] { 
+[data-icon="brief-enrichi"],
+[data-icon="extendedBrief"],
+[data-icon="industrialIdeation"] { 
   --icon: var(--icon-brief-enrichi)
 }
-[data-icon="echantillon-virtuel"] { 
+[data-icon="echantillon-virtuel"],
+[data-icon="virtualSample"],
+[data-icon="physicalSample"] { 
   --icon: var(--icon-echantillon-virtuel)
 }
 [data-icon="upload"] { 

src/components/Projects.vue

@@ -65,4 +65,11 @@ function changeTab(newValue) {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+section {
+  --flow-space: var(--space-16);
+}
+section > * {
+  display: block;
+}
+</style>

src/components/project/Project.vue

@@ -13,10 +13,18 @@
       <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
       <ol class="project-steps" data-steps="1">
         <li class="project-step" data-status="in-progress">
-          <span class="pill" data-icon="search">{{
+          <span class="pill" data-icon="clientBrief">{{
             stepsLabels[project.currentStep]
           }}</span>
         </li>
+        <!--
+        <li class="project-step" data-status="in-progress">
+          <span class="pill" data-icon="extendedBrief">Brief enrichi</span>
+        </li>
+        <li class="project-step" data-status="uncompleted">
+          <span class="pill" data-icon="proposal">Proposition commerciales</span>
+        </li>
+        -->
       </ol>
     </article>
   </router-link>
@@ -104,7 +112,8 @@ const { stepsLabels } = useProjectStore();
 }
 
 .project-step[data-status="in-progress"]:only-child::before,
-.project-step[data-status="in-progress"]:only-child::after {
+.project-step[data-status="in-progress"]:only-child::after,
+.project-step[data-status="done"] + [data-status="in-progress"]::before {
   content: "";
   display: inline-block;
   height: 1.25rem;
@@ -112,7 +121,8 @@ const { stepsLabels } = useProjectStore();
   right: 3.75rem;
   bottom: -2rem;
 }
-.project-step[data-status="in-progress"]:only-child::before {
+.project-step[data-status="in-progress"]:only-child::before,
+.project-step[data-status="done"] + [data-status="in-progress"]::before {
   height: 1rem;
   background-repeat: repeat;
   background-position: left center;
@@ -158,6 +168,7 @@ const { stepsLabels } = useProjectStore();
   mask-image: var(--icon-point-active);
 }
 .project-step[data-status="uncompleted"] .pill::after {
+  --icon: var(--icon-point);
   --icon-color: var(--color-grey-300);
 }
 </style>