@pollar/react 0.5.2 → 0.6.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.
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,25 +72,9 @@
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
- display: flex;
48
- align-items: center;
49
- border-radius: 6px;
50
- transition: color 150ms, background 150ms;
51
- }
52
- .pollar-modal-close:hover {
53
- color: var(--pollar-text);
54
- background: var(--pollar-border);
55
- }
56
- .pollar-close-btn {
57
- position: absolute;
58
- top: 1rem;
59
- right: 1rem;
60
78
  display: flex;
61
79
  align-items: center;
62
80
  justify-content: center;
@@ -68,13 +86,28 @@
68
86
  background-color: transparent;
69
87
  color: var(--pollar-muted);
70
88
  cursor: pointer;
71
- transition: all 0.15s;
89
+ transition:
90
+ background-color 0.15s,
91
+ color 0.15s,
92
+ border-color 0.15s;
72
93
  }
73
- .pollar-close-btn:hover {
94
+ .pollar-close-btn:hover,
95
+ .pollar-back-btn:hover,
96
+ .pollar-modal-close:hover {
74
97
  background-color: var(--pollar-input-bg);
75
98
  color: var(--pollar-text);
76
99
  border-color: var(--pollar-text);
77
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;
110
+ }
78
111
  .pollar-modal-refresh-btn {
79
112
  background: none;
80
113
  border: 1px solid var(--pollar-border);
@@ -258,15 +291,7 @@
258
291
  animation: pollar-pulse 1.5s ease-in-out infinite;
259
292
  }
260
293
  .pollar-kyc-modal {
261
- position: relative;
262
- width: 100%;
263
294
  max-width: 500px;
264
- border-radius: 1rem;
265
- border: 1px solid var(--pollar-border);
266
- padding: 2rem;
267
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
268
- background-color: var(--pollar-bg);
269
- box-sizing: border-box;
270
295
  }
271
296
  .pollar-kyc-header {
272
297
  margin-bottom: 1.5rem;
@@ -274,13 +299,13 @@
274
299
  }
275
300
  .pollar-kyc-title {
276
301
  margin: 0 0 0.375rem;
277
- font-size: 1.375rem;
302
+ font-size: var(--pollar-modal-heading-size, 1.375rem);
278
303
  font-weight: 700;
279
304
  color: var(--pollar-text);
280
305
  }
281
306
  .pollar-kyc-subtitle {
282
307
  margin: 0;
283
- font-size: 0.9rem;
308
+ font-size: var(--pollar-modal-subtitle-size, 0.9rem);
284
309
  color: var(--pollar-muted);
285
310
  }
286
311
  .pollar-kyc-providers {
@@ -295,7 +320,7 @@
295
320
  justify-content: space-between;
296
321
  width: 100%;
297
322
  padding: 0.875rem 1rem;
298
- border-radius: 0.625rem;
323
+ border-radius: var(--pollar-card-border-radius, 10px);
299
324
  border: 1px solid var(--pollar-border);
300
325
  background-color: var(--pollar-input-bg);
301
326
  cursor: pointer;
@@ -545,38 +570,7 @@
545
570
 
546
571
  /* src/components/login-modal/LoginModal.css */
547
572
  .pollar-modal {
548
- position: relative;
549
- width: 100%;
550
573
  max-width: 460px;
551
- border-radius: 1rem;
552
- border: 1px solid var(--pollar-border);
553
- padding: 2rem;
554
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
555
- background-color: var(--pollar-bg);
556
- transition: all 300ms;
557
- box-sizing: border-box;
558
- }
559
- .pollar-back-btn {
560
- position: absolute;
561
- top: 1rem;
562
- left: 1rem;
563
- display: flex;
564
- align-items: center;
565
- justify-content: center;
566
- width: 2rem;
567
- height: 2rem;
568
- padding: 0;
569
- border-radius: var(--pollar-buttons-border-radius, 6px);
570
- border: 1px solid var(--pollar-border);
571
- background-color: transparent;
572
- color: var(--pollar-muted);
573
- cursor: pointer;
574
- transition: all 0.15s;
575
- }
576
- .pollar-back-btn:hover {
577
- background-color: var(--pollar-input-bg);
578
- color: var(--pollar-text);
579
- border-color: var(--pollar-text);
580
574
  }
581
575
  .pollar-header {
582
576
  margin-bottom: 1.75rem;
@@ -595,13 +589,13 @@
595
589
  }
596
590
  .pollar-title {
597
591
  margin: 0 0 0.5rem;
598
- font-size: 1.875rem;
592
+ font-size: var(--pollar-modal-heading-size, 1.375rem);
599
593
  font-weight: 700;
600
594
  color: var(--pollar-text);
601
595
  }
602
596
  .pollar-subtitle {
603
597
  margin: 0;
604
- font-size: 1rem;
598
+ font-size: var(--pollar-modal-subtitle-size, 0.9rem);
605
599
  color: var(--pollar-muted);
606
600
  }
607
601
  .pollar-error {
@@ -619,10 +613,11 @@
619
613
  }
620
614
  .pollar-email-input {
621
615
  width: 100%;
622
- border-radius: 0.5rem;
616
+ height: var(--pollar-input-height, 44px);
617
+ padding: 0 1rem;
618
+ border-radius: var(--pollar-input-border-radius, 0.5rem);
623
619
  border: 1px solid var(--pollar-border);
624
620
  background-color: var(--pollar-input-bg);
625
- padding: 0.875rem 1rem;
626
621
  font-size: 1rem;
627
622
  color: var(--pollar-text);
628
623
  outline: none;
@@ -639,35 +634,6 @@
639
634
  opacity: 0.5;
640
635
  cursor: not-allowed;
641
636
  }
642
- .pollar-submit-btn {
643
- display: flex;
644
- align-items: center;
645
- justify-content: center;
646
- margin-top: 0.75rem;
647
- width: 100%;
648
- height: var(--pollar-buttons-height, 44px);
649
- border: none;
650
- border-radius: var(--pollar-buttons-border-radius, 0.5rem);
651
- padding: 0 0.875rem;
652
- font-size: 1rem;
653
- font-weight: 700;
654
- color: #fff;
655
- background-color: var(--pollar-accent);
656
- cursor: pointer;
657
- transition: all 0.15s;
658
- box-sizing: border-box;
659
- }
660
- .pollar-submit-btn:hover:not(:disabled) {
661
- opacity: 0.9;
662
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
663
- }
664
- .pollar-submit-btn:active:not(:disabled) {
665
- transform: scale(0.98);
666
- }
667
- .pollar-submit-btn:disabled {
668
- opacity: 0.5;
669
- cursor: not-allowed;
670
- }
671
637
  .pollar-divider {
672
638
  position: relative;
673
639
  margin: 1.25rem 0;
@@ -898,17 +864,68 @@
898
864
  cursor: not-allowed;
899
865
  }
900
866
 
867
+ /* src/components/receive-modal/ReceiveModal.css */
868
+ .pollar-receive-modal {
869
+ max-width: 380px;
870
+ }
871
+ .pollar-receive-qr {
872
+ display: flex;
873
+ align-items: center;
874
+ justify-content: center;
875
+ padding: 1.25rem;
876
+ margin-bottom: 1rem;
877
+ background: var(--pollar-input-bg);
878
+ border: 1px solid var(--pollar-border);
879
+ border-radius: var(--pollar-card-border-radius, 10px);
880
+ }
881
+ .pollar-receive-instructions {
882
+ font-size: 0.8125rem;
883
+ color: var(--pollar-muted);
884
+ text-align: center;
885
+ margin: 0 0 1rem;
886
+ line-height: 1.5;
887
+ }
888
+ .pollar-receive-address-row {
889
+ display: flex;
890
+ align-items: center;
891
+ gap: 0.625rem;
892
+ background: var(--pollar-input-bg);
893
+ border: 1px solid var(--pollar-border);
894
+ border-radius: var(--pollar-card-border-radius, 10px);
895
+ padding: 0.625rem 0.875rem;
896
+ margin-bottom: 1rem;
897
+ }
898
+ .pollar-receive-address {
899
+ flex: 1;
900
+ font-size: 0.75rem;
901
+ font-family: monospace;
902
+ color: var(--pollar-text);
903
+ word-break: break-all;
904
+ line-height: 1.5;
905
+ }
906
+ .pollar-receive-copy-btn {
907
+ display: inline-flex;
908
+ align-items: center;
909
+ gap: 0.375rem;
910
+ flex-shrink: 0;
911
+ padding: 0.375rem 0.75rem;
912
+ border-radius: var(--pollar-buttons-border-radius, 6px);
913
+ border: 1px solid var(--pollar-border);
914
+ background: none;
915
+ font-size: 0.75rem;
916
+ font-weight: 500;
917
+ color: var(--pollar-muted);
918
+ cursor: pointer;
919
+ transition: color 150ms, background 150ms;
920
+ }
921
+ .pollar-receive-copy-btn:hover {
922
+ color: var(--pollar-text);
923
+ background: var(--pollar-border);
924
+ }
925
+
901
926
  /* src/components/ramp-widget/RampWidget.css */
902
927
  .pollar-ramp-modal {
903
- position: relative;
904
- width: 100%;
905
928
  max-width: 480px;
906
- border-radius: 1rem;
907
- border: 1px solid var(--pollar-border);
908
- padding: 2rem;
909
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
910
- background-color: var(--pollar-bg);
911
- box-sizing: border-box;
912
929
  }
913
930
  .pollar-ramp-header {
914
931
  margin-bottom: 1.5rem;
@@ -916,20 +933,20 @@
916
933
  }
917
934
  .pollar-ramp-title {
918
935
  margin: 0 0 0.375rem;
919
- font-size: 1.375rem;
936
+ font-size: var(--pollar-modal-heading-size, 1.375rem);
920
937
  font-weight: 700;
921
938
  color: var(--pollar-text);
922
939
  }
923
940
  .pollar-ramp-subtitle {
924
941
  margin: 0;
925
- font-size: 0.9rem;
942
+ font-size: var(--pollar-modal-subtitle-size, 0.9rem);
926
943
  color: var(--pollar-muted);
927
944
  }
928
945
  .pollar-ramp-tabs {
929
946
  display: flex;
930
947
  gap: 0;
931
948
  border: 1px solid var(--pollar-border);
932
- border-radius: 0.5rem;
949
+ border-radius: var(--pollar-input-border-radius, 0.5rem);
933
950
  overflow: hidden;
934
951
  margin-bottom: 1.25rem;
935
952
  }
@@ -962,9 +979,9 @@
962
979
  }
963
980
  .pollar-ramp-input {
964
981
  width: 100%;
965
- height: var(--pollar-buttons-height, 44px);
982
+ height: var(--pollar-input-height, 44px);
966
983
  padding: 0 1rem;
967
- border-radius: 0.5rem;
984
+ border-radius: var(--pollar-input-border-radius, 0.5rem);
968
985
  border: 1px solid var(--pollar-border);
969
986
  background-color: var(--pollar-input-bg);
970
987
  color: var(--pollar-text);
@@ -1032,7 +1049,7 @@
1032
1049
  align-items: center;
1033
1050
  justify-content: space-between;
1034
1051
  padding: 0.875rem 1rem;
1035
- border-radius: 0.625rem;
1052
+ border-radius: var(--pollar-card-border-radius, 10px);
1036
1053
  border: 1px solid var(--pollar-border);
1037
1054
  background-color: var(--pollar-input-bg);
1038
1055
  cursor: pointer;
@@ -1105,7 +1122,7 @@
1105
1122
  align-items: center;
1106
1123
  justify-content: space-between;
1107
1124
  padding: 0.75rem 1rem;
1108
- border-radius: 0.5rem;
1125
+ border-radius: var(--pollar-card-border-radius, 10px);
1109
1126
  border: 1px solid var(--pollar-border);
1110
1127
  background-color: var(--pollar-input-bg);
1111
1128
  }
@@ -1118,7 +1135,7 @@
1118
1135
  }
1119
1136
  .pollar-ramp-copy-btn {
1120
1137
  padding: 0.25rem 0.625rem;
1121
- border-radius: 4px;
1138
+ border-radius: var(--pollar-buttons-border-radius, 6px);
1122
1139
  border: 1px solid var(--pollar-border);
1123
1140
  background: transparent;
1124
1141
  color: var(--pollar-muted);
@@ -1139,16 +1156,7 @@
1139
1156
 
1140
1157
  /* src/components/transaction-modal/TransactionModal.css */
1141
1158
  .pollar-tx-modal {
1142
- position: relative;
1143
- width: 100%;
1144
1159
  max-width: 420px;
1145
- border-radius: 1rem;
1146
- border: 1px solid var(--pollar-border);
1147
- padding: 1.75rem;
1148
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1149
- background-color: var(--pollar-bg);
1150
- box-sizing: border-box;
1151
- font-family: inherit;
1152
1160
  }
1153
1161
  @keyframes pollar-tx-spin {
1154
1162
  to {
@@ -1204,9 +1212,9 @@
1204
1212
  width: 100%;
1205
1213
  }
1206
1214
  .pollar-tx-summary {
1207
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1215
+ background: var(--pollar-input-bg);
1208
1216
  border: 1px solid var(--pollar-border);
1209
- border-radius: 10px;
1217
+ border-radius: var(--pollar-card-border-radius, 10px);
1210
1218
  padding: 1rem 1.25rem;
1211
1219
  margin-bottom: 1rem;
1212
1220
  }
@@ -1240,9 +1248,9 @@
1240
1248
  }
1241
1249
  .pollar-tx-meta-item {
1242
1250
  flex: 1;
1243
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1251
+ background: var(--pollar-input-bg);
1244
1252
  border: 1px solid var(--pollar-border);
1245
- border-radius: 8px;
1253
+ border-radius: var(--pollar-card-border-radius, 10px);
1246
1254
  padding: 0.625rem 0.875rem;
1247
1255
  }
1248
1256
  .pollar-tx-meta-label {
@@ -1260,9 +1268,9 @@
1260
1268
  color: var(--pollar-text);
1261
1269
  }
1262
1270
  .pollar-tx-result {
1263
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1271
+ background: var(--pollar-input-bg);
1264
1272
  border: 1px solid var(--pollar-border);
1265
- border-radius: 8px;
1273
+ border-radius: var(--pollar-card-border-radius, 10px);
1266
1274
  padding: 0.75rem 1rem;
1267
1275
  margin-bottom: 1rem;
1268
1276
  word-break: break-all;
@@ -1291,7 +1299,7 @@
1291
1299
  align-items: center;
1292
1300
  gap: 0.375rem;
1293
1301
  padding: 0.375rem 0.75rem;
1294
- border-radius: 6px;
1302
+ border-radius: var(--pollar-buttons-border-radius, 6px);
1295
1303
  border: 1px solid var(--pollar-border);
1296
1304
  background: none;
1297
1305
  font-size: 0.75rem;
@@ -1346,9 +1354,9 @@
1346
1354
  .pollar-tx-xdr-content {
1347
1355
  margin: 0.5rem 0 0;
1348
1356
  padding: 0.75rem;
1349
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1357
+ background: var(--pollar-input-bg);
1350
1358
  border: 1px solid var(--pollar-border);
1351
- border-radius: 8px;
1359
+ border-radius: var(--pollar-card-border-radius, 10px);
1352
1360
  font-family: monospace;
1353
1361
  font-size: 0.6875rem;
1354
1362
  color: var(--pollar-text);
@@ -1372,9 +1380,9 @@
1372
1380
  .pollar-tx-error-details-content {
1373
1381
  margin: 0;
1374
1382
  padding: 0.75rem;
1375
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1383
+ background: var(--pollar-input-bg);
1376
1384
  border: 1px solid var(--pollar-border);
1377
- border-radius: 8px;
1385
+ border-radius: var(--pollar-card-border-radius, 10px);
1378
1386
  font-family: monospace;
1379
1387
  font-size: 0.6875rem;
1380
1388
  color: var(--pollar-error-text);
@@ -1384,17 +1392,60 @@
1384
1392
  overflow-y: auto;
1385
1393
  }
1386
1394
 
1395
+ /* src/components/send-modal/SendModal.css */
1396
+ .pollar-send-modal {
1397
+ max-width: 420px;
1398
+ }
1399
+ .pollar-send-header-left {
1400
+ display: flex;
1401
+ align-items: center;
1402
+ gap: 0.5rem;
1403
+ }
1404
+ .pollar-send-field {
1405
+ display: flex;
1406
+ flex-direction: column;
1407
+ gap: 0.375rem;
1408
+ margin-bottom: 1rem;
1409
+ }
1410
+ .pollar-send-label {
1411
+ font-size: 0.8125rem;
1412
+ font-weight: 600;
1413
+ color: var(--pollar-muted);
1414
+ }
1415
+ .pollar-send-label-row {
1416
+ display: flex;
1417
+ align-items: baseline;
1418
+ justify-content: space-between;
1419
+ }
1420
+ .pollar-send-hint {
1421
+ font-size: 0.75rem;
1422
+ color: var(--pollar-muted);
1423
+ }
1424
+ .pollar-send-select {
1425
+ appearance: none;
1426
+ -webkit-appearance: none;
1427
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
1428
+ background-repeat: no-repeat;
1429
+ background-position: right 0.875rem center;
1430
+ padding-right: 2.25rem;
1431
+ cursor: pointer;
1432
+ }
1433
+ .pollar-send-skeleton {
1434
+ height: var(--pollar-input-height, 44px);
1435
+ border-radius: var(--pollar-input-border-radius, 0.5rem);
1436
+ background:
1437
+ linear-gradient(
1438
+ 90deg,
1439
+ var(--pollar-input-bg) 25%,
1440
+ var(--pollar-border) 50%,
1441
+ var(--pollar-input-bg) 75%);
1442
+ background-size: 200% 100%;
1443
+ animation: pollar-pulse 1.4s ease-in-out infinite;
1444
+ }
1445
+
1387
1446
  /* src/components/tx-history-modal/TxHistoryModal.css */
1388
1447
  .pollar-hist-modal {
1389
- width: 100%;
1390
1448
  max-width: 480px;
1391
- border-radius: 1rem;
1392
- border: 1px solid var(--pollar-border);
1393
- padding: 1.75rem;
1394
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1395
- background-color: var(--pollar-bg);
1396
- box-sizing: border-box;
1397
- font-family: inherit;
1398
1449
  }
1399
1450
  .pollar-hist-list {
1400
1451
  display: flex;
@@ -1410,9 +1461,9 @@
1410
1461
  grid-template-rows: auto auto;
1411
1462
  column-gap: 0.75rem;
1412
1463
  row-gap: 0.125rem;
1413
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1464
+ background: var(--pollar-input-bg);
1414
1465
  border: 1px solid var(--pollar-border);
1415
- border-radius: 10px;
1466
+ border-radius: var(--pollar-card-border-radius, 10px);
1416
1467
  padding: 0.75rem 1rem;
1417
1468
  }
1418
1469
  .pollar-hist-item-summary {
@@ -1454,6 +1505,17 @@
1454
1505
  background: rgba(107, 114, 128, 0.12);
1455
1506
  color: var(--pollar-muted);
1456
1507
  }
1508
+ .pollar-hist-item-explorer {
1509
+ display: inline-flex;
1510
+ align-items: center;
1511
+ gap: 3px;
1512
+ color: var(--pollar-muted);
1513
+ text-decoration: none;
1514
+ transition: color 150ms;
1515
+ }
1516
+ .pollar-hist-item-explorer:hover {
1517
+ color: var(--pollar-accent);
1518
+ }
1457
1519
  .pollar-hist-pagination {
1458
1520
  display: flex;
1459
1521
  align-items: center;
@@ -1471,7 +1533,7 @@
1471
1533
  .pollar-hist-page-btn {
1472
1534
  background: none;
1473
1535
  border: 1px solid var(--pollar-border);
1474
- border-radius: 6px;
1536
+ border-radius: var(--pollar-buttons-border-radius, 6px);
1475
1537
  padding: 4px 10px;
1476
1538
  font-size: 0.75rem;
1477
1539
  font-weight: 500;
@@ -1490,23 +1552,15 @@
1490
1552
 
1491
1553
  /* src/components/wallet-balance-modal/WalletBalanceModal.css */
1492
1554
  .pollar-bal-modal {
1493
- width: 100%;
1494
1555
  max-width: 380px;
1495
- border-radius: 1rem;
1496
- border: 1px solid var(--pollar-border);
1497
- padding: 1.75rem;
1498
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1499
- background-color: var(--pollar-bg);
1500
- box-sizing: border-box;
1501
- font-family: inherit;
1502
1556
  }
1503
1557
  .pollar-bal-address {
1504
1558
  font-size: 0.75rem;
1505
1559
  font-family: monospace;
1506
1560
  color: var(--pollar-muted);
1507
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1561
+ background: var(--pollar-input-bg);
1508
1562
  border: 1px solid var(--pollar-border);
1509
- border-radius: 6px;
1563
+ border-radius: var(--pollar-card-border-radius, 10px);
1510
1564
  padding: 0.375rem 0.75rem;
1511
1565
  margin-bottom: 1rem;
1512
1566
  overflow: hidden;
@@ -1523,9 +1577,9 @@
1523
1577
  display: flex;
1524
1578
  align-items: center;
1525
1579
  justify-content: space-between;
1526
- background: var(--pollar-input-bg, rgba(0,0,0,0.04));
1580
+ background: var(--pollar-input-bg);
1527
1581
  border: 1px solid var(--pollar-border);
1528
- border-radius: 10px;
1582
+ border-radius: var(--pollar-card-border-radius, 10px);
1529
1583
  padding: 0.75rem 1rem;
1530
1584
  }
1531
1585
  .pollar-bal-asset {
@@ -1588,7 +1642,7 @@
1588
1642
  align-items: center;
1589
1643
  gap: 8px;
1590
1644
  padding: 10px 16px;
1591
- border-radius: 8px;
1645
+ border-radius: 6px;
1592
1646
  color: #fff;
1593
1647
  font-size: 14px;
1594
1648
  font-weight: 500;
@@ -1613,7 +1667,7 @@
1613
1667
  right: 0;
1614
1668
  min-width: 180px;
1615
1669
  border: 1px solid;
1616
- border-radius: 8px;
1670
+ border-radius: 6px;
1617
1671
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
1618
1672
  overflow: hidden;
1619
1673
  z-index: 50;
@@ -1641,4 +1695,29 @@
1641
1695
  .wallet-dropdown-item.danger:hover {
1642
1696
  background: #fef2f2;
1643
1697
  }
1698
+ .wallet-dropdown-divider {
1699
+ height: 1px;
1700
+ background: rgba(0, 0, 0, 0.08);
1701
+ margin: 2px 0;
1702
+ }
1703
+ .wallet-btn-label {
1704
+ overflow: hidden;
1705
+ text-overflow: ellipsis;
1706
+ white-space: nowrap;
1707
+ flex: 1;
1708
+ min-width: 0;
1709
+ }
1710
+ .wallet-btn:disabled {
1711
+ cursor: not-allowed;
1712
+ opacity: 1;
1713
+ }
1714
+ .wallet-btn-spinner {
1715
+ flex-shrink: 0;
1716
+ animation: pollar-wallet-spin 1.1s linear infinite;
1717
+ }
1718
+ @keyframes pollar-wallet-spin {
1719
+ to {
1720
+ transform: rotate(360deg);
1721
+ }
1722
+ }
1644
1723
  /*# sourceMappingURL=index.css.map */