@licklist/design 0.78.5-dev.53 → 0.78.5-dev.55

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 (44) hide show
  1. package/dist/index.js +2 -7
  2. package/dist/v2/components/ActionMenu/ActionMenu.d.ts +1 -0
  3. package/dist/v2/components/ActionMenu/ActionMenu.d.ts.map +1 -1
  4. package/dist/v2/components/ActionMenu/ActionMenu.js +10 -3
  5. package/dist/v2/components/ActionMenu/ActionMenu.scss.js +1 -1
  6. package/dist/v2/components/Button/Button.d.ts +1 -1
  7. package/dist/v2/components/Button/Button.d.ts.map +1 -1
  8. package/dist/v2/components/Button/Button.scss.js +1 -1
  9. package/dist/v2/components/FormField/FormField.scss.js +1 -1
  10. package/dist/v2/components/NewPageHeader/NewPageHeader.d.ts +2 -1
  11. package/dist/v2/components/NewPageHeader/NewPageHeader.d.ts.map +1 -1
  12. package/dist/v2/components/NewPageHeader/NewPageHeader.js +2 -2
  13. package/dist/v2/components/NewTable/NewTable.d.ts +1 -0
  14. package/dist/v2/components/NewTable/NewTable.d.ts.map +1 -1
  15. package/dist/v2/components/NewTable/NewTable.js +5 -0
  16. package/dist/v2/components/Pagination/Pagination.scss.js +1 -1
  17. package/dist/v2/components/index.d.ts +3 -10
  18. package/dist/v2/components/index.d.ts.map +1 -1
  19. package/dist/v2/icons/index.d.ts +18 -3
  20. package/dist/v2/icons/index.d.ts.map +1 -1
  21. package/dist/v2/icons/index.js +150 -7
  22. package/dist/v2/pages/Settings/components/SidebarCustomisation.js +7 -11
  23. package/dist/v2/pages/Settings/components/SidebarNavItem.js +6 -11
  24. package/dist/v2/styles/components/Button.scss +24 -2
  25. package/package.json +1 -1
  26. package/src/v2/components/ActionMenu/ActionMenu.scss +16 -5
  27. package/src/v2/components/ActionMenu/ActionMenu.tsx +6 -3
  28. package/src/v2/components/Button/Button.tsx +1 -1
  29. package/src/v2/components/Customer/CustomerDetail.scss +315 -0
  30. package/src/v2/components/Customer/CustomersList.scss +308 -36
  31. package/src/v2/components/FormField/FormField.scss +0 -4
  32. package/src/v2/components/NewPageHeader/NewPageHeader.tsx +6 -4
  33. package/src/v2/components/NewTable/NewTable.tsx +6 -0
  34. package/src/v2/components/Pagination/Pagination.scss +24 -24
  35. package/src/v2/components/index.ts +19 -13
  36. package/src/v2/icons/index.tsx +35 -6
  37. package/src/v2/styles/components/Button.scss +24 -2
  38. package/dist/v2/components/Customer/CustomerCreate/CustomerCreate.js +0 -32
  39. package/dist/v2/components/Customer/CustomerDetail/CustomerDetail.js +0 -235
  40. package/dist/v2/components/Customer/CustomerDetail/CustomerDetail.scss.js +0 -6
  41. package/dist/v2/components/Customer/CustomerEdit/CustomerEdit.js +0 -32
  42. package/dist/v2/components/Customer/CustomerForm/CustomerForm.js +0 -535
  43. package/dist/v2/components/Customer/CustomersList.js +0 -204
  44. package/dist/v2/components/Customer/CustomersList.scss.js +0 -6
package/src/v2/components/Customer/CustomerDetail.scss ADDED
@@ -0,0 +1,315 @@
1
+ .customer-detail {
2
+ padding: 40px;
3
+ background-color: #fff;
4
+ min-height: 100vh;
5
+ font-family: var(--font-family-sans, 'Geist', sans-serif);
6
+
7
+ &__back {
8
+ color: #6200EE;
9
+ font-weight: 500;
10
+ cursor: pointer;
11
+ margin-bottom: 30px;
12
+ display: inline-flex;
13
+ align-items: center;
14
+ gap: 8px;
15
+ font-size: 14px;
16
+ padding: 8px 16px;
17
+ border-radius: 8px;
18
+ transition: all 0.2s ease;
19
+ border: 1px solid transparent;
20
+
21
+ &:hover {
22
+ background-color: #F3E5FF;
23
+ border: 1px solid #E0C7FF;
24
+ }
25
+ }
26
+
27
+ &__header {
28
+ margin-bottom: 40px;
29
+ }
30
+
31
+ &__name {
32
+ font-size: 32px;
33
+ font-weight: 700;
34
+ color: #121E52;
35
+ margin: 0 0 16px 0;
36
+ }
37
+
38
+ &__badges-row {
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: center;
42
+ }
43
+
44
+ &__badges {
45
+ display: flex;
46
+ gap: 12px;
47
+ align-items: center;
48
+ }
49
+
50
+ &__id-badge {
51
+ background-color: #F4F5F9;
52
+ color: #121E52;
53
+ padding: 4px 12px;
54
+ border-radius: 100px;
55
+ font-size: 12px;
56
+ font-weight: 600;
57
+ border: 1px solid #E2E4ED;
58
+ }
59
+
60
+ &__edit {
61
+ display: inline-flex;
62
+ align-items: center;
63
+ gap: 8px;
64
+ color: #121E52;
65
+ font-weight: 600;
66
+ cursor: pointer;
67
+ font-size: 14px;
68
+ padding: 8px 16px;
69
+ border-radius: 8px;
70
+ transition: all 0.2s ease;
71
+ border: 1px solid transparent;
72
+
73
+ &:hover {
74
+ background-color: #E8EAF0;
75
+ border: 1px solid #D1D5E0;
76
+ }
77
+ }
78
+
79
+ &__grid {
80
+ display: grid;
81
+ grid-template-columns: 1fr 1fr;
82
+ gap: 24px;
83
+ margin-bottom: 24px;
84
+ }
85
+
86
+ &__card {
87
+ background: #FFFFFF;
88
+ border: 1px solid #E2E4ED;
89
+ border-radius: 12px;
90
+ padding: 24px;
91
+
92
+ &--full {
93
+ grid-column: 1 / -1;
94
+ }
95
+ }
96
+
97
+ &__card-title {
98
+ font-size: 18px;
99
+ font-weight: 700;
100
+ color: #121E52;
101
+ margin: 0 0 24px 0;
102
+ }
103
+
104
+ &__info-group {
105
+ display: flex;
106
+ flex-direction: column;
107
+ gap: 4px;
108
+ margin-bottom: 16px;
109
+
110
+ &:last-child {
111
+ margin-bottom: 0;
112
+ }
113
+
114
+ label {
115
+ font-size: 12px;
116
+ color: #9399B3;
117
+ margin: 0;
118
+ }
119
+
120
+ span {
121
+ font-size: 14px;
122
+ font-weight: 500;
123
+ display: inline-flex;
124
+ align-items: center;
125
+ }
126
+ }
127
+
128
+
129
+ &__minor-row {
130
+ display: flex;
131
+ justify-content: space-between;
132
+ align-items: center;
133
+ padding: 16px 0;
134
+ border-bottom: 1px solid #F4F5F9;
135
+
136
+ &:last-child {
137
+ border-bottom: none;
138
+ padding-bottom: 0;
139
+ }
140
+
141
+ &:first-of-type {
142
+ padding-top: 0;
143
+ }
144
+ }
145
+
146
+ &__minor-info {
147
+ display: flex;
148
+ flex-direction: column;
149
+ gap: 4px;
150
+ }
151
+
152
+ &__minor-name {
153
+ font-size: 14px;
154
+ font-weight: 600;
155
+ color: #121E52;
156
+ }
157
+
158
+ &__minor-age {
159
+ font-size: 12px;
160
+ color: #9399B3;
161
+ }
162
+
163
+ &__minor-status-group {
164
+ display: flex;
165
+ align-items: center;
166
+ gap: 16px;
167
+ }
168
+
169
+ &__minor-expires {
170
+ font-size: 12px;
171
+ color: #9399B3;
172
+ }
173
+
174
+ &__footer {
175
+ margin-top: 40px;
176
+ font-size: 12px;
177
+ color: #9399B3;
178
+ }
179
+ }
180
+
181
+ // Mobile styles
182
+ @media (max-width: 768px) {
183
+ .customer-detail {
184
+ padding: 20px 16px;
185
+
186
+ &__back {
187
+ font-size: 13px;
188
+ padding: 6px 12px;
189
+ margin-bottom: 20px;
190
+ }
191
+
192
+ &__header {
193
+ margin-bottom: 24px;
194
+ }
195
+
196
+ &__name {
197
+ font-size: 24px;
198
+ margin-bottom: 12px;
199
+ }
200
+
201
+ &__badges-row {
202
+ flex-direction: column;
203
+ align-items: flex-start;
204
+ gap: 12px;
205
+ }
206
+
207
+ &__badges {
208
+ flex-wrap: wrap;
209
+ }
210
+
211
+ &__id-badge {
212
+ font-size: 11px;
213
+ padding: 3px 10px;
214
+ }
215
+
216
+ &__edit {
217
+ font-size: 13px;
218
+ padding: 6px 12px;
219
+ align-self: flex-start;
220
+ }
221
+
222
+ &__grid {
223
+ grid-template-columns: 1fr;
224
+ gap: 16px;
225
+ margin-bottom: 16px;
226
+ }
227
+
228
+ &__card {
229
+ padding: 20px;
230
+
231
+ &--full {
232
+ grid-column: 1;
233
+ }
234
+ }
235
+
236
+ &__card-title {
237
+ font-size: 16px;
238
+ margin-bottom: 16px;
239
+ }
240
+
241
+ &__info-group {
242
+ margin-bottom: 14px;
243
+
244
+ label {
245
+ font-size: 11px;
246
+ }
247
+
248
+ span {
249
+ font-size: 13px;
250
+ }
251
+ }
252
+
253
+ &__minor-row {
254
+ flex-direction: column;
255
+ align-items: flex-start;
256
+ gap: 12px;
257
+ padding: 12px 0;
258
+ }
259
+
260
+ &__minor-name {
261
+ font-size: 13px;
262
+ }
263
+
264
+ &__minor-age,
265
+ &__minor-expires {
266
+ font-size: 11px;
267
+ }
268
+
269
+ &__minor-status-group {
270
+ width: 100%;
271
+ justify-content: space-between;
272
+ }
273
+
274
+ &__footer {
275
+ margin-top: 24px;
276
+ font-size: 11px;
277
+ }
278
+ }
279
+ }
280
+
281
+ // Extra small mobile devices
282
+ @media (max-width: 480px) {
283
+ .customer-detail {
284
+ padding: 16px 12px;
285
+
286
+ &__back {
287
+ font-size: 12px;
288
+ padding: 4px 8px;
289
+ margin-bottom: 16px;
290
+ }
291
+
292
+ &__name {
293
+ font-size: 20px;
294
+ }
295
+
296
+ &__card {
297
+ padding: 16px;
298
+ border-radius: 8px;
299
+ }
300
+
301
+ &__card-title {
302
+ font-size: 15px;
303
+ margin-bottom: 12px;
304
+ }
305
+
306
+ &__badges {
307
+ gap: 8px;
308
+ }
309
+
310
+ &__minor-row {
311
+ padding: 10px 0;
312
+ }
313
+ }
314
+ }
315
+