@product7/feedback-sdk 1.1.7 → 1.1.9

package/src/styles/styles.js

@@ -1,6 +1,6 @@
 export const CSS_STYLES = `
 .feedback-widget {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
   font-size: 14px;
   line-height: 1.4;
   z-index: 999999;
@@ -38,146 +38,105 @@ export const CSS_STYLES = `
   left: 20px;
 }
 
-.feedback-widget-button.position-bottom-center {
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.feedback-widget-button.position-top-center {
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.feedback-widget-button.position-center {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-/* New button design - white with elevation */
 .feedback-trigger-btn {
-  width: 52px;
-  height: 52px;
-  border-radius: 50%;
-  border: none;
-  background: #ffffff;
-  cursor: pointer;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 
-    0 2px 4px rgba(0, 0, 0, 0.1),
-    0 8px 16px rgba(0, 0, 0, 0.15),
-    0 0 1px rgba(0, 0, 0, 0.1);
-  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  padding: 0;
-}
-
-.feedback-trigger-btn:hover {
-  box-shadow: 
-    0 4px 8px rgba(0, 0, 0, 0.12),
-    0 12px 24px rgba(0, 0, 0, 0.2),
-    0 0 1px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
+  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);
 }
 
-.feedback-trigger-btn:active {
-  transform: translateY(0px);
-  box-shadow: 
-    0 1px 3px rgba(0, 0, 0, 0.1),
-    0 4px 12px rgba(0, 0, 0, 0.12),
-    0 0 1px rgba(0, 0, 0, 0.1);
+.feedback-trigger-btn:hover:not(:disabled) {
+  background: #004EEB;
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.1);
 }
 
-.feedback-trigger-btn svg {
-  flex-shrink: 0;
-  width: 22px;
-  height: 25px;
+.feedback-trigger-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
 }
 
-.feedback-trigger-btn svg path {
-  fill: #21244A;
+.feedback-trigger-btn:focus-visible {
+  outline: 2px solid #155EEF;
+  outline-offset: 2px;
 }
 
-/* Loading Modal */
-.feedback-loading-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(0.9);
-  z-index: 1000001;
+.feedback-close-btn {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #EF4444;
+  border: 2px solid white;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   opacity: 0;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s ease;
+  z-index: 10;
+  padding: 0;
 }
 
-.feedback-loading-modal.show {
+.feedback-widget-button:hover .feedback-close-btn {
   opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-
-.feedback-loading-spinner {
-  width: 48px;
-  height: 48px;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-top-color: #21244A;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
+.feedback-close-btn:hover {
+  background: #DC2626;
+  transform: scale(1.1);
 }
 
-/* Modal Styles (centered) */
-.feedback-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(0.9);
-  width: 480px;
-  max-width: 90vw;
-  max-height: 85vh;
-  z-index: 1000000;
-  opacity: 0;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-family: inherit;
-}
-
-.feedback-modal.open {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-
-.feedback-modal .feedback-panel-content {
-  max-height: 85vh;
-  overflow-y: auto;
+.feedback-close-btn:focus-visible {
+  outline: 2px solid #155EEF;
+  outline-offset: 2px;
 }
 
-/* Size variants */
-.feedback-modal.size-small {
-  width: 360px;
+.feedback-close-btn svg {
+  width: 10px;
+  height: 10px;
 }
 
-.feedback-modal.size-medium {
-  width: 480px;
+/* Minimized state */
+.feedback-widget-button.minimized {
+  transform: scale(0.4);
+  opacity: 0.3;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.feedback-modal.size-large {
-  width: 600px;
+.feedback-widget-button.minimized:hover {
+  opacity: 0.6;
+  transform: scale(0.5);
 }
 
-.feedback-panel.size-small {
-  width: 320px;
+.feedback-widget-button.minimized .feedback-trigger-btn {
+  pointer-events: none;
 }
 
-.feedback-panel.size-medium {
-  width: 420px;
+.feedback-widget-button.minimized .feedback-close-btn {
+  opacity: 1;
+  background: #10B981;
+  pointer-events: auto;
 }
 
-.feedback-panel.size-large {
-  width: 520px;
+.feedback-widget-button.minimized .feedback-close-btn:hover {
+  background: #059669;
 }
 
 /* Side Panel Styles */
@@ -203,8 +162,7 @@ export const CSS_STYLES = `
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
+  background: rgba(0, 0, 0, 0.1);
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
@@ -217,60 +175,84 @@ export const CSS_STYLES = `
 }
 
 .feedback-panel-content {
-  background: var(--bg-color, #ffffff);
-  color: var(--text-color, #171717);
+  background: white;
   height: 100%;
   display: flex;
   flex-direction: column;
-  border-radius: 12px;
-  border: 1px solid #e5e5e5;
+  border-radius: 16px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
+              0 10px 10px -5px rgba(0, 0, 0, 0.04),
+              0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+.feedback-panel.theme-dark .feedback-panel-content {
+  background: #1F2937;
+  color: white;
 }
 
 .feedback-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 24px 24px 20px 24px;
+  padding: 24px;
+  border-bottom: 1px solid #E5E7EB;
   flex-shrink: 0;
 }
 
+.feedback-panel.theme-dark .feedback-panel-header {
+  border-bottom-color: #374151;
+}
+
 .feedback-panel-header h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
-  color: var(--text-color, #171717);
+  color: #111827;
+}
+
+.feedback-panel.theme-dark .feedback-panel-header h3 {
+  color: white;
 }
 
 .feedback-panel-close {
   background: none;
   border: none;
-  font-size: 20px;
+  font-size: 24px;
   cursor: pointer;
-  color: #737373;
-  padding: 0;
+  color: #6B7280;
+  padding: 4px;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
-  transition: all 0.15s ease;
+  border-radius: 6px;
+  transition: all 0.2s ease;
 }
 
 .feedback-panel-close:hover {
-  background: #f5f5f5;
-  color: #171717;
+  background: #F3F4F6;
+  color: #111827;
 }
 
 .feedback-panel-close:focus-visible {
-  outline: 2px solid var(--primary-color, #21244A);
+  outline: 2px solid #155EEF;
   outline-offset: 2px;
 }
 
+.feedback-panel.theme-dark .feedback-panel-close {
+  color: #9CA3AF;
+}
+
+.feedback-panel.theme-dark .feedback-panel-close:hover {
+  background: #374151;
+  color: white;
+}
+
 .feedback-panel-body {
   flex: 1;
   overflow-y: auto;
-  padding: 0 24px 24px 24px;
+  padding: 24px;
 }
 
 .feedback-form {
@@ -280,59 +262,96 @@ export const CSS_STYLES = `
 }
 
 .feedback-form-group {
-  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
 }
 
 .feedback-form-group:last-child {
   margin-bottom: 0;
 }
 
-/* Unified input container */
-.feedback-input-container {
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  padding: 16px;
-  background: #ffffff;
-  transition: all 0.15s ease;
+.feedback-form-group label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: #374151;
 }
 
-.feedback-input-container:focus-within {
-  border-color: var(--primary-color, #21244A);
-  box-shadow: 0 0 0 3px rgba(33, 36, 74, 0.08);
+.feedback-panel.theme-dark .feedback-form-group label {
+  color: #D1D5DB;
 }
 
-.feedback-form-group input,
-.feedback-form-group textarea {
+.feedback-form-group input {
+  height: 44px;
   width: 100%;
-  border: none;
-  padding: 0;
-  font-size: 14px;
+  border-radius: 8px;
+  border: 1px solid #D1D5DB;
+  padding: 10px 14px;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #1F2937;
   font-family: inherit;
-  color: var(--text-color, #171717);
-  background: transparent;
   outline: none;
-  resize: none;
+  transition: all 0.2s ease;
 }
 
-.feedback-form-group input {
-  font-weight: 600;
+.feedback-form-group input::placeholder {
   font-size: 15px;
-  margin-bottom: 12px;
+  color: #9CA3AF;
 }
 
-.feedback-form-group input::placeholder {
-  color: #737373;
-  font-weight: 600;
+.feedback-form-group input:focus {
+  border-color: #155EEF;
+  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
+}
+
+.feedback-form-group input:focus-visible {
+  outline: none;
 }
 
 .feedback-form-group textarea {
-  min-height: 120px;
+  min-height: 200px;
+  width: 100%;
+  resize: vertical;
+  border-radius: 8px;
+  border: 1px solid #D1D5DB;
+  padding: 10px 14px;
+  font-size: 15px;
   font-weight: 400;
+  line-height: 1.5;
+  color: #1F2937;
+  font-family: inherit;
+  outline: none;
+  transition: all 0.2s ease;
 }
 
 .feedback-form-group textarea::placeholder {
-  color: #a3a3a3;
-  font-weight: 400;
+  font-size: 15px;
+  color: #9CA3AF;
+}
+
+.feedback-form-group textarea:focus {
+  border-color: #155EEF;
+  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
+}
+
+.feedback-form-group textarea:focus-visible {
+  outline: none;
+}
+
+.feedback-panel.theme-dark .feedback-form-group input,
+.feedback-panel.theme-dark .feedback-form-group textarea {
+  background: #374151;
+  border-color: #4B5563;
+  color: white;
+}
+
+.feedback-panel.theme-dark .feedback-form-group input::placeholder,
+.feedback-panel.theme-dark .feedback-form-group textarea::placeholder {
+  color: #6B7280;
 }
 
 .feedback-btn {
@@ -349,7 +368,7 @@ export const CSS_STYLES = `
   font-weight: 500;
   font-family: inherit;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.2s ease;
 }
 
 .feedback-btn:disabled {
@@ -358,32 +377,62 @@ export const CSS_STYLES = `
 }
 
 .feedback-btn:focus-visible {
-  outline: 2px solid #21244A;
+  outline: 2px solid #155EEF;
   outline-offset: 2px;
 }
 
 .feedback-btn-submit {
-  background: var(--primary-color, #21244A);
+  background: #155EEF;
   color: white;
   width: 100%;
 }
 
 .feedback-btn-submit:hover:not(:disabled) {
-  background: #2d3159;
+  background: #1A56DB;
 }
 
 .feedback-btn-submit:active:not(:disabled) {
-  transform: scale(0.98);
+  background: #1E429F;
+}
+
+.feedback-btn-cancel {
+  background: transparent;
+  color: #6B7280;
+  border: 1px solid #D1D5DB;
+}
+
+.feedback-btn-cancel:hover:not(:disabled) {
+  background: #F9FAFB;
+  border-color: #9CA3AF;
+  color: #374151;
+}
+
+.feedback-panel.theme-dark .feedback-btn-cancel {
+  color: #D1D5DB;
+  border-color: #4B5563;
+}
+
+.feedback-panel.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
+  background: #374151;
+}
+
+.feedback-form-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: auto;
+  padding-top: 24px;
 }
 
 .feedback-error {
-  background: #FEF2F2;
-  border: 1px solid #FEE2E2;
   color: #DC2626;
-  padding: 12px 14px;
+  font-size: 14px;
+  font-weight: 400;
+  margin-top: 8px;
+  padding: 12px;
+  background: #FEE2E2;
+  border: 1px solid #FECACA;
   border-radius: 8px;
-  font-size: 13px;
-  margin-top: 12px;
   display: none;
 }
 
@@ -391,6 +440,12 @@ export const CSS_STYLES = `
   display: block;
 }
 
+.feedback-panel.theme-dark .feedback-error {
+  background: #7F1D1D;
+  border-color: #991B1B;
+  color: #FCA5A5;
+}
+
 .feedback-success-notification {
   position: fixed;
   top: 24px;
@@ -455,7 +510,7 @@ export const CSS_STYLES = `
 }
 
 .feedback-success-close:focus-visible {
-  outline: 2px solid #21244A;
+  outline: 2px solid #155EEF;
   outline-offset: 2px;
 }
 
@@ -517,10 +572,18 @@ export const CSS_STYLES = `
     border-radius: 2px;
   }
   
+  .feedback-panel.theme-dark .feedback-panel-header::before {
+    background: #4B5563;
+  }
+  
   .feedback-panel-body {
     padding: 20px;
   }
   
+  .feedback-form-group textarea {
+    min-height: 150px;
+  }
+  
   .feedback-widget-button {
     bottom: 16px;
     right: 16px;
@@ -556,5 +619,35 @@ export const CSS_STYLES = `
   .feedback-success-notification {
     display: none !important;
   }
+
+  @media (max-width: 768px) {
+  .feedback-close-btn {
+    top: -6px;
+    right: -6px;
+    width: 20px;
+    height: 20px;
+  }
+  
+  .feedback-close-btn svg {
+    width: 8px;
+    height: 8px;
+  }
+  
+  .feedback-widget-button.minimized {
+    transform: scale(0.5);
+  }
+  
+  .feedback-widget-button.minimized:hover {
+    transform: scale(0.6);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .feedback-close-btn,
+  .feedback-widget-button.minimized {
+    transition: none;
+  }
+}
 }
 `;

package/src/widgets/BaseWidget.js

@@ -283,41 +283,44 @@ export class BaseWidget {
 
 	_getPanelHTML() {
 		return `
-    <div class="feedback-panel-content">
-      <div class="feedback-panel-header">
-        <h3>Share Your Thoughts</h3>
-        <button class="feedback-panel-close" type="button" aria-label="Close">&times;</button>
-      </div>
-      <div class="feedback-panel-body">
-        <form class="feedback-form">
-          <div class="feedback-form-group">
-            <div class="feedback-input-container">
+      <div class="feedback-panel-content">
+        <div class="feedback-panel-header">
+          <h3>Send Feedback</h3>
+          <button class="feedback-panel-close" type="button" aria-label="Close">&times;</button>
+        </div>
+        <div class="feedback-panel-body">
+          <form class="feedback-form">
+            <div class="feedback-form-group">
+              <label for="feedback-title-${this.id}">Title (optional)</label>
               <input 
                 type="text" 
                 id="feedback-title-${this.id}" 
                 name="title" 
-                placeholder="Title"
+                placeholder="Brief description of your feedback"
                 value="${this.state.title}"
               />
+            </div>
+            <div class="feedback-form-group">
+              <label for="feedback-content-${this.id}">Message *</label>
               <textarea 
                 id="feedback-content-${this.id}" 
                 name="content" 
-                placeholder="Tell us what's on your mind..."
+                placeholder="Tell us what you think..."
                 required
               >${this.state.content}</textarea>
             </div>
-          </div>
-          <div class="feedback-error" role="alert"></div>
-          <div class="feedback-form-group">
-            <button type="submit" class="feedback-btn feedback-btn-submit">
-              ${this.state.isSubmitting ? 'Sending...' : 'Submit Feedback'}
-            </button>
-          </div>
-        </form>
+            <div class="feedback-error" role="alert"></div>
+            <div class="feedback-form-actions">
+              <button type="submit" class="feedback-btn feedback-btn-submit">
+                ${this.state.isSubmitting ? 'Sending...' : 'Send Feedback'}
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
-    </div>
-  `;
+    `;
 	}
+
 	_attachPanelEvents() {
 		const panel = this.panelElement;