@agentpaid/paid-nextjs-client 0.3.0-test.2 → 0.3.0

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 (38) hide show
  1. package/README.md +246 -72
  2. package/dist/components/PaidActivityLog.d.ts +11 -24
  3. package/dist/components/PaidActivityLog.d.ts.map +1 -1
  4. package/dist/components/PaidActivityLog.js +53 -26
  5. package/dist/components/PaidActivityLog.js.map +1 -1
  6. package/dist/components/PaidContainer.d.ts +11 -24
  7. package/dist/components/PaidContainer.d.ts.map +1 -1
  8. package/dist/components/PaidContainer.js +18 -9
  9. package/dist/components/PaidContainer.js.map +1 -1
  10. package/dist/components/PaidInvoiceTable.d.ts +11 -24
  11. package/dist/components/PaidInvoiceTable.d.ts.map +1 -1
  12. package/dist/components/PaidInvoiceTable.js +57 -30
  13. package/dist/components/PaidInvoiceTable.js.map +1 -1
  14. package/dist/components/PaidPaymentsTable.d.ts +11 -24
  15. package/dist/components/PaidPaymentsTable.d.ts.map +1 -1
  16. package/dist/components/PaidPaymentsTable.js +54 -28
  17. package/dist/components/PaidPaymentsTable.js.map +1 -1
  18. package/dist/components/components/PaidActivityLog.js +98 -57
  19. package/dist/components/components/PaidContainer.js +42 -32
  20. package/dist/components/components/PaidInvoiceTable.js +103 -86
  21. package/dist/components/components/PaidPaymentsTable.js +102 -69
  22. package/dist/components/components/ui/Pagination.js +168 -0
  23. package/dist/components/ui/Pagination.d.ts +10 -0
  24. package/dist/components/ui/Pagination.d.ts.map +1 -0
  25. package/dist/components/ui/Pagination.js +111 -0
  26. package/dist/components/ui/Pagination.js.map +1 -0
  27. package/dist/index.d.ts +3 -1
  28. package/dist/index.d.ts.map +1 -1
  29. package/dist/index.js +3 -1
  30. package/dist/index.js.map +1 -1
  31. package/dist/styles/activity-log-table.css +94 -78
  32. package/dist/styles/paid-container.css +25 -16
  33. package/dist/styles/paid-invoice-table.css +135 -120
  34. package/dist/styles/paid-payments-table.css +65 -109
  35. package/dist/tsconfig.tsbuildinfo +1 -1
  36. package/dist/utils/cache.js +1 -1
  37. package/dist/utils/cache.js.map +1 -1
  38. package/package.json +1 -1
package/dist/styles/paid-invoice-table.css CHANGED
@@ -11,8 +11,8 @@
11
11
 
12
12
  .paid-invoice-table-wrapper {
13
13
  position: relative;
14
- background: var(--paid-wrapper-bg, #fff);
15
- border: var(--paid-wrapper-border, 1px solid #e5e7eb);
14
+ background: var(--paid-table-background-color, #fff);
15
+ border: 1px solid #e5e7eb;
16
16
  border-radius: 12px;
17
17
  box-shadow: 0 2px 16px 0 rgba(16, 24, 40, 0.08);
18
18
  overflow-x: auto;
@@ -30,16 +30,17 @@
30
30
  display: flex;
31
31
  justify-content: space-between;
32
32
  align-items: center;
33
- padding: 18px 24px;
34
- background: var(--paid-header-bg, #fff);
35
- border-bottom: var(--paid-header-border-bottom, 1px solid #e5e7eb);
33
+ padding: var(--paid-header-padding, 18px 24px);
34
+ background: var(--paid-container-background-color, #f8f9fa);
35
+ border-bottom: 1px solid #e5e7eb;
36
36
  border-radius: 12px 12px 0 0;
37
37
  font-family: var(--paid-font-family, 'Roboto');
38
38
  }
39
39
  .paid-invoice-title {
40
- font-size: var(--paid-title-font-size, 1.1rem);
41
- font-weight: var(--paid-title-font-weight, 600);
42
- color: var(--paid-title-color, #1d2939);
40
+ margin: 0;
41
+ font-size: var(--paid-h3-font-size, 1.1rem);
42
+ font-weight: 600;
43
+ color: var(--paid-primary-color, #1d2939);
43
44
  font-family: var(--paid-font-family, 'Roboto');
44
45
  }
45
46
 
@@ -47,42 +48,46 @@
47
48
  .paid-invoice-table {
48
49
  width: 100%;
49
50
  min-width: 0;
50
- table-layout: auto;
51
+ table-layout: fixed;
51
52
  word-break: break-word;
52
53
  border-collapse: separate;
53
54
  border-spacing: 0;
54
- background: var(--paid-table-bg, #fff);
55
+ background: var(--paid-table-background-color, #fff);
55
56
  font-family: var(--paid-font-family, 'Roboto');
57
+ max-width: 100%;
58
+ box-sizing: border-box;
56
59
  }
57
60
  .paid-invoice-table th,
58
61
  .paid-invoice-table td {
59
- padding: 8px 8px;
60
- font-size: 0.95rem;
62
+ padding: var(--paid-cell-padding, 8px 8px);
63
+ font-size: var(--paid-paragraph-font-size, 0.95rem);
61
64
  white-space: normal;
62
65
  word-break: break-word;
66
+ overflow: hidden;
67
+ text-overflow: ellipsis;
63
68
  }
64
69
  .paid-invoice-table th {
65
- font-size: var(--paid-th-font-size, 1rem);
66
- font-weight: var(--paid-th-font-weight, 500);
67
- color: var(--paid-th-color, #667085);
70
+ font-size: var(--paid-paragraph-font-size, 1rem);
71
+ font-weight: 500;
72
+ color: var(--paid-table-header-color, var(--paid-secondary-color, #667085));
68
73
  text-align: left;
69
- padding: 18px 24px;
70
- background: var(--paid-th-bg, #f9fafb);
71
- border-bottom: var(--paid-th-border-bottom, 1px solid #e5e7eb);
74
+ padding: var(--paid-header-padding, 18px 24px);
75
+ background: var(--paid-table-header-background-color, #f9fafb);
76
+ border-bottom: 1px solid #e5e7eb;
72
77
  }
73
78
  .paid-invoice-table td {
74
- font-size: var(--paid-td-font-size, 0.97rem);
75
- font-weight: var(--paid-td-font-weight, normal);
76
- color: var(--paid-td-color, #1d2939);
77
- background: var(--paid-td-bg, transparent);
78
- padding: 16px 24px;
79
- border-bottom: var(--paid-td-border-bottom, 1px solid #f1f1f1);
79
+ font-size: var(--paid-paragraph-font-size, 0.97rem);
80
+ font-weight: normal;
81
+ color: var(--paid-table-cell-color, var(--paid-primary-color, #1d2939));
82
+ background: transparent;
83
+ padding: var(--paid-cell-padding, 16px 24px);
84
+ border-bottom: 1px solid #f1f1f1;
80
85
  }
81
86
  .paid-invoice-table tr:last-child td {
82
87
  border-bottom: none;
83
88
  }
84
89
  .paid-invoice-table tr:hover td {
85
- background: var(--paid-row-hover-bg, #f3f4f6);
90
+ background: var(--paid-table-hover-color, #f3f4f6);
86
91
  }
87
92
  .paid-invoice-table th,
88
93
  .paid-invoice-table td {
@@ -91,47 +96,83 @@
91
96
 
92
97
  /* Status badges */
93
98
  .paid-invoice-status {
94
- display: inline-block;
95
- padding: 4px 8px;
99
+ display: inline-flex;
100
+ align-items: center;
96
101
  border-radius: 6px;
102
+ padding: 2px 12px;
97
103
  font-size: 0.75rem;
98
104
  font-weight: 500;
99
- text-transform: uppercase;
100
- letter-spacing: 0.025em;
105
+ text-transform: capitalize;
106
+ border: 1px solid #E5E6E8;
107
+ background-color: var(--paid-button-bg-color, white);
108
+ color: var(--paid-primary-color, #374151);
101
109
  }
102
110
 
103
111
  .paid-invoice-status-paid {
104
- background-color: #dcfce7;
105
- color: #166534;
112
+ background-color: var(--paid-button-bg-color, white);
113
+ color: var(--paid-primary-color, #374151);
114
+ border: 1px solid #E5E6E8;
106
115
  }
107
116
 
108
117
  .paid-invoice-status-pending {
109
- background-color: #fef3c7;
110
- color: #92400e;
118
+ background-color: var(--paid-button-bg-color, white);
119
+ color: var(--paid-primary-color, #374151);
120
+ border: 1px solid #E5E6E8;
111
121
  }
112
122
 
113
123
  .paid-invoice-status-unpaid {
114
- background-color: #fee2e2;
115
- color: #991b1b;
124
+ background-color: var(--paid-button-bg-color, white);
125
+ color: var(--paid-primary-color, #374151);
126
+ border: 1px solid #E5E6E8;
116
127
  }
117
128
 
118
129
  /* Action button */
119
130
  .paid-invoice-action-btn {
120
- background: none;
121
- border: none;
131
+ background: var(--paid-button-bg-color, #ffffff) !important;
132
+ border: 1px solid #E5E7EB;
122
133
  cursor: pointer;
123
- padding: 4px;
124
- border-radius: 4px;
125
- color: #6b7280;
126
- transition: all 0.2s;
134
+ padding: 8px;
135
+ border-radius: 6px;
136
+ color: var(--paid-primary-color, #374151) !important;
137
+ transition: all 0.15s ease, filter 0.15s ease;
138
+ transform: translateY(0);
139
+ position: relative;
140
+ display: inline-flex;
141
+ align-items: center;
142
+ justify-content: center;
143
+ outline: none !important;
144
+ user-select: none;
145
+ -webkit-appearance: none !important;
146
+ -moz-appearance: none !important;
147
+ appearance: none !important;
148
+ box-shadow: none !important;
127
149
  }
128
150
 
129
- .paid-invoice-action-btn:hover {
130
- background-color: #f3f4f6;
131
- color: #374151;
151
+ .paid-invoice-action-btn:hover:not(:disabled) {
152
+ background-color: var(--paid-button-bg-color, #ffffff) !important;
153
+ color: var(--paid-primary-color, #374151) !important;
154
+ filter: brightness(0.9) !important;
155
+ transform: translateY(-1px) !important;
156
+ }
157
+
158
+ .paid-invoice-action-btn:active:not(:disabled) {
159
+ background-color: var(--paid-button-bg-color, #ffffff) !important;
160
+ color: var(--paid-primary-color, #374151) !important;
161
+ filter: brightness(0.8) !important;
162
+ transform: translateY(0px) !important;
163
+ }
164
+
165
+ .paid-invoice-action-btn:focus:not(:disabled) {
166
+ background-color: var(--paid-button-bg-color, #ffffff) !important;
167
+ color: var(--paid-primary-color, #374151) !important;
168
+ filter: brightness(0.9) !important;
169
+ box-shadow: none !important;
170
+ outline: none !important;
132
171
  }
133
172
 
134
173
  .paid-invoice-action-btn:disabled {
174
+ background-color: var(--paid-button-bg-color, #f9fafb) !important;
175
+ color: #9CA3AF !important;
135
176
  opacity: 0.6;
136
177
  cursor: not-allowed;
137
178
  }
@@ -139,9 +180,9 @@
139
180
  /* Empty state */
140
181
  .paid-invoice-empty {
141
182
  text-align: center;
142
- color: var(--paid-empty-color, #98a2b3);
183
+ color: var(--paid-secondary-color, #98a2b3);
143
184
  padding: 40px 0;
144
- font-size: 1rem;
185
+ font-size: var(--paid-paragraph-font-size, 1rem);
145
186
  }
146
187
 
147
188
  /* Loading and error states */
@@ -161,13 +202,18 @@
161
202
  @media (max-width: 768px) {
162
203
  .paid-invoice-table th,
163
204
  .paid-invoice-table td {
164
- padding: 12px 16px;
165
- font-size: 0.8rem;
205
+ padding: var(--paid-cell-padding, 12px 16px);
206
+ font-size: var(--paid-paragraph-font-size, 0.8rem);
166
207
  }
167
208
 
168
209
  .paid-invoice-table {
169
210
  min-width: 600px;
170
211
  }
212
+
213
+ .paid-invoice-modal-content {
214
+ width: 95vw;
215
+ height: 95vh;
216
+ }
171
217
  }
172
218
 
173
219
  .paid-invoice-modal-overlay {
@@ -176,125 +222,94 @@
176
222
  left: 0;
177
223
  right: 0;
178
224
  bottom: 0;
179
- background-color: rgba(17, 24, 39, 0.7);
180
- backdrop-filter: blur(4px);
225
+ background: rgba(0, 0, 0, 0.5);
181
226
  display: flex;
182
227
  align-items: center;
183
228
  justify-content: center;
184
229
  z-index: 1000;
185
- animation: fadeIn 0.2s ease-out;
230
+ padding: 20px;
186
231
  }
187
232
 
188
233
  .paid-invoice-modal-content {
189
234
  background: white;
190
- border-radius: 16px;
191
- width: 95vw;
192
- height: 95vh;
193
- max-width: 1400px;
194
- max-height: 900px;
235
+ border-radius: 12px;
236
+ width: 90vw;
237
+ height: 90vh;
238
+ max-width: 1200px;
239
+ max-height: 800px;
195
240
  display: flex;
196
241
  flex-direction: column;
197
- overflow: hidden;
198
242
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
199
- animation: slideIn 0.3s ease-out;
200
- border: 1px solid rgba(255, 255, 255, 0.1);
201
243
  }
202
244
 
203
245
  .paid-invoice-modal-header {
204
- display: flex;
205
- justify-content: space-between;
206
- align-items: center;
207
- padding: 20px 24px;
208
- border-bottom: 1px solid #e5e7eb;
209
- background: #ffffff;
210
- }
211
-
212
- .paid-invoice-modal-header h3 {
213
- margin: 0;
214
- font-size: 20px;
215
- font-weight: 600;
216
- color: #111827;
217
- display: flex;
218
- align-items: center;
219
- gap: 8px;
220
- }
221
-
222
- .paid-invoice-modal-header h3::before {
223
- content: '';
224
- display: inline-block;
225
- width: 4px;
226
- height: 20px;
227
- background: #3b82f6;
228
- border-radius: 2px;
246
+ display: none;
229
247
  }
230
248
 
231
249
  .paid-invoice-modal-actions {
250
+ position: absolute;
251
+ top: 16px;
252
+ right: 16px;
253
+ z-index: 10;
232
254
  display: flex;
233
- gap: 12px;
255
+ gap: 8px;
234
256
  }
235
257
 
236
258
  .paid-invoice-modal-btn {
237
259
  display: flex;
238
260
  align-items: center;
239
261
  justify-content: center;
240
- width: 36px;
241
- height: 36px;
262
+ width: 32px;
263
+ height: 32px;
242
264
  border: none;
243
- border-radius: 8px;
265
+ border-radius: 6px;
244
266
  cursor: pointer;
245
267
  transition: all 0.2s ease;
246
- position: relative;
268
+ background: rgba(255, 255, 255, 0.9);
269
+ color: #6b7280;
270
+ backdrop-filter: blur(8px);
247
271
  }
248
272
 
249
273
  .paid-invoice-modal-btn::after {
250
- content: attr(title);
251
- position: absolute;
252
- bottom: -24px;
253
- left: 50%;
254
- transform: translateX(-50%);
255
- background: #1f2937;
256
- color: white;
257
- padding: 4px 8px;
258
- border-radius: 4px;
259
- font-size: 12px;
260
- white-space: nowrap;
261
- opacity: 0;
262
- transition: opacity 0.2s ease;
263
- pointer-events: none;
274
+ display: none;
275
+ }
276
+
277
+ .paid-invoice-modal-btn:hover {
278
+ background: rgba(255, 255, 255, 1);
279
+ color: #374151;
280
+ transform: none;
281
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
264
282
  }
265
283
 
266
- .paid-invoice-modal-btn:hover::after {
267
- opacity: 1;
284
+ .paid-invoice-modal-btn:active {
285
+ transform: scale(0.95);
286
+ transition: all 0.1s ease;
268
287
  }
269
288
 
270
289
  .paid-invoice-modal-btn-download {
271
- background: #3b82f6;
272
- color: white;
290
+ background: rgba(255, 255, 255, 0.9);
291
+ color: #6b7280;
273
292
  }
274
293
 
275
294
  .paid-invoice-modal-btn-download:hover {
276
- background: #2563eb;
277
- transform: translateY(-1px);
295
+ background: rgba(255, 255, 255, 1);
296
+ color: #374151;
278
297
  }
279
298
 
280
299
  .paid-invoice-modal-btn-close {
281
- background: #f3f4f6;
300
+ background: rgba(255, 255, 255, 0.9);
282
301
  color: #6b7280;
283
302
  }
284
303
 
285
304
  .paid-invoice-modal-btn-close:hover {
286
- background: #e5e7eb;
305
+ background: rgba(255, 255, 255, 1);
287
306
  color: #374151;
288
- transform: translateY(-1px);
289
307
  }
290
308
 
291
309
  .paid-invoice-modal-body {
292
310
  flex: 1;
293
- display: flex;
294
- align-items: center;
295
- justify-content: center;
296
- background: #f9fafb;
297
- position: relative;
311
+ overflow: hidden;
312
+ border-radius: 0 0 12px 12px;
298
313
  }
299
314
 
300
315
  .paid-invoice-modal-body iframe {
@@ -308,9 +323,9 @@
308
323
  display: flex;
309
324
  align-items: center;
310
325
  justify-content: center;
311
- font-size: 16px;
312
- color: #6b7280;
313
- gap: 8px;
326
+ height: 100%;
327
+ font-size: var(--paid-paragraph-font-size, 1rem);
328
+ color: var(--paid-secondary-color, #6b7280);
314
329
  }
315
330
 
316
331
  .paid-invoice-modal-loading::after {
package/dist/styles/paid-payments-table.css CHANGED
@@ -2,31 +2,9 @@
2
2
 
3
3
  /* Payments Table Styles */
4
4
  .paid-payment-container {
5
- --paid-title-color: #1d2939;
6
- --paid-title-font-weight: 600;
7
- --paid-font-family: 'Roboto';
8
- --paid-wrapper-border: 1px solid #e5e7eb;
9
- --paid-header-border-bottom: 1px solid #e5e7eb;
10
- --paid-th-border-bottom: 1px solid #e5e7eb;
11
- --paid-td-border-bottom: 1px solid #f1f1f1;
12
- --paid-td-bg: transparent;
13
- --paid-td-font-weight: normal;
14
- --paid-title-font-size: 1.1rem;
15
- --paid-th-font-size: 1rem;
16
- --paid-th-font-weight: 500;
17
- --paid-th-color: #667085;
18
- --paid-td-font-size: 0.97rem;
19
- --paid-td-color: #1d2939;
20
- --paid-empty-color: #98a2b3;
21
- --paid-wrapper-bg: #ffffff;
22
- --paid-header-bg: #ffffff;
23
- --paid-table-bg: #ffffff;
24
- --paid-th-bg: #f9fafb;
25
- --paid-row-hover-bg: #f3f4f6;
26
-
27
5
  position: relative;
28
6
  min-width: 0;
29
- font-family: var(--paid-font-family);
7
+ font-family: var(--paid-font-family, 'Roboto');
30
8
  width: 100%;
31
9
  max-width: 100%;
32
10
  overflow: hidden;
@@ -35,13 +13,13 @@
35
13
 
36
14
  .paid-payment-table-wrapper {
37
15
  position: relative;
38
- background: var(--paid-wrapper-bg);
39
- border: var(--paid-wrapper-border);
16
+ background: var(--paid-table-background-color, #ffffff);
17
+ border: 1px solid #e5e7eb;
40
18
  border-radius: 12px;
41
19
  box-shadow: 0 2px 16px 0 rgba(16, 24, 40, 0.08);
42
20
  overflow-x: auto;
43
21
  transition: box-shadow 0.2s;
44
- font-family: var(--paid-font-family);
22
+ font-family: var(--paid-font-family, 'Roboto');
45
23
  width: 100%;
46
24
  min-width: 0;
47
25
  }
@@ -54,57 +32,61 @@
54
32
  display: flex;
55
33
  justify-content: space-between;
56
34
  align-items: center;
57
- padding: 18px 24px;
58
- background: var(--paid-header-bg);
59
- border-bottom: var(--paid-header-border-bottom);
35
+ padding: var(--paid-header-padding, 18px 24px);
36
+ background: var(--paid-container-background-color, #f8f9fa);
37
+ border-bottom: 1px solid #e5e7eb;
60
38
  border-radius: 12px 12px 0 0;
61
- font-family: var(--paid-font-family);
39
+ font-family: var(--paid-font-family, 'Roboto');
62
40
  }
63
41
 
64
42
  .paid-payment-title {
65
43
  margin: 0;
66
- font-size: var(--paid-title-font-size);
67
- font-weight: var(--paid-title-font-weight);
68
- color: var(--paid-title-color);
69
- font-family: var(--paid-font-family);
44
+ font-size: var(--paid-h3-font-size, 1.1rem);
45
+ font-weight: 600;
46
+ color: var(--paid-primary-color, #1d2939);
47
+ font-family: var(--paid-font-family, 'Roboto');
70
48
  }
71
49
 
72
50
  .paid-payment-table {
73
51
  width: 100%;
74
52
  min-width: 0;
75
- table-layout: auto;
53
+ table-layout: fixed;
76
54
  word-break: break-word;
77
55
  border-collapse: separate;
78
56
  border-spacing: 0;
79
- background: var(--paid-table-bg);
80
- font-family: var(--paid-font-family);
57
+ background: var(--paid-table-background-color, #ffffff);
58
+ font-family: var(--paid-font-family, 'Roboto');
59
+ max-width: 100%;
60
+ box-sizing: border-box;
81
61
  }
82
62
 
83
63
  .paid-payment-table th,
84
64
  .paid-payment-table td {
85
- padding: 8px 8px;
86
- font-size: 0.95rem;
65
+ padding: var(--paid-cell-padding, 8px 8px);
66
+ font-size: var(--paid-paragraph-font-size, 0.95rem);
87
67
  white-space: normal;
88
68
  word-break: break-word;
69
+ overflow: hidden;
70
+ text-overflow: ellipsis;
89
71
  }
90
72
 
91
73
  .paid-payment-table th {
92
- font-size: var(--paid-th-font-size);
93
- font-weight: var(--paid-th-font-weight);
94
- color: var(--paid-th-color);
74
+ font-size: var(--paid-paragraph-font-size, 1rem);
75
+ font-weight: 500;
76
+ color: var(--paid-table-header-color, var(--paid-secondary-color, #667085));
95
77
  text-align: left;
96
- padding: 18px 24px;
97
- background: var(--paid-th-bg);
98
- border-bottom: var(--paid-th-border-bottom);
78
+ padding: var(--paid-header-padding, 18px 24px);
79
+ background: var(--paid-table-header-background-color, #f9fafb);
80
+ border-bottom: 1px solid #e5e7eb;
99
81
  }
100
82
 
101
83
  .paid-payment-table td {
102
- font-size: var(--paid-td-font-size);
103
- font-weight: var(--paid-td-font-weight);
104
- color: var(--paid-td-color);
105
- background: var(--paid-td-bg);
106
- padding: 16px 24px;
107
- border-bottom: var(--paid-td-border-bottom);
84
+ font-size: var(--paid-paragraph-font-size, 0.97rem);
85
+ font-weight: normal;
86
+ color: var(--paid-table-cell-color, var(--paid-primary-color, #1d2939));
87
+ background: transparent;
88
+ padding: var(--paid-cell-padding, 16px 24px);
89
+ border-bottom: 1px solid #f1f1f1;
108
90
  vertical-align: middle;
109
91
  }
110
92
 
@@ -113,7 +95,7 @@
113
95
  }
114
96
 
115
97
  .paid-payment-table tbody tr:hover td {
116
- background: var(--paid-row-hover-bg);
98
+ background: var(--paid-table-hover-color, #f3f4f6);
117
99
  }
118
100
 
119
101
  .paid-payment-table th,
@@ -121,78 +103,48 @@
121
103
  white-space: nowrap;
122
104
  }
123
105
 
124
- /* Payment Number with Dollar Sign */
125
- .paid-payment-number {
126
- display: flex;
127
- align-items: center;
128
- gap: 4px;
129
- }
130
-
131
- .paid-payment-dollar {
132
- display: inline-flex;
133
- align-items: center;
134
- justify-content: center;
135
- width: 20px;
136
- height: 20px;
137
- background: #f3f4f6;
138
- border-radius: 4px;
139
- font-size: 12px;
140
- font-weight: 600;
141
- color: #6b7280;
142
- }
143
-
144
- /* Amount with Dollar Sign */
145
106
  .paid-payment-amount {
146
107
  display: flex;
147
108
  align-items: center;
148
- justify-content: flex-end;
149
- gap: 4px;
109
+ justify-content: center;
110
+ font-weight: 500;
150
111
  }
151
112
 
152
- .paid-payment-dollar-right {
153
- display: inline-flex;
154
- align-items: center;
155
- justify-content: center;
156
- width: 20px;
157
- height: 20px;
158
- background: #f3f4f6;
159
- border-radius: 4px;
160
- font-size: 12px;
161
- font-weight: 600;
162
- color: #6b7280;
113
+ .paid-payment-amount .amount-number {
114
+ font-size: inherit;
115
+ color: inherit;
163
116
  }
164
117
 
165
118
  /* Status Badges */
166
119
  .paid-payment-status {
167
- display: inline-block;
168
- padding: 4px 8px;
120
+ display: inline-flex;
121
+ align-items: center;
169
122
  border-radius: 6px;
123
+ padding: 2px 12px;
170
124
  font-size: 0.75rem;
171
125
  font-weight: 500;
172
- text-transform: uppercase;
173
- letter-spacing: 0.025em;
126
+ text-transform: capitalize;
127
+ border: 1px solid #E5E6E8;
128
+ background-color: var(--paid-button-bg-color, white);
129
+ color: var(--paid-primary-color, #374151);
174
130
  }
175
131
 
176
132
  .paid-payment-status-paid {
177
- background-color: #dcfce7;
178
- color: #166534;
133
+ background-color: var(--paid-button-bg-color, white);
134
+ color: var(--paid-primary-color, #374151);
135
+ border: 1px solid #E5E6E8;
179
136
  }
180
137
 
181
138
  .paid-payment-status-pending {
182
- background-color: #fef3c7;
183
- color: #92400e;
139
+ background-color: var(--paid-button-bg-color, white);
140
+ color: var(--paid-primary-color, #374151);
141
+ border: 1px solid #E5E6E8;
184
142
  }
185
143
 
186
144
  .paid-payment-status-unpaid {
187
- background-color: #fee2e2;
188
- color: #991b1b;
189
- }
190
-
191
- /* Currency Display */
192
- .paid-payment-currency {
193
- font-size: var(--paid-td-font-size);
194
- color: var(--paid-td-color);
195
- font-weight: var(--paid-td-font-weight);
145
+ background-color: var(--paid-button-bg-color, white);
146
+ color: var(--paid-primary-color, #374151);
147
+ border: 1px solid #E5E6E8;
196
148
  }
197
149
 
198
150
  /* Action Button */
@@ -202,13 +154,17 @@
202
154
  cursor: pointer;
203
155
  padding: 4px;
204
156
  border-radius: 4px;
205
- color: #6b7280;
157
+ color: var(--paid-secondary-color, #6b7280);
206
158
  transition: all 0.2s;
207
159
  }
208
160
 
209
161
  .paid-payment-action-btn:hover {
210
162
  background-color: #f3f4f6;
211
- color: #374151;
163
+ color: var(--paid-hover-color, var(--paid-primary-color, #374151));
164
+ }
165
+
166
+ .paid-payment-action-btn:active {
167
+ color: var(--paid-pressed-color, var(--paid-primary-color, #374151));
212
168
  }
213
169
 
214
170
  .paid-payment-action-btn:disabled {
@@ -219,17 +175,17 @@
219
175
  /* Empty State */
220
176
  .paid-payment-empty {
221
177
  text-align: center;
222
- color: var(--paid-empty-color);
178
+ color: var(--paid-secondary-color, #98a2b3);
223
179
  padding: 40px 0;
224
- font-size: 1rem;
180
+ font-size: var(--paid-paragraph-font-size, 1rem);
225
181
  }
226
182
 
227
183
  /* Responsive Design */
228
184
  @media (max-width: 768px) {
229
185
  .paid-payment-table th,
230
186
  .paid-payment-table td {
231
- padding: 12px 16px;
232
- font-size: 0.8rem;
187
+ padding: var(--paid-cell-padding, 12px 16px);
188
+ font-size: var(--paid-paragraph-font-size, 0.8rem);
233
189
  }
234
190
 
235
191
  .paid-payment-table {