makethisbetter 1.5.2 → 1.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/makethisbetter.cjs +8 -8
  2. package/dist/makethisbetter.cjs.map +1 -1
  3. package/dist/makethisbetter.esm.js +32 -32
  4. package/dist/makethisbetter.esm.js.map +1 -1
  5. package/dist/makethisbetter.js +8 -8
  6. package/dist/makethisbetter.js.map +1 -1
  7. package/dist/widget/controller.d.ts.map +1 -1
  8. package/package.json +1 -1
  9. package/src/popup/success.ts +2 -2
  10. package/src/styles/widget.css +49 -28
  11. package/src/widget/controller.ts +1 -0
package/dist/widget/controller.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/widget/controller.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAc,MAAM,UAAU,CAAA;AAIhE,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,mBAAmB,CAAmC;IAC9D,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,IAAI,CAAe;IAC3B,OAAO,CAAC,iBAAiB,CAA0B;IACnD,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,WAAW,CAAyE;gBAEhF,MAAM,EAAE,oBAAoB;IAcxC,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,SAAS;IAgBjB,OAAO,CAAC,sBAAsB;YAYhB,YAAY;IA8C1B,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,OAAO;IAgBf,OAAO,IAAI,IAAI;CAWhB"}
1
+ {"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/widget/controller.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAc,MAAM,UAAU,CAAA;AAIhE,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,mBAAmB,CAAmC;IAC9D,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,IAAI,CAAe;IAC3B,OAAO,CAAC,iBAAiB,CAA0B;IACnD,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,WAAW,CAAyE;gBAEhF,MAAM,EAAE,oBAAoB;IAcxC,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,SAAS;IAgBjB,OAAO,CAAC,sBAAsB;YAYhB,YAAY;IA+C1B,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,OAAO;IAgBf,OAAO,IAAI,IAAI;CAWhB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "makethisbetter",
3
- "version": "1.5.2",
3
+ "version": "1.5.3",
4
4
  "description": "Make This Better JS Widget SDK — embed user feedback collection in any website",
5
5
  "type": "module",
6
6
  "main": "./dist/makethisbetter.cjs",
package/src/popup/success.ts CHANGED
@@ -26,7 +26,7 @@ export class SuccessCard {
26
26
  const msg = options?.skipFollowup ? messages.success.message_no_ai : messages.success.message
27
27
 
28
28
  const viewLink = onViewFeedback
29
- ? `<button class="mtb-view-feedback-link">${messages.success.view_feedback}</button>`
29
+ ? `<button class="mtb-view-feedback-link">${messages.success.view_feedback} <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></button>`
30
30
  : ''
31
31
 
32
32
  const emailCapture = options?.emailCapture
@@ -43,7 +43,7 @@ export class SuccessCard {
43
43
 
44
44
  this.el.innerHTML = `
45
45
  <div class="mtb-success-icon">
46
- <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="${BRAND_COLOR}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
46
+ <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="${BRAND_COLOR}" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
47
47
  <polyline points="20 6 9 17 4 12"/>
48
48
  </svg>
49
49
  </div>
package/src/styles/widget.css CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  :host {
8
8
  all: initial;
9
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
10
10
  font-size: 14px;
11
11
  line-height: 1.5;
12
12
  color: #191a1c;
@@ -110,7 +110,7 @@
110
110
 
111
111
  .mtb-tab:hover {
112
112
  background: #047857;
113
- box-shadow: -3px 0 20px rgba(5, 150, 105, 0.5);
113
+ box-shadow: -3px 0 20px rgba(5, 150, 105, 0.45);
114
114
  }
115
115
 
116
116
  .mtb-tab.active {
@@ -301,11 +301,11 @@
301
301
  width: 320px;
302
302
  background: #fff;
303
303
  border: 1px solid rgba(0, 0, 0, 0.1);
304
- border-radius: 14px;
305
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
304
+ border-radius: 16px;
305
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
306
306
  overflow: hidden;
307
307
  animation: mtbSlideUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
308
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
308
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
309
309
  }
310
310
 
311
311
  @keyframes mtbSlideUp {
@@ -406,7 +406,7 @@
406
406
  height: 64px;
407
407
  padding: 9px 11px;
408
408
  border: 1px solid rgba(0, 0, 0, 0.12);
409
- border-radius: 9px;
409
+ border-radius: 10px;
410
410
  font-family: inherit;
411
411
  font-size: 12.5px;
412
412
  line-height: 1.5;
@@ -419,7 +419,7 @@
419
419
 
420
420
  .mtb-textarea:focus {
421
421
  border-color: #10b981;
422
- box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
422
+ box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
423
423
  }
424
424
 
425
425
  .mtb-textarea::placeholder {
@@ -428,7 +428,7 @@
428
428
 
429
429
  .mtb-popup-error {
430
430
  margin-top: 8px;
431
- color: #b91c1c;
431
+ color: #DC2626;
432
432
  font-size: 11.5px;
433
433
  }
434
434
 
@@ -447,16 +447,16 @@
447
447
  .mtb-cancel-btn,
448
448
  .mtb-submit-btn {
449
449
  min-width: 72px;
450
- height: 30px;
450
+ height: 32px;
451
451
  border: none;
452
- border-radius: 7px;
452
+ border-radius: 8px;
453
453
  cursor: pointer;
454
454
  display: flex;
455
455
  align-items: center;
456
456
  justify-content: center;
457
457
  padding: 0 12px;
458
458
  font-family: inherit;
459
- font-size: 12px;
459
+ font-size: 12.5px;
460
460
  font-weight: 600;
461
461
  transition: background 0.12s;
462
462
  }
@@ -497,22 +497,22 @@
497
497
  .mtb-success {
498
498
  position: fixed;
499
499
  z-index: 2147483645;
500
- width: 300px;
500
+ width: 332px;
501
501
  background: #fff;
502
502
  border: 1px solid rgba(0, 0, 0, 0.1);
503
503
  border-radius: 16px;
504
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
505
- padding: 26px 22px;
504
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
505
+ padding: 24px 22px;
506
506
  text-align: center;
507
507
  animation: mtbSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
508
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
508
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
509
509
  }
510
510
 
511
511
  .mtb-success-icon {
512
- width: 44px;
513
- height: 44px;
512
+ width: 46px;
513
+ height: 46px;
514
514
  border-radius: 50%;
515
- background: rgba(5, 150, 105, 0.08);
515
+ background: rgba(5, 150, 105, 0.09);
516
516
  display: flex;
517
517
  align-items: center;
518
518
  justify-content: center;
@@ -522,7 +522,8 @@
522
522
  .mtb-success-title {
523
523
  font-size: 16px;
524
524
  font-weight: 700;
525
- margin-bottom: 6px;
525
+ margin-bottom: 5px;
526
+ letter-spacing: -0.01em;
526
527
  color: #191a1c;
527
528
  }
528
529
 
@@ -533,12 +534,32 @@
533
534
  line-height: 1.6;
534
535
  }
535
536
 
537
+ .mtb-view-feedback-link {
538
+ display: inline-flex;
539
+ align-items: center;
540
+ gap: 5px;
541
+ color: #047857;
542
+ text-decoration: none;
543
+ font-size: 13px;
544
+ font-weight: 500;
545
+ font-family: 'JetBrains Mono', monospace;
546
+ background: none;
547
+ border: none;
548
+ cursor: pointer;
549
+ transition: text-decoration 0.12s;
550
+ }
551
+
552
+ .mtb-view-feedback-link:hover {
553
+ text-decoration: underline;
554
+ }
555
+
536
556
  .mtb-close-link {
557
+ margin-top: 13px;
537
558
  background: none;
538
559
  border: none;
539
560
  cursor: pointer;
540
561
  font-size: 12px;
541
- color: rgba(0, 0, 0, 0.45);
562
+ color: rgba(0, 0, 0, 0.4);
542
563
  font-family: inherit;
543
564
  transition: color 0.12s;
544
565
  }
@@ -732,7 +753,7 @@
732
753
  border-radius: 12px;
733
754
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
734
755
  animation: mtbSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
735
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
756
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
736
757
  }
737
758
 
738
759
  :host([data-mtb-theme="dark"]) .mtb-frustration-prompt {
@@ -937,12 +958,12 @@
937
958
  width: 346px;
938
959
  background: #fff;
939
960
  border: 1px solid rgba(0, 0, 0, 0.1);
940
- border-radius: 14px;
941
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
961
+ border-radius: 16px;
962
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
942
963
  display: flex;
943
964
  flex-direction: column;
944
965
  animation: mtbSlideUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
945
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
966
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
946
967
  overflow: hidden;
947
968
  }
948
969
 
@@ -1056,7 +1077,7 @@
1056
1077
  height: 52px;
1057
1078
  padding: 9px 11px;
1058
1079
  border: 1px solid rgba(0, 0, 0, 0.12);
1059
- border-radius: 9px;
1080
+ border-radius: 10px;
1060
1081
  font-family: inherit;
1061
1082
  font-size: 13px;
1062
1083
  line-height: 1.5;
@@ -1070,7 +1091,7 @@
1070
1091
 
1071
1092
  .mtb-clarify-input:focus {
1072
1093
  border-color: #10b981;
1073
- box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
1094
+ box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
1074
1095
  background: #fff;
1075
1096
  }
1076
1097
 
@@ -1089,7 +1110,7 @@
1089
1110
  height: 34px;
1090
1111
  padding: 0 14px;
1091
1112
  border: 1px solid rgba(0, 0, 0, 0.12);
1092
- border-radius: 9px;
1113
+ border-radius: 10px;
1093
1114
  background: #fff;
1094
1115
  cursor: pointer;
1095
1116
  font-family: inherit;
@@ -1111,7 +1132,7 @@
1111
1132
  justify-content: center;
1112
1133
  gap: 6px;
1113
1134
  border: none;
1114
- border-radius: 9px;
1135
+ border-radius: 10px;
1115
1136
  background: #059669;
1116
1137
  color: #fff;
1117
1138
  cursor: pointer;
package/src/widget/controller.ts CHANGED
@@ -170,6 +170,7 @@ export class WidgetController {
170
170
  private async handleSubmit(description: string): Promise<void> {
171
171
  if (!this.popup) return
172
172
  this.popup.setLoading(true)
173
+ await new Promise<void>((r) => requestAnimationFrame(() => setTimeout(r, 0)))
173
174
  const annotation = this.currentAnnotation
174
175
  const recording = this.recordingManager?.getRecording() ?? undefined
175
176