@capillarytech/creatives-library 8.0.299-alpha.5 → 8.0.299-alpha.6

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 (3) hide show
  1. package/package.json +1 -1
  2. package/v2Components/CommonTestAndPreview/CustomerCreationModal.js +2 -2
  3. package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss +843 -700
package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss CHANGED
@@ -3,744 +3,887 @@
3
3
  *
4
4
  * Styling for the unified test and preview component across all channels
5
5
  */
6
- @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
6
+ @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
7
7
 
8
- /* All ant overrides scoped under wrapper to avoid affecting other modals. */
8
+ /* All ant overrides scoped under wrapper to avoid affecting other modals. */
9
9
  .common-test-preview-modal-wrap {
10
- z-index: 10000 !important;
10
+ z-index: 10000 !important;
11
+ display: flex !important;
12
+ justify-content: center !important;
13
+ align-items: center !important;
11
14
  }
12
15
 
13
- /* Notifications rendered inside slidebox (getContainer) so they appear in campaigns/library mode */
16
+ /* Modals rendered inside slidebox via getContainer (lib mode) – mask and wrap above content */
14
17
  .common-test-and-preview-notification-container {
15
- .ant-notification {
16
- z-index: 10001;
17
- }
18
+ .ant-notification {
19
+ z-index: 10001;
20
+ }
21
+ .common-test-preview-modal-wrap {
22
+ z-index: 10003 !important;
23
+ }
24
+ .ant-modal-mask,
25
+ .ant-modal-wrap {
26
+ z-index: 10003 !important;
27
+ }
18
28
  }
19
29
 
20
30
  /* Lookup spinner overlay above test-customers dropdown. */
21
31
  .common-test-preview-lookup-spin {
22
- position: relative;
23
- z-index: 1000;
32
+ position: relative;
33
+ z-index: 1000;
24
34
 
25
- .ant-spin-container::after {
26
- z-index: 1;
27
- }
35
+ .ant-spin-container::after {
36
+ z-index: 1;
37
+ }
28
38
  }
29
39
 
30
40
  /* When customer lookup is loading, dropdown renders inside .send-test-section; lower it so spinner is on top. */
31
41
  .common-test-preview-customer-loading .test-customers-tree-select-dropdown {
32
- z-index: 0 !important;
42
+ z-index: 0 !important;
33
43
  }
34
44
 
35
45
  /* Customer creation modal content – avoid inline styles */
36
46
  .common-test-preview-modal {
37
- color: $CAP_G01 !important;
38
- .ant-modal-content {
39
- width: 28.5rem; /* 456px at 16px root */
40
- }
41
- .ant-modal-footer {
42
- text-align: left;
43
- margin-left: 0.625rem; /* 10px at 16px root */
44
- margin-top: 0.9375rem; /* 15px at 16px root */
45
- }
46
-
47
- .customer-creation-modal-row {
48
- margin-bottom: $CAP_SPACE_16;
49
-
50
- &--last {
51
- margin-bottom: $CAP_SPACE_24;
52
- }
53
- }
54
-
55
- .customer-creation-modal-description {
56
- color: $CAP_G01;
57
- font-size: $FONT_SIZE_M;
58
- }
59
-
60
- .customer-creation-modal-label {
61
- margin-bottom: $CAP_SPACE_04;
62
- display: block;
63
- font-size: $FONT_SIZE_M;
64
- font-weight: bold;
65
- color: $CAP_G01;
66
- }
67
-
68
- .customer-creation-modal-optional {
69
- color: $CAP_G06;
70
- font-weight: normal;
71
- }
72
-
73
- .customer-creation-modal-input {
74
- width: 100%;
75
- color: $CAP_G01;
76
-
77
- &.has-error {
78
- color: $CAP_COLOR_03 !important;
79
- .ant-input {
80
- border-color: $CAP_COLOR_03 !important;
81
- }
82
- }
83
- }
84
-
85
- .customer-creation-modal-validation-error {
86
- color: $CAP_COLOR_03;
87
- font-size: $FONT_SIZE_S;
88
- margin-top: $CAP_SPACE_04;
89
- }
90
-
91
- /* Existing customer modal content */
92
- .existing-customer-modal {
93
- &-intro-row {
94
- margin-bottom: $CAP_SPACE_16;
95
- }
96
-
97
- .ant-card-body {
98
- padding: 1rem;
99
- }
100
-
101
- &-card {
102
- border-radius: $CAP_SPACE_08;
103
- border: $CAP_SPACE_01 solid $CAP_G06;
104
- padding: 0;
105
- }
106
-
107
- &-card-row {
108
- display: flex;
109
- align-items: flex-start;
110
- padding: 0;
111
- }
112
-
113
- &-avatar {
114
- width: 3rem; /* 48px at 16px root */
115
- height: 3rem;
116
- border-radius: 1.25rem; /* 20px at 16px root */
117
- background-color: $CAP_G07;
118
- display: flex;
119
- align-items: center;
120
- justify-content: center;
121
- margin-top: $CAP_SPACE_04;
122
- margin-right: $CAP_SPACE_16;
123
- flex-shrink: 0;
124
- }
125
-
126
- &-avatar-icon {
127
- font-size: $CAP_SPACE_24;
128
- color: $CAP_G01;
129
- }
130
-
131
- &-details {
132
- flex: 1;
133
- }
134
-
135
- &-name {
136
- font-size: $FONT_SIZE_L;
137
- font-weight: 500;
138
- color: $CAP_G01;
139
- margin-bottom: $CAP_SPACE_04;
140
- }
141
-
142
- &-meta {
143
- font-size: $FONT_SIZE_M;
144
- color: $CAP_G01;
145
- line-height: 1.4;
146
- }
147
-
148
- &-meta-label {
149
- color: $CAP_G04;
150
- }
151
- }
47
+ color: $CAP_G01 !important;
48
+ /* Modal: 14px base so em values are independent of root (width 32.57em = 456px) */
49
+ font-size: 14px;
50
+ width: 32.571em !important;
51
+ margin-left: auto;
52
+ margin-right: auto;
53
+ max-width: 32.571em !important;
54
+ .ant-modal-footer {
55
+ text-align: left;
56
+ margin-left: 0.625rem; /* 10px at 16px root */
57
+ margin-top: 0.9375rem; /* 15px at 16px root */
58
+ }
59
+
60
+ .customer-creation-modal-row {
61
+ margin-bottom: $CAP_SPACE_16;
62
+
63
+ &--last {
64
+ margin-bottom: $CAP_SPACE_24;
65
+ }
66
+ }
67
+
68
+ .customer-creation-modal-description {
69
+ color: $CAP_G01;
70
+ font-size: $FONT_SIZE_M;
71
+ }
72
+
73
+ .customer-creation-modal-label {
74
+ margin-bottom: $CAP_SPACE_04;
75
+ display: block;
76
+ font-size: $FONT_SIZE_M;
77
+ font-weight: bold;
78
+ color: $CAP_G01;
79
+ }
80
+
81
+ .customer-creation-modal-optional {
82
+ color: $CAP_G06;
83
+ font-weight: normal;
84
+ }
85
+
86
+ /* Input text color and font to match standalone (lib mode can lose host styles) */
87
+ .customer-creation-modal-input {
88
+ width: 100%;
89
+ color: $CAP_G01;
90
+ font-size: $FONT_SIZE_M;
91
+ font-family: 'Roboto', Arial, sans-serif;
92
+ font-weight: normal;
93
+ border: none !important;
94
+ border-bottom: none !important;
95
+ box-shadow: none !important;
96
+
97
+ /* Sizes in em for 14px base: same px as .5rem 2.5rem 1.5rem .875rem at 16px (8px, 40px, 24px, 14px) */
98
+ .ant-input {
99
+ color: $CAP_G01 !important;
100
+ font-size: $FONT_SIZE_M !important;
101
+ font-family: 'Roboto', Arial, sans-serif !important;
102
+ font-weight: normal !important;
103
+ background-color: $CAP_WHITE !important;
104
+ padding: 0.571em; /* 8px */
105
+ height: 2.857em; /* 40px */
106
+ line-height: 1.714em; /* 24px */
107
+ }
108
+ .ant-input:hover,
109
+ .ant-input:focus {
110
+ background-color: $CAP_WHITE !important;
111
+ }
112
+ .ant-input::placeholder {
113
+ color: $CAP_G04;
114
+ }
115
+
116
+ /* No darkening on hover/focus – wrapper and inner stay same background */
117
+ & > *:hover,
118
+ & > *:focus,
119
+ & > *.ant-input-affix-wrapper-focused .ant-input {
120
+ background-color: $CAP_WHITE !important;
121
+ }
122
+
123
+ /* Error state: single clean red border, no double line or focus ring */
124
+ &.has-error {
125
+ color: $CAP_COLOR_03 !important;
126
+ border-bottom: none !important;
127
+ box-shadow: none !important;
128
+
129
+ & > *::after {
130
+ display: none !important;
131
+ content: none !important;
132
+ border: none !important;
133
+ height: 0 !important;
134
+ background: none !important;
135
+ }
136
+
137
+ .ant-input-affix-wrapper {
138
+ border: 1px solid $CAP_COLOR_03 !important;
139
+ border-radius: $CAP_SPACE_04;
140
+ box-shadow: none !important;
141
+ outline: none !important;
142
+ background-color: $CAP_WHITE !important;
143
+ }
144
+ .ant-input-affix-wrapper:hover,
145
+ .ant-input-affix-wrapper:focus,
146
+ .ant-input-affix-wrapper-focused {
147
+ border: 1px solid $CAP_COLOR_03 !important;
148
+ box-shadow: none !important;
149
+ outline: none !important;
150
+ background-color: $CAP_WHITE !important;
151
+ }
152
+ .ant-input-affix-wrapper .ant-input {
153
+ border: none !important;
154
+ box-shadow: none !important;
155
+ background-color: $CAP_WHITE !important;
156
+ }
157
+ .ant-input-affix-wrapper .ant-input:hover,
158
+ .ant-input-affix-wrapper .ant-input:focus {
159
+ background-color: $CAP_WHITE !important;
160
+ }
161
+ /* When no affix wrapper (plain input) */
162
+ .ant-input {
163
+ border: 1px solid $CAP_COLOR_03 !important;
164
+ border-radius: $CAP_SPACE_04;
165
+ box-shadow: none !important;
166
+ outline: none !important;
167
+ background-color: $CAP_WHITE !important;
168
+ }
169
+ .ant-input:hover,
170
+ .ant-input:focus {
171
+ box-shadow: none !important;
172
+ outline: none !important;
173
+ background-color: $CAP_WHITE !important;
174
+ }
175
+ }
176
+ }
177
+
178
+ /* Error message only – no extra border/line below the input */
179
+ .customer-creation-modal-validation-error {
180
+ color: $CAP_COLOR_03;
181
+ font-size: $FONT_SIZE_S;
182
+ margin-top: $CAP_SPACE_04;
183
+ border: none !important;
184
+ border-top: none !important;
185
+ box-shadow: none !important;
186
+
187
+ &::before,
188
+ &::after {
189
+ display: none !important;
190
+ content: none !important;
191
+ border: none !important;
192
+ }
193
+ }
194
+
195
+ /* Remove any extra underline/border between input and error message – scoped via wrapper only */
196
+ .customer-creation-modal-input.has-error + .customer-creation-modal-validation-error::before {
197
+ display: none !important;
198
+ border: none !important;
199
+ content: none !important;
200
+ }
201
+ .customer-creation-modal-row .customer-creation-modal-validation-error {
202
+ border-top: none !important;
203
+ box-shadow: none !important;
204
+ }
205
+ .customer-creation-modal-row:has(.customer-creation-modal-input.has-error) {
206
+ border-bottom: none !important;
207
+ box-shadow: none !important;
208
+ .customer-creation-modal-validation-error {
209
+ border-top: none !important;
210
+ box-shadow: none !important;
211
+ }
212
+ .customer-creation-modal-input {
213
+ border-bottom: none !important;
214
+ }
215
+ }
216
+ /* Kill any pseudo-element line inside input wrapper */
217
+ .customer-creation-modal-row:has(.customer-creation-modal-input.has-error) .customer-creation-modal-input *::after {
218
+ display: none !important;
219
+ content: none !important;
220
+ border: none !important;
221
+ height: 0 !important;
222
+ min-height: 0 !important;
223
+ background: none !important;
224
+ }
225
+
226
+ /* Lookup loading: make Email and Mobile fields look disabled (wrapper-only) */
227
+ .customer-creation-modal--lookup-loading .customer-creation-modal-row--email .customer-creation-modal-input,
228
+ .customer-creation-modal--lookup-loading .customer-creation-modal-row--last .customer-creation-modal-input {
229
+ opacity: 0.65;
230
+ cursor: not-allowed;
231
+ background-color: $CAP_G09 !important;
232
+ }
233
+
234
+ /* Existing customer modal content */
235
+ .existing-customer-modal {
236
+ &-intro-row {
237
+ margin-bottom: $CAP_SPACE_16;
238
+ }
239
+
240
+ .ant-card-body {
241
+ padding: 1rem;
242
+ }
243
+
244
+ &-card {
245
+ border-radius: $CAP_SPACE_08;
246
+ border: $CAP_SPACE_01 solid $CAP_G06;
247
+ padding: 0;
248
+ }
249
+
250
+ &-card-row {
251
+ display: flex;
252
+ align-items: flex-start;
253
+ padding: 0;
254
+ }
255
+
256
+ &-avatar {
257
+ width: 3rem; /* 48px at 16px root */
258
+ height: 3rem;
259
+ border-radius: 1.25rem; /* 20px at 16px root */
260
+ background-color: $CAP_G07;
261
+ display: flex;
262
+ align-items: center;
263
+ justify-content: center;
264
+ margin-top: $CAP_SPACE_04;
265
+ margin-right: $CAP_SPACE_16;
266
+ flex-shrink: 0;
267
+ }
268
+
269
+ &-avatar-icon {
270
+ font-size: $CAP_SPACE_24;
271
+ color: $CAP_G01;
272
+ }
273
+
274
+ &-details {
275
+ flex: 1;
276
+ }
277
+
278
+ &-name {
279
+ font-size: $FONT_SIZE_L;
280
+ font-weight: 500;
281
+ color: $CAP_G01;
282
+ margin-bottom: $CAP_SPACE_04;
283
+ }
284
+
285
+ &-meta {
286
+ font-size: $FONT_SIZE_M;
287
+ color: $CAP_G01;
288
+ line-height: 1.4;
289
+ }
290
+
291
+ &-meta-label {
292
+ color: $CAP_G04;
293
+ }
294
+ }
152
295
  }
153
296
 
154
297
 
155
298
  .add-test-customer-icon {
156
- margin-top: 0.3rem;
157
- margin-right: 0.5rem;
299
+ margin-top: 0.3rem;
300
+ margin-right: 0.5rem;
158
301
  }
159
302
 
160
303
  .common-test-and-preview-slidebox {
161
- .test-preview-header {
162
- display: flex;
163
- align-items: center;
164
- gap: $CAP_SPACE_12;
165
-
166
- .back-icon {
167
- cursor: pointer;
168
- font-size: $CAP_SPACE_16;
169
- color: #8c8c8c;
170
- transition: color 0.2s ease;
171
-
172
- &:hover {
173
- color: #262626;
174
- }
175
- }
176
-
177
- .header-title {
178
- font-size: $CAP_SPACE_16;
179
- font-weight: 500;
180
- color: #262626;
181
- }
182
- }
183
-
184
- .test-preview-container {
185
- margin-left: 2%;
186
- height: 100%;
187
- display: flex;
188
- flex-direction: column;
189
- }
190
-
191
- .discard-button {
192
- padding: 0 $CAP_SPACE_08;
193
- }
194
-
195
- .tag-input-field {
196
- width: 14.714rem;
197
- .input {
198
- height: $CAP_SPACE_40;
199
- }
200
- }
201
-
202
- .test-and-preview-panels {
203
- display: flex;
204
- flex: 1;
205
- }
206
-
207
- .left-panel {
208
- width: 40%;
209
- min-width: 20rem; /* Consistent width in campaigns/library mode so test customer dropdown matches creatives */
210
- padding-right: 1rem;
211
- border-right: $CAP_SPACE_01 solid $CAP_G12;
212
- overflow-y: auto;
213
- .panel-divider {
214
- margin: 0;
215
- }
216
- .no-tags-extracted-info-note {
217
- .note-text {
218
- white-space: unset;
219
- }
220
- }
221
- }
222
-
223
- .right-panel {
224
- flex: 1;
225
- background-color: $CAP_G09;
226
- padding: $CAP_SPACE_08 $CAP_SPACE_24;
227
- }
228
-
229
- .panel-section {
230
- margin-bottom: $CAP_SPACE_12;
231
-
232
- &:last-child {
233
- margin-bottom: 0;
234
- }
235
- }
236
-
237
- .loading-container {
238
- display: flex;
239
- flex-direction: column;
240
- align-items: center;
241
- justify-content: center;
242
- padding: $CAP_SPACE_32;
243
- text-align: center;
244
-
245
- .loading-text {
246
- margin-top: $CAP_SPACE_16;
247
- color: #666;
248
- }
249
- }
250
-
251
- .no-customer-message,
252
- .no-tags-message {
253
- padding: $CAP_SPACE_32;
254
- text-align: center;
255
- color: #666;
256
- background: #f5f5f5;
257
- border-radius: $CAP_SPACE_04;
258
- }
259
-
260
- .custom-values-editor {
261
- .values-missing-message {
262
- margin: $CAP_SPACE_16 0;
263
- }
264
- .editor-header {
265
- display: flex;
266
- justify-content: flex-end;
267
- margin-bottom: $CAP_SPACE_16;
268
-
269
- .json-toggle {
270
- display: flex;
271
- align-items: center;
272
- gap: $CAP_SPACE_08;
273
-
274
- .toggle-label {
275
- color: #666;
276
- }
277
- }
278
- }
279
-
280
- .json-editor {
281
- border: 0.071rem solid #e0e0e0;
282
- border-radius: $CAP_SPACE_04;
283
- background-color: $CAP_WHITE;
284
- margin-bottom: 1rem;
285
- overflow: hidden;
286
-
287
- .json-editor-container {
288
- display: flex;
289
- font-family: 'Courier New', monospace;
290
- font-size: 0.929rem;
291
- line-height: 1.4;
292
- }
293
-
294
- .line-numbers {
295
- background-color: #f8f8f8;
296
- border-right: 0.071rem solid #e0e0e0;
297
- padding: $CAP_SPACE_08 $CAP_SPACE_04;
298
- user-select: none;
299
- min-width: $CAP_SPACE_40;
300
- flex-shrink: 0;
301
-
302
- .line-number {
303
- text-align: right;
304
- color: #8c8c8c;
305
- font-size: $CAP_SPACE_12;
306
- padding-right: $CAP_SPACE_08;
307
- line-height: 1.4;
308
- height: $CAP_SPACE_19;
309
- display: flex;
310
- align-items: center;
311
- justify-content: flex-end;
312
- }
313
- }
314
-
315
- .json-textarea {
316
- flex: 1;
317
- border: none;
318
- outline: none;
319
- font-family: 'Courier New', monospace;
320
- font-size: 0.929rem;
321
- line-height: 1.4;
322
- padding: $CAP_SPACE_08 $CAP_SPACE_08;
323
- background-color: $CAP_WHITE;
324
- resize: none;
325
- white-space: pre;
326
- overflow-wrap: normal;
327
- overflow-x: auto;
328
- tab-size: 2;
329
- color: #3D7790;
330
-
331
- &:focus {
332
- outline: none;
333
- }
334
- }
335
-
336
- .json-container {
337
- font-family: 'Courier New', monospace;
338
- font-size: 0.929rem;
339
- line-height: 1.4;
340
- }
341
-
342
- .json-line {
343
- display: flex;
344
- align-items: center;
345
- min-height: $CAP_SPACE_20;
346
- padding-left: $CAP_SPACE_08;
347
-
348
- &:hover {
349
- background-color: #f5f5f5;
350
- }
351
- }
352
-
353
- .line-number {
354
- display: inline-block;
355
- width: $CAP_SPACE_24;
356
- text-align: right;
357
- margin-right: $CAP_SPACE_12;
358
- color: #8c8c8c;
359
- font-size: $CAP_SPACE_12;
360
- user-select: none;
361
- flex-shrink: 0;
362
- }
363
-
364
- .json-indent {
365
- color: transparent;
366
- white-space: pre;
367
- }
368
-
369
- .json-key {
370
- color: #3D7790;
371
- font-weight: 500;
372
- }
373
-
374
- .json-colon {
375
- color: black;
376
- margin: 0 $CAP_SPACE_02;
377
- }
378
-
379
- .json-quote {
380
- color: #0451a5;
381
- }
382
-
383
- .json-brace {
384
- color: black;
385
- font-weight: bold;
386
- }
387
-
388
- .json-comma {
389
- color: black;
390
- }
391
-
392
- .json-value-input {
393
- border: none;
394
- background-color: transparent;
395
- box-shadow: none;
396
- padding: 0 $CAP_SPACE_02;
397
- font-family: inherit;
398
- font-size: inherit;
399
- color: #0451a5;
400
- min-width: $CAP_SPACE_60;
401
-
402
- &:focus {
403
- background-color: #e6f7ff;
404
- border: $CAP_SPACE_01 solid #40a9ff;
405
- border-radius: $CAP_SPACE_02;
406
- outline: none;
407
- }
408
-
409
- &::placeholder {
410
- color: #bfbfbf;
411
- font-style: italic;
412
- }
413
- .ant-input {
414
- margin: $CAP_SPACE_06 0;
415
- height: $CAP_SPACE_36;
416
- width: 14.714rem;
417
- }
418
- }
419
- }
420
-
421
- .values-table {
422
- margin-bottom: $CAP_SPACE_16;
423
- border: $CAP_SPACE_01 solid $CAP_G12;
424
- border-radius: $CAP_SPACE_04;
425
- overflow: hidden;
426
-
427
- .table-header {
428
- display: flex;
429
- background: #f5f5f5;
430
- border-bottom: $CAP_SPACE_01 solid $CAP_G12;
431
-
432
- .header-cell {
433
- flex: 1;
434
- padding: $CAP_SPACE_12 $CAP_SPACE_16;
435
- font-weight: 500;
436
- color: #666;
437
-
438
- &:first-child {
439
- flex: 2;
440
- }
441
- }
442
- }
443
-
444
- .value-row {
445
- display: flex;
446
- border-bottom: $CAP_SPACE_01 solid $CAP_G12;
447
-
448
- &:last-child {
449
- border-bottom: none;
450
- }
451
-
452
- .tag-name {
453
- flex: 2;
454
- padding: $CAP_SPACE_12 $CAP_SPACE_16;
455
- color: #333;
456
- word-break: break-all;
457
- }
458
-
459
- .tag-input {
460
- flex: 1;
461
- padding: $CAP_SPACE_08 $CAP_SPACE_16;
462
- display: flex;
463
- align-items: center;
464
- }
465
- }
466
- }
467
-
468
- .editor-actions {
469
- display: flex;
470
- justify-content: space-between;
471
- margin-bottom: $CAP_SPACE_16;
472
- }
473
- .editor-actions::before,
474
- .editor-actions::after {
475
- content: none;
476
- display: none;
477
- }
478
-
479
- .optional-tags-section {
480
- .optional-count {
481
- margin-left: $CAP_SPACE_08;
482
- color: #666;
483
- }
484
-
485
- z-index: -1;
486
- .optional-tags-content {
487
- padding: $CAP_SPACE_16;
488
- background: #f5f5f5;
489
- border-radius: $CAP_SPACE_04;
490
- }
491
- }
492
- }
493
-
494
- .test-and-preview-section {
495
- .section-title {
496
- margin-bottom: $CAP_SPACE_16;
497
- color: #333;
498
- }
499
-
500
- .preview-content {
501
- border: $CAP_SPACE_01 solid $CAP_G12;
502
- border-radius: $CAP_SPACE_04;
503
- padding: $CAP_SPACE_16;
504
- min-height: 14.286rem;
505
- }
506
- }
507
-
508
- .send-test-section {
509
- .test-description {
510
- margin-bottom: $CAP_SPACE_16;
511
- color: #666;
512
- }
513
- .ant-collapse-header {
514
- padding-left: 0;
515
- }
516
- .ant-collapse-content-box {
517
- padding-left: 0 !important;
518
- }
519
- .send-test-content {
520
- flex-direction: column;
521
- align-items: stretch;
522
- gap: 0;
523
- }
524
- .test-customers-tree-select {
525
- width: 100%;
526
- min-width: 18rem; /* Consistent dropdown width in campaigns and creatives */
527
- min-height: $CAP_SPACE_40;
528
- margin: $CAP_SPACE_12 0 $CAP_SPACE_08;
529
- .ant-select-selection,
530
- .ant-select-selector {
531
- min-height: $CAP_SPACE_40;
532
- height: auto !important;
533
- }
534
- }
535
- .send-test-content .ant-btn {
536
- margin-top: $CAP_SPACE_04;
537
- flex-shrink: 0;
538
- }
539
- .ant-select-selection__choice {
540
- background-color: $CAP_G08;
541
- border-radius: $CAP_SPACE_04;
542
- }
543
- }
304
+ .test-preview-header {
305
+ display: flex;
306
+ align-items: center;
307
+ gap: $CAP_SPACE_12;
308
+
309
+ .back-icon {
310
+ cursor: pointer;
311
+ font-size: $CAP_SPACE_16;
312
+ color: #8c8c8c;
313
+ transition: color 0.2s ease;
314
+
315
+ &:hover {
316
+ color: #262626;
317
+ }
318
+ }
319
+
320
+ .header-title {
321
+ font-size: $CAP_SPACE_16;
322
+ font-weight: 500;
323
+ color: #262626;
324
+ }
325
+ }
326
+
327
+ .test-preview-container {
328
+ margin-left: 2%;
329
+ height: 100%;
330
+ display: flex;
331
+ flex-direction: column;
332
+ }
333
+
334
+ .discard-button {
335
+ padding: 0 $CAP_SPACE_08;
336
+ }
337
+
338
+ .tag-input-field {
339
+ width: 14.714rem;
340
+ .input {
341
+ height: $CAP_SPACE_40;
342
+ }
343
+ }
344
+
345
+ .test-and-preview-panels {
346
+ display: flex;
347
+ flex: 1;
348
+ }
349
+
350
+ .left-panel {
351
+ width: 40%;
352
+ min-width: 20rem; /* Consistent width in campaigns/library mode so test customer dropdown matches creatives */
353
+ padding-right: 1rem;
354
+ border-right: $CAP_SPACE_01 solid $CAP_G12;
355
+ overflow-y: auto;
356
+ .panel-divider {
357
+ margin: 0;
358
+ }
359
+ .no-tags-extracted-info-note {
360
+ .note-text {
361
+ white-space: unset;
362
+ }
363
+ }
364
+ }
365
+
366
+ .right-panel {
367
+ flex: 1;
368
+ background-color: $CAP_G09;
369
+ padding: $CAP_SPACE_08 $CAP_SPACE_24;
370
+ }
371
+
372
+ .panel-section {
373
+ margin-bottom: $CAP_SPACE_12;
374
+
375
+ &:last-child {
376
+ margin-bottom: 0;
377
+ }
378
+ }
379
+
380
+ .loading-container {
381
+ display: flex;
382
+ flex-direction: column;
383
+ align-items: center;
384
+ justify-content: center;
385
+ padding: $CAP_SPACE_32;
386
+ text-align: center;
387
+
388
+ .loading-text {
389
+ margin-top: $CAP_SPACE_16;
390
+ color: #666;
391
+ }
392
+ }
393
+
394
+ .no-customer-message,
395
+ .no-tags-message {
396
+ padding: $CAP_SPACE_32;
397
+ text-align: center;
398
+ color: #666;
399
+ background: #f5f5f5;
400
+ border-radius: $CAP_SPACE_04;
401
+ }
402
+
403
+ .custom-values-editor {
404
+ .values-missing-message {
405
+ margin: $CAP_SPACE_16 0;
406
+ }
407
+ .editor-header {
408
+ display: flex;
409
+ justify-content: flex-end;
410
+ margin-bottom: $CAP_SPACE_16;
411
+
412
+ .json-toggle {
413
+ display: flex;
414
+ align-items: center;
415
+ gap: $CAP_SPACE_08;
416
+
417
+ .toggle-label {
418
+ color: #666;
419
+ }
420
+ }
421
+ }
422
+
423
+ .json-editor {
424
+ border: 0.071rem solid #e0e0e0;
425
+ border-radius: $CAP_SPACE_04;
426
+ background-color: $CAP_WHITE;
427
+ margin-bottom: 1rem;
428
+ overflow: hidden;
429
+
430
+ .json-editor-container {
431
+ display: flex;
432
+ font-family: 'Courier New', monospace;
433
+ font-size: 0.929rem;
434
+ line-height: 1.4;
435
+ }
436
+
437
+ .line-numbers {
438
+ background-color: #f8f8f8;
439
+ border-right: 0.071rem solid #e0e0e0;
440
+ padding: $CAP_SPACE_08 $CAP_SPACE_04;
441
+ user-select: none;
442
+ min-width: $CAP_SPACE_40;
443
+ flex-shrink: 0;
444
+
445
+ .line-number {
446
+ text-align: right;
447
+ color: #8c8c8c;
448
+ font-size: $CAP_SPACE_12;
449
+ padding-right: $CAP_SPACE_08;
450
+ line-height: 1.4;
451
+ height: $CAP_SPACE_19;
452
+ display: flex;
453
+ align-items: center;
454
+ justify-content: flex-end;
455
+ }
456
+ }
457
+
458
+ .json-textarea {
459
+ flex: 1;
460
+ border: none;
461
+ outline: none;
462
+ font-family: 'Courier New', monospace;
463
+ font-size: 0.929rem;
464
+ line-height: 1.4;
465
+ padding: $CAP_SPACE_08 $CAP_SPACE_08;
466
+ background-color: $CAP_WHITE;
467
+ resize: none;
468
+ white-space: pre;
469
+ overflow-wrap: normal;
470
+ overflow-x: auto;
471
+ tab-size: 2;
472
+ color: #3D7790;
473
+
474
+ &:focus {
475
+ outline: none;
476
+ }
477
+ }
478
+
479
+ .json-container {
480
+ font-family: 'Courier New', monospace;
481
+ font-size: 0.929rem;
482
+ line-height: 1.4;
483
+ }
484
+
485
+ .json-line {
486
+ display: flex;
487
+ align-items: center;
488
+ min-height: $CAP_SPACE_20;
489
+ padding-left: $CAP_SPACE_08;
490
+
491
+ &:hover {
492
+ background-color: #f5f5f5;
493
+ }
494
+ }
495
+
496
+ .line-number {
497
+ display: inline-block;
498
+ width: $CAP_SPACE_24;
499
+ text-align: right;
500
+ margin-right: $CAP_SPACE_12;
501
+ color: #8c8c8c;
502
+ font-size: $CAP_SPACE_12;
503
+ user-select: none;
504
+ flex-shrink: 0;
505
+ }
506
+
507
+ .json-indent {
508
+ color: transparent;
509
+ white-space: pre;
510
+ }
511
+
512
+ .json-key {
513
+ color: #3D7790;
514
+ font-weight: 500;
515
+ }
516
+
517
+ .json-colon {
518
+ color: black;
519
+ margin: 0 $CAP_SPACE_02;
520
+ }
521
+
522
+ .json-quote {
523
+ color: #0451a5;
524
+ }
525
+
526
+ .json-brace {
527
+ color: black;
528
+ font-weight: bold;
529
+ }
530
+
531
+ .json-comma {
532
+ color: black;
533
+ }
534
+
535
+ .json-value-input {
536
+ border: none;
537
+ background-color: transparent;
538
+ box-shadow: none;
539
+ padding: 0 $CAP_SPACE_02;
540
+ font-family: inherit;
541
+ font-size: inherit;
542
+ color: #0451a5;
543
+ min-width: $CAP_SPACE_60;
544
+
545
+ &:focus {
546
+ background-color: #e6f7ff;
547
+ border: $CAP_SPACE_01 solid #40a9ff;
548
+ border-radius: $CAP_SPACE_02;
549
+ outline: none;
550
+ }
551
+
552
+ &::placeholder {
553
+ color: #bfbfbf;
554
+ font-style: italic;
555
+ }
556
+ .ant-input {
557
+ margin: $CAP_SPACE_06 0;
558
+ height: $CAP_SPACE_36;
559
+ width: 14.714rem;
560
+ }
561
+ }
562
+ }
563
+
564
+ .values-table {
565
+ margin-bottom: $CAP_SPACE_16;
566
+ border: $CAP_SPACE_01 solid $CAP_G12;
567
+ border-radius: $CAP_SPACE_04;
568
+ overflow: hidden;
569
+
570
+ .table-header {
571
+ display: flex;
572
+ background: #f5f5f5;
573
+ border-bottom: $CAP_SPACE_01 solid $CAP_G12;
574
+
575
+ .header-cell {
576
+ flex: 1;
577
+ padding: $CAP_SPACE_12 $CAP_SPACE_16;
578
+ font-weight: 500;
579
+ color: #666;
580
+
581
+ &:first-child {
582
+ flex: 2;
583
+ }
584
+ }
585
+ }
586
+
587
+ .value-row {
588
+ display: flex;
589
+ border-bottom: $CAP_SPACE_01 solid $CAP_G12;
590
+
591
+ &:last-child {
592
+ border-bottom: none;
593
+ }
594
+
595
+ .tag-name {
596
+ flex: 2;
597
+ padding: $CAP_SPACE_12 $CAP_SPACE_16;
598
+ color: #333;
599
+ word-break: break-all;
600
+ }
601
+
602
+ .tag-input {
603
+ flex: 1;
604
+ padding: $CAP_SPACE_08 $CAP_SPACE_16;
605
+ display: flex;
606
+ align-items: center;
607
+ }
608
+ }
609
+ }
610
+
611
+ .editor-actions {
612
+ display: flex;
613
+ justify-content: space-between;
614
+ margin-bottom: $CAP_SPACE_16;
615
+ }
616
+ .editor-actions::before,
617
+ .editor-actions::after {
618
+ content: none;
619
+ display: none;
620
+ }
621
+
622
+ .optional-tags-section {
623
+ .optional-count {
624
+ margin-left: $CAP_SPACE_08;
625
+ color: #666;
626
+ }
627
+
628
+ z-index: -1;
629
+ .optional-tags-content {
630
+ padding: $CAP_SPACE_16;
631
+ background: #f5f5f5;
632
+ border-radius: $CAP_SPACE_04;
633
+ }
634
+ }
635
+ }
636
+
637
+ .test-and-preview-section {
638
+ .section-title {
639
+ margin-bottom: $CAP_SPACE_16;
640
+ color: #333;
641
+ }
642
+
643
+ .preview-content {
644
+ border: $CAP_SPACE_01 solid $CAP_G12;
645
+ border-radius: $CAP_SPACE_04;
646
+ padding: $CAP_SPACE_16;
647
+ min-height: 14.286rem;
648
+ }
649
+ }
650
+
651
+ .send-test-section {
652
+ .test-description {
653
+ margin-bottom: $CAP_SPACE_16;
654
+ color: #666;
655
+ }
656
+ .ant-collapse-header {
657
+ padding-left: 0;
658
+ }
659
+ .ant-collapse-content-box {
660
+ padding-left: 0 !important;
661
+ }
662
+ .send-test-content {
663
+ flex-direction: column;
664
+ align-items: stretch;
665
+ gap: 0;
666
+ }
667
+ .test-customers-tree-select {
668
+ width: 100%;
669
+ min-width: 18rem; /* Consistent dropdown width in campaigns and creatives */
670
+ min-height: $CAP_SPACE_40;
671
+ margin: $CAP_SPACE_12 0 $CAP_SPACE_08;
672
+ .ant-select-selection,
673
+ .ant-select-selector {
674
+ min-height: $CAP_SPACE_40;
675
+ height: auto !important;
676
+ }
677
+ }
678
+ .send-test-content .ant-btn {
679
+ margin-top: $CAP_SPACE_04;
680
+ flex-shrink: 0;
681
+ }
682
+ .ant-select-selection__choice {
683
+ background-color: $CAP_G08;
684
+ border-radius: $CAP_SPACE_04;
685
+ }
686
+ }
544
687
  }
545
688
 
546
689
  // Test customers TreeSelect dropdown: limit height and make scrollable (dropdown renders in portal)
547
690
  // min-width so dropdown looks the same in campaigns and creatives
548
691
  .test-customers-tree-select-dropdown {
549
- min-width: 18rem !important;
550
- max-height: 20rem !important; /* 320px */
551
- overflow-y: auto !important;
552
- .ant-select-tree-list-holder-inner {
553
- overflow: visible;
554
- }
692
+ min-width: 18rem !important;
693
+ max-height: 20rem !important; /* 320px */
694
+ overflow-y: auto !important;
695
+ .ant-select-tree-list-holder-inner {
696
+ overflow: visible;
697
+ }
555
698
  }
556
699
 
557
700
  .test-customer-add-btn {
558
- width: 100%;
559
- background-color: transparent !important;
560
- color: $FONT_COLOR_05 !important;
561
- white-space: normal;
562
- word-break: normal;
563
- overflow-wrap: break-word;
564
- height: auto;
565
-
566
- /* Truncate long email/phone in label so it doesn't break mid-string */
567
- .test-customer-add-btn-value {
568
- display: inline-block;
569
- max-width: 12rem;
570
- overflow: hidden;
571
- text-overflow: ellipsis;
572
- white-space: nowrap;
573
- vertical-align: bottom;
574
- }
701
+ width: 100%;
702
+ background-color: transparent !important;
703
+ color: $FONT_COLOR_05 !important;
704
+ white-space: normal;
705
+ word-break: normal;
706
+ overflow-wrap: break-word;
707
+ height: auto;
708
+
709
+ /* Truncate long email/phone in label so it doesn't break mid-string */
710
+ .test-customer-add-btn-value {
711
+ display: inline-block;
712
+ max-width: 12rem;
713
+ overflow: hidden;
714
+ text-overflow: ellipsis;
715
+ white-space: nowrap;
716
+ vertical-align: bottom;
717
+ }
575
718
  }
576
719
 
577
720
  // Responsive design for smaller screens
578
721
  @media (max-width: 54.857rem) {
579
- .common-test-and-preview-slidebox {
580
- .test-preview-container {
581
- .left-panel {
582
- border-right: none;
583
- border-bottom: $CAP_SPACE_01 solid $CAP_G12;
584
- padding-right: 0;
585
- padding-bottom: $CAP_SPACE_16;
586
- margin-bottom: $CAP_SPACE_16;
587
- }
588
-
589
- .right-panel {
590
- padding-left: 0;
591
- padding-top: $CAP_SPACE_16;
592
- }
593
- }
594
- }
722
+ .common-test-and-preview-slidebox {
723
+ .test-preview-container {
724
+ .left-panel {
725
+ border-right: none;
726
+ border-bottom: $CAP_SPACE_01 solid $CAP_G12;
727
+ padding-right: 0;
728
+ padding-bottom: $CAP_SPACE_16;
729
+ margin-bottom: $CAP_SPACE_16;
730
+ }
731
+
732
+ .right-panel {
733
+ padding-left: 0;
734
+ padding-top: $CAP_SPACE_16;
735
+ }
736
+ }
737
+ }
595
738
  }
596
739
 
597
740
  .preview-chrome {
598
- background: $CAP_WHITE;
599
- overflow: hidden;
600
-
601
- .preview-divider {
602
- margin: 0;
603
- }
604
- .preview-header {
605
- display: flex;
606
- justify-content: space-between;
607
- align-items: center;
608
- padding: $CAP_SPACE_08 $CAP_SPACE_16 $CAP_SPACE_06 $CAP_SPACE_16;
609
- background: #f0f2f5;
610
-
611
- .preview-for {
612
- font-size: $FONT_SIZE_M;
613
- color: #595959;
614
- gap: $CAP_SPACE_04;
615
- b {
616
- color: #262626;
617
- margin-left: $CAP_SPACE_04;
618
- }
619
- }
620
-
621
- .device-toggle {
622
- display: flex;
623
- gap: $CAP_SPACE_08;
624
- background-color: #e0e0e0;
625
- padding: $CAP_SPACE_06 $CAP_SPACE_08;
626
- border-radius: $CAP_SPACE_08;
627
-
628
- .anticon {
629
- padding: $CAP_SPACE_04;
630
- border-radius: $CAP_SPACE_04;
631
- cursor: pointer;
632
- color: #595959;
633
-
634
- &.active {
635
- background-color: $CAP_WHITE;
636
- color: #262626;
637
- box-shadow: 0 $CAP_SPACE_01 $CAP_SPACE_03 rgba(0, 0, 0, 0.1);
638
- }
639
- }
640
- }
641
- }
642
-
643
- .preview-body {
644
- border-radius: $CAP_SPACE_08;
645
- box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0,0,0,0.1);
646
- &.mobile {
647
- width: 26.786rem;
648
- margin: 0 auto;
649
- .browser-bar {
650
- background: $CAP_G08;
651
- }
652
- }
653
-
654
- .browser-bar {
655
- display: flex;
656
- align-items: center;
657
- padding: $CAP_SPACE_08 $CAP_SPACE_12;
658
- gap: $CAP_SPACE_08;
659
-
660
- .browser-controls {
661
- display: flex;
662
- gap: $CAP_SPACE_08;
663
- color: $CAP_G06;
664
- .refresh-icon {
665
- margin-top: $CAP_SPACE_04;
666
- svg path {
667
- fill: $CAP_G06;
668
- }
669
- }
670
- }
671
- .address-bar {
672
- flex-grow: 1;
673
- background: $CAP_WHITE;
674
- border-radius: $CAP_SPACE_16;
675
- padding: $CAP_SPACE_04 $CAP_SPACE_12;
676
- font-size: $FONT_SIZE_S;
677
- color: #595959;
678
- text-align: center;
679
- border: $CAP_SPACE_01 solid $CAP_G07;
680
- .address-bar-label {
681
- float: left;
682
- }
683
- .browser-address-bar-icon {
684
- float: right;
685
- }
686
- }
687
- .browser-actions {
688
- color: #8c8c8c;
689
- }
690
- }
691
-
692
- .email-header {
693
- display: flex;
694
- align-items: center;
695
- padding: $CAP_SPACE_16;
696
- gap: $CAP_SPACE_16;
697
- .back-arrow {
698
- font-size: $CAP_SPACE_16;
699
- }
700
- .email-meta {
701
- margin-left: auto;
702
- display: flex;
703
- align-items: center;
704
- gap: $CAP_SPACE_08;
705
- font-size: $FONT_SIZE_S;
706
- color: #8c8c8c;
707
- .dots {
708
- width: $CAP_SPACE_06;
709
- height: $CAP_SPACE_06;
710
- border-radius: 50%;
711
- background: $CAP_COLOR_16;
712
- }
713
- }
714
- }
715
-
716
- .email-from {
717
- display: flex;
718
- align-items: center;
719
- padding: 0 $CAP_SPACE_16 $CAP_SPACE_16;
720
- gap: $CAP_SPACE_12;
721
- .sender-avatar {
722
- width: $CAP_SPACE_40;
723
- height: $CAP_SPACE_40;
724
- border-radius: 50%;
725
- background: $CAP_G12;
726
- }
727
- .sender-info {
728
- .sender-name {
729
- font-weight: 500;
730
- }
731
- .recipient-info {
732
- font-size: $FONT_SIZE_S;
733
- color: #8c8c8c;
734
- }
735
- }
736
- }
737
-
738
- .email-content {
739
- border-top: $CAP_SPACE_01 solid $CAP_G12;
740
- padding: 0 $CAP_SPACE_16;
741
- iframe {
742
- border: none;
743
- }
744
- }
745
- }
741
+ background: $CAP_WHITE;
742
+ overflow: hidden;
743
+
744
+ .preview-divider {
745
+ margin: 0;
746
+ }
747
+ .preview-header {
748
+ display: flex;
749
+ justify-content: space-between;
750
+ align-items: center;
751
+ padding: $CAP_SPACE_08 $CAP_SPACE_16 $CAP_SPACE_06 $CAP_SPACE_16;
752
+ background: #f0f2f5;
753
+
754
+ .preview-for {
755
+ font-size: $FONT_SIZE_M;
756
+ color: #595959;
757
+ gap: $CAP_SPACE_04;
758
+ b {
759
+ color: #262626;
760
+ margin-left: $CAP_SPACE_04;
761
+ }
762
+ }
763
+
764
+ .device-toggle {
765
+ display: flex;
766
+ gap: $CAP_SPACE_08;
767
+ background-color: #e0e0e0;
768
+ padding: $CAP_SPACE_06 $CAP_SPACE_08;
769
+ border-radius: $CAP_SPACE_08;
770
+
771
+ .anticon {
772
+ padding: $CAP_SPACE_04;
773
+ border-radius: $CAP_SPACE_04;
774
+ cursor: pointer;
775
+ color: #595959;
776
+
777
+ &.active {
778
+ background-color: $CAP_WHITE;
779
+ color: #262626;
780
+ box-shadow: 0 $CAP_SPACE_01 $CAP_SPACE_03 rgba(0, 0, 0, 0.1);
781
+ }
782
+ }
783
+ }
784
+ }
785
+
786
+ .preview-body {
787
+ border-radius: $CAP_SPACE_08;
788
+ box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0,0,0,0.1);
789
+ &.mobile {
790
+ width: 26.786rem;
791
+ margin: 0 auto;
792
+ .browser-bar {
793
+ background: $CAP_G08;
794
+ }
795
+ }
796
+
797
+ .browser-bar {
798
+ display: flex;
799
+ align-items: center;
800
+ padding: $CAP_SPACE_08 $CAP_SPACE_12;
801
+ gap: $CAP_SPACE_08;
802
+
803
+ .browser-controls {
804
+ display: flex;
805
+ gap: $CAP_SPACE_08;
806
+ color: $CAP_G06;
807
+ .refresh-icon {
808
+ margin-top: $CAP_SPACE_04;
809
+ svg path {
810
+ fill: $CAP_G06;
811
+ }
812
+ }
813
+ }
814
+ .address-bar {
815
+ flex-grow: 1;
816
+ background: $CAP_WHITE;
817
+ border-radius: $CAP_SPACE_16;
818
+ padding: $CAP_SPACE_04 $CAP_SPACE_12;
819
+ font-size: $FONT_SIZE_S;
820
+ color: #595959;
821
+ text-align: center;
822
+ border: $CAP_SPACE_01 solid $CAP_G07;
823
+ .address-bar-label {
824
+ float: left;
825
+ }
826
+ .browser-address-bar-icon {
827
+ float: right;
828
+ }
829
+ }
830
+ .browser-actions {
831
+ color: #8c8c8c;
832
+ }
833
+ }
834
+
835
+ .email-header {
836
+ display: flex;
837
+ align-items: center;
838
+ padding: $CAP_SPACE_16;
839
+ gap: $CAP_SPACE_16;
840
+ .back-arrow {
841
+ font-size: $CAP_SPACE_16;
842
+ }
843
+ .email-meta {
844
+ margin-left: auto;
845
+ display: flex;
846
+ align-items: center;
847
+ gap: $CAP_SPACE_08;
848
+ font-size: $FONT_SIZE_S;
849
+ color: #8c8c8c;
850
+ .dots {
851
+ width: $CAP_SPACE_06;
852
+ height: $CAP_SPACE_06;
853
+ border-radius: 50%;
854
+ background: $CAP_COLOR_16;
855
+ }
856
+ }
857
+ }
858
+
859
+ .email-from {
860
+ display: flex;
861
+ align-items: center;
862
+ padding: 0 $CAP_SPACE_16 $CAP_SPACE_16;
863
+ gap: $CAP_SPACE_12;
864
+ .sender-avatar {
865
+ width: $CAP_SPACE_40;
866
+ height: $CAP_SPACE_40;
867
+ border-radius: 50%;
868
+ background: $CAP_G12;
869
+ }
870
+ .sender-info {
871
+ .sender-name {
872
+ font-weight: 500;
873
+ }
874
+ .recipient-info {
875
+ font-size: $FONT_SIZE_S;
876
+ color: #8c8c8c;
877
+ }
878
+ }
879
+ }
880
+
881
+ .email-content {
882
+ border-top: $CAP_SPACE_01 solid $CAP_G12;
883
+ padding: 0 $CAP_SPACE_16;
884
+ iframe {
885
+ border: none;
886
+ }
887
+ }
888
+ }
746
889
  }