@product7/feedback-sdk 1.5.3 → 1.5.7

package/src/styles/survey.js

@@ -21,10 +21,11 @@ export const surveyStyles = `
 .feedback-survey {
   position: fixed;
   z-index: var(--z-modal);
-  background: var(--color-white);
-  border-radius: var(--radius-2xl);
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
-  padding: var(--spacing-6);
+  background: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg);
+  padding: var(--spacing-8);
   min-width: 320px;
   max-width: 400px;
   font-family: inherit;
@@ -44,56 +45,77 @@ export const surveyStyles = `
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  width: min(680px, calc(100vw - 24px));
+  max-width: 680px;
 }
 
 .feedback-survey-bottom {
   bottom: 0;
   left: 0;
   right: 0;
-  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+  border-radius: 10px 10px 0 0;
   max-width: none;
 }
 
 .feedback-survey-close {
   position: absolute;
-  top: var(--spacing-3);
-  right: var(--spacing-3);
+  top: var(--spacing-4);
+  right: var(--spacing-4);
   background: none;
   border: none;
   cursor: pointer;
   color: var(--color-neutral-500);
   padding: 0;
-  width: 28px;
-  height: 28px;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   transition: all var(--transition-base);
 }
 
+.feedback-survey-close svg {
+  width: 18px;
+  height: 18px;
+}
+
 .feedback-survey-close:hover {
   background: var(--color-neutral-100);
   color: var(--color-neutral-900);
 }
 
+.feedback-survey-close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
 .feedback-survey-title {
   margin: 0 0 var(--spacing-2) 0;
   font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-bold);
-  padding-right: var(--spacing-6);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+  padding-right: var(--spacing-12);
   color: var(--color-text-primary);
 }
 
 .feedback-survey-description {
   color: var(--color-text-secondary);
-  margin: 0 0 var(--spacing-5) 0;
-  font-size: var(--font-size-base);
+  margin: 0 0 var(--spacing-4) 0;
+  font-size: var(--font-size-md);
   line-height: var(--line-height-relaxed);
 }
 
+.feedback-survey-description-primary .feedback-survey-description {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+  padding-right: var(--spacing-12);
+}
+
 .feedback-survey-content {
-  margin-bottom: var(--spacing-4);
+  margin-bottom: var(--spacing-3);
 }
 
 /* ========================================
@@ -110,7 +132,7 @@ export const surveyStyles = `
   width: 28px;
   height: 36px;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   background: var(--color-surface);
   cursor: pointer;
   font-size: var(--font-size-sm);
@@ -121,8 +143,8 @@ export const surveyStyles = `
 }
 
 .feedback-survey-nps-btn:hover {
-  border-color: var(--color-primary);
-  background: var(--color-white);
+  background: var(--color-neutral-100);
+  border-color: var(--color-border);
 }
 
 .feedback-survey-nps-btn.selected {
@@ -145,7 +167,7 @@ export const surveyStyles = `
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 36px;
+  font-size: 28px;
   transition: transform var(--transition-fast);
   padding: var(--spacing-2);
 }
@@ -184,8 +206,8 @@ export const surveyStyles = `
 }
 
 .feedback-survey-ces-btn:hover {
-  border-color: var(--color-primary);
-  background: var(--color-white);
+  background: var(--color-neutral-100);
+  border-color: var(--color-border);
 }
 
 .feedback-survey-ces-btn.selected {
@@ -194,6 +216,56 @@ export const surveyStyles = `
   color: var(--color-white);
 }
 
+.feedback-survey-rating-scale {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--color-white);
+}
+
+.feedback-survey-rating-scale-btn {
+  flex: 1;
+  width: auto;
+  height: auto;
+  min-height: 64px;
+  padding: 0;
+  border: 0;
+  border-right: 1px solid var(--color-neutral-300);
+  border-radius: 0;
+  background: var(--color-white);
+  cursor: pointer;
+  font-size: clamp(16px, 3vw, 22px);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-black);
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow var(--transition-fast);
+  position: relative;
+}
+
+.feedback-survey-rating-scale-btn:last-child {
+  border-right: none;
+}
+
+.feedback-survey-rating-scale-btn:hover {
+  background: var(--color-neutral-100);
+}
+
+.feedback-survey-rating-scale-btn:focus-visible {
+  outline: none;
+  z-index: 1;
+  box-shadow: inset 0 0 0 3px var(--color-primary);
+}
+
+.feedback-survey-rating-scale-btn.selected {
+  background: var(--color-primary-light);
+  color: var(--color-primary-active);
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+}
+
 .feedback-survey-labels {
   display: flex;
   justify-content: space-between;
@@ -202,6 +274,14 @@ export const surveyStyles = `
   color: var(--color-text-tertiary);
 }
 
+.feedback-survey-rating-scale + .feedback-survey-labels {
+  margin-top: var(--spacing-3);
+  padding: 0 var(--spacing-1);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-tertiary);
+}
+
 /* ========================================
    FREQUENCY
    ======================================== */
@@ -226,8 +306,8 @@ export const surveyStyles = `
 }
 
 .feedback-survey-freq-btn:hover {
-  border-color: var(--color-primary);
-  background: var(--color-white);
+  background: var(--color-neutral-100);
+  border-color: var(--color-border);
 }
 
 .feedback-survey-freq-btn.selected {
@@ -384,7 +464,7 @@ export const surveyStyles = `
   border: 1px solid var(--color-primary);
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-medium);
   cursor: pointer;
   font-family: inherit;
   transition: all var(--transition-base);
@@ -410,7 +490,7 @@ export const surveyStyles = `
   color: var(--color-white);
   padding: var(--spacing-3) var(--spacing-5);
   border-radius: var(--radius-xl);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   z-index: var(--z-notification);
   box-shadow: var(--shadow-lg);
@@ -430,6 +510,7 @@ export const surveyStyles = `
 @media (max-width: 768px) {
   .feedback-survey {
     min-width: 300px;
+    padding: var(--spacing-6);
   }
 
   .feedback-survey-bottom {
@@ -443,7 +524,24 @@ export const surveyStyles = `
   }
 
   .feedback-survey-csat-btn {
-    font-size: 32px;
+    font-size: 24px;
+  }
+
+  .feedback-survey-title {
+    font-size: var(--font-size-lg);
+  }
+
+  .feedback-survey-description-primary .feedback-survey-description {
+    font-size: var(--font-size-md);
+  }
+
+  .feedback-survey-rating-scale-btn {
+    min-height: 52px;
+    font-size: clamp(14px, 6vw, 18px);
+  }
+
+  .feedback-survey-rating-scale + .feedback-survey-labels {
+    font-size: var(--font-size-xs);
   }
 }
 `;

package/src/widgets/BaseWidget.js

@@ -18,7 +18,7 @@ export class BaseWidget {
 			backgroundColor: options.backgroundColor || '#ffffff',
 			textColor: options.textColor || '#1F2937',
 			autoShow: false,
-			showBackdrop: true,
+			showBackdrop: false,
 			customStyles: {},
 			suppressAfterSubmission: true,
 			suppressionDays: BaseWidget.DEFAULT_COOLDOWN_DAYS,
@@ -358,10 +358,16 @@ export class BaseWidget {
 	_getPanelHTML() {
 		return `
       <div class="feedback-panel-content">
-        <div class="feedback-panel-header">
-          <h3>Send Feedback</h3>
-          <button class="sdk-close-btn" type="button" aria-label="Close">&times;</button>
-        </div>
+<div class="feedback-panel-header">
+  <h3>Send Feedback</h3>
+  <button class="sdk-close-btn" type="button" aria-label="Close">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="18" height="18">
+      <rect width="256" height="256" fill="none"/>
+      <line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    </svg>
+  </button>
+</div>
         <div class="feedback-panel-body">
           <form class="feedback-form">
             <div class="sdk-form-group">

package/src/widgets/ChangelogWidget.js

@@ -96,7 +96,7 @@ export class ChangelogWidget extends BaseWidget {
 		this.modalElement.className = 'changelog-modal';
 		this.modalElement.innerHTML = `
 			<div class="changelog-modal-container">
-				<button class="changelog-modal-close" type="button" aria-label="Close">&times;</button>
+				<button class="changelog-modal-close" type="button" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg></button>
 				<div class="changelog-modal-content">
 					<div class="changelog-loading">
 						<div class="sdk-spinner"></div>
@@ -243,8 +243,13 @@ export class ChangelogWidget extends BaseWidget {
 			<div class="changelog-list-modal-container">
 				<div class="changelog-list-modal-header">
 					<h2>${this.options.title || "What's New"} 🎉</h2>
-					<button class="changelog-list-modal-close" type="button" aria-label="Close">&times;</button>
-				</div>
+				<button class="changelog-list-modal-close" type="button" aria-label="Close">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="18" height="18">
+    <rect width="256" height="256" fill="none"/>
+    <line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    <line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+  </svg>
+</button></div>
 				<div class="changelog-list-modal-body">
 					<div class="changelog-loading">
 						<div class="sdk-spinner"></div>