@seamlessdocs/payment-modals 1.0.41 → 1.0.43

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 (8) hide show
  1. package/build/payment-modals.js +7 -7
  2. package/package.json +1 -1
  3. package/src/Components/ACHPaymentModal/ACHPaymentModal.module.css +5 -0
  4. package/src/Components/ACHPaymentModal/index.jsx +1 -1
  5. package/src/Components/Modal/Modal.module.css +11 -6
  6. package/src/Components/SelectPaymentModal/SelectPaymentModal.module.css +0 -36
  7. package/src/Components/SelectPaymentModal/index.jsx +1 -3
  8. package/src/assets/img/bank-account.svg +9 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seamlessdocs/payment-modals",
3
- "version": "1.0.41",
3
+ "version": "1.0.43",
4
4
  "description": "",
5
5
  "main": "build/payment-modals.js",
6
6
  "scripts": {
package/src/Components/ACHPaymentModal/ACHPaymentModal.module.css CHANGED
@@ -49,6 +49,7 @@
49
49
  .paymentFormContainer {
50
50
  flex-grow: 1;
51
51
 
52
+ width: 100%;
52
53
  padding: 35px 45px 0px;
53
54
  }
54
55
 
@@ -59,6 +60,10 @@
59
60
  height: 100%;
60
61
  }
61
62
 
63
+ .paymentInfo {
64
+ width: 100%;
65
+ }
66
+
62
67
  .achTitle {
63
68
  margin-bottom: 5px;
64
69
 
package/src/Components/ACHPaymentModal/index.jsx CHANGED
@@ -32,7 +32,7 @@ const ACHPaymentModal = ({
32
32
  <div className={styles.modal}>
33
33
  <div className={styles.paymentInfoContainer}>
34
34
  <div className={styles.paymentInfoWrapper}>
35
- <div>
35
+ <div className={styles.paymentInfo}>
36
36
  <div className={styles.descriptionContainer}>
37
37
  <span className={styles.achTitle}>ACH Payment</span>
38
38
  <span className={styles.achDescription}>{description}</span>
package/src/Components/Modal/Modal.module.css CHANGED
@@ -1,29 +1,34 @@
1
1
  .modalContainer {
2
2
  position: fixed;
3
+ z-index: 1000;
3
4
  top: 0;
4
5
  left: 0;
6
+
5
7
  width: 100%;
6
8
  height: 100%;
9
+
7
10
  background: rgba(0, 0, 0, 0.8);
8
- z-index: 1000;
9
11
  }
10
12
 
11
13
  .modal {
12
14
  position: absolute;
13
- max-width: 550px;
14
- width: 90%;
15
15
  top: 84px;
16
16
  left: 50%;
17
+
18
+ width: 90%;
19
+ max-width: 550px;
20
+
17
21
  transform: translateX(-50%);
18
- background: #fff;
19
- border-radius: 6px;
22
+
20
23
  color: #322c2c;
21
- padding-bottom: 30px;
24
+ border-radius: 6px;
25
+ background: #fff;
22
26
  }
23
27
 
24
28
  @media (max-height: 530px) {
25
29
  .modal {
26
30
  top: 50%;
31
+
27
32
  transform: translate(-50%, -50%);
28
33
  }
29
34
  }
package/src/Components/SelectPaymentModal/SelectPaymentModal.module.css CHANGED
@@ -65,42 +65,6 @@
65
65
  margin-right: 20px;
66
66
  }
67
67
 
68
- .achType {
69
- position: relative;
70
- z-index: 1;
71
-
72
- display: flex;
73
- justify-content: center;
74
-
75
- width: 78px;
76
- height: 78px;
77
-
78
- text-align: center;
79
-
80
- border-radius: 50%;
81
- background-color: #d1e2f6;
82
-
83
- line-height: 78px;
84
- }
85
-
86
- .achType::after {
87
- position: absolute;
88
- z-index: -1;
89
- top: 0;
90
- top: calc(78px / 2 - 56px / 2);
91
- left: calc(78px / 2 - 56px / 2);
92
-
93
- display: block;
94
-
95
- width: 56px;
96
- height: 56px;
97
-
98
- content: ' ';
99
-
100
- border-radius: 50%;
101
- background-color: #83b9fa;
102
- }
103
-
104
68
  .paymentTypeLabel {
105
69
  margin-top: 15px;
106
70
 
package/src/Components/SelectPaymentModal/index.jsx CHANGED
@@ -38,9 +38,7 @@ const SelectPaymentModal = ({
38
38
 
39
39
  <div className={styles.contentContainer}>
40
40
  <div className={styles.paymentTypeContainer}>
41
- <div className={styles.achType}>
42
- <img src={bankAccount} alt="bank account logo" />
43
- </div>
41
+ <img src={bankAccount} alt="bank account logo" />
44
42
  <div className={styles.paymentTypeLabel}>Bank Account</div>
45
43
  <p className={styles.paymentValue}>
46
44
  {isBankAccountFeeEnable && (
package/src/assets/img/bank-account.svg CHANGED
@@ -1,7 +1,10 @@
1
- <svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M1.49855 28.9959H27.9909C28.7903 28.9959 29.4445 28.3417 29.4445 27.5422C29.4445 26.7428 28.7903 26.0886 27.9909 26.0886H1.49855C0.699053 26.0886 0.0449219 26.7428 0.0449219 27.5422C0.0812625 28.3781 0.735394 28.9959 1.49855 28.9959Z" fill="#FFA41C"/>
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M13.3822 24.5986H16.1441C16.3621 24.5986 16.5075 24.4533 16.5075 24.2352V11.9521C16.5075 11.734 16.3621 11.5887 16.1441 11.5887H13.3822C13.1642 11.5887 13.0188 11.734 13.0188 11.9521V24.2352C13.0188 24.4533 13.2005 24.5986 13.3822 24.5986Z" fill="#2C2F32"/>
4
- <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5399 24.5986H25.3018C25.5198 24.5986 25.6652 24.4533 25.6652 24.2352V11.9521C25.6652 11.734 25.5198 11.5887 25.3018 11.5887H22.5399C22.3219 11.5887 22.1765 11.734 22.1765 11.9521V24.2352C22.1765 24.4533 22.3582 24.5986 22.5399 24.5986Z" fill="#2C2F32"/>
5
- <path fill-rule="evenodd" clip-rule="evenodd" d="M4.55115 24.5986H7.31304C7.53108 24.5986 7.67644 24.4533 7.67644 24.2352V11.9521C7.67644 11.734 7.53108 11.5887 7.31304 11.5887H4.55115C4.33311 11.5887 4.18774 11.734 4.18774 11.9521V24.2352C4.18774 24.4533 4.36945 24.5986 4.55115 24.5986Z" fill="#2C2F32"/>
6
- <path fill-rule="evenodd" clip-rule="evenodd" d="M27.6638 8.42709L15.7441 0.57752C15.1626 0.177773 14.3631 0.177773 13.7817 0.57752L1.86196 8.42709C1.0988 8.93586 1.46221 10.0988 2.33438 10.0988H27.1187C28.0635 10.0988 28.3906 8.93586 27.6638 8.42709Z" fill="#2C2F32"/>
1
+ <svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle opacity="0.14" cx="39.745" cy="39.1711" r="38.8465" fill="#0D7CFF"/>
3
+ <circle opacity="0.4" cx="39.7447" cy="39.171" r="28.0896" fill="#0D7CFF"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M26.4985 50.9959H52.9909C53.7903 50.9959 54.4445 50.3417 54.4445 49.5422C54.4445 48.7428 53.7903 48.0886 52.9909 48.0886H26.4985C25.6991 48.0886 25.0449 48.7428 25.0449 49.5422C25.0813 50.3781 25.7354 50.9959 26.4985 50.9959Z" fill="#FFA41C"/>
5
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M38.3822 46.5986H41.1441C41.3621 46.5986 41.5075 46.4533 41.5075 46.2352V33.9521C41.5075 33.734 41.3621 33.5887 41.1441 33.5887H38.3822C38.1642 33.5887 38.0188 33.734 38.0188 33.9521V46.2352C38.0188 46.4533 38.2005 46.5986 38.3822 46.5986Z" fill="#2C2F32"/>
6
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M47.5399 46.5986H50.3018C50.5198 46.5986 50.6652 46.4533 50.6652 46.2352V33.9521C50.6652 33.734 50.5198 33.5887 50.3018 33.5887H47.5399C47.3219 33.5887 47.1765 33.734 47.1765 33.9521V46.2352C47.1765 46.4533 47.3582 46.5986 47.5399 46.5986Z" fill="#2C2F32"/>
7
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M29.5512 46.5986H32.313C32.5311 46.5986 32.6764 46.4533 32.6764 46.2352V33.9521C32.6764 33.734 32.5311 33.5887 32.313 33.5887H29.5512C29.3331 33.5887 29.1877 33.734 29.1877 33.9521V46.2352C29.1877 46.4533 29.3694 46.5986 29.5512 46.5986Z" fill="#2C2F32"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M52.6638 30.4271L40.7441 22.5775C40.1626 22.1778 39.3631 22.1778 38.7817 22.5775L26.862 30.4271C26.0988 30.9359 26.4622 32.0988 27.3344 32.0988H52.1187C53.0635 32.0988 53.3906 30.9359 52.6638 30.4271Z" fill="#2C2F32"/>
9
+ <circle cx="39.7449" cy="27.966" r="2.20534" fill="white"/>
7
10
  </svg>