@product7/feedback-sdk 1.0.8 → 1.1.0

package/dist/feedback-sdk.js

@@ -970,12 +970,10 @@
 			const button = document.createElement('div');
 			button.className = `feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`;
 			button.innerHTML = `
-      <button class="feedback-trigger-btn" type="button">
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
-          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+      <button class="feedback-trigger-btn" type="button" aria-label="Send feedback">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
         </svg>
-        Feedback
       </button>
     `;
 
@@ -992,23 +990,17 @@
 
 			button.addEventListener('mouseenter', () => {
 				if (!this.state.isSubmitting) {
-					button.style.transform = 'translateY(-2px)';
+					button.style.transform = 'scale(1.1)';
 				}
 			});
 
 			button.addEventListener('mouseleave', () => {
-				button.style.transform = 'translateY(0)';
+				button.style.transform = 'scale(1)';
 			});
 		}
 
 		updateText(text) {
-			const button = this.element?.querySelector('.feedback-trigger-btn');
-			if (button) {
-				const textNode = button.childNodes[button.childNodes.length - 1];
-				if (textNode && textNode.nodeType === Node.TEXT_NODE) {
-					textNode.textContent = text;
-				}
-			}
+			console.warn('ButtonWidget: Text display is disabled for circular design');
 		}
 
 		updatePosition(position) {
@@ -1574,40 +1566,47 @@
   left: 20px;
 }
 
+/* Circular button design with white bg and blue border */
 .feedback-trigger-btn {
-  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 2px solid #155eff;
+  background-color: #ffffff;
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  height: 44px;
-  overflow: hidden;
-  border-radius: 0.5rem;
-  border: none;
-  padding: 10px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  color: white;
-  background: #155EEF;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  box-shadow: 0 4px 12px rgba(21, 94, 255, 0.15);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 0;
+  color: #155eff; /* Icon color matches border */
 }
 
-.feedback-trigger-btn:hover:not(:disabled) {
-  background: #004EEB;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.1);
+.feedback-trigger-btn:hover {
+  background-color: #155eff;
+  color: #ffffff;
+  box-shadow: 0 6px 20px rgba(21, 94, 255, 0.3);
 }
 
-.feedback-trigger-btn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
+.feedback-trigger-btn:active {
+  transform: scale(0.95);
 }
 
-.feedback-trigger-btn:focus-visible {
-  outline: 2px solid #155EEF;
-  outline-offset: 2px;
+.feedback-trigger-btn svg {
+  flex-shrink: 0;
+}
+
+/* Dark theme support */
+.theme-dark .feedback-trigger-btn {
+  background-color: #1a1a1a;
+  border-color: #155eff;
+  color: #155eff;
+}
+
+.theme-dark .feedback-trigger-btn:hover {
+  background-color: #155eff;
+  color: #ffffff;
 }
 
 /* Side Panel Styles */