shogun-button-react 1.3.2 → 1.3.8

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.
@@ -231,7 +231,7 @@
231
231
  margin: 0;
232
232
  font-size: 1.5rem;
233
233
  font-weight: 600;
234
- color: #111827;
234
+ color: var(--shogun-text);
235
235
  text-align: center;
236
236
  width: 100%;
237
237
  }
@@ -417,340 +417,38 @@
417
417
  border: 1px solid rgba(239, 68, 68, 0.2);
418
418
  }
419
419
 
420
- /* Shogun Button Styles */
421
-
422
- .shogun-button {
423
- display: flex;
424
- align-items: center;
425
- justify-content: center;
426
- padding: 12px 20px;
427
- background-color: #3861fb;
428
- color: white;
429
- border: none;
430
- border-radius: 8px;
431
- font-size: 16px;
432
- font-weight: 600;
433
- cursor: pointer;
434
- transition: all 0.2s ease;
435
- min-width: 150px;
436
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
437
- }
438
-
439
- .shogun-button:hover {
440
- background-color: #2d4fd6;
441
- transform: translateY(-1px);
442
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
443
- }
444
-
445
- .shogun-button:active {
446
- transform: translateY(0);
447
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
448
- }
449
-
450
- .shogun-button.shogun-logged-in {
451
- background-color: #4CAF50;
452
- }
453
-
454
- .shogun-button.shogun-logged-in:hover {
455
- background-color: #43a047;
456
- }
457
-
458
- .shogun-button-custom {
459
- cursor: pointer;
460
- display: inline-flex;
461
- align-items: center;
462
- }
463
-
464
- /* Tema scuro */
465
- [data-shogun-theme="dark"] .shogun-button {
466
- background-color: #4a5568;
467
- color: white;
468
- }
469
-
470
- [data-shogun-theme="dark"] .shogun-button:hover {
471
- background-color: #2d3748;
472
- }
473
-
474
- [data-shogun-theme="dark"] .shogun-button.shogun-logged-in {
475
- background-color: #38a169;
476
- }
477
-
478
- [data-shogun-theme="dark"] .shogun-button.shogun-logged-in:hover {
479
- background-color: #2f855a;
480
- }
481
-
482
- /* Stili per il modale di login/registrazione */
483
- .shogun-modal-overlay {
484
- position: fixed;
485
- top: 0;
486
- left: 0;
487
- width: 100%;
488
- height: 100%;
489
- background-color: rgba(0, 0, 0, 0.5);
490
- display: flex;
491
- justify-content: center;
492
- align-items: center;
493
- z-index: 1000;
494
- }
495
-
496
- .shogun-modal {
497
- background-color: white;
498
- border-radius: 8px;
499
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
500
- width: 100%;
501
- max-width: 420px;
502
- overflow: hidden;
503
- }
504
-
505
- .shogun-modal-header {
506
- display: flex;
507
- justify-content: space-between;
508
- align-items: center;
509
- padding: 16px 20px;
510
- border-bottom: 1px solid #e0e0e0;
511
- }
512
-
513
- .shogun-modal-header h2 {
514
- margin: 0;
515
- font-size: 20px;
516
- font-weight: 600;
517
- color: #333;
518
- }
519
-
520
- .shogun-close-button {
420
+ .shogun-back-button {
521
421
  background: none;
522
422
  border: none;
523
- font-size: 24px;
524
- color: #666;
423
+ color: var(--shogun-text-secondary);
525
424
  cursor: pointer;
526
- }
527
-
528
- .shogun-modal-content {
529
- padding: 20px;
530
- }
531
-
532
- .shogun-error-message {
533
- background-color: #ffebee;
534
- color: #d32f2f;
535
- border-radius: 4px;
536
- padding: 10px;
537
- margin-bottom: 16px;
538
425
  font-size: 14px;
539
- }
540
-
541
- .shogun-form-group {
542
426
  margin-bottom: 16px;
543
- }
544
-
545
- .shogun-form-group label {
546
- display: block;
547
- margin-bottom: 6px;
548
- font-size: 14px;
549
- font-weight: 500;
550
- color: #333;
551
- }
552
-
553
- .shogun-form-group input {
554
- width: 100%;
555
- padding: 10px 12px;
556
- border: 1px solid #ccc;
557
- border-radius: 4px;
558
- font-size: 14px;
559
- }
560
-
561
- .shogun-submit-button {
562
- width: 100%;
563
- background-color: #4a2afd;
564
- color: white;
565
- border: none;
566
- border-radius: 4px;
567
- padding: 12px;
568
- font-size: 16px;
569
- font-weight: 600;
570
- cursor: pointer;
571
- transition: background-color 0.2s;
572
- margin-top: 8px;
573
- }
574
-
575
- .shogun-submit-button:hover {
576
- background-color: #3115d6;
577
- }
578
-
579
- .shogun-submit-button:disabled {
580
- background-color: #a9a9a9;
581
- cursor: not-allowed;
582
- }
583
-
584
- .shogun-divider {
427
+ padding: 4px;
585
428
  display: flex;
586
429
  align-items: center;
587
- text-align: center;
588
- margin: 16px 0;
589
- color: #666;
590
- font-size: 14px;
591
- }
592
-
593
- .shogun-divider::before,
594
- .shogun-divider::after {
595
- content: '';
596
- flex: 1;
597
- border-bottom: 1px solid #e0e0e0;
598
- }
599
-
600
- .shogun-divider::before {
601
- margin-right: 10px;
602
- }
603
-
604
- .shogun-divider::after {
605
- margin-left: 10px;
606
- }
607
-
608
- .shogun-metamask-button,
609
- .shogun-webauthn-button,
610
- .shogun-nostr-button,
611
- .shogun-oauth-button {
612
- width: 100%;
613
- background-color: #fff;
614
- color: #333;
615
- border: 1px solid #ccc;
616
- border-radius: 4px;
617
- padding: 12px;
618
- font-size: 14px;
430
+ gap: 4px;
619
431
  font-weight: 500;
620
- cursor: pointer;
621
- transition: background-color 0.2s;
622
- margin-bottom: 8px;
623
- display: flex;
624
- align-items: center;
625
- justify-content: center;
626
- }
627
-
628
- .shogun-metamask-button:hover,
629
- .shogun-webauthn-button:hover,
630
- .shogun-nostr-button:hover,
631
- .shogun-oauth-button:hover {
632
- background-color: #f5f5f5;
633
- }
634
-
635
- .shogun-metamask-button:disabled,
636
- .shogun-webauthn-button:disabled,
637
- .shogun-nostr-button:disabled,
638
- .shogun-oauth-button:disabled {
639
- background-color: #f5f5f5;
640
- color: #a9a9a9;
641
- cursor: not-allowed;
642
- }
643
-
644
- .shogun-form-footer {
645
- text-align: center;
646
- margin-top: 16px;
647
- font-size: 14px;
648
- color: #666;
649
- }
650
-
651
- .shogun-toggle-mode {
652
- background: none;
653
- border: none;
654
- color: #4a2afd;
655
- font-weight: 600;
656
- cursor: pointer;
657
- padding: 0;
658
- margin-left: 4px;
659
- }
660
-
661
- .shogun-toggle-mode:disabled {
662
- color: #a9a9a9;
663
- cursor: not-allowed;
664
- }
665
-
666
- /* Stili per i container DID */
667
- .shogun-logged-in-container {
668
- display: flex;
669
- flex-direction: column;
670
- align-items: center;
671
- gap: 10px;
672
- }
673
-
674
- .shogun-did-container {
675
- max-width: 100%;
676
- padding: 10px;
677
- background-color: #f5f5f5;
678
- border-radius: 5px;
679
- margin-top: 5px;
680
- word-break: break-all;
681
- text-align: center;
682
- }
683
-
684
- .shogun-did-text {
685
- font-size: 12px;
686
- color: #555;
687
- margin: 0 0 10px 0;
688
- word-break: break-all;
432
+ transition: color 0.2s ease;
689
433
  }
690
434
 
691
- .shogun-register-did-button {
692
- padding: 6px 12px;
693
- background-color: #4a56e2;
694
- color: white;
695
- border: none;
696
- border-radius: 4px;
697
- cursor: pointer;
698
- font-size: 13px;
699
- transition: background-color 0.3s;
700
- }
701
-
702
- .shogun-register-did-button:hover {
703
- background-color: #3a46c2;
704
- }
705
-
706
- .shogun-register-did-button:disabled {
707
- background-color: #a0a0a0;
708
- cursor: not-allowed;
709
- }
710
-
711
- .shogun-logout-button {
712
- padding: 6px 12px;
713
- background-color: #e74c3c;
714
- color: white;
715
- border: none;
716
- border-radius: 4px;
717
- cursor: pointer;
718
- font-size: 13px;
719
- margin-top: 5px;
720
- transition: background-color 0.3s;
721
- }
722
-
723
- .shogun-logout-button:hover {
724
- background-color: #c0392b;
435
+ .shogun-back-button:hover {
436
+ color: var(--shogun-text);
725
437
  }
726
438
 
727
439
  .shogun-prominent-toggle {
728
440
  font-weight: 600;
729
- color: #3b82f6;
441
+ color: var(--shogun-primary);
730
442
  padding: 8px 16px;
731
443
  margin-top: 16px;
732
- border: 1px solid #e5e7eb;
444
+ border: none;
733
445
  border-radius: 6px;
734
- background-color: #f9fafb;
446
+ background-color: transparent;
735
447
  transition: all 0.2s ease;
736
448
  }
737
449
 
738
450
  .shogun-prominent-toggle:hover {
739
- background-color: #f3f4f6;
740
- border-color: #d1d5db;
741
- }
742
-
743
- [data-shogun-theme="dark"] .shogun-prominent-toggle {
744
- background-color: #1f2937;
745
- border-color: #374151;
746
- color: #60a5fa;
747
- }
748
-
749
- [data-shogun-theme="dark"] .shogun-prominent-toggle:hover {
750
- background-color: #111827;
751
- border-color: #4b5563;
451
+ text-decoration: underline;
752
452
  }
753
453
 
754
- [data-shogun-theme="dark"] .shogun-modal-header h2 {
755
- color: #f9fafb;
756
- }
454
+ /* Redundant dark theme styles removed */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "shogun-button-react",
3
3
  "description": "Shogun connector button",
4
- "version": "1.3.2",
4
+ "version": "1.3.8",
5
5
  "files": [
6
6
  "dist",
7
7
  "src/styles/index.css"
@@ -34,7 +34,7 @@
34
34
  "ethers": "^6.13.5",
35
35
  "prettier": "^3.5.3",
36
36
  "rxjs": "^7.8.1",
37
- "shogun-core": "latest"
37
+ "shogun-core": "^1.3.8"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "^18.0.0",
@@ -231,7 +231,7 @@
231
231
  margin: 0;
232
232
  font-size: 1.5rem;
233
233
  font-weight: 600;
234
- color: #111827;
234
+ color: var(--shogun-text);
235
235
  text-align: center;
236
236
  width: 100%;
237
237
  }
@@ -417,340 +417,38 @@
417
417
  border: 1px solid rgba(239, 68, 68, 0.2);
418
418
  }
419
419
 
420
- /* Shogun Button Styles */
421
-
422
- .shogun-button {
423
- display: flex;
424
- align-items: center;
425
- justify-content: center;
426
- padding: 12px 20px;
427
- background-color: #3861fb;
428
- color: white;
429
- border: none;
430
- border-radius: 8px;
431
- font-size: 16px;
432
- font-weight: 600;
433
- cursor: pointer;
434
- transition: all 0.2s ease;
435
- min-width: 150px;
436
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
437
- }
438
-
439
- .shogun-button:hover {
440
- background-color: #2d4fd6;
441
- transform: translateY(-1px);
442
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
443
- }
444
-
445
- .shogun-button:active {
446
- transform: translateY(0);
447
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
448
- }
449
-
450
- .shogun-button.shogun-logged-in {
451
- background-color: #4CAF50;
452
- }
453
-
454
- .shogun-button.shogun-logged-in:hover {
455
- background-color: #43a047;
456
- }
457
-
458
- .shogun-button-custom {
459
- cursor: pointer;
460
- display: inline-flex;
461
- align-items: center;
462
- }
463
-
464
- /* Tema scuro */
465
- [data-shogun-theme="dark"] .shogun-button {
466
- background-color: #4a5568;
467
- color: white;
468
- }
469
-
470
- [data-shogun-theme="dark"] .shogun-button:hover {
471
- background-color: #2d3748;
472
- }
473
-
474
- [data-shogun-theme="dark"] .shogun-button.shogun-logged-in {
475
- background-color: #38a169;
476
- }
477
-
478
- [data-shogun-theme="dark"] .shogun-button.shogun-logged-in:hover {
479
- background-color: #2f855a;
480
- }
481
-
482
- /* Stili per il modale di login/registrazione */
483
- .shogun-modal-overlay {
484
- position: fixed;
485
- top: 0;
486
- left: 0;
487
- width: 100%;
488
- height: 100%;
489
- background-color: rgba(0, 0, 0, 0.5);
490
- display: flex;
491
- justify-content: center;
492
- align-items: center;
493
- z-index: 1000;
494
- }
495
-
496
- .shogun-modal {
497
- background-color: white;
498
- border-radius: 8px;
499
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
500
- width: 100%;
501
- max-width: 420px;
502
- overflow: hidden;
503
- }
504
-
505
- .shogun-modal-header {
506
- display: flex;
507
- justify-content: space-between;
508
- align-items: center;
509
- padding: 16px 20px;
510
- border-bottom: 1px solid #e0e0e0;
511
- }
512
-
513
- .shogun-modal-header h2 {
514
- margin: 0;
515
- font-size: 20px;
516
- font-weight: 600;
517
- color: #333;
518
- }
519
-
520
- .shogun-close-button {
420
+ .shogun-back-button {
521
421
  background: none;
522
422
  border: none;
523
- font-size: 24px;
524
- color: #666;
423
+ color: var(--shogun-text-secondary);
525
424
  cursor: pointer;
526
- }
527
-
528
- .shogun-modal-content {
529
- padding: 20px;
530
- }
531
-
532
- .shogun-error-message {
533
- background-color: #ffebee;
534
- color: #d32f2f;
535
- border-radius: 4px;
536
- padding: 10px;
537
- margin-bottom: 16px;
538
425
  font-size: 14px;
539
- }
540
-
541
- .shogun-form-group {
542
426
  margin-bottom: 16px;
543
- }
544
-
545
- .shogun-form-group label {
546
- display: block;
547
- margin-bottom: 6px;
548
- font-size: 14px;
549
- font-weight: 500;
550
- color: #333;
551
- }
552
-
553
- .shogun-form-group input {
554
- width: 100%;
555
- padding: 10px 12px;
556
- border: 1px solid #ccc;
557
- border-radius: 4px;
558
- font-size: 14px;
559
- }
560
-
561
- .shogun-submit-button {
562
- width: 100%;
563
- background-color: #4a2afd;
564
- color: white;
565
- border: none;
566
- border-radius: 4px;
567
- padding: 12px;
568
- font-size: 16px;
569
- font-weight: 600;
570
- cursor: pointer;
571
- transition: background-color 0.2s;
572
- margin-top: 8px;
573
- }
574
-
575
- .shogun-submit-button:hover {
576
- background-color: #3115d6;
577
- }
578
-
579
- .shogun-submit-button:disabled {
580
- background-color: #a9a9a9;
581
- cursor: not-allowed;
582
- }
583
-
584
- .shogun-divider {
427
+ padding: 4px;
585
428
  display: flex;
586
429
  align-items: center;
587
- text-align: center;
588
- margin: 16px 0;
589
- color: #666;
590
- font-size: 14px;
591
- }
592
-
593
- .shogun-divider::before,
594
- .shogun-divider::after {
595
- content: '';
596
- flex: 1;
597
- border-bottom: 1px solid #e0e0e0;
598
- }
599
-
600
- .shogun-divider::before {
601
- margin-right: 10px;
602
- }
603
-
604
- .shogun-divider::after {
605
- margin-left: 10px;
606
- }
607
-
608
- .shogun-metamask-button,
609
- .shogun-webauthn-button,
610
- .shogun-nostr-button,
611
- .shogun-oauth-button {
612
- width: 100%;
613
- background-color: #fff;
614
- color: #333;
615
- border: 1px solid #ccc;
616
- border-radius: 4px;
617
- padding: 12px;
618
- font-size: 14px;
430
+ gap: 4px;
619
431
  font-weight: 500;
620
- cursor: pointer;
621
- transition: background-color 0.2s;
622
- margin-bottom: 8px;
623
- display: flex;
624
- align-items: center;
625
- justify-content: center;
626
- }
627
-
628
- .shogun-metamask-button:hover,
629
- .shogun-webauthn-button:hover,
630
- .shogun-nostr-button:hover,
631
- .shogun-oauth-button:hover {
632
- background-color: #f5f5f5;
633
- }
634
-
635
- .shogun-metamask-button:disabled,
636
- .shogun-webauthn-button:disabled,
637
- .shogun-nostr-button:disabled,
638
- .shogun-oauth-button:disabled {
639
- background-color: #f5f5f5;
640
- color: #a9a9a9;
641
- cursor: not-allowed;
642
- }
643
-
644
- .shogun-form-footer {
645
- text-align: center;
646
- margin-top: 16px;
647
- font-size: 14px;
648
- color: #666;
649
- }
650
-
651
- .shogun-toggle-mode {
652
- background: none;
653
- border: none;
654
- color: #4a2afd;
655
- font-weight: 600;
656
- cursor: pointer;
657
- padding: 0;
658
- margin-left: 4px;
659
- }
660
-
661
- .shogun-toggle-mode:disabled {
662
- color: #a9a9a9;
663
- cursor: not-allowed;
664
- }
665
-
666
- /* Stili per i container DID */
667
- .shogun-logged-in-container {
668
- display: flex;
669
- flex-direction: column;
670
- align-items: center;
671
- gap: 10px;
672
- }
673
-
674
- .shogun-did-container {
675
- max-width: 100%;
676
- padding: 10px;
677
- background-color: #f5f5f5;
678
- border-radius: 5px;
679
- margin-top: 5px;
680
- word-break: break-all;
681
- text-align: center;
682
- }
683
-
684
- .shogun-did-text {
685
- font-size: 12px;
686
- color: #555;
687
- margin: 0 0 10px 0;
688
- word-break: break-all;
432
+ transition: color 0.2s ease;
689
433
  }
690
434
 
691
- .shogun-register-did-button {
692
- padding: 6px 12px;
693
- background-color: #4a56e2;
694
- color: white;
695
- border: none;
696
- border-radius: 4px;
697
- cursor: pointer;
698
- font-size: 13px;
699
- transition: background-color 0.3s;
700
- }
701
-
702
- .shogun-register-did-button:hover {
703
- background-color: #3a46c2;
704
- }
705
-
706
- .shogun-register-did-button:disabled {
707
- background-color: #a0a0a0;
708
- cursor: not-allowed;
709
- }
710
-
711
- .shogun-logout-button {
712
- padding: 6px 12px;
713
- background-color: #e74c3c;
714
- color: white;
715
- border: none;
716
- border-radius: 4px;
717
- cursor: pointer;
718
- font-size: 13px;
719
- margin-top: 5px;
720
- transition: background-color 0.3s;
721
- }
722
-
723
- .shogun-logout-button:hover {
724
- background-color: #c0392b;
435
+ .shogun-back-button:hover {
436
+ color: var(--shogun-text);
725
437
  }
726
438
 
727
439
  .shogun-prominent-toggle {
728
440
  font-weight: 600;
729
- color: #3b82f6;
441
+ color: var(--shogun-primary);
730
442
  padding: 8px 16px;
731
443
  margin-top: 16px;
732
- border: 1px solid #e5e7eb;
444
+ border: none;
733
445
  border-radius: 6px;
734
- background-color: #f9fafb;
446
+ background-color: transparent;
735
447
  transition: all 0.2s ease;
736
448
  }
737
449
 
738
450
  .shogun-prominent-toggle:hover {
739
- background-color: #f3f4f6;
740
- border-color: #d1d5db;
741
- }
742
-
743
- [data-shogun-theme="dark"] .shogun-prominent-toggle {
744
- background-color: #1f2937;
745
- border-color: #374151;
746
- color: #60a5fa;
747
- }
748
-
749
- [data-shogun-theme="dark"] .shogun-prominent-toggle:hover {
750
- background-color: #111827;
751
- border-color: #4b5563;
451
+ text-decoration: underline;
752
452
  }
753
453
 
754
- [data-shogun-theme="dark"] .shogun-modal-header h2 {
755
- color: #f9fafb;
756
- }
454
+ /* Redundant dark theme styles removed */