@product7/product7-js 0.7.2 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/product7-js",
-	"version": "0.7.2",
+	"version": "0.7.3",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/product7-js.js",
 	"module": "src/index.js",

package/src/styles/liveChat-components.js

@@ -869,89 +869,22 @@
 .liveChat-feedback-body {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
   padding: var(--spacing-5) var(--spacing-4);
   flex: 1;
   overflow-y: auto;
 }
 
+.liveChat-feedback-body .sdk-form-group {
+  margin-bottom: 0;
+}
+
 .liveChat-feedback-prompt {
   margin: 0;
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
 }
 
-
-.liveChat-feedback-input {
-  width: 100%;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-3);
-  font-size: var(--font-size-sm);
-  font-family: inherit;
-  color: var(--text-primary);
-  background: var(--msg-bg);
-  box-sizing: border-box;
-  transition: border-color var(--transition-fast);
-}
-
-.liveChat-feedback-input::placeholder {
-  color: var(--msg-text-secondary);
-}
-
-.liveChat-feedback-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-
-.liveChat-feedback-textarea {
-  width: 100%;
-  resize: none;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-3);
-  font-size: var(--font-size-sm);
-  font-family: inherit;
-  color: var(--text-primary);
-  background: var(--msg-bg);
-  box-sizing: border-box;
-  transition: border-color var(--transition-fast);
-}
-
-.liveChat-feedback-textarea::placeholder {
-  color: var(--msg-text-secondary);
-}
-
-.liveChat-feedback-textarea:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-
-.liveChat-feedback-submit {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-3);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  font-family: inherit;
-  cursor: pointer;
-  border: none;
-  background: var(--color-primary);
-  color: #ffffff;
-  transition: all var(--transition-fast);
-}
-
-.liveChat-feedback-submit:hover:not(:disabled) {
-  background: var(--color-primary-hover);
-}
-
-.liveChat-feedback-submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .liveChat-feedback-error {
   font-size: var(--font-size-xs);
   color: #ef4444;

package/src/widgets/liveChat/views/FeedbackFormView.js

@@ -23,18 +23,23 @@ export class FeedbackFormView {
 			</div>
 			<div class="liveChat-feedback-body">
 				<p class="liveChat-feedback-prompt">Share your thoughts with us. We read every message.</p>
-				<input
-					type="text"
-					class="liveChat-feedback-input"
-					placeholder="Title"
-				/>
-				<textarea
-					class="liveChat-feedback-textarea"
-					placeholder="Your feedback..."
-					rows="5"
-				></textarea>
+				<div class="sdk-form-group">
+					<label class="sdk-label">Title <span class="sdk-required">*</span></label>
+					<input
+						type="text"
+						class="sdk-input liveChat-feedback-input"
+						placeholder="Brief description of your feedback"
+					/>
+				</div>
+				<div class="sdk-form-group">
+					<label class="sdk-label">Message <span class="sdk-required">*</span></label>
+					<textarea
+						class="sdk-textarea liveChat-feedback-textarea"
+						placeholder="Tell us what you think..."
+					></textarea>
+				</div>
 				<span class="liveChat-feedback-error" style="display:none;"></span>
-				<button class="liveChat-feedback-submit">Send feedback</button>
+				<button class="sdk-btn-primary sdk-btn-block liveChat-feedback-submit">Send feedback</button>
 			</div>
 		`;
 		this._attachEvents();