@seamlessdocs/payment-modals 1.0.41 → 1.0.42
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/build/payment-modals.js +7 -7
- package/package.json +1 -1
- package/src/Components/ACHPaymentModal/ACHPaymentModal.module.css +5 -0
- package/src/Components/ACHPaymentModal/index.jsx +1 -1
- package/src/Components/Modal/Modal.module.css +11 -6
- package/src/Components/SelectPaymentModal/SelectPaymentModal.module.css +0 -36
- package/src/Components/SelectPaymentModal/index.jsx +1 -3
- package/src/assets/img/bank-account.svg +9 -6
package/package.json
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>
|
|
@@ -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
|
-
|
|
19
|
-
border-radius: 6px;
|
|
22
|
+
|
|
20
23
|
color: #322c2c;
|
|
21
|
-
|
|
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
|
}
|
|
@@ -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
|
|
|
@@ -38,9 +38,7 @@ const SelectPaymentModal = ({
|
|
|
38
38
|
|
|
39
39
|
<div className={styles.contentContainer}>
|
|
40
40
|
<div className={styles.paymentTypeContainer}>
|
|
41
|
-
<
|
|
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 && (
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="
|
|
5
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="
|
|
6
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="
|
|
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>
|