nestiq-component-library 1.1.52 → 1.1.53
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/assets/images/icon_checkmark.9b48c4a4bc651b08.svg +10 -0
- package/dist/assets/images/warning.6f99cb4c6a048b47.svg +11 -0
- package/dist/components/MessagePopup/ErrorPopup.d.ts +7 -0
- package/dist/components/MessagePopup/SuccessPopup.d.ts +7 -0
- package/dist/index.es.js +87 -23
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +87 -23
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/images/icon_checkmark.svg +10 -0
- package/src/assets/images/warning.svg +11 -0
- package/src/components/MessagePopup/ErrorPopup.tsx +64 -0
- package/src/components/MessagePopup/MessagePopUp.tsx +23 -12
- package/src/components/MessagePopup/PopUp.css +408 -0
- package/src/components/MessagePopup/SuccessPopup.tsx +71 -0
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import x from "../../assets/Images/icon_close_2.png";
|
|
2
|
+
import "./PopUp.css";
|
|
3
|
+
import icon_checkmark from "../../assets/Images/icon_checkmark.svg";
|
|
4
|
+
import warning from "../../assets/Images/warning.svg";
|
|
5
|
+
import React from "react";
|
|
6
|
+
|
|
7
|
+
interface PopupProps {
|
|
8
|
+
onClick: any;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export default function SuccessPopUp(props: PopupProps) {
|
|
12
|
+
const handleClose = () => {
|
|
13
|
+
props.onClick();
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<div className="popup-overlay">
|
|
18
|
+
|
|
19
|
+
<div className="shareSection-Error d-flex flex-column col-6 ">
|
|
20
|
+
<img
|
|
21
|
+
src={x}
|
|
22
|
+
alt="close"
|
|
23
|
+
className="closeIcon d-flex flex-column align-self-end ms-5 "
|
|
24
|
+
onClick={handleClose}
|
|
25
|
+
/>
|
|
26
|
+
<div className=" d-flex flex-column align-self-center ms-5 ">
|
|
27
|
+
<img src={warning} alt="facebook" className=" mb-4" />
|
|
28
|
+
</div>
|
|
29
|
+
<div className="popUpHeader d-flex flex-column col- text-center text-wrap mb-1 align-self-center">
|
|
30
|
+
<span > Oops! Etwas ist schiefgelaufen.</span>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div className="d-flex flex-column mt-4 mb-4">
|
|
36
|
+
<span className="text-center ms-5 text-wrap">
|
|
37
|
+
Beim Senden deiner Nachricht ist ein Fehler aufgetreten. Wenn das Problem weiterhin besteht, kontaktiere uns unter support@nestiq.de
|
|
38
|
+
</span>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
<div className=" d-flex flex-row align-self-center ">
|
|
44
|
+
|
|
45
|
+
<button
|
|
46
|
+
className="d-flex button_success-left col-sm-5 border-0 rounded-4"
|
|
47
|
+
type="button"
|
|
48
|
+
id="button">
|
|
49
|
+
|
|
50
|
+
<strong> Erneut versuchen</strong>
|
|
51
|
+
</button>
|
|
52
|
+
|
|
53
|
+
<button
|
|
54
|
+
className="button_success-right w-50 border-1 ms-3 rounded-4"
|
|
55
|
+
type="button"
|
|
56
|
+
id="button" >
|
|
57
|
+
<strong> Support kontaktieren</strong>
|
|
58
|
+
</button>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import x from "../../assets/Images/icon_close_2.png";
|
|
3
3
|
import mail_icon from "../../assets/Images/mail-icon.png";
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
import SuccessPopUp from "../MessagePopup/SuccessPopup";
|
|
5
|
+
import ErrorPopUp from "../MessagePopup/ErrorPopup";
|
|
6
6
|
import "../MessagePopup/MessagePopUp.css";
|
|
7
7
|
// import { showToast } from "nestiq-component-library";
|
|
8
8
|
|
|
@@ -31,6 +31,15 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
31
31
|
const handleSendMessage = () => {
|
|
32
32
|
props.handleSendMessage();
|
|
33
33
|
}
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
const user = JSON.parse(localStorage.getItem("user") || "{}");
|
|
36
|
+
if (user) {
|
|
37
|
+
setFirstName(user.firstname || "");
|
|
38
|
+
setLastName(user.lastname || "");
|
|
39
|
+
} else if (!user) {
|
|
40
|
+
console.log("no user");
|
|
41
|
+
}
|
|
42
|
+
}, []);
|
|
34
43
|
return (
|
|
35
44
|
<div>
|
|
36
45
|
<div className="popup-overlay">
|
|
@@ -58,7 +67,7 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
58
67
|
/>
|
|
59
68
|
</div>
|
|
60
69
|
<div className="popUpHeader d-flex flex-column text-wrap mb-md-1 ">
|
|
61
|
-
Nachricht senden {
|
|
70
|
+
Nachricht senden {firstName} {lastName}
|
|
62
71
|
</div>
|
|
63
72
|
</div>
|
|
64
73
|
|
|
@@ -75,11 +84,13 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
75
84
|
onChange={(e) => setThemeId(e.target.value)}
|
|
76
85
|
>
|
|
77
86
|
<option value="">Select a theme</option>
|
|
78
|
-
{props.themesList.map(
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
87
|
+
{props.themesList.map(
|
|
88
|
+
(theme: { id: string; name: string }) => (
|
|
89
|
+
<option key={theme.id} value={theme.id}>
|
|
90
|
+
{theme.name}
|
|
91
|
+
</option>
|
|
92
|
+
)
|
|
93
|
+
)}
|
|
83
94
|
</select>
|
|
84
95
|
</div>
|
|
85
96
|
</div>
|
|
@@ -114,7 +125,7 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
114
125
|
className="popup_textarea mb-md-4 col-12 col-md-11"
|
|
115
126
|
placeholder="Dein Vorname"
|
|
116
127
|
type="text"
|
|
117
|
-
value={
|
|
128
|
+
value={firstName}
|
|
118
129
|
onChange={(e) => setFirstName(e.target.value)}
|
|
119
130
|
style={{ height: "42px" }}
|
|
120
131
|
/>
|
|
@@ -147,13 +158,13 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
147
158
|
</div>
|
|
148
159
|
</div>
|
|
149
160
|
</div>
|
|
150
|
-
|
|
161
|
+
|
|
151
162
|
{showSuccessPopUp && (
|
|
152
163
|
<SuccessPopUp onClick={() => setShowSuccessPopUp(false)} />
|
|
153
164
|
)}
|
|
154
165
|
{showErrorPopUp && (
|
|
155
166
|
<ErrorPopUp onClick={() => setShowErrorPopUp(false)} />
|
|
156
|
-
)}
|
|
167
|
+
)}
|
|
157
168
|
</div>
|
|
158
169
|
);
|
|
159
170
|
}
|
|
@@ -0,0 +1,408 @@
|
|
|
1
|
+
.popup-overlay {
|
|
2
|
+
position: fixed; /* Fixed position to cover the whole screen */
|
|
3
|
+
top: 0;
|
|
4
|
+
left: 0;
|
|
5
|
+
right: 0;
|
|
6
|
+
bottom: 0;
|
|
7
|
+
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
|
|
8
|
+
display: flex; /* Flexbox to center the popup */
|
|
9
|
+
justify-content: center; /* Center horizontally */
|
|
10
|
+
align-items: center; /* Center vertically */
|
|
11
|
+
z-index: 2000; /* Ensure it's above other content */
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.shareSection {
|
|
15
|
+
height: 340px;
|
|
16
|
+
padding: 40px;
|
|
17
|
+
border-radius: 16px;
|
|
18
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
19
|
+
border: solid 1px #d7d9e3;
|
|
20
|
+
background-color: #fff;
|
|
21
|
+
}
|
|
22
|
+
.popUpHeader {
|
|
23
|
+
height: 48px;
|
|
24
|
+
font-size: 32px;
|
|
25
|
+
font-weight: 600;
|
|
26
|
+
color: #1b1b1b;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.closeIcon {
|
|
30
|
+
width: 16px;
|
|
31
|
+
height: 16px;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.socialMediaIconsSection {
|
|
36
|
+
gap: 60px !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.socialMediaIcons {
|
|
40
|
+
width: 28px !important;
|
|
41
|
+
height: 28px !important;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.socialMediaIconText {
|
|
46
|
+
height: 36px;
|
|
47
|
+
font-size: 13px;
|
|
48
|
+
font-weight: 500;
|
|
49
|
+
line-height: 3;
|
|
50
|
+
color: #344041;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.popup_search-input {
|
|
55
|
+
height: 60px;
|
|
56
|
+
padding-inline-end: 190px;
|
|
57
|
+
font-size: 20px;
|
|
58
|
+
box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
59
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.popup_search-input::placeholder {
|
|
63
|
+
font-size: 20px;
|
|
64
|
+
color: rgba(140, 140, 140, 0.5);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.popup_search-input:focus {
|
|
68
|
+
outline: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.popupcustom-button {
|
|
72
|
+
height: 35px;
|
|
73
|
+
color: #000;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
border-color: var(--main-yellow);
|
|
76
|
+
right: 0;
|
|
77
|
+
z-index: 1;
|
|
78
|
+
background-color: var(--main-yellow);
|
|
79
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
80
|
+
}
|
|
81
|
+
.button-text {
|
|
82
|
+
width: 115px;
|
|
83
|
+
height: 19px;
|
|
84
|
+
flex-grow: 0;
|
|
85
|
+
font-family: Inter;
|
|
86
|
+
font-size: 16px;
|
|
87
|
+
font-weight: 500;
|
|
88
|
+
font-stretch: normal;
|
|
89
|
+
font-style: normal;
|
|
90
|
+
line-height: normal;
|
|
91
|
+
letter-spacing: normal;
|
|
92
|
+
text-align: center;
|
|
93
|
+
}
|
|
94
|
+
.button_success-right {
|
|
95
|
+
width: 184px;
|
|
96
|
+
height: 43px;
|
|
97
|
+
flex-grow: 0;
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: row;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
align-items: center;
|
|
102
|
+
gap: 8px;
|
|
103
|
+
padding: 12px 24px;
|
|
104
|
+
border-radius: 16px;
|
|
105
|
+
border-color: #000;
|
|
106
|
+
background-color: transparent;
|
|
107
|
+
}
|
|
108
|
+
.button_success-left {
|
|
109
|
+
width: 200px;
|
|
110
|
+
height: 43px;
|
|
111
|
+
flex-grow: 0;
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-direction: row;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
align-items: center;
|
|
116
|
+
gap: 8px;
|
|
117
|
+
padding: 12px 24px;
|
|
118
|
+
border-radius: 16px;
|
|
119
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
120
|
+
background-color: var(--main-yellow);
|
|
121
|
+
}
|
|
122
|
+
.shareSection-Success {
|
|
123
|
+
height: 510px;
|
|
124
|
+
padding: 40px;
|
|
125
|
+
border-radius: 16px;
|
|
126
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
127
|
+
border: solid 1px #d7d9e3;
|
|
128
|
+
background-color: #fff;
|
|
129
|
+
}
|
|
130
|
+
.shareSection-Error {
|
|
131
|
+
height: 400px;
|
|
132
|
+
padding: 10px;
|
|
133
|
+
border-radius: 16px;
|
|
134
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
135
|
+
border: solid 1px #d7d9e3;
|
|
136
|
+
background-color: #fff;
|
|
137
|
+
}
|
|
138
|
+
.MessageShareSection {
|
|
139
|
+
height: 513px;
|
|
140
|
+
padding: 14px 14px;
|
|
141
|
+
border-radius: 16px;
|
|
142
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
143
|
+
border: solid 1px #d7d9e3;
|
|
144
|
+
background-color: #fff;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.popup-tags {
|
|
148
|
+
font-size: large;
|
|
149
|
+
font-weight: bold;
|
|
150
|
+
}
|
|
151
|
+
.button_icon-left {
|
|
152
|
+
width: 184px;
|
|
153
|
+
height: 43px;
|
|
154
|
+
flex-grow: 0;
|
|
155
|
+
display: flex;
|
|
156
|
+
flex-direction: row;
|
|
157
|
+
justify-content: center;
|
|
158
|
+
align-items: center;
|
|
159
|
+
gap: 8px;
|
|
160
|
+
padding: 12px 24px;
|
|
161
|
+
border-radius: 16px;
|
|
162
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
163
|
+
}
|
|
164
|
+
.main_button {
|
|
165
|
+
width: 184px;
|
|
166
|
+
height: 43px;
|
|
167
|
+
flex-grow: 0;
|
|
168
|
+
display: flex;
|
|
169
|
+
flex-direction: row;
|
|
170
|
+
justify-content: center;
|
|
171
|
+
align-items: center;
|
|
172
|
+
gap: 8px;
|
|
173
|
+
padding: 12px 24px;
|
|
174
|
+
border-radius: 16px;
|
|
175
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
176
|
+
background-color: var(--main-yellow);
|
|
177
|
+
}
|
|
178
|
+
.button-text {
|
|
179
|
+
width: 85px;
|
|
180
|
+
height: 19px;
|
|
181
|
+
flex-grow: 0;
|
|
182
|
+
font-family: Inter;
|
|
183
|
+
font-size: 16px;
|
|
184
|
+
font-weight: 500;
|
|
185
|
+
font-stretch: normal;
|
|
186
|
+
font-style: normal;
|
|
187
|
+
line-height: normal;
|
|
188
|
+
letter-spacing: normal;
|
|
189
|
+
text-align: center;
|
|
190
|
+
}
|
|
191
|
+
.button_icon-right {
|
|
192
|
+
width: 184px;
|
|
193
|
+
height: 43px;
|
|
194
|
+
flex-grow: 0;
|
|
195
|
+
display: flex;
|
|
196
|
+
flex-direction: row;
|
|
197
|
+
justify-content: center;
|
|
198
|
+
align-items: center;
|
|
199
|
+
gap: 8px;
|
|
200
|
+
padding: 12px 24px;
|
|
201
|
+
border-radius: 16px;
|
|
202
|
+
border-color: #000;
|
|
203
|
+
background-color: transparent;
|
|
204
|
+
}
|
|
205
|
+
.circle {
|
|
206
|
+
height: 55px;
|
|
207
|
+
width: 55px;
|
|
208
|
+
background-color: transparent;
|
|
209
|
+
border-radius: 50%;
|
|
210
|
+
border-style: solid;
|
|
211
|
+
border-color: #000;
|
|
212
|
+
border-width: 2px;
|
|
213
|
+
}
|
|
214
|
+
.Line-9,
|
|
215
|
+
.Line-10 {
|
|
216
|
+
height: 1px;
|
|
217
|
+
flex-grow: 1;
|
|
218
|
+
background-color: rgba(140, 140, 140, 0.5);
|
|
219
|
+
max-width: 18rem;
|
|
220
|
+
align-self: center;
|
|
221
|
+
align-content: center;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.middle-container {
|
|
225
|
+
display: flex;
|
|
226
|
+
align-items: center;
|
|
227
|
+
justify-content: center;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.middle-text {
|
|
231
|
+
margin: 25px 25px;
|
|
232
|
+
}
|
|
233
|
+
.google-button {
|
|
234
|
+
width: 260px;
|
|
235
|
+
height: 45px;
|
|
236
|
+
flex-grow: 0;
|
|
237
|
+
display: flex;
|
|
238
|
+
flex-direction: row;
|
|
239
|
+
justify-content: center;
|
|
240
|
+
align-items: center;
|
|
241
|
+
gap: 8px;
|
|
242
|
+
padding: 12px 24px;
|
|
243
|
+
border-radius: 4px;
|
|
244
|
+
background-color: #000000;
|
|
245
|
+
background: linear-gradient(to top, #000, #666);
|
|
246
|
+
}
|
|
247
|
+
.Account-popup {
|
|
248
|
+
height: 713px;
|
|
249
|
+
padding: 10px;
|
|
250
|
+
border-radius: 16px;
|
|
251
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
252
|
+
border: solid 1px #d7d9e3;
|
|
253
|
+
background-color: #fff;
|
|
254
|
+
max-width: 1000px;
|
|
255
|
+
}
|
|
256
|
+
.lightertxt {
|
|
257
|
+
color: #797979;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.filter {
|
|
261
|
+
height: 343px;
|
|
262
|
+
align-self: stretch;
|
|
263
|
+
flex-grow: 0;
|
|
264
|
+
display: flex;
|
|
265
|
+
flex-direction: column;
|
|
266
|
+
gap: 2px;
|
|
267
|
+
padding: 32px;
|
|
268
|
+
border-radius: 32px;
|
|
269
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
270
|
+
background-color: #f2f2f2;
|
|
271
|
+
}
|
|
272
|
+
.loginFilter {
|
|
273
|
+
height: 280px;
|
|
274
|
+
align-self: stretch;
|
|
275
|
+
flex-grow: 0;
|
|
276
|
+
display: flex;
|
|
277
|
+
flex-direction: column;
|
|
278
|
+
gap: 2px;
|
|
279
|
+
padding: 32px;
|
|
280
|
+
border-radius: 32px;
|
|
281
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
282
|
+
background-color: #f2f2f2;
|
|
283
|
+
}
|
|
284
|
+
.radioLabel {
|
|
285
|
+
width: 176px;
|
|
286
|
+
height: 19px;
|
|
287
|
+
flex-grow: 0;
|
|
288
|
+
font-family: Inter;
|
|
289
|
+
font-size: 16px;
|
|
290
|
+
font-weight: normal;
|
|
291
|
+
font-stretch: normal;
|
|
292
|
+
font-style: normal;
|
|
293
|
+
line-height: normal;
|
|
294
|
+
letter-spacing: normal;
|
|
295
|
+
text-align: left;
|
|
296
|
+
color: #1b1b1b;
|
|
297
|
+
}
|
|
298
|
+
.goButton-text {
|
|
299
|
+
width: 78px;
|
|
300
|
+
height: 19px;
|
|
301
|
+
flex-grow: 0;
|
|
302
|
+
font-family: Inter;
|
|
303
|
+
font-size: 16px;
|
|
304
|
+
font-weight: 500;
|
|
305
|
+
font-stretch: normal;
|
|
306
|
+
font-style: normal;
|
|
307
|
+
line-height: normal;
|
|
308
|
+
letter-spacing: normal;
|
|
309
|
+
text-align: center;
|
|
310
|
+
color: #1b1b1b;
|
|
311
|
+
}
|
|
312
|
+
.placeholders {
|
|
313
|
+
width: 232px;
|
|
314
|
+
height: 45px;
|
|
315
|
+
flex-grow: 0;
|
|
316
|
+
display: flex;
|
|
317
|
+
flex-direction: row;
|
|
318
|
+
justify-content: flex-start;
|
|
319
|
+
align-items: center;
|
|
320
|
+
gap: 8px;
|
|
321
|
+
padding: 12px 24px;
|
|
322
|
+
border-radius: 4px;
|
|
323
|
+
background-image: linear-gradient(to top, #000 100%, #666 0%);
|
|
324
|
+
}
|
|
325
|
+
.TagW.active {
|
|
326
|
+
height: 40px;
|
|
327
|
+
flex-grow: 1;
|
|
328
|
+
display: flex;
|
|
329
|
+
flex-direction: row;
|
|
330
|
+
justify-content: center;
|
|
331
|
+
align-items: center;
|
|
332
|
+
gap: 6px;
|
|
333
|
+
padding: 0 24px;
|
|
334
|
+
border-radius: 16px;
|
|
335
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
336
|
+
background-image: linear-gradient(to top, #000, #666);
|
|
337
|
+
color: white;
|
|
338
|
+
}
|
|
339
|
+
.Tag {
|
|
340
|
+
height: 40px;
|
|
341
|
+
flex-grow: 1;
|
|
342
|
+
display: flex;
|
|
343
|
+
flex-direction: row;
|
|
344
|
+
justify-content: center;
|
|
345
|
+
align-items: center;
|
|
346
|
+
gap: 6px;
|
|
347
|
+
padding: 0 24px;
|
|
348
|
+
border-radius: 16px;
|
|
349
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
350
|
+
background-image: linear-gradient(
|
|
351
|
+
to top,
|
|
352
|
+
rgba(255, 0, 0, 0),
|
|
353
|
+
rgba(255, 0, 0, 1)
|
|
354
|
+
);
|
|
355
|
+
}
|
|
356
|
+
.TagW {
|
|
357
|
+
height: 40px;
|
|
358
|
+
flex-grow: 1;
|
|
359
|
+
display: flex;
|
|
360
|
+
flex-direction: row;
|
|
361
|
+
justify-content: center;
|
|
362
|
+
align-items: center;
|
|
363
|
+
gap: 6px;
|
|
364
|
+
padding: 0 24px;
|
|
365
|
+
border-radius: 16px;
|
|
366
|
+
border: solid 1px #000;
|
|
367
|
+
background-color: #fff;
|
|
368
|
+
color: #000;
|
|
369
|
+
}
|
|
370
|
+
/* */
|
|
371
|
+
@media (min-width: 375px) and (max-width: 667px) {
|
|
372
|
+
.Account-popup {
|
|
373
|
+
height: 650px !important;
|
|
374
|
+
padding: 10px;
|
|
375
|
+
border-radius: 16px;
|
|
376
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
377
|
+
border: solid 1px #d7d9e3;
|
|
378
|
+
background-color: #fff;
|
|
379
|
+
width: 90vw;
|
|
380
|
+
}
|
|
381
|
+
.filter {
|
|
382
|
+
height: 260px;
|
|
383
|
+
align-self: stretch;
|
|
384
|
+
flex-grow: 0;
|
|
385
|
+
display: flex;
|
|
386
|
+
flex-direction: column;
|
|
387
|
+
gap: 2px;
|
|
388
|
+
padding: 32px;
|
|
389
|
+
border-radius: 32px;
|
|
390
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
391
|
+
background-color: #f2f2f2;
|
|
392
|
+
}
|
|
393
|
+
.middle-text {
|
|
394
|
+
margin: 5px 25px;
|
|
395
|
+
}
|
|
396
|
+
.loginFilter {
|
|
397
|
+
height: 180px;
|
|
398
|
+
align-self: stretch;
|
|
399
|
+
flex-grow: 0;
|
|
400
|
+
display: flex;
|
|
401
|
+
flex-direction: column;
|
|
402
|
+
gap: 2px;
|
|
403
|
+
padding: 32px;
|
|
404
|
+
border-radius: 32px;
|
|
405
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
406
|
+
background-color: #f2f2f2;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import x from "../../assets/images/icon_close_2.png";
|
|
2
|
+
import "./PopUp.css";
|
|
3
|
+
import icon_checkmark from "../../assets/Images/icon_checkmark.svg";
|
|
4
|
+
import React, { useState } from "react";
|
|
5
|
+
|
|
6
|
+
interface PopupProps {
|
|
7
|
+
onClick: any;
|
|
8
|
+
}
|
|
9
|
+
export default function SuccessPopUp(props: PopupProps) {
|
|
10
|
+
const [showSuccessPopUp, setShowSuccessPopUp] = useState(true);
|
|
11
|
+
|
|
12
|
+
const handleClose = () => {
|
|
13
|
+
props.onClick();
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const handleSendMessage = () => {
|
|
17
|
+
setShowSuccessPopUp(false);
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<div>
|
|
22
|
+
{showSuccessPopUp && (
|
|
23
|
+
<div className="popup-overlay">
|
|
24
|
+
<div className="shareSection-Success d-flex flex-column col-7 ">
|
|
25
|
+
<img
|
|
26
|
+
src={x}
|
|
27
|
+
alt="close"
|
|
28
|
+
className="closeIcon d-flex flex-column align-self-end ms-5 "
|
|
29
|
+
onClick={handleClose}
|
|
30
|
+
/>
|
|
31
|
+
<div className=" d-flex flex-column align-self-center ms-5 ">
|
|
32
|
+
<img src={icon_checkmark} alt="facebook" className=" mb-4" />
|
|
33
|
+
</div>
|
|
34
|
+
<div className="popUpHeader d-flex flex-column col- text-center text-wrap mb-5 align-self-center">
|
|
35
|
+
<span > Herzlichen Glückwunsch! </span>
|
|
36
|
+
<span > Deine Nachricht wurde erfolgreich gesendet. </span>
|
|
37
|
+
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div className="d-flex flex-column mt-4 mb-4">
|
|
41
|
+
<span className="text-center ms-5 text-wrap">
|
|
42
|
+
Neben vielen weiteren Einstellungen und Aktionen kannst du die Antwort auf deine Nachricht in deinem Control Center einsehen, sobald der Verkäufer darauf reagiert hat.
|
|
43
|
+
</span>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
<div className=" d-flex flex-row align-self-center ">
|
|
49
|
+
|
|
50
|
+
<button
|
|
51
|
+
className="d-flex button_success-left col-sm-5 border-0 rounded-4"
|
|
52
|
+
type="button"
|
|
53
|
+
id="button"
|
|
54
|
+
onClick={handleSendMessage}
|
|
55
|
+
>
|
|
56
|
+
|
|
57
|
+
<strong> Zum Control Center</strong>
|
|
58
|
+
</button>
|
|
59
|
+
|
|
60
|
+
<button
|
|
61
|
+
className="button_success-right col-sm-3 border-1 ms-3 rounded-4"
|
|
62
|
+
type="button"
|
|
63
|
+
id="button" >
|
|
64
|
+
<strong>Abbrechen</strong>
|
|
65
|
+
</button>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
</div>
|
|
69
|
+
</div>)}</div>
|
|
70
|
+
);
|
|
71
|
+
}
|