Merge branch 'ui-diff-law-bill-reform' into 'master'

Ui diff law bill reform

See merge request leximpact/leximpact-socio-fiscal-ui!32

src/lib/components/test_cases/TestCaseView.svelte

@@ -459,29 +459,35 @@
         Revenus disponibles du cas type /an
       </p>
     </div>
-    <div class="filter blur-xs place-self-center ">
+    <div class="place-self-center ">
       <p
         class=" text-2xl font-bold"
         title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence"
       >
+        <span class="line-through-bill">
           {euroAmountFormatter.format(
             evaluationByNameArrayByCalculationName.law[situationIndex][
               rootDecompositionName
             ].deltaAtVectorIndex ?? 0,
           )}
+        </span>
         {#if $billName !== undefined}
+          <span class="text-le-rouge-pjl line-through-reform">
             {euroAmountFormatter.format(
               evaluationByNameArrayByCalculationName.bill[situationIndex][
                 rootDecompositionName
               ].deltaAtVectorIndex ?? 0,
             )}
+          </span>
         {/if}
         {#if Object.keys($reform).length > 0}
+          <span class="text-black bg-le-jaune px-1">
             {euroAmountFormatter.format(
               evaluationByNameArrayByCalculationName.amendment[situationIndex][
                 rootDecompositionName
               ].deltaAtVectorIndex ?? 0,
             )}
+          </span>
         {/if}
       </p>
     </div>
@@ -492,7 +498,7 @@
     <div>
       <p class="text-sm leading-none text-center">Coût pour l'entreprise /an</p>
     </div>
-    <div class="filter blur-xs place-self-center">
+    <div class="place-self-center">
       <p
         class="text-base"
         title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence"
@@ -503,18 +509,22 @@
           ].deltaAtVectorIndex ?? 0,
         )}
         {#if $billName !== undefined}
+          <span class="text-le-rouge-pjl">
             {euroAmountFormatter.format(
               evaluationByNameArrayByCalculationName.bill[situationIndex][
                 firstDecompositionName
               ].deltaAtVectorIndex ?? 0,
             )}
+          </span>
         {/if}
         {#if Object.keys($reform).length > 0}
+          <span class="text-black bg-le-jaune px-1">
             {euroAmountFormatter.format(
               evaluationByNameArrayByCalculationName.amendment[situationIndex][
                 firstDecompositionName
               ].deltaAtVectorIndex ?? 0,
             )}
+          </span>
         {/if}
       </p>
     </div>
@@ -527,7 +537,7 @@
         Coût ou gain pour l'État /an
       </p>
     </div>
-    <div class="filter blur-xs place-self-center">
+    <div class=" place-self-center">
       <p
         class="text-base"
         title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence"
@@ -541,6 +551,7 @@
             ].deltaAtVectorIndex ?? 0),
         )}
         {#if $billName !== undefined}
+          <span class="text-le-rouge-pjl">
             {euroAmountFormatter.format(
               (evaluationByNameArrayByCalculationName.bill[situationIndex][
                 rootDecompositionName
@@ -549,8 +560,10 @@
                   firstDecompositionName
                 ].deltaAtVectorIndex ?? 0),
             )}
+          </span>
         {/if}
         {#if Object.keys($reform).length > 0}
+          <span class="text-le-rouge-pjl">
             {euroAmountFormatter.format(
               (evaluationByNameArrayByCalculationName.amendment[situationIndex][
                 rootDecompositionName
@@ -559,6 +572,7 @@
                   firstDecompositionName
                 ].deltaAtVectorIndex ?? 0),
             )}
+          </span>
         {/if}
       </p>
     </div>

tailwind.config.cjs

@@ -23,6 +23,7 @@ const config = {
       },
       blur: {
         xs: '1.2px',
+        xxs: '0.8px',
       }
     },
     fontFamily: {
@@ -33,6 +34,23 @@ const config = {
   variants: {
     extend: {},
   },
+  plugins: [
+    function ({addUtilities}) {
+      const extendLineThrough = {
+          '.line-through-bill': {
+              'textDecoration': 'line-through',
+              'text-decoration-color': 'rgba(255, 107, 107,0.7)',
+              'text-decoration-thickness': '2px'
+          },
+          '.line-through-reform': {
+            'textDecoration': 'line-through',
+            'text-decoration-color': 'rgba(222, 213, 0,0.7)',
+            'text-decoration-thickness': '2px'
+        },
+      }
+      addUtilities(extendLineThrough)
+ }
+  ],
 }
 
 module.exports = config