@dytsou/intern-corner-scheduler 1.2.2 → 1.2.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.
package/src/App.css CHANGED
@@ -1,449 +1,449 @@
1
1
  .container {
2
- max-width: 1200px;
3
- margin: 0 auto;
4
- padding: 2rem 1rem;
2
+ max-width: 1200px;
3
+ margin: 0 auto;
4
+ padding: 2rem 1rem;
5
5
  }
6
6
 
7
7
  header {
8
- text-align: center;
9
- margin-bottom: 2rem;
8
+ text-align: center;
9
+ margin-bottom: 2rem;
10
10
  }
11
11
 
12
12
  header h1 {
13
- font-size: 2.5rem;
14
- font-weight: 700;
15
- color: var(--text-primary);
16
- margin-bottom: 0.5rem;
13
+ font-size: 2.5rem;
14
+ font-weight: 700;
15
+ color: var(--text-primary);
16
+ margin-bottom: 0.5rem;
17
17
  }
18
18
 
19
19
  .subtitle {
20
- color: var(--text-secondary);
21
- font-size: 1.1rem;
20
+ color: var(--text-secondary);
21
+ font-size: 1.1rem;
22
22
  }
23
23
 
24
24
  /* Card Styles */
25
25
  .card {
26
- background: var(--card-bg);
27
- border-radius: var(--border-radius);
28
- padding: 2rem;
29
- margin-bottom: 2rem;
30
- box-shadow: var(--shadow);
31
- transition: var(--transition);
26
+ background: var(--card-bg);
27
+ border-radius: var(--border-radius);
28
+ padding: 2rem;
29
+ margin-bottom: 2rem;
30
+ box-shadow: var(--shadow);
31
+ transition: var(--transition);
32
32
  }
33
33
 
34
34
  .card:hover {
35
- box-shadow: var(--shadow-lg);
35
+ box-shadow: var(--shadow-lg);
36
36
  }
37
37
 
38
38
  .card h2 {
39
- font-size: 1.5rem;
40
- margin-bottom: 1.5rem;
41
- color: var(--text-primary);
42
- border-bottom: 2px solid var(--border-color);
43
- padding-bottom: 0.5rem;
39
+ font-size: 1.5rem;
40
+ margin-bottom: 1.5rem;
41
+ color: var(--text-primary);
42
+ border-bottom: 2px solid var(--border-color);
43
+ padding-bottom: 0.5rem;
44
44
  }
45
45
 
46
46
  /* Form Styles */
47
47
  .form-group {
48
- margin-bottom: 1.5rem;
48
+ margin-bottom: 1.5rem;
49
49
  }
50
50
 
51
51
  .form-group label {
52
- display: block;
53
- font-weight: 600;
54
- margin-bottom: 0.5rem;
55
- color: var(--text-primary);
52
+ display: block;
53
+ font-weight: 600;
54
+ margin-bottom: 0.5rem;
55
+ color: var(--text-primary);
56
56
  }
57
57
 
58
- .form-group input[type="number"] {
59
- width: 100%;
60
- padding: 0.75rem;
61
- border: 2px solid var(--border-color);
62
- border-radius: var(--border-radius);
63
- font-size: 1rem;
64
- transition: var(--transition);
58
+ .form-group input[type='number'] {
59
+ width: 100%;
60
+ padding: 0.75rem;
61
+ border: 2px solid var(--border-color);
62
+ border-radius: var(--border-radius);
63
+ font-size: 1rem;
64
+ transition: var(--transition);
65
65
  }
66
66
 
67
- .form-group input[type="number"]:focus {
68
- outline: none;
69
- border-color: var(--primary-color);
70
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
67
+ .form-group input[type='number']:focus {
68
+ outline: none;
69
+ border-color: var(--primary-color);
70
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
71
71
  }
72
72
 
73
73
  .form-group small {
74
- display: block;
75
- margin-top: 0.25rem;
76
- color: var(--text-secondary);
77
- font-size: 0.875rem;
74
+ display: block;
75
+ margin-top: 0.25rem;
76
+ color: var(--text-secondary);
77
+ font-size: 0.875rem;
78
78
  }
79
79
 
80
80
  /* Pairs Container */
81
81
  .pairs-header {
82
- display: flex;
83
- justify-content: space-between;
84
- align-items: center;
85
- margin-bottom: 0.5rem;
82
+ display: flex;
83
+ justify-content: space-between;
84
+ align-items: center;
85
+ margin-bottom: 0.5rem;
86
86
  }
87
87
 
88
88
  .pairs-container {
89
- display: flex;
90
- flex-direction: column;
91
- gap: 0.75rem;
92
- margin-top: 0.5rem;
89
+ display: flex;
90
+ flex-direction: column;
91
+ gap: 0.75rem;
92
+ margin-top: 0.5rem;
93
93
  }
94
94
 
95
95
  .pair-item {
96
- display: flex;
97
- gap: 0.5rem;
98
- align-items: center;
99
- padding: 0.75rem;
100
- background: var(--bg-color);
101
- border-radius: var(--border-radius);
102
- border: 1px solid var(--border-color);
96
+ display: flex;
97
+ gap: 0.5rem;
98
+ align-items: center;
99
+ padding: 0.75rem;
100
+ background: var(--bg-color);
101
+ border-radius: var(--border-radius);
102
+ border: 1px solid var(--border-color);
103
103
  }
104
104
 
105
105
  .pair-item input {
106
- flex: 1;
107
- padding: 0.5rem;
108
- border: 1px solid var(--border-color);
109
- border-radius: var(--border-radius);
106
+ flex: 1;
107
+ padding: 0.5rem;
108
+ border: 1px solid var(--border-color);
109
+ border-radius: var(--border-radius);
110
110
  }
111
111
 
112
112
  .pair-item .pair-label {
113
- font-weight: 500;
114
- color: var(--text-secondary);
115
- min-width: 60px;
113
+ font-weight: 500;
114
+ color: var(--text-secondary);
115
+ min-width: 60px;
116
116
  }
117
117
 
118
118
  .pair-item button {
119
- padding: 0.5rem 1rem;
120
- background: var(--danger-color);
121
- color: white;
122
- border: none;
123
- border-radius: var(--border-radius);
124
- cursor: pointer;
125
- transition: var(--transition);
119
+ padding: 0.5rem 1rem;
120
+ background: var(--danger-color);
121
+ color: white;
122
+ border: none;
123
+ border-radius: var(--border-radius);
124
+ cursor: pointer;
125
+ transition: var(--transition);
126
126
  }
127
127
 
128
128
  .pair-item button:hover {
129
- background: #dc2626;
129
+ background: #dc2626;
130
130
  }
131
131
 
132
132
  /* Button Styles */
133
- .btn-primary, .btn-secondary {
134
- padding: 0.75rem 1.5rem;
135
- border: none;
136
- border-radius: var(--border-radius);
137
- font-size: 1rem;
138
- font-weight: 600;
139
- cursor: pointer;
140
- transition: var(--transition);
141
- display: inline-flex;
142
- align-items: center;
143
- justify-content: center;
133
+ .btn-primary,
134
+ .btn-secondary {
135
+ padding: 0.75rem 1.5rem;
136
+ border: none;
137
+ border-radius: var(--border-radius);
138
+ font-size: 1rem;
139
+ font-weight: 600;
140
+ cursor: pointer;
141
+ transition: var(--transition);
142
+ display: inline-flex;
143
+ align-items: center;
144
+ justify-content: center;
144
145
  }
145
146
 
146
147
  .btn-primary {
147
- background: var(--primary-color);
148
- color: white;
149
- width: 100%;
148
+ background: var(--primary-color);
149
+ color: white;
150
+ width: 100%;
150
151
  }
151
152
 
152
153
  .btn-primary:hover:not(:disabled) {
153
- background: var(--primary-hover);
154
+ background: var(--primary-hover);
154
155
  }
155
156
 
156
157
  .btn-primary:disabled {
157
- opacity: 0.6;
158
- cursor: not-allowed;
158
+ opacity: 0.6;
159
+ cursor: not-allowed;
159
160
  }
160
161
 
161
162
  .btn-secondary {
162
- background: var(--secondary-color);
163
- color: white;
163
+ background: var(--secondary-color);
164
+ color: white;
164
165
  }
165
166
 
166
167
  .btn-secondary:hover {
167
- background: #475569;
168
+ background: #475569;
168
169
  }
169
170
 
170
171
  /* Statistics Grid */
171
172
  .statistics-grid {
172
- display: grid;
173
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
174
- gap: 1rem;
175
- margin-bottom: 2rem;
173
+ display: grid;
174
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
175
+ gap: 1rem;
176
+ margin-bottom: 2rem;
176
177
  }
177
178
 
178
179
  .stat-card {
179
- background: var(--bg-color);
180
- padding: 1.5rem;
181
- border-radius: var(--border-radius);
182
- border-left: 4px solid var(--primary-color);
180
+ background: var(--bg-color);
181
+ padding: 1.5rem;
182
+ border-radius: var(--border-radius);
183
+ border-left: 4px solid var(--primary-color);
183
184
  }
184
185
 
185
186
  .stat-card.success {
186
- border-left-color: var(--success-color);
187
+ border-left-color: var(--success-color);
187
188
  }
188
189
 
189
190
  .stat-card.warning {
190
- border-left-color: var(--warning-color);
191
+ border-left-color: var(--warning-color);
191
192
  }
192
193
 
193
194
  .stat-card.danger {
194
- border-left-color: var(--danger-color);
195
+ border-left-color: var(--danger-color);
195
196
  }
196
197
 
197
198
  .stat-value {
198
- font-size: 2rem;
199
- font-weight: 700;
200
- color: var(--text-primary);
199
+ font-size: 2rem;
200
+ font-weight: 700;
201
+ color: var(--text-primary);
201
202
  }
202
203
 
203
204
  .stat-label {
204
- font-size: 0.875rem;
205
- color: var(--text-secondary);
206
- margin-top: 0.25rem;
205
+ font-size: 0.875rem;
206
+ color: var(--text-secondary);
207
+ margin-top: 0.25rem;
207
208
  }
208
209
 
209
210
  /* Round Selector */
210
211
  .round-selector {
211
- display: flex;
212
- gap: 0.5rem;
213
- margin-bottom: 2rem;
214
- flex-wrap: wrap;
212
+ display: flex;
213
+ gap: 0.5rem;
214
+ margin-bottom: 2rem;
215
+ flex-wrap: wrap;
215
216
  }
216
217
 
217
218
  .round-btn {
218
- padding: 0.5rem 1rem;
219
- border: 2px solid var(--border-color);
220
- background: var(--card-bg);
221
- border-radius: var(--border-radius);
222
- cursor: pointer;
223
- transition: var(--transition);
224
- font-weight: 500;
219
+ padding: 0.5rem 1rem;
220
+ border: 2px solid var(--border-color);
221
+ background: var(--card-bg);
222
+ border-radius: var(--border-radius);
223
+ cursor: pointer;
224
+ transition: var(--transition);
225
+ font-weight: 500;
225
226
  }
226
227
 
227
228
  .round-btn:hover {
228
- border-color: var(--primary-color);
229
- background: var(--bg-color);
229
+ border-color: var(--primary-color);
230
+ background: var(--bg-color);
230
231
  }
231
232
 
232
233
  .round-btn.active {
233
- background: var(--primary-color);
234
- color: white;
235
- border-color: var(--primary-color);
234
+ background: var(--primary-color);
235
+ color: white;
236
+ border-color: var(--primary-color);
236
237
  }
237
238
 
238
239
  /* Table Assignments */
239
240
  .assignments-container {
240
- margin-bottom: 2rem;
241
+ margin-bottom: 2rem;
241
242
  }
242
243
 
243
244
  .round-assignment {
244
- display: block;
245
+ display: block;
245
246
  }
246
247
 
247
248
  .round-title {
248
- font-size: 1.25rem;
249
- font-weight: 600;
250
- margin-bottom: 1rem;
251
- color: var(--text-primary);
249
+ font-size: 1.25rem;
250
+ font-weight: 600;
251
+ margin-bottom: 1rem;
252
+ color: var(--text-primary);
252
253
  }
253
254
 
254
255
  .tables-grid {
255
- display: grid;
256
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
257
- gap: 1rem;
256
+ display: grid;
257
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
258
+ gap: 1rem;
258
259
  }
259
260
 
260
261
  .table-card {
261
- background: var(--bg-color);
262
- padding: 1.5rem;
263
- border-radius: var(--border-radius);
264
- border: 2px solid var(--border-color);
265
- transition: var(--transition);
262
+ background: var(--bg-color);
263
+ padding: 1.5rem;
264
+ border-radius: var(--border-radius);
265
+ border: 2px solid var(--border-color);
266
+ transition: var(--transition);
266
267
  }
267
268
 
268
269
  .table-card:hover {
269
- border-color: var(--primary-color);
270
- box-shadow: var(--shadow);
270
+ border-color: var(--primary-color);
271
+ box-shadow: var(--shadow);
271
272
  }
272
273
 
273
274
  .table-header {
274
- display: flex;
275
- justify-content: space-between;
276
- align-items: center;
277
- margin-bottom: 1rem;
278
- padding-bottom: 0.5rem;
279
- border-bottom: 1px solid var(--border-color);
275
+ display: flex;
276
+ justify-content: space-between;
277
+ align-items: center;
278
+ margin-bottom: 1rem;
279
+ padding-bottom: 0.5rem;
280
+ border-bottom: 1px solid var(--border-color);
280
281
  }
281
282
 
282
283
  .table-number {
283
- font-weight: 700;
284
- font-size: 1.1rem;
285
- color: var(--text-primary);
284
+ font-weight: 700;
285
+ font-size: 1.1rem;
286
+ color: var(--text-primary);
286
287
  }
287
288
 
288
289
  .table-size {
289
- font-size: 0.875rem;
290
- color: var(--text-secondary);
290
+ font-size: 0.875rem;
291
+ color: var(--text-secondary);
291
292
  }
292
293
 
293
294
  .participants-list {
294
- display: flex;
295
- flex-wrap: wrap;
296
- gap: 0.5rem;
295
+ display: flex;
296
+ flex-wrap: wrap;
297
+ gap: 0.5rem;
297
298
  }
298
299
 
299
300
  .participant-badge {
300
- padding: 0.375rem 0.75rem;
301
- border-radius: 20px;
302
- font-weight: 500;
303
- font-size: 0.875rem;
301
+ padding: 0.375rem 0.75rem;
302
+ border-radius: 20px;
303
+ font-weight: 500;
304
+ font-size: 0.875rem;
304
305
  }
305
306
 
306
307
  .participant-badge.host {
307
- background: var(--primary-color);
308
- color: white;
308
+ background: var(--primary-color);
309
+ color: white;
309
310
  }
310
311
 
311
312
  .participant-badge.guest {
312
- background: var(--secondary-color);
313
- color: white;
313
+ background: var(--secondary-color);
314
+ color: white;
314
315
  }
315
316
 
316
317
  /* Pair Status */
317
318
  .pair-status-container {
318
- margin-top: 2rem;
319
+ margin-top: 2rem;
319
320
  }
320
321
 
321
322
  .pair-status-section {
322
- margin-bottom: 1.5rem;
323
+ margin-bottom: 1.5rem;
323
324
  }
324
325
 
325
326
  .pair-status-section h3 {
326
- font-size: 1.1rem;
327
- margin-bottom: 0.75rem;
328
- color: var(--text-primary);
327
+ font-size: 1.1rem;
328
+ margin-bottom: 0.75rem;
329
+ color: var(--text-primary);
329
330
  }
330
331
 
331
332
  .pair-list {
332
- display: flex;
333
- flex-wrap: wrap;
334
- gap: 0.5rem;
333
+ display: flex;
334
+ flex-wrap: wrap;
335
+ gap: 0.5rem;
335
336
  }
336
337
 
337
338
  .pair-badge {
338
- padding: 0.5rem 1rem;
339
- border-radius: var(--border-radius);
340
- font-weight: 500;
341
- font-size: 0.875rem;
339
+ padding: 0.5rem 1rem;
340
+ border-radius: var(--border-radius);
341
+ font-weight: 500;
342
+ font-size: 0.875rem;
342
343
  }
343
344
 
344
345
  .pair-badge.satisfied {
345
- background: var(--success-color);
346
- color: white;
346
+ background: var(--success-color);
347
+ color: white;
347
348
  }
348
349
 
349
350
  .pair-badge.unsatisfied {
350
- background: var(--warning-color);
351
- color: white;
351
+ background: var(--warning-color);
352
+ color: white;
352
353
  }
353
354
 
354
355
  .pair-badge.violation {
355
- background: var(--danger-color);
356
- color: white;
356
+ background: var(--danger-color);
357
+ color: white;
357
358
  }
358
359
 
359
360
  /* Error Message */
360
361
  .error-message {
361
- background: #fee2e2;
362
- border: 1px solid var(--danger-color);
363
- color: #991b1b;
364
- padding: 1rem;
365
- border-radius: var(--border-radius);
366
- margin-bottom: 1rem;
367
- position: relative;
362
+ background: #fee2e2;
363
+ border: 1px solid var(--danger-color);
364
+ color: #991b1b;
365
+ padding: 1rem;
366
+ border-radius: var(--border-radius);
367
+ margin-bottom: 1rem;
368
+ position: relative;
368
369
  }
369
370
 
370
371
  .error-dismiss {
371
- position: absolute;
372
- top: 0.5rem;
373
- right: 0.5rem;
374
- background: transparent;
375
- border: none;
376
- color: #991b1b;
377
- font-size: 1.5rem;
378
- cursor: pointer;
379
- padding: 0;
380
- width: 24px;
381
- height: 24px;
382
- display: flex;
383
- align-items: center;
384
- justify-content: center;
372
+ position: absolute;
373
+ top: 0.5rem;
374
+ right: 0.5rem;
375
+ background: transparent;
376
+ border: none;
377
+ color: #991b1b;
378
+ font-size: 1.5rem;
379
+ cursor: pointer;
380
+ padding: 0;
381
+ width: 24px;
382
+ height: 24px;
383
+ display: flex;
384
+ align-items: center;
385
+ justify-content: center;
385
386
  }
386
387
 
387
388
  .error-dismiss:hover {
388
- opacity: 0.7;
389
+ opacity: 0.7;
389
390
  }
390
391
 
391
392
  /* Loading State */
392
393
  .loading {
393
- opacity: 0.6;
394
- pointer-events: none;
394
+ opacity: 0.6;
395
+ pointer-events: none;
395
396
  }
396
397
 
397
398
  /* Responsive Design */
398
399
  @media (max-width: 768px) {
399
- .container {
400
- padding: 1rem;
401
- }
400
+ .container {
401
+ padding: 1rem;
402
+ }
402
403
 
403
- header h1 {
404
- font-size: 2rem;
405
- }
404
+ header h1 {
405
+ font-size: 2rem;
406
+ }
406
407
 
407
- .card {
408
- padding: 1.5rem;
409
- }
408
+ .card {
409
+ padding: 1.5rem;
410
+ }
410
411
 
411
- .statistics-grid {
412
- grid-template-columns: 1fr;
413
- }
412
+ .statistics-grid {
413
+ grid-template-columns: 1fr;
414
+ }
414
415
 
415
- .tables-grid {
416
- grid-template-columns: 1fr;
417
- }
416
+ .tables-grid {
417
+ grid-template-columns: 1fr;
418
+ }
418
419
 
419
- .pairs-header {
420
- flex-direction: column;
421
- align-items: flex-start;
422
- gap: 0.5rem;
423
- }
420
+ .pairs-header {
421
+ flex-direction: column;
422
+ align-items: flex-start;
423
+ gap: 0.5rem;
424
+ }
424
425
  }
425
426
 
426
427
  /* Footer */
427
428
  footer {
428
- margin-top: 3rem;
429
- padding: 2rem 0;
430
- text-align: center;
431
- color: var(--text-secondary);
432
- font-size: 0.9rem;
433
- border-top: 1px solid var(--border-color);
429
+ margin-top: 3rem;
430
+ padding: 2rem 0;
431
+ text-align: center;
432
+ color: var(--text-secondary);
433
+ font-size: 0.9rem;
434
+ border-top: 1px solid var(--border-color);
434
435
  }
435
436
 
436
437
  footer p {
437
- margin: 0.5rem 0;
438
+ margin: 0.5rem 0;
438
439
  }
439
440
 
440
441
  footer a {
441
- color: var(--primary-color);
442
- text-decoration: none;
443
- transition: var(--transition);
442
+ color: var(--primary-color);
443
+ text-decoration: none;
444
+ transition: var(--transition);
444
445
  }
445
446
 
446
447
  footer a:hover {
447
- text-decoration: underline;
448
+ text-decoration: underline;
448
449
  }
449
-