@pollar/react 0.5.0 → 0.5.3
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/dist/index.css +298 -202
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +125 -5
- package/dist/index.d.ts +125 -5
- package/dist/index.js +462 -180
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +456 -182
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -21,6 +21,40 @@
|
|
|
21
21
|
justify-content: center;
|
|
22
22
|
background-color: rgba(0, 0, 0, 0.5);
|
|
23
23
|
}
|
|
24
|
+
.pollar-modal-card {
|
|
25
|
+
position: relative;
|
|
26
|
+
width: 100%;
|
|
27
|
+
border-radius: 1rem;
|
|
28
|
+
border: 1px solid var(--pollar-border);
|
|
29
|
+
padding: var(--pollar-modal-padding, 1.75rem);
|
|
30
|
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
31
|
+
background-color: var(--pollar-bg);
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
font-family: inherit;
|
|
34
|
+
}
|
|
35
|
+
.pollar-input {
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: var(--pollar-input-height, 44px);
|
|
38
|
+
padding: 0 1rem;
|
|
39
|
+
border-radius: var(--pollar-input-border-radius, 0.5rem);
|
|
40
|
+
border: 1px solid var(--pollar-border);
|
|
41
|
+
background-color: var(--pollar-input-bg);
|
|
42
|
+
color: var(--pollar-text);
|
|
43
|
+
font-size: 1rem;
|
|
44
|
+
outline: none;
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
}
|
|
47
|
+
.pollar-input::placeholder {
|
|
48
|
+
color: var(--pollar-muted);
|
|
49
|
+
}
|
|
50
|
+
.pollar-input:focus {
|
|
51
|
+
box-shadow: 0 0 0 2px var(--pollar-accent);
|
|
52
|
+
border-color: transparent;
|
|
53
|
+
}
|
|
54
|
+
.pollar-input:disabled {
|
|
55
|
+
opacity: 0.5;
|
|
56
|
+
cursor: not-allowed;
|
|
57
|
+
}
|
|
24
58
|
.pollar-modal-header {
|
|
25
59
|
display: flex;
|
|
26
60
|
align-items: center;
|
|
@@ -38,20 +72,41 @@
|
|
|
38
72
|
align-items: center;
|
|
39
73
|
gap: 0.5rem;
|
|
40
74
|
}
|
|
75
|
+
.pollar-close-btn,
|
|
76
|
+
.pollar-back-btn,
|
|
41
77
|
.pollar-modal-close {
|
|
42
|
-
background: none;
|
|
43
|
-
border: none;
|
|
44
|
-
cursor: pointer;
|
|
45
|
-
color: var(--pollar-muted);
|
|
46
|
-
padding: 4px;
|
|
47
78
|
display: flex;
|
|
48
79
|
align-items: center;
|
|
49
|
-
|
|
50
|
-
|
|
80
|
+
justify-content: center;
|
|
81
|
+
width: 2rem;
|
|
82
|
+
height: 2rem;
|
|
83
|
+
padding: 0;
|
|
84
|
+
border-radius: var(--pollar-buttons-border-radius, 6px);
|
|
85
|
+
border: 1px solid var(--pollar-border);
|
|
86
|
+
background-color: transparent;
|
|
87
|
+
color: var(--pollar-muted);
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
transition:
|
|
90
|
+
background-color 0.15s,
|
|
91
|
+
color 0.15s,
|
|
92
|
+
border-color 0.15s;
|
|
51
93
|
}
|
|
94
|
+
.pollar-close-btn:hover,
|
|
95
|
+
.pollar-back-btn:hover,
|
|
52
96
|
.pollar-modal-close:hover {
|
|
97
|
+
background-color: var(--pollar-input-bg);
|
|
53
98
|
color: var(--pollar-text);
|
|
54
|
-
|
|
99
|
+
border-color: var(--pollar-text);
|
|
100
|
+
}
|
|
101
|
+
.pollar-close-btn {
|
|
102
|
+
position: absolute;
|
|
103
|
+
top: 1rem;
|
|
104
|
+
right: 1rem;
|
|
105
|
+
}
|
|
106
|
+
.pollar-back-btn {
|
|
107
|
+
position: absolute;
|
|
108
|
+
top: 1rem;
|
|
109
|
+
left: 1rem;
|
|
55
110
|
}
|
|
56
111
|
.pollar-modal-refresh-btn {
|
|
57
112
|
background: none;
|
|
@@ -236,15 +291,7 @@
|
|
|
236
291
|
animation: pollar-pulse 1.5s ease-in-out infinite;
|
|
237
292
|
}
|
|
238
293
|
.pollar-kyc-modal {
|
|
239
|
-
position: relative;
|
|
240
|
-
width: 100%;
|
|
241
294
|
max-width: 500px;
|
|
242
|
-
border-radius: 1rem;
|
|
243
|
-
border: 1px solid var(--pollar-border);
|
|
244
|
-
padding: 2rem;
|
|
245
|
-
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
246
|
-
background-color: var(--pollar-bg);
|
|
247
|
-
box-sizing: border-box;
|
|
248
295
|
}
|
|
249
296
|
.pollar-kyc-header {
|
|
250
297
|
margin-bottom: 1.5rem;
|
|
@@ -252,13 +299,13 @@
|
|
|
252
299
|
}
|
|
253
300
|
.pollar-kyc-title {
|
|
254
301
|
margin: 0 0 0.375rem;
|
|
255
|
-
font-size: 1.375rem;
|
|
302
|
+
font-size: var(--pollar-modal-heading-size, 1.375rem);
|
|
256
303
|
font-weight: 700;
|
|
257
304
|
color: var(--pollar-text);
|
|
258
305
|
}
|
|
259
306
|
.pollar-kyc-subtitle {
|
|
260
307
|
margin: 0;
|
|
261
|
-
font-size: 0.9rem;
|
|
308
|
+
font-size: var(--pollar-modal-subtitle-size, 0.9rem);
|
|
262
309
|
color: var(--pollar-muted);
|
|
263
310
|
}
|
|
264
311
|
.pollar-kyc-providers {
|
|
@@ -273,7 +320,7 @@
|
|
|
273
320
|
justify-content: space-between;
|
|
274
321
|
width: 100%;
|
|
275
322
|
padding: 0.875rem 1rem;
|
|
276
|
-
border-radius:
|
|
323
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
277
324
|
border: 1px solid var(--pollar-border);
|
|
278
325
|
background-color: var(--pollar-input-bg);
|
|
279
326
|
cursor: pointer;
|
|
@@ -359,16 +406,16 @@
|
|
|
359
406
|
.github-button {
|
|
360
407
|
-webkit-appearance: none;
|
|
361
408
|
appearance: none;
|
|
362
|
-
background-color:
|
|
363
|
-
border: 1px solid
|
|
409
|
+
background-color: var(--pollar-input-bg);
|
|
410
|
+
border: 1px solid var(--pollar-border);
|
|
364
411
|
border-radius: var(--pollar-buttons-border-radius, 6px);
|
|
365
412
|
box-sizing: border-box;
|
|
366
|
-
color:
|
|
413
|
+
color: var(--pollar-text);
|
|
367
414
|
cursor: pointer;
|
|
368
415
|
display: inline-flex;
|
|
369
416
|
align-items: center;
|
|
370
417
|
justify-content: center;
|
|
371
|
-
gap:
|
|
418
|
+
gap: 0.75rem;
|
|
372
419
|
font-family:
|
|
373
420
|
-apple-system,
|
|
374
421
|
BlinkMacSystemFont,
|
|
@@ -376,42 +423,39 @@
|
|
|
376
423
|
Helvetica,
|
|
377
424
|
Arial,
|
|
378
425
|
sans-serif;
|
|
379
|
-
font-size:
|
|
426
|
+
font-size: 1rem;
|
|
380
427
|
font-weight: 500;
|
|
381
|
-
height: var(--pollar-buttons-height,
|
|
382
|
-
letter-spacing:
|
|
428
|
+
height: var(--pollar-buttons-height, 44px);
|
|
429
|
+
letter-spacing: normal;
|
|
383
430
|
outline: none;
|
|
384
431
|
overflow: hidden;
|
|
385
|
-
padding: 0
|
|
386
|
-
transition:
|
|
432
|
+
padding: 0 1rem;
|
|
433
|
+
transition: transform 0.15s, box-shadow 0.15s;
|
|
387
434
|
white-space: nowrap;
|
|
388
|
-
width:
|
|
389
|
-
max-width: 400px;
|
|
390
|
-
min-width: min-content;
|
|
435
|
+
width: 100%;
|
|
391
436
|
user-select: none;
|
|
392
437
|
}
|
|
393
438
|
.github-button-icon {
|
|
394
439
|
width: 20px;
|
|
395
440
|
height: 20px;
|
|
396
|
-
object-fit: contain;
|
|
397
441
|
flex-shrink: 0;
|
|
398
442
|
}
|
|
399
443
|
.github-button-contents {
|
|
400
|
-
flex-grow:
|
|
444
|
+
flex-grow: 0;
|
|
401
445
|
overflow: hidden;
|
|
402
446
|
text-overflow: ellipsis;
|
|
403
447
|
}
|
|
404
448
|
.github-button:not(:disabled):hover {
|
|
405
|
-
|
|
406
|
-
|
|
449
|
+
border-color: var(--pollar-accent);
|
|
450
|
+
color: var(--pollar-accent);
|
|
451
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
407
452
|
}
|
|
408
453
|
.github-button:not(:disabled):active {
|
|
409
|
-
|
|
454
|
+
transform: scale(0.99);
|
|
410
455
|
}
|
|
411
456
|
.github-button:disabled {
|
|
412
457
|
cursor: default;
|
|
413
|
-
|
|
414
|
-
border-color: rgba(240, 246, 252, 0.05);
|
|
458
|
+
opacity: 0.5;
|
|
415
459
|
}
|
|
416
460
|
.github-button:disabled .github-button-icon,
|
|
417
461
|
.github-button:disabled .github-button-contents {
|
|
@@ -424,46 +468,41 @@
|
|
|
424
468
|
-webkit-user-select: none;
|
|
425
469
|
-ms-user-select: none;
|
|
426
470
|
-webkit-appearance: none;
|
|
427
|
-
background-color:
|
|
471
|
+
background-color: var(--pollar-input-bg);
|
|
428
472
|
background-image: none;
|
|
429
|
-
border: 1px solid
|
|
430
|
-
-webkit-border-radius: var(--pollar-buttons-border-radius,
|
|
431
|
-
border-radius: var(--pollar-buttons-border-radius,
|
|
473
|
+
border: 1px solid var(--pollar-border);
|
|
474
|
+
-webkit-border-radius: var(--pollar-buttons-border-radius, 6px);
|
|
475
|
+
border-radius: var(--pollar-buttons-border-radius, 6px);
|
|
432
476
|
-webkit-box-sizing: border-box;
|
|
433
477
|
box-sizing: border-box;
|
|
434
|
-
color:
|
|
478
|
+
color: var(--pollar-text);
|
|
435
479
|
cursor: pointer;
|
|
436
480
|
font-family:
|
|
437
|
-
|
|
438
|
-
|
|
481
|
+
-apple-system,
|
|
482
|
+
BlinkMacSystemFont,
|
|
483
|
+
"Segoe UI",
|
|
439
484
|
sans-serif;
|
|
440
|
-
font-size:
|
|
441
|
-
|
|
442
|
-
|
|
485
|
+
font-size: 1rem;
|
|
486
|
+
font-weight: 600;
|
|
487
|
+
height: var(--pollar-buttons-height, 44px);
|
|
488
|
+
letter-spacing: normal;
|
|
443
489
|
outline: none;
|
|
444
490
|
overflow: hidden;
|
|
445
|
-
padding: 0
|
|
491
|
+
padding: 0 1rem;
|
|
446
492
|
position: relative;
|
|
447
493
|
text-align: center;
|
|
448
|
-
-webkit-transition:
|
|
449
|
-
|
|
450
|
-
border-color .218s,
|
|
451
|
-
box-shadow .218s;
|
|
452
|
-
transition:
|
|
453
|
-
background-color .218s,
|
|
454
|
-
border-color .218s,
|
|
455
|
-
box-shadow .218s;
|
|
494
|
+
-webkit-transition: transform .15s, box-shadow .15s;
|
|
495
|
+
transition: transform .15s, box-shadow .15s;
|
|
456
496
|
vertical-align: middle;
|
|
457
497
|
white-space: nowrap;
|
|
458
|
-
width:
|
|
459
|
-
max-width: 400px;
|
|
460
|
-
min-width: min-content;
|
|
498
|
+
width: 100%;
|
|
461
499
|
}
|
|
462
500
|
.gsi-material-button .gsi-material-button-icon {
|
|
463
501
|
height: 20px;
|
|
464
|
-
margin-right:
|
|
502
|
+
margin-right: 0;
|
|
465
503
|
min-width: 20px;
|
|
466
504
|
width: 20px;
|
|
505
|
+
flex-shrink: 0;
|
|
467
506
|
}
|
|
468
507
|
.gsi-material-button .gsi-material-button-content-wrapper {
|
|
469
508
|
-webkit-align-items: center;
|
|
@@ -474,21 +513,21 @@
|
|
|
474
513
|
-webkit-flex-wrap: nowrap;
|
|
475
514
|
flex-wrap: nowrap;
|
|
476
515
|
height: 100%;
|
|
477
|
-
justify-content:
|
|
516
|
+
justify-content: center;
|
|
517
|
+
gap: 0.75rem;
|
|
478
518
|
position: relative;
|
|
479
519
|
width: 100%;
|
|
480
520
|
}
|
|
481
521
|
.gsi-material-button .gsi-material-button-contents {
|
|
482
|
-
-webkit-flex-grow: 1;
|
|
483
|
-
flex-grow: 1;
|
|
484
522
|
font-family:
|
|
485
|
-
|
|
486
|
-
|
|
523
|
+
-apple-system,
|
|
524
|
+
BlinkMacSystemFont,
|
|
525
|
+
"Segoe UI",
|
|
487
526
|
sans-serif;
|
|
488
527
|
font-weight: 500;
|
|
489
528
|
overflow: hidden;
|
|
490
529
|
text-overflow: ellipsis;
|
|
491
|
-
|
|
530
|
+
flex-grow: 0;
|
|
492
531
|
}
|
|
493
532
|
.gsi-material-button .gsi-material-button-state {
|
|
494
533
|
-webkit-transition: opacity .218s;
|
|
@@ -517,48 +556,21 @@
|
|
|
517
556
|
opacity: 12%;
|
|
518
557
|
}
|
|
519
558
|
.gsi-material-button:not(:disabled):hover {
|
|
520
|
-
-
|
|
521
|
-
|
|
559
|
+
border-color: var(--pollar-accent);
|
|
560
|
+
color: var(--pollar-accent);
|
|
561
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
562
|
+
}
|
|
563
|
+
.gsi-material-button:not(:disabled):active {
|
|
564
|
+
transform: scale(0.99);
|
|
522
565
|
}
|
|
523
566
|
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
|
|
524
|
-
background-color:
|
|
525
|
-
opacity:
|
|
567
|
+
background-color: transparent;
|
|
568
|
+
opacity: 0;
|
|
526
569
|
}
|
|
527
570
|
|
|
528
571
|
/* src/components/login-modal/LoginModal.css */
|
|
529
572
|
.pollar-modal {
|
|
530
|
-
position: relative;
|
|
531
|
-
width: 100%;
|
|
532
573
|
max-width: 460px;
|
|
533
|
-
border-radius: 1rem;
|
|
534
|
-
border: 1px solid var(--pollar-border);
|
|
535
|
-
padding: 2rem;
|
|
536
|
-
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
537
|
-
background-color: var(--pollar-bg);
|
|
538
|
-
transition: all 300ms;
|
|
539
|
-
box-sizing: border-box;
|
|
540
|
-
}
|
|
541
|
-
.pollar-back-btn {
|
|
542
|
-
position: absolute;
|
|
543
|
-
top: 1rem;
|
|
544
|
-
left: 1rem;
|
|
545
|
-
display: flex;
|
|
546
|
-
align-items: center;
|
|
547
|
-
gap: 0.25rem;
|
|
548
|
-
padding: 0.375rem 0.75rem;
|
|
549
|
-
border-radius: var(--pollar-buttons-border-radius, 6px);
|
|
550
|
-
border: 1px solid var(--pollar-border);
|
|
551
|
-
background-color: transparent;
|
|
552
|
-
color: var(--pollar-muted);
|
|
553
|
-
font-size: 0.875rem;
|
|
554
|
-
font-weight: 500;
|
|
555
|
-
cursor: pointer;
|
|
556
|
-
transition: all 0.15s;
|
|
557
|
-
}
|
|
558
|
-
.pollar-back-btn:hover {
|
|
559
|
-
background-color: var(--pollar-input-bg);
|
|
560
|
-
color: var(--pollar-text);
|
|
561
|
-
border-color: var(--pollar-text);
|
|
562
574
|
}
|
|
563
575
|
.pollar-header {
|
|
564
576
|
margin-bottom: 1.75rem;
|
|
@@ -577,13 +589,13 @@
|
|
|
577
589
|
}
|
|
578
590
|
.pollar-title {
|
|
579
591
|
margin: 0 0 0.5rem;
|
|
580
|
-
font-size: 1.
|
|
592
|
+
font-size: var(--pollar-modal-heading-size, 1.375rem);
|
|
581
593
|
font-weight: 700;
|
|
582
594
|
color: var(--pollar-text);
|
|
583
595
|
}
|
|
584
596
|
.pollar-subtitle {
|
|
585
597
|
margin: 0;
|
|
586
|
-
font-size:
|
|
598
|
+
font-size: var(--pollar-modal-subtitle-size, 0.9rem);
|
|
587
599
|
color: var(--pollar-muted);
|
|
588
600
|
}
|
|
589
601
|
.pollar-error {
|
|
@@ -601,10 +613,11 @@
|
|
|
601
613
|
}
|
|
602
614
|
.pollar-email-input {
|
|
603
615
|
width: 100%;
|
|
604
|
-
|
|
616
|
+
height: var(--pollar-input-height, 44px);
|
|
617
|
+
padding: 0 1rem;
|
|
618
|
+
border-radius: var(--pollar-input-border-radius, 0.5rem);
|
|
605
619
|
border: 1px solid var(--pollar-border);
|
|
606
620
|
background-color: var(--pollar-input-bg);
|
|
607
|
-
padding: 0.875rem 1rem;
|
|
608
621
|
font-size: 1rem;
|
|
609
622
|
color: var(--pollar-text);
|
|
610
623
|
outline: none;
|
|
@@ -621,35 +634,6 @@
|
|
|
621
634
|
opacity: 0.5;
|
|
622
635
|
cursor: not-allowed;
|
|
623
636
|
}
|
|
624
|
-
.pollar-submit-btn {
|
|
625
|
-
display: flex;
|
|
626
|
-
align-items: center;
|
|
627
|
-
justify-content: center;
|
|
628
|
-
margin-top: 0.75rem;
|
|
629
|
-
width: 100%;
|
|
630
|
-
height: var(--pollar-buttons-height, 44px);
|
|
631
|
-
border: none;
|
|
632
|
-
border-radius: var(--pollar-buttons-border-radius, 0.5rem);
|
|
633
|
-
padding: 0 0.875rem;
|
|
634
|
-
font-size: 1rem;
|
|
635
|
-
font-weight: 700;
|
|
636
|
-
color: #fff;
|
|
637
|
-
background-color: var(--pollar-accent);
|
|
638
|
-
cursor: pointer;
|
|
639
|
-
transition: all 0.15s;
|
|
640
|
-
box-sizing: border-box;
|
|
641
|
-
}
|
|
642
|
-
.pollar-submit-btn:hover:not(:disabled) {
|
|
643
|
-
opacity: 0.9;
|
|
644
|
-
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
645
|
-
}
|
|
646
|
-
.pollar-submit-btn:active:not(:disabled) {
|
|
647
|
-
transform: scale(0.98);
|
|
648
|
-
}
|
|
649
|
-
.pollar-submit-btn:disabled {
|
|
650
|
-
opacity: 0.5;
|
|
651
|
-
cursor: not-allowed;
|
|
652
|
-
}
|
|
653
637
|
.pollar-divider {
|
|
654
638
|
position: relative;
|
|
655
639
|
margin: 1.25rem 0;
|
|
@@ -679,7 +663,7 @@
|
|
|
679
663
|
background-color: var(--pollar-bg);
|
|
680
664
|
}
|
|
681
665
|
.pollar-social-list {
|
|
682
|
-
margin-bottom:
|
|
666
|
+
margin-bottom: .625rem;
|
|
683
667
|
display: flex;
|
|
684
668
|
flex-direction: column;
|
|
685
669
|
gap: 0.625rem;
|
|
@@ -720,6 +704,51 @@
|
|
|
720
704
|
flex-direction: column;
|
|
721
705
|
gap: 0.625rem;
|
|
722
706
|
}
|
|
707
|
+
.pollar-wallet-list {
|
|
708
|
+
display: flex;
|
|
709
|
+
flex-direction: column;
|
|
710
|
+
gap: 0.25rem;
|
|
711
|
+
margin-top: 0.5rem;
|
|
712
|
+
}
|
|
713
|
+
.pollar-wallet-list-btn {
|
|
714
|
+
display: flex;
|
|
715
|
+
width: 100%;
|
|
716
|
+
align-items: center;
|
|
717
|
+
gap: 1rem;
|
|
718
|
+
padding: 0.75rem 0.75rem;
|
|
719
|
+
border-radius: var(--pollar-buttons-border-radius, 0.5rem);
|
|
720
|
+
border: 1px solid transparent;
|
|
721
|
+
background-color: transparent;
|
|
722
|
+
color: var(--pollar-text);
|
|
723
|
+
cursor: pointer;
|
|
724
|
+
transition: all 0.15s;
|
|
725
|
+
box-sizing: border-box;
|
|
726
|
+
text-align: left;
|
|
727
|
+
}
|
|
728
|
+
.pollar-wallet-list-btn:hover:not(:disabled) {
|
|
729
|
+
background-color: var(--pollar-input-bg);
|
|
730
|
+
border-color: var(--pollar-accent);
|
|
731
|
+
color: var(--pollar-accent);
|
|
732
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
733
|
+
}
|
|
734
|
+
.pollar-wallet-list-btn:active:not(:disabled) {
|
|
735
|
+
transform: scale(0.99);
|
|
736
|
+
}
|
|
737
|
+
.pollar-wallet-list-btn:disabled {
|
|
738
|
+
opacity: 0.5;
|
|
739
|
+
cursor: not-allowed;
|
|
740
|
+
}
|
|
741
|
+
.pollar-wallet-list-icon {
|
|
742
|
+
width: 2.75rem;
|
|
743
|
+
height: 2.75rem;
|
|
744
|
+
border-radius: 0.625rem;
|
|
745
|
+
flex-shrink: 0;
|
|
746
|
+
object-fit: contain;
|
|
747
|
+
}
|
|
748
|
+
.pollar-wallet-list-name {
|
|
749
|
+
font-size: 1rem;
|
|
750
|
+
font-weight: 500;
|
|
751
|
+
}
|
|
723
752
|
.pollar-wallet-label {
|
|
724
753
|
margin: 0;
|
|
725
754
|
font-size: 0.6875rem;
|
|
@@ -735,14 +764,14 @@
|
|
|
735
764
|
height: var(--pollar-buttons-height, 44px);
|
|
736
765
|
align-items: center;
|
|
737
766
|
justify-content: center;
|
|
738
|
-
gap: 0.
|
|
767
|
+
gap: 0.75rem;
|
|
739
768
|
border-radius: var(--pollar-buttons-border-radius, 0.5rem);
|
|
740
|
-
border: 1px solid var(--pollar-
|
|
741
|
-
background-color:
|
|
742
|
-
color: var(--pollar-
|
|
769
|
+
border: 1px solid var(--pollar-border);
|
|
770
|
+
background-color: var(--pollar-input-bg);
|
|
771
|
+
color: var(--pollar-text);
|
|
743
772
|
padding: 0 1rem;
|
|
744
773
|
font-size: 1rem;
|
|
745
|
-
font-weight:
|
|
774
|
+
font-weight: 500;
|
|
746
775
|
cursor: pointer;
|
|
747
776
|
transition: all 0.15s;
|
|
748
777
|
box-sizing: border-box;
|
|
@@ -758,6 +787,41 @@
|
|
|
758
787
|
opacity: 0.5;
|
|
759
788
|
cursor: not-allowed;
|
|
760
789
|
}
|
|
790
|
+
.pollar-wallet-entry-btn {
|
|
791
|
+
display: flex;
|
|
792
|
+
width: 100%;
|
|
793
|
+
height: var(--pollar-buttons-height, 44px);
|
|
794
|
+
align-items: center;
|
|
795
|
+
justify-content: center;
|
|
796
|
+
gap: 0.625rem;
|
|
797
|
+
border-radius: var(--pollar-buttons-border-radius, 0.5rem);
|
|
798
|
+
border: 1px solid var(--pollar-border);
|
|
799
|
+
background-color: var(--pollar-input-bg);
|
|
800
|
+
color: var(--pollar-text);
|
|
801
|
+
padding: 0 1rem;
|
|
802
|
+
font-size: 1rem;
|
|
803
|
+
font-weight: 500;
|
|
804
|
+
cursor: pointer;
|
|
805
|
+
transition: all 0.15s;
|
|
806
|
+
box-sizing: border-box;
|
|
807
|
+
font-family:
|
|
808
|
+
-apple-system,
|
|
809
|
+
BlinkMacSystemFont,
|
|
810
|
+
"Segoe UI",
|
|
811
|
+
sans-serif;
|
|
812
|
+
}
|
|
813
|
+
.pollar-wallet-entry-btn:hover:not(:disabled) {
|
|
814
|
+
border-color: var(--pollar-accent);
|
|
815
|
+
color: var(--pollar-accent);
|
|
816
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
817
|
+
}
|
|
818
|
+
.pollar-wallet-entry-btn:active:not(:disabled) {
|
|
819
|
+
transform: scale(0.99);
|
|
820
|
+
}
|
|
821
|
+
.pollar-wallet-entry-btn:disabled {
|
|
822
|
+
opacity: 0.5;
|
|
823
|
+
cursor: not-allowed;
|
|
824
|
+
}
|
|
761
825
|
.pollar-wallet-icon {
|
|
762
826
|
width: 1.125rem;
|
|
763
827
|
height: 1.125rem;
|
|
@@ -802,15 +866,7 @@
|
|
|
802
866
|
|
|
803
867
|
/* src/components/ramp-widget/RampWidget.css */
|
|
804
868
|
.pollar-ramp-modal {
|
|
805
|
-
position: relative;
|
|
806
|
-
width: 100%;
|
|
807
869
|
max-width: 480px;
|
|
808
|
-
border-radius: 1rem;
|
|
809
|
-
border: 1px solid var(--pollar-border);
|
|
810
|
-
padding: 2rem;
|
|
811
|
-
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
812
|
-
background-color: var(--pollar-bg);
|
|
813
|
-
box-sizing: border-box;
|
|
814
870
|
}
|
|
815
871
|
.pollar-ramp-header {
|
|
816
872
|
margin-bottom: 1.5rem;
|
|
@@ -818,20 +874,20 @@
|
|
|
818
874
|
}
|
|
819
875
|
.pollar-ramp-title {
|
|
820
876
|
margin: 0 0 0.375rem;
|
|
821
|
-
font-size: 1.375rem;
|
|
877
|
+
font-size: var(--pollar-modal-heading-size, 1.375rem);
|
|
822
878
|
font-weight: 700;
|
|
823
879
|
color: var(--pollar-text);
|
|
824
880
|
}
|
|
825
881
|
.pollar-ramp-subtitle {
|
|
826
882
|
margin: 0;
|
|
827
|
-
font-size: 0.9rem;
|
|
883
|
+
font-size: var(--pollar-modal-subtitle-size, 0.9rem);
|
|
828
884
|
color: var(--pollar-muted);
|
|
829
885
|
}
|
|
830
886
|
.pollar-ramp-tabs {
|
|
831
887
|
display: flex;
|
|
832
888
|
gap: 0;
|
|
833
889
|
border: 1px solid var(--pollar-border);
|
|
834
|
-
border-radius: 0.5rem;
|
|
890
|
+
border-radius: var(--pollar-input-border-radius, 0.5rem);
|
|
835
891
|
overflow: hidden;
|
|
836
892
|
margin-bottom: 1.25rem;
|
|
837
893
|
}
|
|
@@ -864,9 +920,9 @@
|
|
|
864
920
|
}
|
|
865
921
|
.pollar-ramp-input {
|
|
866
922
|
width: 100%;
|
|
867
|
-
height: var(--pollar-
|
|
923
|
+
height: var(--pollar-input-height, 44px);
|
|
868
924
|
padding: 0 1rem;
|
|
869
|
-
border-radius: 0.5rem;
|
|
925
|
+
border-radius: var(--pollar-input-border-radius, 0.5rem);
|
|
870
926
|
border: 1px solid var(--pollar-border);
|
|
871
927
|
background-color: var(--pollar-input-bg);
|
|
872
928
|
color: var(--pollar-text);
|
|
@@ -934,7 +990,7 @@
|
|
|
934
990
|
align-items: center;
|
|
935
991
|
justify-content: space-between;
|
|
936
992
|
padding: 0.875rem 1rem;
|
|
937
|
-
border-radius:
|
|
993
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
938
994
|
border: 1px solid var(--pollar-border);
|
|
939
995
|
background-color: var(--pollar-input-bg);
|
|
940
996
|
cursor: pointer;
|
|
@@ -1007,7 +1063,7 @@
|
|
|
1007
1063
|
align-items: center;
|
|
1008
1064
|
justify-content: space-between;
|
|
1009
1065
|
padding: 0.75rem 1rem;
|
|
1010
|
-
border-radius:
|
|
1066
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
1011
1067
|
border: 1px solid var(--pollar-border);
|
|
1012
1068
|
background-color: var(--pollar-input-bg);
|
|
1013
1069
|
}
|
|
@@ -1020,7 +1076,7 @@
|
|
|
1020
1076
|
}
|
|
1021
1077
|
.pollar-ramp-copy-btn {
|
|
1022
1078
|
padding: 0.25rem 0.625rem;
|
|
1023
|
-
border-radius:
|
|
1079
|
+
border-radius: var(--pollar-buttons-border-radius, 6px);
|
|
1024
1080
|
border: 1px solid var(--pollar-border);
|
|
1025
1081
|
background: transparent;
|
|
1026
1082
|
color: var(--pollar-muted);
|
|
@@ -1041,20 +1097,65 @@
|
|
|
1041
1097
|
|
|
1042
1098
|
/* src/components/transaction-modal/TransactionModal.css */
|
|
1043
1099
|
.pollar-tx-modal {
|
|
1044
|
-
width: 100%;
|
|
1045
1100
|
max-width: 420px;
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1101
|
+
}
|
|
1102
|
+
@keyframes pollar-tx-spin {
|
|
1103
|
+
to {
|
|
1104
|
+
transform: rotate(360deg);
|
|
1105
|
+
}
|
|
1106
|
+
}
|
|
1107
|
+
.pollar-tx-wallet-spinner {
|
|
1108
|
+
display: flex;
|
|
1109
|
+
flex-direction: column;
|
|
1110
|
+
align-items: center;
|
|
1111
|
+
gap: 0.875rem;
|
|
1112
|
+
padding: 1.25rem 0 0.5rem;
|
|
1113
|
+
}
|
|
1114
|
+
.pollar-tx-spinner-ring {
|
|
1115
|
+
position: relative;
|
|
1116
|
+
width: 88px;
|
|
1117
|
+
height: 88px;
|
|
1118
|
+
flex-shrink: 0;
|
|
1119
|
+
}
|
|
1120
|
+
.pollar-tx-spinner-svg {
|
|
1121
|
+
position: absolute;
|
|
1122
|
+
inset: 0;
|
|
1123
|
+
width: 88px;
|
|
1124
|
+
height: 88px;
|
|
1125
|
+
}
|
|
1126
|
+
.pollar-tx-spinner-rotating {
|
|
1127
|
+
animation: pollar-tx-spin 1.1s linear infinite;
|
|
1128
|
+
transform-origin: center;
|
|
1129
|
+
}
|
|
1130
|
+
.pollar-tx-wallet-icon {
|
|
1131
|
+
position: absolute;
|
|
1132
|
+
inset: 14px;
|
|
1133
|
+
border-radius: 10px;
|
|
1134
|
+
overflow: hidden;
|
|
1135
|
+
display: flex;
|
|
1136
|
+
align-items: center;
|
|
1137
|
+
justify-content: center;
|
|
1138
|
+
}
|
|
1139
|
+
.pollar-tx-wallet-img {
|
|
1140
|
+
width: 40px;
|
|
1141
|
+
height: 40px;
|
|
1142
|
+
object-fit: contain;
|
|
1143
|
+
border-radius: 10px;
|
|
1144
|
+
}
|
|
1145
|
+
.pollar-tx-spinner-label {
|
|
1146
|
+
font-size: 0.875rem;
|
|
1147
|
+
font-weight: 500;
|
|
1148
|
+
color: var(--pollar-muted);
|
|
1149
|
+
margin: 0;
|
|
1150
|
+
text-align: center;
|
|
1151
|
+
}
|
|
1152
|
+
.pollar-tx-retry-btn {
|
|
1153
|
+
width: 100%;
|
|
1053
1154
|
}
|
|
1054
1155
|
.pollar-tx-summary {
|
|
1055
|
-
background: var(--pollar-input-bg
|
|
1156
|
+
background: var(--pollar-input-bg);
|
|
1056
1157
|
border: 1px solid var(--pollar-border);
|
|
1057
|
-
border-radius: 10px;
|
|
1158
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
1058
1159
|
padding: 1rem 1.25rem;
|
|
1059
1160
|
margin-bottom: 1rem;
|
|
1060
1161
|
}
|
|
@@ -1088,9 +1189,9 @@
|
|
|
1088
1189
|
}
|
|
1089
1190
|
.pollar-tx-meta-item {
|
|
1090
1191
|
flex: 1;
|
|
1091
|
-
background: var(--pollar-input-bg
|
|
1192
|
+
background: var(--pollar-input-bg);
|
|
1092
1193
|
border: 1px solid var(--pollar-border);
|
|
1093
|
-
border-radius:
|
|
1194
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
1094
1195
|
padding: 0.625rem 0.875rem;
|
|
1095
1196
|
}
|
|
1096
1197
|
.pollar-tx-meta-label {
|
|
@@ -1108,9 +1209,9 @@
|
|
|
1108
1209
|
color: var(--pollar-text);
|
|
1109
1210
|
}
|
|
1110
1211
|
.pollar-tx-result {
|
|
1111
|
-
background: var(--pollar-input-bg
|
|
1212
|
+
background: var(--pollar-input-bg);
|
|
1112
1213
|
border: 1px solid var(--pollar-border);
|
|
1113
|
-
border-radius:
|
|
1214
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
1114
1215
|
padding: 0.75rem 1rem;
|
|
1115
1216
|
margin-bottom: 1rem;
|
|
1116
1217
|
word-break: break-all;
|
|
@@ -1139,7 +1240,7 @@
|
|
|
1139
1240
|
align-items: center;
|
|
1140
1241
|
gap: 0.375rem;
|
|
1141
1242
|
padding: 0.375rem 0.75rem;
|
|
1142
|
-
border-radius: 6px;
|
|
1243
|
+
border-radius: var(--pollar-buttons-border-radius, 6px);
|
|
1143
1244
|
border: 1px solid var(--pollar-border);
|
|
1144
1245
|
background: none;
|
|
1145
1246
|
font-size: 0.75rem;
|
|
@@ -1194,9 +1295,9 @@
|
|
|
1194
1295
|
.pollar-tx-xdr-content {
|
|
1195
1296
|
margin: 0.5rem 0 0;
|
|
1196
1297
|
padding: 0.75rem;
|
|
1197
|
-
background: var(--pollar-input-bg
|
|
1298
|
+
background: var(--pollar-input-bg);
|
|
1198
1299
|
border: 1px solid var(--pollar-border);
|
|
1199
|
-
border-radius:
|
|
1300
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
1200
1301
|
font-family: monospace;
|
|
1201
1302
|
font-size: 0.6875rem;
|
|
1202
1303
|
color: var(--pollar-text);
|
|
@@ -1220,9 +1321,9 @@
|
|
|
1220
1321
|
.pollar-tx-error-details-content {
|
|
1221
1322
|
margin: 0;
|
|
1222
1323
|
padding: 0.75rem;
|
|
1223
|
-
background: var(--pollar-input-bg
|
|
1324
|
+
background: var(--pollar-input-bg);
|
|
1224
1325
|
border: 1px solid var(--pollar-border);
|
|
1225
|
-
border-radius:
|
|
1326
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
1226
1327
|
font-family: monospace;
|
|
1227
1328
|
font-size: 0.6875rem;
|
|
1228
1329
|
color: var(--pollar-error-text);
|
|
@@ -1234,15 +1335,7 @@
|
|
|
1234
1335
|
|
|
1235
1336
|
/* src/components/tx-history-modal/TxHistoryModal.css */
|
|
1236
1337
|
.pollar-hist-modal {
|
|
1237
|
-
width: 100%;
|
|
1238
1338
|
max-width: 480px;
|
|
1239
|
-
border-radius: 1rem;
|
|
1240
|
-
border: 1px solid var(--pollar-border);
|
|
1241
|
-
padding: 1.75rem;
|
|
1242
|
-
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
1243
|
-
background-color: var(--pollar-bg);
|
|
1244
|
-
box-sizing: border-box;
|
|
1245
|
-
font-family: inherit;
|
|
1246
1339
|
}
|
|
1247
1340
|
.pollar-hist-list {
|
|
1248
1341
|
display: flex;
|
|
@@ -1258,9 +1351,9 @@
|
|
|
1258
1351
|
grid-template-rows: auto auto;
|
|
1259
1352
|
column-gap: 0.75rem;
|
|
1260
1353
|
row-gap: 0.125rem;
|
|
1261
|
-
background: var(--pollar-input-bg
|
|
1354
|
+
background: var(--pollar-input-bg);
|
|
1262
1355
|
border: 1px solid var(--pollar-border);
|
|
1263
|
-
border-radius: 10px;
|
|
1356
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
1264
1357
|
padding: 0.75rem 1rem;
|
|
1265
1358
|
}
|
|
1266
1359
|
.pollar-hist-item-summary {
|
|
@@ -1302,6 +1395,17 @@
|
|
|
1302
1395
|
background: rgba(107, 114, 128, 0.12);
|
|
1303
1396
|
color: var(--pollar-muted);
|
|
1304
1397
|
}
|
|
1398
|
+
.pollar-hist-item-explorer {
|
|
1399
|
+
display: inline-flex;
|
|
1400
|
+
align-items: center;
|
|
1401
|
+
gap: 3px;
|
|
1402
|
+
color: var(--pollar-muted);
|
|
1403
|
+
text-decoration: none;
|
|
1404
|
+
transition: color 150ms;
|
|
1405
|
+
}
|
|
1406
|
+
.pollar-hist-item-explorer:hover {
|
|
1407
|
+
color: var(--pollar-accent);
|
|
1408
|
+
}
|
|
1305
1409
|
.pollar-hist-pagination {
|
|
1306
1410
|
display: flex;
|
|
1307
1411
|
align-items: center;
|
|
@@ -1319,7 +1423,7 @@
|
|
|
1319
1423
|
.pollar-hist-page-btn {
|
|
1320
1424
|
background: none;
|
|
1321
1425
|
border: 1px solid var(--pollar-border);
|
|
1322
|
-
border-radius: 6px;
|
|
1426
|
+
border-radius: var(--pollar-buttons-border-radius, 6px);
|
|
1323
1427
|
padding: 4px 10px;
|
|
1324
1428
|
font-size: 0.75rem;
|
|
1325
1429
|
font-weight: 500;
|
|
@@ -1338,23 +1442,15 @@
|
|
|
1338
1442
|
|
|
1339
1443
|
/* src/components/wallet-balance-modal/WalletBalanceModal.css */
|
|
1340
1444
|
.pollar-bal-modal {
|
|
1341
|
-
width: 100%;
|
|
1342
1445
|
max-width: 380px;
|
|
1343
|
-
border-radius: 1rem;
|
|
1344
|
-
border: 1px solid var(--pollar-border);
|
|
1345
|
-
padding: 1.75rem;
|
|
1346
|
-
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
1347
|
-
background-color: var(--pollar-bg);
|
|
1348
|
-
box-sizing: border-box;
|
|
1349
|
-
font-family: inherit;
|
|
1350
1446
|
}
|
|
1351
1447
|
.pollar-bal-address {
|
|
1352
1448
|
font-size: 0.75rem;
|
|
1353
1449
|
font-family: monospace;
|
|
1354
1450
|
color: var(--pollar-muted);
|
|
1355
|
-
background: var(--pollar-input-bg
|
|
1451
|
+
background: var(--pollar-input-bg);
|
|
1356
1452
|
border: 1px solid var(--pollar-border);
|
|
1357
|
-
border-radius:
|
|
1453
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
1358
1454
|
padding: 0.375rem 0.75rem;
|
|
1359
1455
|
margin-bottom: 1rem;
|
|
1360
1456
|
overflow: hidden;
|
|
@@ -1371,9 +1467,9 @@
|
|
|
1371
1467
|
display: flex;
|
|
1372
1468
|
align-items: center;
|
|
1373
1469
|
justify-content: space-between;
|
|
1374
|
-
background: var(--pollar-input-bg
|
|
1470
|
+
background: var(--pollar-input-bg);
|
|
1375
1471
|
border: 1px solid var(--pollar-border);
|
|
1376
|
-
border-radius: 10px;
|
|
1472
|
+
border-radius: var(--pollar-card-border-radius, 10px);
|
|
1377
1473
|
padding: 0.75rem 1rem;
|
|
1378
1474
|
}
|
|
1379
1475
|
.pollar-bal-asset {
|
|
@@ -1399,7 +1495,7 @@
|
|
|
1399
1495
|
font-variant-numeric: tabular-nums;
|
|
1400
1496
|
}
|
|
1401
1497
|
|
|
1402
|
-
/* src/WalletButton.css */
|
|
1498
|
+
/* src/components/wallet-button/WalletButton.css */
|
|
1403
1499
|
.wallet-login-btn {
|
|
1404
1500
|
display: flex;
|
|
1405
1501
|
align-items: center;
|
|
@@ -1436,7 +1532,7 @@
|
|
|
1436
1532
|
align-items: center;
|
|
1437
1533
|
gap: 8px;
|
|
1438
1534
|
padding: 10px 16px;
|
|
1439
|
-
border-radius:
|
|
1535
|
+
border-radius: 6px;
|
|
1440
1536
|
color: #fff;
|
|
1441
1537
|
font-size: 14px;
|
|
1442
1538
|
font-weight: 500;
|
|
@@ -1461,7 +1557,7 @@
|
|
|
1461
1557
|
right: 0;
|
|
1462
1558
|
min-width: 180px;
|
|
1463
1559
|
border: 1px solid;
|
|
1464
|
-
border-radius:
|
|
1560
|
+
border-radius: 6px;
|
|
1465
1561
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
1466
1562
|
overflow: hidden;
|
|
1467
1563
|
z-index: 50;
|