fix: adjust font sizes and improve button shadow effects in modal

bluewave-labs · Jan 7, 2025 · a2a5c0e · a2a5c0e
1 parent 024adfe
commit a2a5c0e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/jsAgent/links.js b/jsAgent/links.js
@@ -22,7 +22,7 @@ const global_content_html=`
                         </clipPath>
                     </defs>
                 </svg>
-                <a href="{{link}}" target="_blank" style="color:{{linkFontColor}}; text-decoration: none; font-family: Inter; font-size: 1rem; font-weight: 400;">{{title}}</a>
+                <a href="{{link}}" target="_blank" style="color:{{linkFontColor}}; text-decoration: none; font-family: Inter; font-size: 13px; font-weight: 400;">{{title}}</a>
             </li>
         `;
 
@@ -96,7 +96,7 @@ bw.links={
         return temp_content_html;
     },
     putFooter: function(){
-        return '<p style="margin-bottom: 0px; margin-top: 0px; background: white;; padding: 14px 0 11px;border-top: 1px solid #ebebeb; font-family: Inter; font-size: 0.688rem; font-weight: 400; line-height: 2.12; text-align: center;">Powered by BlueWave Onboarding</p>';
+        return '<p style="margin-bottom: 0px; margin-top: 0px; background: white;; padding: 14px 0 11px;border-top: 1px solid #ebebeb; font-family: Inter; font-size: 10px; font-weight: 400; line-height: 2.12; text-align: center;">Powered by BlueWave Onboarding</p>';
     },
     bindClick : function(){
         bw.util.bindLive("#bw-link-icon", "click", function(){

diff --git a/jsAgent/popup.js b/jsAgent/popup.js
@@ -51,7 +51,7 @@ bw.popup = {
 
         let temp_html = `
             <div id='bw-modal' style='position: fixed; top: 180px; left: 50%; transform: translate(-50%, -50%); width: ${size.width}px; height: ${size.height}px; display: block; z-index: 1000; border: 1px solid var(--light-border-color); box-sizing: border-box; padding-top: 100px; background-color: rgb(255 255 255 / 0%);;'>
-                <div class='modal-content' style='border-radius: 4px; position: relative; margin: auto;padding: 0;border: 1px solid #888; background-color: white;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);'>
+                <div class='modal-content' style='border-radius: 4px; position: relative; margin: auto;padding: 0;border: 1px solid #D0D5DD; background-color: white;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;'>
                     ${bw.popup.addHeader(option.header, option.headerBackgroundColor, option.headerColor, option.padding)}
                     <div class="modal-body" style='padding: ${option.padding}px ${option.padding}px; display: flex; justify-content: space-between; flex-direction: column; box-sizing: border-box; font-family: "Inter", sans-serif; font-size: 14px; '>
                         ${option.content}
@@ -80,7 +80,7 @@ bw.popup = {
                 transition: background-color 0.3s, border-color 0.3s; min-width: 64px; padding: 6px 16px; border: 0; font-family: Inter; font-weight: 500; font-size: 0.875rem; line-height: 1.75;">${text}</button>
             </div>`;
         return buttonHtml;
-    },  
+    },
     bindEvents: function(btnEvent, btnlink){
         document.getElementById('bw-modal-close').addEventListener('click', function(){
             bw.popup.hideModal();
@@ -98,12 +98,26 @@ bw.popup = {
                 window.open(btnlink);
             }
         });
-        button.addEventListener('mouseover', function(){
-            button.style.boxShadow = '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);';   
+
+        button.addEventListener('mouseenter', function(e) {
+            console.log("mouse over");
+            e.target.style.boxShadow = '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)'
         });
-        button.addEventListener('mouseout', function(){
-            button.style.boxShadow = 'none';   
+
+        button.addEventListener('mouseleave', function(e) {
+            console.log("mouse out");
+            e.target.style.boxShadow = 'none';
         });
+
+
+        // button.addEventListener('mouseover', function(e){
+        //     console.log("mouse over");
+        //     e.target.style.boxShadow = '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);';   
+        // });
+        // button.addEventListener('mouseout', function(e){
+        //     console.log("mouse out");
+        //     e.target.style.boxShadow = 'none';   
+        // });
     },
     hideModal: function(){
         document.getElementById('bw-overlay').style.display = 'none';