From 8f2ac853d424eb6aa990b6bba045968793ba47ca Mon Sep 17 00:00:00 2001
From: Ananda <ananda10@gmail.com>
Date: Tue, 5 Nov 2024 13:34:01 +0100
Subject: [PATCH] style: review style

---
 .../assets/remixicon.light.symbol.svg         |  5 +++++
 .../widget/templates/common/header.ejs        |  8 +++++++-
 .../widget/templates/stats/default.1.ejs      | 20 +++++++++++++++++--
 .../widget/templates/stats/personas.1.ejs     | 12 +++++++----
 4 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/server/src/services/widget/templates/assets/remixicon.light.symbol.svg b/server/src/services/widget/templates/assets/remixicon.light.symbol.svg
index 496f5221..689e6709 100644
--- a/server/src/services/widget/templates/assets/remixicon.light.symbol.svg
+++ b/server/src/services/widget/templates/assets/remixicon.light.symbol.svg
@@ -34,4 +34,9 @@
             d="M12 0.585693L18 6.58569V9H22V19H23V21H1V19H2V9H6V6.58569L12 0.585693ZM18 19H20V11H18V19ZM6 11H4V19H6V11ZM8 7.41412V18.9999H11V12H13V18.9999H16V7.41412L12 3.41412L8 7.41412Z">
         </path>
     </symbol>
+    <symbol viewBox="0 0 24 24" id="ri-information-line">
+        <path
+            d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z">
+        </path>
+    </symbol>
 </svg>
\ No newline at end of file
diff --git a/server/src/services/widget/templates/common/header.ejs b/server/src/services/widget/templates/common/header.ejs
index aa96de22..9b56c13b 100644
--- a/server/src/services/widget/templates/common/header.ejs
+++ b/server/src/services/widget/templates/common/header.ejs
@@ -149,7 +149,7 @@
   .card {
     margin-top: 10px;
     padding: 10px;
-    margin-bottom: 15px;
+    margin-bottom: 2rem;
   }
 
   .card-footer {
@@ -171,6 +171,12 @@
     margin-right: 0;
   }
 
+  .external-small[target=_blank]:after {
+    --icon-size: 0.75rem;
+    height: var(--icon-size);
+    width: var(--icon-size);
+  }
+
 
   @media screen and (min-width: <%=options.responsiveWidth %>) {}
 
diff --git a/server/src/services/widget/templates/stats/default.1.ejs b/server/src/services/widget/templates/stats/default.1.ejs
index 0609c653..3d188972 100644
--- a/server/src/services/widget/templates/stats/default.1.ejs
+++ b/server/src/services/widget/templates/stats/default.1.ejs
@@ -106,6 +106,13 @@
       vertical-align: text-top;
     }
 
+
+    .block-title .description {
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 28px;
+    }
+
     .body-description {
       margin-bottom: 10px;
     }
@@ -314,7 +321,16 @@
 
     @media screen and (max-width: 30em) {
       .block-title {
-        font-size: 12px;
+        font-size: 16px;
+      }
+
+      .block-title .description {
+        font-size: 20px;
+      }
+
+      .block-title .icon {
+        width: 22px;
+        height: 22px;
       }
     }
   </style>
@@ -427,7 +443,7 @@
     <% } %>
 
     <div class="card-footer">
-      Données issues du dispositif <a target="_blank" href="https://beta.gouv.fr/startups/exposition-ij.html"><%= data.filiere === "superieur" ? "InserSup" : "InserJeunes" %></a> promotions <%= millesimesDouble ? millesimes[0] + " et " + millesimes[1] : millesimes[0] %>. <a target="_blank" href="https://documentation.exposition.inserjeunes.beta.gouv.fr/"> D’où viennent ces données ?</a>
+      Données issues du dispositif <a target="_blank" class="external-small" href="https://beta.gouv.fr/startups/exposition-ij.html"><%= data.filiere === "superieur" ? "InserSup" : "InserJeunes" %></a> promotions <%= millesimesDouble ? millesimes[0] + " et " + millesimes[1] : millesimes[0] %>. <a target="_blank" class="external-small" href="https://documentation.exposition.inserjeunes.beta.gouv.fr/"> D’où viennent ces données ?</a>
     </div>
   </div>
 </body>
diff --git a/server/src/services/widget/templates/stats/personas.1.ejs b/server/src/services/widget/templates/stats/personas.1.ejs
index 7f141198..f273c88d 100644
--- a/server/src/services/widget/templates/stats/personas.1.ejs
+++ b/server/src/services/widget/templates/stats/personas.1.ejs
@@ -28,8 +28,10 @@
     <div class="block modal-link plausible-event-name=Modal+Open+<%= key %> <%= taux[key].value == 0 ? "grey-variant" : infos[key].colorText %>" onClick="showModal('<%= key %>')">
       <div class="block-title">
         <div>
-          <div><%= taux[key].description %></div>
-          <div><%= infos[key].title %> ⓘ</div>
+          <div class="description"><%= taux[key].description %></div>
+          <div><%= infos[key].title %> <svg class="remix icon">
+              <use xlink:href="#ri-information-line" />
+            </svg></div>
         </div>
       </div>
     </div>
@@ -42,11 +44,13 @@
   <% if (taux[key].value > 0) { %>
   <div onClick="showModal('<%= key %>')" class="block block-<%= key %> modal-link plausible-event-name=Modal+Open+<%= key %> <%= taux[key].value == 0 ? "grey-variant" : infos[key].colorText %>">
     <div class="block-title">
-      <div><%= taux[key].description %></div>
+      <div class="description"><%= taux[key].description %></div>
       <div>
         <svg class="remix icon">
           <use xlink:href="<%= infos[key].icon %>" />
-        </svg><%= infos[key].title %> ⓘ
+        </svg><%= infos[key].title %> <svg class="remix icon">
+          <use xlink:href="#ri-information-line" />
+        </svg>
       </div>
     </div>
   </div>