Merge branch 'ui-modal-de-sauvegarde' into 'master'

Met en forme la modal de sauvegarde

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

src/lib/components/ShareLinkModal.svelte

@@ -27,24 +27,50 @@
     class="bottom-0 fixed flex items-center justify-center left-0 pointer-events-none right-0 top-0"
   >
     <div
-      class="bg-white flex flex-col justify-between max-w-3xl min-w-[240px] p-4 pointer-events-auto rounded"
+      class="bg-white flex flex-col justify-between max-w-xl min-w-[240px] pointer-events-auto rounded"
     >
-      <h2 class="text-2xl text-center">Sauvegarder / partager</h2>
-      <section class="text-base text-center">
-        <p>Votre simulation est enregistrée.</p>
-        <p>Vous pouvez y accéder à tout moment à cette adresse :</p>
-        <code class="text-xs">{url}</code>
+      <div class="flex justify-end px-4 pt-4">
+        <button on:click={closeModal}
+          ><!-- Bouton de fermeture du panneau de gauche -->
+          <div>
+            <svg
+              class="fill-current text-gray-500 hover:text-gray-900"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+              ><path d="M0 0h24v24H0z" fill="none" /><path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              /></svg
+            >
+          </div>
+        </button>
+      </div>
+      <div class="px-8 pb-8">
+        <h2 class="text-xl font-bold text-center mb-5">
+          Sauvegarder ou partager cette simulation
+        </h2>
+        <section class="">
+          <p class="text">
+            Pour sauvegarder votre simulation à tout moment, copiez l'URL
+            suivante :
+          </p>
+          <div class="bg-gray-200 mt-1 mb-5 p-1 rounded ">
+            <code class="text-xs pl-2">{url}</code>
+          </div>
           <div bind:this={clipboardElement} />
+          <div class="text-center mb-3">
             <button
-          class="bg-le-bleu p-2 rounded shadow-md text-sm text-white uppercase hover:bg-blue-900"
+              class="bg-le-bleu py-2 px-8 rounded shadow-md text-sm text-white uppercase hover:bg-blue-900"
               on:click={copyLink}>Copier le lien</button
             >
+          </div>
           <p>
-          Ce lien est public, vous pouvez le partager sur les réseaux sociaux.
+            Cette URL sauvegarde la réforme et les cas types. Ce lien est
+            public, vous pouvez le partager sur les réseaux sociaux.
           </p>
         </section>
-      <div class="flex justify-end mt-8">
-        <button on:click={closeModal}>OK</button>
       </div>
     </div>
   </div>