Graphisme des références législatives

src/lib/components/variables/VariableReferredScaleParameter.svelte

@@ -102,23 +102,6 @@
       Barème depuis {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}
     </p>
 
-    {#if billReferences !== undefined && billReferences.length > 0}
-      <ul class="text-xs">
-        {#each billReferences as { href, note, title }}
-          <li>
-            {#if href === undefined}{title}{:else}<a
-                class="link"
-                {href}
-                target="_blank">{title ?? "Source"}</a
-              >{/if}
-            {#if note}
-              <p>{note}</p>
-            {/if}
-          </li>
-        {/each}
-      </ul>
-    {/if}
-
     <div class="flex mt-3 items-baseline text-gray-600 text-xs">
       <div class="flex items-center">
         <div class="flex text-gray-600 text-sm">
@@ -197,4 +180,32 @@
       </div>
     </div>
   </div>
+  <!--Référence législative-->
+  <div class="bg-le-gris-dispositif-ultralight rounded-b py-2">
+    {#if billReferences !== undefined && billReferences.length > 0}
+      <ul class="mx-2 text-sm">
+        {#each billReferences as { href, note, title }}
+          <li class="text-xs">
+            {#if href === undefined}{title}{:else}
+              <a class="link" {href} target="_blank">
+                <!--Material UI Icon Assignment-->
+                <svg
+                  class="fill-current w-4 h-4 inline"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  width="24px"
+                  fill="#000000"
+                  ><path d="M0 0h24v24H0V0z" fill="none" /><path
+                    d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"
+                  /></svg
+                >{title ?? "Source"}</a
+              >{/if}
+            {#if note}
+              <p>{note}</p>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
 </section>

src/lib/components/variables/VariableReferredValueParameter.svelte

@@ -108,23 +108,6 @@
     {#if valueError !== null}<p class="text-red-500">{valueError}</p>{/if}
   </div>
 
-  {#if billReferences !== undefined && billReferences.length > 0}
-    <ul class="bg-gray-100 mx-2 text-xs">
-      {#each billReferences as { href, note, title }}
-        <li>
-          {#if href === undefined}{title}{:else}<a
-              class="link"
-              {href}
-              target="_blank">{title ?? "Source"}</a
-            >{/if}
-          {#if note}
-            <p>{note}</p>
-          {/if}
-        </li>
-      {/each}
-    </ul>
-  {/if}
-
   <div class="bg-gray-100 flex items-baseline text-gray-600 text-xs p-2">
     <div class="flex items-center">
       <div class="flex text-gray-600 text-sm">
@@ -203,4 +186,34 @@
       </div>
     </div>
   </div>
+  <div class="bg-le-gris-dispositif-ultralight rounded-b py-2">
+    {#if billReferences !== undefined && billReferences.length > 0}
+      <ul class="mx-2 text-xs">
+        {#each billReferences as { href, note, title }}
+          <li>
+            {#if href === undefined}{title}{:else}<a
+                class="link"
+                {href}
+                target="_blank"
+              >
+                <!--Material UI Icon Assignment-->
+                <svg
+                  class="fill-current w-4 h-4 inline"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  width="24px"
+                  fill="#000000"
+                  ><path d="M0 0h24v24H0V0z" fill="none" /><path
+                    d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"
+                  /></svg
+                >{title ?? "Référence législative sans titre"}</a
+              >{/if}
+            {#if note}
+              <p>{note}</p>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
 </section>