Modifie le design des expansions panels

src/lib/components/test_cases/TestCaseView.svelte

@@ -132,7 +132,7 @@
                 <div class="origin-center -rotate-90">
                   <div class="flex ">
                     <span
-                      class="mr-2 text-xs uppercase tracking-wide text-gray-500 xl:text-sm"
+                      class="mr-2 text-xs uppercase tracking-wide text-gray-600 xl:text-sm"
                       class:text-le-bleu={name === $waterfall.name}
                       class:font-bold={name === $waterfall.name}
                     >
@@ -303,27 +303,40 @@
           </div>
 
           <!--Bouton pour passer du mode compact au mode waterfall-->
-          <div class="flex justify-end">
+          <div class=" flex w-full justify-between">
             {#if displayMode.compact}
               <a
-                class="flex cursor-pointer gap-1 rounded-t-md border-x border-t bg-gray-100 p-3 text-sm uppercase text-gray-600 hover:underline"
+                class=" w-full cursor-pointer"
                 href={newSimulationUrl({
                   ...displayMode,
                   compact: undefined,
                 })}
                 data-sveltekit-noscroll
-                ><Icon class="h-5 w-5" icon="ri-eye-line" />voir tous
-                dispositifs</a
+                ><div
+                  class="mb-2 flex items-center border-gray-300 py-1 pr-4 text-gray-600 "
+                >
+                  <Icon
+                    class="h-5 min-h-fit w-5"
+                    icon="ri-arrow-right-s-line"
+                  /><span class="tracking-wider "
+                    >Voir tous les dispositifs</span
+                  >
+                </div></a
               >
             {:else}
               <a
-                class="flex cursor-pointer gap-1 rounded-t-md border-x border-t bg-gray-100 p-3 text-sm uppercase text-gray-600 hover:underline"
+                class="w-full cursor-pointer"
                 href={newSimulationUrl({
                   ...displayMode,
                   compact: true,
                 })}
                 data-sveltekit-noscroll
-                ><Icon class="h-5 w-5" icon="ri-eye-off-line" />Masquer</a
+                ><div
+                  class="flex items-center border-b border-gray-300 py-1 pr-4 text-gray-600"
+                >
+                  <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-up-s-line" />
+                  <span class="tracking-wider">Tous les dispositifs</span>
+                </div></a
               >
             {/if}
           </div>

src/lib/components/variables/VariableReferredParameters.svelte

@@ -163,16 +163,17 @@
   {#if billDecomposition?.children === undefined}
     {#if Object.keys(bothRootDirectParameterById).length > 0}
       <button
-        class="mb-3 w-full border-b border-black py-1 pr-4 text-black"
+        class="mb-3 w-full border-b border-gray-300 py-1 pr-4 "
         on:click={() => (openDirectParameters = !openDirectParameters)}
       >
-        <div class="flex justify-between">
+        <div class="flex items-center text-gray-600">
           {#if openDirectParameters}
-            <Icon class="inline-flex h-5 w-5" icon="ri:arrow-up-s-line" />
+            <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-up-s-line" />
           {:else}
-            <Icon class="inline-flex h-5 w-5" icon="ri:arrow-down-s-line" />
-          {/if}
-          <span class="tracking-wider">Principaux paramètres de la loi</span>
+            <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-right-s-line" />
+          {/if}<span class="ml-1 tracking-wider"
+            >Principaux paramètres de la loi</span
+          >
         </div>
       </button>
 
@@ -215,16 +216,15 @@
 
     {#if Object.keys(bothRootParameterById).length > 0}
       <button
-        class="mb-3 w-full border-b border-black py-1 pr-4 text-black"
+        class="mb-3 w-full border-b  border-gray-300 py-1 pr-4 text-gray-600"
         on:click={() => (openAllParameters = !openAllParameters)}
       >
-        <div class="flex justify-between">
+        <div class="flex items-center">
           {#if openAllParameters}
-            <Icon class="inline-flex h-5 w-5" icon="ri:arrow-up-s-line" />
+            <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-up-s-line" />
           {:else}
-            <Icon class="inline-flex h-5 w-5" icon="ri:arrow-down-s-line" />
-          {/if}
-          <span class="tracking-wider"
+            <Icon class="h-5 min-h-fit w-5" icon="ri-arrow-right-s-line" />
+          {/if}<span class="tracking-wider"
             >Autres paramètres affectant le dispositif</span
           >
         </div>