Web Push prompt button styling fix (#281)

* prompt button style fix * prompt css fix * Fixed image styling
CleverTap · Oct 16, 2024 · a604726 · a604726
1 parent b7139a7
commit a604726
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 18 deletions.
diff --git a/clevertap.js b/clevertap.js
diff --git a/clevertap.js.map b/clevertap.js.map
diff --git a/clevertap.min.js b/clevertap.min.js
diff --git a/src/modules/webPushPrompt/prompt.js b/src/modules/webPushPrompt/prompt.js
@@ -65,13 +65,11 @@ export const createNotificationBox = (configData) => {
   const pnCard = createElementWithAttributes('div', { id: 'pnCard' })
 
   const iconTitleDescWrapper = createElementWithAttributes('div', { id: 'iconTitleDescWrapper' })
-  const iconContainer = createElementWithAttributes('div', { id: 'iconContainer' })
-  const imgElement = createElementWithAttributes('img', {
-    id: 'imgElement',
+  const iconContainer = createElementWithAttributes('img', {
+    id: 'iconContainer',
     src: content.icon.type === 'default' ? `data:image/svg+xml;base64,${PROMPT_BELL_BASE64}` : content.icon.url
   })
 
-  iconContainer.appendChild(imgElement)
   iconTitleDescWrapper.appendChild(iconContainer)
 
   const titleDescWrapper = createElementWithAttributes('div', { id: 'titleDescWrapper' })

diff --git a/src/modules/webPushPrompt/promptStyles.js b/src/modules/webPushPrompt/promptStyles.js
@@ -31,6 +31,7 @@ export const getBoxPromptStyles = (style) => {
         border-color: ${style.card.border.borderColor};
         border-style: solid;
       ` : ''}
+      height: fit-content;
     }
 
     #iconTitleDescWrapper {
@@ -40,9 +41,11 @@ export const getBoxPromptStyles = (style) => {
       gap: 12px;
     }
 
-    #imgElement {
+    #iconContainer {
+      min-width: 64px;
       max-width: 64px;
-      max-height: 64px;
+      aspect-ratio: 1;
+      object-fit: cover;
     }
 
     #titleDescWrapper {
@@ -69,18 +72,23 @@ export const getBoxPromptStyles = (style) => {
     #buttonsContainer {
       display: flex;
       justify-content: space-between;
-      height: 32px;
+      min-height: 32px;
       gap: 8px;
+      align-items: center;
     }
 
     #primaryButton, #secondaryButton {
-      padding: 16px;
+      padding: 6px 24px;
       flex: 1;
       cursor: pointer;
       font-weight: bold;
       display: flex;
       align-items: center;
       justify-content: center;
+      height: max-content;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
     }
 
     #primaryButton {
@@ -100,7 +108,7 @@ export const getBoxPromptStyles = (style) => {
       background-color: ${style.buttons.secondaryButton.buttonColor};
       color: ${style.buttons.secondaryButton.textColor};
       border-radius: ${style.buttons.secondaryButton.borderRadius}px;
-      ${style.buttons.primaryButton.borderEnabled
+      ${style.buttons.secondaryButton.borderEnabled
         ? `
           border-width: ${style.buttons.secondaryButton.border.borderWidth}px;
           border-color: ${style.buttons.secondaryButton.border.borderColor};