@licklist/design 0.78.5-dev.74 → 0.78.5-dev.75

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 (5) hide show
  1. package/dist/v2/components/NewTable/NewTable.scss.js +1 -1
  2. package/package.json +2 -2
  3. package/src/v2/components/Customer/CustomerDetail.scss +110 -194
  4. package/src/v2/components/Customer/CustomersList.scss +4 -3
  5. package/src/v2/components/NewTable/NewTable.scss +1 -0
package/dist/v2/components/NewTable/NewTable.scss.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".new-table-wrapper{overflow-x:auto;overflow-y:visible;width:100%}.new-table-wrapper.action-menu-open{overflow:visible!important}.new-table{border-collapse:collapse;text-align:left;width:100%}.new-table__head{background-color:var(--surface-secondary,#f8f8fa)}.new-table__header-cell{border-bottom:1px solid var(--border-primary,#e8e9ef);color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;padding:14px 16px;white-space:nowrap}.new-table__body{background-color:var(--neutral-white,#fff)}.new-table__row{border-bottom:1px solid var(--border-primary,#e8e9ef);overflow:visible;transition:background-color .2s ease}.new-table__row.action-menu-open{overflow:visible!important;position:relative;z-index:20}.new-table__row.action-menu-open .new-table__cell{overflow:visible!important}.new-table__row:last-child{border-bottom:none}.new-table__row--clickable{cursor:pointer}.new-table__row--clickable:hover{background-color:var(--surface-primary-hover,#f8f8fa)}.new-table__cell{color:var(--label-primary,#121e52);font-size:var(--text-base-size,14px);overflow:visible;padding:16px;vertical-align:middle}.new-table__no-data-cell{color:#9399b3;font-size:16px;font-weight:500;padding:64px 24px;text-align:center}@media (max-width:768px){.new-table-wrapper{-webkit-overflow-scrolling:touch}.new-table{min-width:600px}.new-table__header-cell{font-size:12px;padding:10px 12px}.new-table__cell{font-size:13px;padding:12px}.new-table__no-data-cell{font-size:14px;padding:48px 16px}}@media (max-width:480px){.new-table{min-width:500px}.new-table__cell,.new-table__header-cell{padding:10px 12px}.new-table__header-cell{font-size:11px}.new-table__cell{font-size:12px}.new-table__no-data-cell{font-size:13px;padding:32px 12px}}";
3
+ var css_248z = ".new-table-wrapper{overflow-x:auto;overflow-y:visible;width:100%}.new-table-wrapper.action-menu-open{overflow:visible!important}.new-table{border-collapse:collapse;table-layout:fixed;text-align:left;width:100%}.new-table__head{background-color:var(--surface-secondary,#f8f8fa)}.new-table__header-cell{border-bottom:1px solid var(--border-primary,#e8e9ef);color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;padding:14px 16px;white-space:nowrap}.new-table__body{background-color:var(--neutral-white,#fff)}.new-table__row{border-bottom:1px solid var(--border-primary,#e8e9ef);overflow:visible;transition:background-color .2s ease}.new-table__row.action-menu-open{overflow:visible!important;position:relative;z-index:20}.new-table__row.action-menu-open .new-table__cell{overflow:visible!important}.new-table__row:last-child{border-bottom:none}.new-table__row--clickable{cursor:pointer}.new-table__row--clickable:hover{background-color:var(--surface-primary-hover,#f8f8fa)}.new-table__cell{color:var(--label-primary,#121e52);font-size:var(--text-base-size,14px);overflow:visible;padding:16px;vertical-align:middle}.new-table__no-data-cell{color:#9399b3;font-size:16px;font-weight:500;padding:64px 24px;text-align:center}@media (max-width:768px){.new-table-wrapper{-webkit-overflow-scrolling:touch}.new-table{min-width:600px}.new-table__header-cell{font-size:12px;padding:10px 12px}.new-table__cell{font-size:13px;padding:12px}.new-table__no-data-cell{font-size:14px;padding:48px 16px}}@media (max-width:480px){.new-table{min-width:500px}.new-table__cell,.new-table__header-cell{padding:10px 12px}.new-table__header-cell{font-size:11px}.new-table__cell{font-size:12px}.new-table__no-data-cell{font-size:13px;padding:32px 12px}}";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.78.5-dev.74",
3
+ "version": "0.78.5-dev.75",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -64,7 +64,7 @@
64
64
  "@dnd-kit/utilities": "2.0.0",
65
65
  "@fortawesome/fontawesome-svg-core": "1.2.34",
66
66
  "@fortawesome/free-solid-svg-icons": "5.15.2",
67
- "@licklist/core": "0.36.1-dev.21",
67
+ "@licklist/core": "0.36.1-dev.22",
68
68
  "@licklist/eslint-config": "0.5.6",
69
69
  "@licklist/plugins": "0.36.4-dev.13",
70
70
  "@mantine/core": "6.0.22",
package/src/v2/components/Customer/CustomerDetail.scss CHANGED
@@ -1,26 +1,39 @@
1
1
  .customer-detail {
2
2
  padding: 40px;
3
- background-color: #fff;
3
+ background-color: var(--neutral-25);
4
4
  min-height: 100vh;
5
5
  font-family: var(--font-family-sans, 'Geist', sans-serif);
6
6
 
7
7
  &__back {
8
- color: #6200EE;
9
- font-weight: 500;
10
- cursor: pointer;
11
8
  margin-bottom: 30px;
12
9
  display: inline-flex;
13
10
  align-items: center;
14
11
  gap: 8px;
15
- font-size: 14px;
16
12
  padding: 8px 16px;
17
13
  border-radius: 8px;
14
+ border: 1px solid var(--border-primary);
15
+ background: transparent;
16
+ color: var(--purple-500);
17
+ font-weight: 500;
18
+ font-size: 14px;
19
+ cursor: pointer;
18
20
  transition: all 0.2s ease;
19
- border: 1px solid transparent;
21
+
22
+ svg {
23
+ width: 24px;
24
+ height: 24px;
25
+ color: var(--purple-500);
26
+ }
27
+
28
+ span {
29
+ color: var(--purple-500);
30
+ font-weight: 500;
31
+ font-size: 14px;
32
+ }
20
33
 
21
34
  &:hover {
22
- background-color: #F3E5FF;
23
- border: 1px solid #E0C7FF;
35
+ background-color: var(--surface-action-soft);
36
+ border: 1px solid var(--border-primary);
24
37
  }
25
38
  }
26
39
 
@@ -28,110 +41,119 @@
28
41
  margin-bottom: 40px;
29
42
  }
30
43
 
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;
44
+ &__summary-row {
45
+ display: grid;
46
+ grid-template-columns: repeat(4, 1fr);
47
+ gap: 24px;
48
+ margin-bottom: 32px;
42
49
  }
43
50
 
44
- &__badges {
51
+ &__summary-card {
52
+ background: var(--surface-secondary);
53
+ border: 1px solid var(--tone-light);
54
+ border-radius: 12px;
55
+ padding: 24px;
45
56
  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;
57
+ flex-direction: column;
63
58
  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
59
 
73
- &:hover {
74
- background-color: #E8EAF0;
75
- border: 1px solid #D1D5E0;
60
+ label {
61
+ font-size: 14px;
62
+ font-weight: 600;
63
+ color: var(--label-secondary);
64
+ margin: 0;
76
65
  }
77
66
  }
78
67
 
79
- &__grid {
80
- display: grid;
81
- grid-template-columns: 1fr 1fr;
82
- gap: 24px;
83
- margin-bottom: 24px;
68
+ &__summary-value {
69
+ font-size: 28px;
70
+ font-weight: 700;
71
+ color: var(--label-primary);
84
72
  }
85
73
 
86
74
  &__card {
87
- background: #FFFFFF;
88
- border: 1px solid #E2E4ED;
75
+ background: var(--surface-primary);
76
+ border: 1px solid var(--border-primary);
89
77
  border-radius: 12px;
90
- padding: 24px;
78
+ padding: 32px;
79
+ margin-bottom: 24px;
80
+
81
+ &--details {
82
+ margin-bottom: 32px;
83
+ }
91
84
 
92
85
  &--full {
93
86
  grid-column: 1 / -1;
94
87
  }
95
88
  }
96
89
 
90
+ &__card-header {
91
+ display: flex;
92
+ justify-content: space-between;
93
+ align-items: flex-start;
94
+ margin-bottom: 32px;
95
+ }
96
+
97
97
  &__card-title {
98
- font-size: 18px;
98
+ font-size: 20px;
99
99
  font-weight: 700;
100
- color: #121E52;
101
- margin: 0 0 24px 0;
100
+ color: var(--label-primary);
101
+ margin: 0;
102
+ }
103
+
104
+ &__grid {
105
+ display: grid;
106
+ grid-template-columns: 1fr 1fr;
107
+ column-gap: 64px;
108
+ row-gap: 24px;
102
109
  }
103
110
 
104
111
  &__info-group {
105
112
  display: flex;
106
113
  flex-direction: column;
107
114
  gap: 4px;
108
- margin-bottom: 16px;
109
-
110
- &:last-child {
111
- margin-bottom: 0;
112
- }
113
115
 
114
116
  label {
115
117
  font-size: 12px;
116
- color: #9399B3;
117
- margin: 0;
118
+ font-weight: 600;
119
+ color: var(--label-secondary);
120
+ margin: 2px;
121
+ text-transform: none;
118
122
  }
119
123
 
120
124
  span {
121
- font-size: 14px;
122
- font-weight: 500;
125
+ font-size: 15px;
126
+ font-weight: 600;
127
+ color: var(--label-primary);
123
128
  display: inline-flex;
124
129
  align-items: center;
125
130
  }
126
131
  }
127
132
 
133
+ &__edit {
134
+ display: inline-flex;
135
+ align-items: center;
136
+ gap: 8px;
137
+ color: var(--label-primary);
138
+ font-weight: 600;
139
+ cursor: pointer;
140
+ font-size: 14px;
141
+ padding: 8px 16px;
142
+ border-radius: 8px;
143
+ transition: all 0.2s ease;
144
+ border: 1px solid var(--border-primary);
145
+
146
+ &:hover {
147
+ background-color: var(--surface-tertiary);
148
+ }
149
+ }
128
150
 
129
151
  &__minor-row {
130
152
  display: flex;
131
153
  justify-content: space-between;
132
154
  align-items: center;
133
155
  padding: 16px 0;
134
- border-bottom: 1px solid #F4F5F9;
156
+ border-bottom: 1px solid var(--surface-tertiary);
135
157
 
136
158
  &:last-child {
137
159
  border-bottom: none;
@@ -152,12 +174,12 @@
152
174
  &__minor-name {
153
175
  font-size: 14px;
154
176
  font-weight: 600;
155
- color: #121E52;
177
+ color: var(--label-primary);
156
178
  }
157
179
 
158
180
  &__minor-age {
159
181
  font-size: 12px;
160
- color: #9399B3;
182
+ color: var(--label-secondary);
161
183
  }
162
184
 
163
185
  &__minor-status-group {
@@ -168,151 +190,45 @@
168
190
 
169
191
  &__minor-expires {
170
192
  font-size: 12px;
171
- color: #9399B3;
193
+ color: var(--label-secondary);
172
194
  }
195
+ }
173
196
 
174
- &__footer {
175
- margin-top: 40px;
176
- font-size: 12px;
177
- color: #9399B3;
197
+ // Mobile styles
198
+ @media (max-width: 1024px) {
199
+ .customer-detail {
200
+ &__summary-row {
201
+ grid-template-columns: 1fr 1fr;
202
+ }
178
203
  }
179
204
  }
180
205
 
181
- // Mobile styles
182
206
  @media (max-width: 768px) {
183
207
  .customer-detail {
184
208
  padding: 20px 16px;
185
209
 
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: row;
203
- justify-content: space-between;
204
- align-items: center;
205
- gap: 12px;
206
- width: 100%;
207
- }
208
-
209
- &__badges {
210
- flex-wrap: wrap;
211
- flex: 1;
212
- }
213
-
214
- &__id-badge {
215
- font-size: 11px;
216
- padding: 3px 10px;
217
- }
218
-
219
- &__edit {
220
- font-size: 13px;
221
- padding: 6px 12px;
222
- align-self: center;
223
- margin-left: auto;
210
+ &__summary-row {
211
+ grid-template-columns: 1fr;
212
+ gap: 16px;
224
213
  }
225
214
 
226
215
  &__grid {
227
216
  grid-template-columns: 1fr;
228
- gap: 16px;
229
- margin-bottom: 16px;
217
+ row-gap: 16px;
230
218
  }
231
219
 
232
220
  &__card {
233
- padding: 20px;
234
-
235
- &--full {
236
- grid-column: 1;
237
- }
238
- }
239
-
240
- &__card-title {
241
- font-size: 16px;
242
- margin-bottom: 16px;
243
- }
244
-
245
- &__info-group {
246
- margin-bottom: 14px;
247
-
248
- label {
249
- font-size: 11px;
250
- }
251
-
252
- span {
253
- font-size: 13px;
254
- }
255
- }
256
-
257
- &__minor-row {
258
- flex-direction: column;
259
- align-items: flex-start;
260
- gap: 12px;
261
- padding: 12px 0;
262
- }
263
-
264
- &__minor-name {
265
- font-size: 13px;
266
- }
267
-
268
- &__minor-age,
269
- &__minor-expires {
270
- font-size: 11px;
221
+ padding: 24px;
271
222
  }
272
223
 
273
224
  &__minor-status-group {
274
- width: 100%;
275
- justify-content: space-between;
276
- }
277
-
278
- &__footer {
279
- margin-top: 24px;
280
- font-size: 11px;
281
- }
282
- }
283
- }
284
-
285
- // Extra small mobile devices
286
- @media (max-width: 480px) {
287
- .customer-detail {
288
- padding: 16px 12px;
289
-
290
- &__back {
291
- font-size: 12px;
292
- padding: 4px 8px;
293
- margin-bottom: 16px;
294
- }
295
-
296
- &__name {
297
- font-size: 20px;
298
- }
299
-
300
- &__card {
301
- padding: 16px;
302
- border-radius: 8px;
303
- }
304
-
305
- &__card-title {
306
- font-size: 15px;
307
- margin-bottom: 12px;
308
- }
309
-
310
- &__badges {
225
+ flex-direction: column;
226
+ align-items: flex-end;
311
227
  gap: 8px;
312
228
  }
313
229
 
314
- &__minor-row {
315
- padding: 10px 0;
230
+ &__minor-expires {
231
+ order: 2;
316
232
  }
317
233
  }
318
234
  }
package/src/v2/components/Customer/CustomersList.scss CHANGED
@@ -178,17 +178,18 @@
178
178
  // Cells styling (usually specific to the table in this page)
179
179
  .entity-cell {
180
180
  &__name {
181
+ font-size: 15px;
181
182
  font-weight: 600;
182
- color: #121E52;
183
+ color: var(--label-primary);
183
184
  }
184
185
  &__sub {
185
186
  font-size: 13px;
186
- color: #9399B3;
187
+ color: var(--label-secondary);
187
188
  display: block !important;
188
189
  }
189
190
  &__id {
190
191
  font-size: 13px;
191
- color: #9399B3;
192
+ color: var(--label-secondary);
192
193
  display: none !important;
193
194
  }
194
195
 
package/src/v2/components/NewTable/NewTable.scss CHANGED
@@ -12,6 +12,7 @@
12
12
  width: 100%;
13
13
  border-collapse: collapse;
14
14
  text-align: left;
15
+ table-layout: fixed;
15
16
 
16
17
  &__head {
17
18
  background-color: var(--surface-secondary, #F8F8FA);