Merge branch 'ajuste-ui-modale-selection-cas-types' into 'master'

Ajuste ui modale selection cas types

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

src/lib/components/WaterfallView.svelte

@@ -115,7 +115,7 @@
 {#if visibleDecompositions.length > 0}
   <div use:signalFirstWaterfall>
     <!-- partie gauche dispositifs et ticket de caisse-->
-    <div class="h-5 bg-gradient-to-b from-gray-100 to-transparent" />
+
     <div class="flex justify-between ">
       <!-- Navigation dispositifs-->
       <div class="w-3/5 flex-auto">

src/lib/components/test_cases/TestCaseCompareModal.svelte

@@ -101,10 +101,21 @@
         <div
           class="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all"
         >
-          <DialogTitle as="h3" class="mb-5 text-2xl font-bold text-black">
+          <div class="flex items-center justify-between text-black">
+            <DialogTitle as="h3" class="text-2xl font-bold text-black">
               Comparer ce cas type avec :
             </DialogTitle>
+
+            <button
+              class="text-gray-400 hover:text-black"
+              on:click={closeModal}
+              type="button"
+            >
+              <Icon class="ml-2 h-9 w-9" icon="ri-close-line" /></button
+            >
+          </div>
           <DialogDescription as="div" class="mx-2 mt-2">
+            <Icon class="ml-2 h-5 w-5" icon="ri-ri-close-line" />
             <ul class="list-disc">
               <li class="mt-4">
                 <span class="text-lg"

src/lib/components/test_cases/TestCaseCompareView.svelte

@@ -434,9 +434,11 @@
   </div>
   <div id="situation_{situationsToCompareIndex.join('_')}_waterfall">
     {#if variableSummaryByName !== undefined}
-      <div class="flex justify-between">
+      <div class="flex justify-between bg-gray-100">
         <!--Onglets-->
-        <div class="flex w-2/12 flex-col justify-between bg-gray-100 md:w-1/12">
+        <div
+          class="flex max-h-[38em] min-h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
+        >
           {#each waterfalls as { icon, label, name }}
             <button
               class="flex grow items-center justify-around shadow-inner"
@@ -469,12 +471,7 @@
         </div>
         <!-- Impacts et waterfall -->
         <div
-          class="{displayMode.parametersVariableName ===
-            'csg_deductible_salaire' ||
-          displayMode.parametersVariableName === 'csg_imposable_salaire' ||
-          displayMode.parametersVariableName === 'irpp_economique'
-            ? 'md:h-[calc(100vh-20rem)] 2xl:h-[calc(100vh-17rem)]'
-            : 'md:h-[calc(100vh-21rem)] 2xl:h-[calc(100vh-18rem)]'} w-10/12 overflow-y-auto border-b-2 border-r border-gray-200 bg-[url('/background_image/background_compareview_body.svg')] bg-cover bg-center bg-no-repeat px-3 text-center md:w-11/12"
+          class="min-h-[30em] w-10/12 border-b-2 border-r border-gray-200 bg-[url('/background_image/background_compareview_body.svg')] bg-cover bg-center bg-no-repeat px-3 text-center md:w-11/12"
         >
           <div class="relative flex-col border-gray-400 p-3 pb-6">
             {#if Object.values($calculationByName).filter((calculation) => calculation.running && (calculation.situationIndex === undefined || situationsToCompareIndex.includes(calculation.situationIndex))).length > 0}

src/lib/components/test_cases/TestCaseSelectModal.svelte

 <script lang="ts">
+  import Icon from "@iconify/svelte"
   import TestCaseSummary from "$lib/components/test_cases/TestCaseSummary.svelte"
   import {
     Dialog,
@@ -75,14 +76,25 @@
         <div
           class="my-8 inline-block w-full max-w-6xl transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all"
         >
-          <DialogTitle as="h3" class="mb-5 text-3xl font-bold text-black">
+          <div class="flex justify-between  text-black">
+            <DialogTitle as="h3" class=" text-3xl font-bold ">
               Choisir un cas type
             </DialogTitle>
+
+            <button
+              class="text-gray-400 hover:text-black"
+              on:click={closeModal}
+              type="button"
+            >
+              <Icon class="ml-2 h-10 w-10" icon="ri-close-line" /></button
+            >
+          </div>
           <DialogDescription as="div" class="mt-2">
             <div class="mb-10 text-lg">
               <span class="font-semibold ">Sélectionnez un cas type</span>, que
               vous pourrez ensuite modifier :
             </div>
+
             <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
               {#each $testCases as situation, situationIndex}
                 <div

src/lib/components/test_cases/TestCaseSummary.svelte

@@ -316,8 +316,8 @@
           title="Éditer ce cas type"
           id="situation_{situationIndex}_edit"
         >
-          <Icon icon="ri-pencil-fill" class="h-5 w-5" />
-          <span class="text-sm uppercase">éditer</span>
+          <Icon icon="ri-pencil-fill" class="h-6 w-6 sm:h-5 sm:w-5" />
+          <span class="hidden text-sm uppercase sm:flex">éditer</span>
         </button>
       {/if}
     </div>

src/lib/components/test_cases/TestCaseView.svelte

@@ -74,7 +74,7 @@
 </script>
 
 <div
-  class="relative w-full place-self-start rounded-lg border border-gray-200 shadow-md md:mb-5"
+  class="w-full place-self-start rounded-lg border border-gray-200 shadow-md md:mb-5 "
   id="situation_{situationIndex}"
 >
   <div
@@ -94,11 +94,11 @@
 
   <div id="situation_{situationIndex}_waterfall" class="bg-white">
     {#if variableSummaryByName !== undefined}
-      <div class="flex justify-between">
+      <div class="flex justify-between bg-gray-100">
         {#if !displayMode.compact}
           <!--Onglets-->
           <div
-            class="flex w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
+            class="flex max-h-[38em] min-h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
           >
             {#each waterfalls as { icon, label, name }}
               <button
@@ -134,14 +134,9 @@
 
         <!--Impacts et waterfall-->
         <div
-          class="{displayMode.parametersVariableName ===
-            'csg_deductible_salaire' ||
-          displayMode.parametersVariableName === 'csg_imposable_salaire' ||
-          displayMode.parametersVariableName === 'irpp_economique'
-            ? 'md:max-h-[calc(100vh-20rem)] 2xl:max-h-[calc(100vh-17rem)]'
-            : 'md:max-h-[calc(100vh-21rem)] 2xl:max-h-[calc(100vh-18rem)]'} {displayMode.compact
-            ? 'w-full h'
-            : 'w-10/12 md:w-11/12'} overflow-y-auto rounded-b-lg bg-white px-1 md:px-3 "
+          class="{displayMode.compact
+            ? 'w-full'
+            : 'w-10/12 md:w-11/12'} rounded-b-lg bg-white px-1 md:px-3 "
         >
           <div class="relative flex-col border-gray-400 p-3 pb-5">
             {#if Object.values($calculationByName).filter((calculation) => calculation.running && (calculation.situationIndex === undefined || calculation.situationIndex === situationIndex)).length > 0}
@@ -280,6 +275,7 @@
           </div>
 
           {#if !displayMode.compact}
+            <div class="h-5 bg-gradient-to-b from-gray-100 to-transparent" />
             <WaterfallView
               {decompositionByName}
               {displayMode}

src/routes/index.svelte

@@ -1076,10 +1076,10 @@
           </div>
         {/if}
 
-        <div class="items-center justify-between px-4 md:flex md:px-0">
+        <div class=" mb-3 flex items-center justify-between px-4 md:px-0">
           <div class="flex-none">
             <h2
-              class="mb-1 mr-2 text-2xl font-bold text-black md:mb-3 md:pt-2.5 lg:pt-1 lg:text-3xl"
+              class=" text-blackmd:pt-2.5 mr-2 text-2xl font-bold lg:pt-1 lg:text-3xl"
             >
               Impacts cas type/an
             </h2>
@@ -1092,8 +1092,7 @@
               ><Icon
                 class="mr-2 h-4 w-4 md:mr-0 lg:mr-2"
                 icon="ri-user-add-fill"
-              /><span class="flex md:hidden lg:flex">Changer de cas type</span
-              ></button
+              /><span class="">Changer cas type</span></button
             >
           {/if}
         </div>