strapi-plugin-magic-mail 2.9.2 → 2.10.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.
@@ -0,0 +1,434 @@
1
+ import styled from "styled-components";
2
+ import { Button } from "@strapi/design-system";
3
+ const GradientButton = styled(Button)`
4
+ && {
5
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
6
+ color: white;
7
+ font-weight: 600;
8
+ border: none;
9
+ padding: 10px 20px;
10
+ min-height: 40px;
11
+ transition: all 0.2s ease;
12
+
13
+ &:hover:not(:disabled) {
14
+ background: linear-gradient(135deg, var(--colors-primary700, #0284C7) 0%, var(--colors-secondary600, #9333EA) 100%);
15
+ transform: translateY(-1px);
16
+ box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
17
+ }
18
+
19
+ &:active:not(:disabled) {
20
+ transform: translateY(0);
21
+ }
22
+
23
+ &:disabled {
24
+ opacity: 0.6;
25
+ cursor: not-allowed;
26
+ }
27
+ }
28
+ `;
29
+ const SecondaryButton = styled(Button)`
30
+ && {
31
+ background: ${(p) => p.theme.colors.neutral0};
32
+ color: var(--colors-secondary600, #7C3AED);
33
+ font-weight: 600;
34
+ border: 2px solid transparent;
35
+ background-image: linear-gradient(${(p) => p.theme.colors.neutral0}, ${(p) => p.theme.colors.neutral0}), linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
36
+ background-origin: border-box;
37
+ background-clip: padding-box, border-box;
38
+ padding: 10px 20px;
39
+ min-height: 40px;
40
+ transition: all 0.2s ease;
41
+
42
+ &:hover:not(:disabled) {
43
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
44
+ background-clip: padding-box;
45
+ color: white;
46
+ transform: translateY(-1px);
47
+ box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
48
+ }
49
+
50
+ &:active:not(:disabled) {
51
+ transform: translateY(0);
52
+ }
53
+
54
+ &:disabled {
55
+ opacity: 0.6;
56
+ cursor: not-allowed;
57
+ }
58
+ }
59
+ `;
60
+ const TertiaryButton = styled(Button)`
61
+ && {
62
+ background: transparent;
63
+ color: var(--colors-neutral600);
64
+ font-weight: 500;
65
+ border: 1px solid rgba(128, 128, 128, 0.2);
66
+ padding: 10px 20px;
67
+ min-height: 40px;
68
+ transition: all 0.2s ease;
69
+
70
+ &:hover:not(:disabled) {
71
+ background: var(--colors-neutral100);
72
+ border-color: rgba(128, 128, 128, 0.3);
73
+ color: var(--colors-neutral800);
74
+ }
75
+
76
+ &:disabled {
77
+ opacity: 0.6;
78
+ cursor: not-allowed;
79
+ }
80
+ }
81
+ `;
82
+ const DangerButton = styled(Button)`
83
+ && {
84
+ background: rgba(220, 38, 38, 0.12);
85
+ color: var(--colors-danger600, #DC2626);
86
+ font-weight: 600;
87
+ border: 1px solid rgba(220, 38, 38, 0.3);
88
+ padding: 10px 20px;
89
+ min-height: 40px;
90
+ transition: all 0.2s ease;
91
+
92
+ &:hover:not(:disabled) {
93
+ background: var(--colors-danger600, #DC2626);
94
+ color: white;
95
+ border-color: var(--colors-danger600, #DC2626);
96
+ }
97
+
98
+ &:disabled {
99
+ opacity: 0.6;
100
+ cursor: not-allowed;
101
+ }
102
+ }
103
+ `;
104
+ styled(Button)`
105
+ && {
106
+ background: linear-gradient(135deg, var(--colors-success500, #10B981) 0%, var(--colors-success600, #059669) 100%);
107
+ color: white;
108
+ font-weight: 600;
109
+ border: none;
110
+ padding: 10px 20px;
111
+ min-height: 40px;
112
+ transition: all 0.2s ease;
113
+
114
+ &:hover:not(:disabled) {
115
+ background: linear-gradient(135deg, var(--colors-success600, #059669) 0%, var(--colors-success700, #047857) 100%);
116
+ transform: translateY(-1px);
117
+ box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
118
+ }
119
+
120
+ &:disabled {
121
+ opacity: 0.6;
122
+ cursor: not-allowed;
123
+ }
124
+ }
125
+ `;
126
+ const IconButton = styled(Button)`
127
+ && {
128
+ background: linear-gradient(135deg, rgba(128, 128, 128, 0.04) 0%, rgba(128, 128, 128, 0.08) 100%);
129
+ color: var(--colors-neutral600, #64748B);
130
+ border: 1px solid rgba(128, 128, 128, 0.2);
131
+ padding: 8px;
132
+ min-width: 38px;
133
+ min-height: 38px;
134
+ width: 38px;
135
+ height: 38px;
136
+ border-radius: 10px;
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ transition: all 0.2s ease;
141
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
142
+
143
+ svg {
144
+ width: 18px;
145
+ height: 18px;
146
+ }
147
+
148
+ &:hover:not(:disabled) {
149
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-primary700, #0284C7) 100%);
150
+ border-color: var(--colors-primary600, #0EA5E9);
151
+ color: white;
152
+ transform: translateY(-1px);
153
+ box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
154
+ }
155
+
156
+ &:disabled {
157
+ opacity: 0.6;
158
+ cursor: not-allowed;
159
+ }
160
+ }
161
+ `;
162
+ const IconButtonDanger = styled(Button)`
163
+ && {
164
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(220, 38, 38, 0.12) 100%);
165
+ color: var(--colors-danger500, #EF4444);
166
+ border: 1px solid rgba(220, 38, 38, 0.3);
167
+ padding: 8px;
168
+ min-width: 38px;
169
+ min-height: 38px;
170
+ width: 38px;
171
+ height: 38px;
172
+ border-radius: 10px;
173
+ display: flex;
174
+ align-items: center;
175
+ justify-content: center;
176
+ transition: all 0.2s ease;
177
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
178
+
179
+ svg {
180
+ width: 18px;
181
+ height: 18px;
182
+ }
183
+
184
+ &:hover:not(:disabled) {
185
+ background: linear-gradient(135deg, var(--colors-danger500, #EF4444) 0%, var(--colors-danger600, #DC2626) 100%);
186
+ border-color: var(--colors-danger500, #EF4444);
187
+ color: white;
188
+ transform: translateY(-1px);
189
+ box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
190
+ }
191
+
192
+ &:disabled {
193
+ opacity: 0.6;
194
+ cursor: not-allowed;
195
+ }
196
+ }
197
+ `;
198
+ const IconButtonPrimary = styled(Button)`
199
+ && {
200
+ background: linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0%, rgba(14, 165, 233, 0.12) 100%);
201
+ color: var(--colors-primary600, #0EA5E9);
202
+ border: 1px solid rgba(14, 165, 233, 0.3);
203
+ padding: 8px;
204
+ min-width: 38px;
205
+ min-height: 38px;
206
+ width: 38px;
207
+ height: 38px;
208
+ border-radius: 10px;
209
+ display: flex;
210
+ align-items: center;
211
+ justify-content: center;
212
+ transition: all 0.2s ease;
213
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
214
+
215
+ svg {
216
+ width: 18px;
217
+ height: 18px;
218
+ }
219
+
220
+ &:hover:not(:disabled) {
221
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-primary700, #0284C7) 100%);
222
+ border-color: var(--colors-primary600, #0EA5E9);
223
+ color: white;
224
+ transform: translateY(-1px);
225
+ box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
226
+ }
227
+
228
+ &:disabled {
229
+ opacity: 0.6;
230
+ cursor: not-allowed;
231
+ }
232
+ }
233
+ `;
234
+ const IconButtonSuccess = styled(Button)`
235
+ && {
236
+ background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(34, 197, 94, 0.15) 100%);
237
+ color: var(--colors-success600, #22C55E);
238
+ border: 1px solid rgba(34, 197, 94, 0.3);
239
+ padding: 8px;
240
+ min-width: 38px;
241
+ min-height: 38px;
242
+ width: 38px;
243
+ height: 38px;
244
+ border-radius: 10px;
245
+ display: flex;
246
+ align-items: center;
247
+ justify-content: center;
248
+ transition: all 0.2s ease;
249
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
250
+
251
+ svg {
252
+ width: 18px;
253
+ height: 18px;
254
+ }
255
+
256
+ &:hover:not(:disabled) {
257
+ background: linear-gradient(135deg, var(--colors-success600, #22C55E) 0%, var(--colors-success700, #16A34A) 100%);
258
+ border-color: var(--colors-success600, #22C55E);
259
+ color: white;
260
+ transform: translateY(-1px);
261
+ box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
262
+ }
263
+
264
+ &:disabled {
265
+ opacity: 0.6;
266
+ cursor: not-allowed;
267
+ }
268
+ }
269
+ `;
270
+ styled(Button)`
271
+ && {
272
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0.15) 100%);
273
+ color: var(--colors-warning500, #F59E0B);
274
+ border: 1px solid rgba(234, 179, 8, 0.4);
275
+ padding: 8px;
276
+ min-width: 38px;
277
+ min-height: 38px;
278
+ width: 38px;
279
+ height: 38px;
280
+ border-radius: 10px;
281
+ display: flex;
282
+ align-items: center;
283
+ justify-content: center;
284
+ transition: all 0.2s ease;
285
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
286
+
287
+ svg {
288
+ width: 18px;
289
+ height: 18px;
290
+ }
291
+
292
+ &:hover:not(:disabled) {
293
+ background: linear-gradient(135deg, var(--colors-warning500, #F59E0B) 0%, var(--colors-warning600, #D97706) 100%);
294
+ border-color: var(--colors-warning500, #F59E0B);
295
+ color: white;
296
+ transform: translateY(-1px);
297
+ box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
298
+ }
299
+
300
+ &:disabled {
301
+ opacity: 0.6;
302
+ cursor: not-allowed;
303
+ }
304
+ }
305
+ `;
306
+ const IconButtonPurple = styled(Button)`
307
+ && {
308
+ background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, rgba(168, 85, 247, 0.12) 100%);
309
+ color: var(--colors-secondary500, #A855F7);
310
+ border: 1px solid rgba(139, 92, 246, 0.3);
311
+ padding: 8px;
312
+ min-width: 38px;
313
+ min-height: 38px;
314
+ width: 38px;
315
+ height: 38px;
316
+ border-radius: 10px;
317
+ display: flex;
318
+ align-items: center;
319
+ justify-content: center;
320
+ transition: all 0.2s ease;
321
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
322
+
323
+ svg {
324
+ width: 18px;
325
+ height: 18px;
326
+ }
327
+
328
+ &:hover:not(:disabled) {
329
+ background: linear-gradient(135deg, var(--colors-secondary500, #A855F7) 0%, var(--colors-secondary600, #9333EA) 100%);
330
+ border-color: var(--colors-secondary500, #A855F7);
331
+ color: white;
332
+ transform: translateY(-1px);
333
+ box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
334
+ }
335
+
336
+ &:disabled {
337
+ opacity: 0.6;
338
+ cursor: not-allowed;
339
+ }
340
+ }
341
+ `;
342
+ const CTAButton = styled(Button)`
343
+ && {
344
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
345
+ color: white;
346
+ font-weight: 700;
347
+ font-size: 1rem;
348
+ border: none;
349
+ padding: 14px 28px;
350
+ min-height: 52px;
351
+ border-radius: 12px;
352
+ transition: all 0.2s ease;
353
+ box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
354
+
355
+ &:hover:not(:disabled) {
356
+ background: linear-gradient(135deg, var(--colors-primary700, #0284C7) 0%, var(--colors-secondary600, #9333EA) 100%);
357
+ transform: translateY(-2px);
358
+ box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
359
+ }
360
+
361
+ &:active:not(:disabled) {
362
+ transform: translateY(0);
363
+ }
364
+
365
+ &:disabled {
366
+ opacity: 0.6;
367
+ cursor: not-allowed;
368
+ }
369
+ }
370
+ `;
371
+ styled(Button)`
372
+ && {
373
+ background: transparent;
374
+ color: var(--colors-primary600, #0EA5E9);
375
+ font-weight: 500;
376
+ border: none;
377
+ padding: 4px 8px;
378
+ min-height: auto;
379
+ text-decoration: underline;
380
+ transition: all 0.2s ease;
381
+
382
+ &:hover:not(:disabled) {
383
+ color: var(--colors-primary700, #0284C7);
384
+ text-decoration: none;
385
+ }
386
+
387
+ &:disabled {
388
+ opacity: 0.6;
389
+ cursor: not-allowed;
390
+ }
391
+ }
392
+ `;
393
+ const WhiteOutlineButton = styled(Button)`
394
+ && {
395
+ background: rgba(255, 255, 255, 0.15);
396
+ color: white;
397
+ font-weight: 600;
398
+ border: 2px solid rgba(255, 255, 255, 0.4);
399
+ padding: 8px 16px;
400
+ min-height: 38px;
401
+ border-radius: 8px;
402
+ backdrop-filter: blur(4px);
403
+ transition: all 0.2s ease;
404
+
405
+ &:hover:not(:disabled) {
406
+ background: rgba(255, 255, 255, 0.25);
407
+ border-color: rgba(255, 255, 255, 0.6);
408
+ transform: translateY(-1px);
409
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
410
+ }
411
+
412
+ &:active:not(:disabled) {
413
+ transform: translateY(0);
414
+ }
415
+
416
+ &:disabled {
417
+ opacity: 0.6;
418
+ cursor: not-allowed;
419
+ }
420
+ }
421
+ `;
422
+ export {
423
+ CTAButton as C,
424
+ DangerButton as D,
425
+ GradientButton as G,
426
+ IconButton as I,
427
+ SecondaryButton as S,
428
+ TertiaryButton as T,
429
+ WhiteOutlineButton as W,
430
+ IconButtonPrimary as a,
431
+ IconButtonDanger as b,
432
+ IconButtonPurple as c,
433
+ IconButtonSuccess as d
434
+ };