Taille texte popup instruction connexion

src/background/background.js

@@ -322,25 +322,25 @@ function showInstructionPopup(details) {
         popup.style.transform = "translate(-50%, -50%)";
         popup.style.backgroundColor = "#a08e9f";
         popup.style.color = "#323046";
-        popup.style.padding = "20px";
+        popup.style.padding = "12px";
         popup.style.borderRadius = "10px";
         popup.style.boxShadow = "0 2px 10px rgba(0, 0, 0, 0.3)";
         popup.style.zIndex = "10000";
         popup.style.fontFamily = "Luciole";
-        popup.style.fontSize = "14px";
+        popup.style.fontSize = "16px";
         popup.style.width = "300px";
         popup.style.textAlign = "center";
   
         popup.innerHTML = \`
-          <h5 style="color: #fff; font-weight: bold; margin-top: 0;">🔑 Connexion à l'extension</h5>
-          <p style="margin: 15px 0;">
-            Après avoir renseigné vos identifiants, cliquez sur 
+          <h5 style="color: #fff; font-weight: bold; margin-top: 2px;">Connexion à l'extension</h5>
+          <p style="margin: 8px 0;">
+            Après avoir renseigné vos identifiants, veuillez cliquer sur 
             <strong>"Se connecter avec BaLex"</strong>.
           </p>
           <button id="close-popup-btn" style="
             width: 100%;
             margin-top: 15px;
-            padding: 10px;
+            padding: 8px;
             border: none;
             background-color: #8d5c70;
             color: #fbfcfc;

src/utils/highlighting.js

@@ -134,18 +134,18 @@ browser.runtime.onMessage.addListener((message) => {
         // Fonction asynchrone pour mettre à jour le style d'un élément surligné en fonction des lexiques qui le concernent
         async function updateHighlightStyle(span, lexIds) {
             if (!lexIds || lexIds.length === 0) {
-                span.style.backgroundColor = "rgba(255, 255, 0, 0.25)";
+                span.style.backgroundColor = "rgba(255, 255, 0, 0.3)";
                 span.style.backgroundImage = "";
                 return;
             }
             if (lexIds.length === 1) {
                 const hexColor = await getColorForLexicon(lexIds[0]);
-                const rgbaColor = hexToRgba(hexColor, 0.25);
+                const rgbaColor = hexToRgba(hexColor, 0.3);
                 span.style.backgroundColor = rgbaColor;
                 span.style.backgroundImage = "";
             } else {
                 const hexColors = await Promise.all(lexIds.map(id => getColorForLexicon(id)));
-                const colors = hexColors.map(hex => hexToRgba(hex, 0.25));
+                const colors = hexColors.map(hex => hexToRgba(hex, 0.3));
                 const n = colors.length;
                 let stops = [];
                 for (let i = 0; i < n; i++) {
@@ -407,7 +407,7 @@ browser.runtime.onMessage.addListener((message) => {
                 span.setAttribute('data-lexicons', JSON.stringify(matchedLexiconIds));
                 
                 if (matchedLexiconIds.length === 0) {
-                    span.style.backgroundColor = "rgba(255, 255, 0, 0.25)";
+                    span.style.backgroundColor = "rgba(255, 255, 0, 0.3)";
                 } else {
                     updateHighlightStyle(span, matchedLexiconIds);
                 }