@redzone/taunt-logins-ui-react 0.0.11 → 0.0.12
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/LoginUIComplete.d.ts +2 -1
- package/dist/styling.css +239 -0
- package/dist/taunt-logins-ui-react.css +1 -0
- package/dist/taunt-logins-ui-react.js +5 -5
- package/dist/taunt-logins-ui-react.js.map +1 -1
- package/dist/taunt-logins-ui-react.umd.cjs +1 -2
- package/dist/taunt-logins-ui-react.umd.cjs.map +1 -1
- package/package.json +5 -9
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { LoginComponentProps } from '.';
|
|
2
2
|
type LoginUICompleteProps = LoginComponentProps & {
|
|
3
3
|
className?: string;
|
|
4
|
+
extLoading?: boolean;
|
|
4
5
|
};
|
|
5
|
-
export declare const LoginUIComplete: ({ className, ...loginProps }: LoginUICompleteProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const LoginUIComplete: ({ className, extLoading, ...loginProps }: LoginUICompleteProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export {};
|
package/dist/styling.css
ADDED
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
.rzd-loginui-complete {
|
|
2
|
+
background: radial-gradient(50% 50% at 50% 50%, #132c50 0%, #0b101b 100%);
|
|
3
|
+
border-radius: 37px;
|
|
4
|
+
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
align-items: center;
|
|
9
|
+
text-align: center;
|
|
10
|
+
gap: 20px;
|
|
11
|
+
|
|
12
|
+
padding: 40px;
|
|
13
|
+
max-width: 620px;
|
|
14
|
+
|
|
15
|
+
min-height: 455px;
|
|
16
|
+
min-width: 500px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.rzd-loginview {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
color: white;
|
|
22
|
+
|
|
23
|
+
.header-login {
|
|
24
|
+
font-family: "DRUNKWIDE", sans-serif;
|
|
25
|
+
font-size: 36px;
|
|
26
|
+
font-weight: bold;
|
|
27
|
+
color: white;
|
|
28
|
+
text-transform: uppercase;
|
|
29
|
+
margin: 20px 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.logo {
|
|
33
|
+
height: 6em;
|
|
34
|
+
padding: 1.5em;
|
|
35
|
+
will-change: filter;
|
|
36
|
+
transition: filter 300ms;
|
|
37
|
+
}
|
|
38
|
+
.logo:hover {
|
|
39
|
+
filter: drop-shadow(0 0 2em #646cffaa);
|
|
40
|
+
}
|
|
41
|
+
.logo.react:hover {
|
|
42
|
+
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* @keyframes logo-spin {
|
|
46
|
+
from {
|
|
47
|
+
transform: rotate(0deg);
|
|
48
|
+
}
|
|
49
|
+
to {
|
|
50
|
+
transform: rotate(360deg);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
55
|
+
a:nth-of-type(2) .logo {
|
|
56
|
+
animation: logo-spin infinite 20s linear;
|
|
57
|
+
}
|
|
58
|
+
} */
|
|
59
|
+
|
|
60
|
+
.card {
|
|
61
|
+
padding: 2em;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.read-the-docs {
|
|
65
|
+
color: #888;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.rdz-input {
|
|
70
|
+
font-family: "Futura PT", sans-serif !important;
|
|
71
|
+
line-height: 1.5;
|
|
72
|
+
font-weight: 400 !important;
|
|
73
|
+
|
|
74
|
+
color: white;
|
|
75
|
+
border-radius: 8px;
|
|
76
|
+
border: 1px solid transparent;
|
|
77
|
+
padding: 0.6em 1.2em;
|
|
78
|
+
font-size: 1.2em;
|
|
79
|
+
font-weight: 400;
|
|
80
|
+
font-family: inherit;
|
|
81
|
+
background-color: transparent;
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
transition: border-color 0.25s;
|
|
84
|
+
|
|
85
|
+
/* On hover, show a blue border */
|
|
86
|
+
&:hover {
|
|
87
|
+
border-color: #646cff;
|
|
88
|
+
}
|
|
89
|
+
/* On focus, show an accessible outline */
|
|
90
|
+
&:focus,
|
|
91
|
+
&:focus-visible {
|
|
92
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
input.rdz-input {
|
|
97
|
+
box-sizing: border-box;
|
|
98
|
+
position: relative;
|
|
99
|
+
width: 100%;
|
|
100
|
+
max-width: 480px;
|
|
101
|
+
height: 58px;
|
|
102
|
+
|
|
103
|
+
border: 2px solid #009df3;
|
|
104
|
+
box-shadow: 0px 0px 16.9px 1px #0e79f3;
|
|
105
|
+
border-radius: 11px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
input.rdz-input::placeholder {
|
|
109
|
+
color: white;
|
|
110
|
+
opacity: 1;
|
|
111
|
+
font-family: "Futura PT", sans-serif;
|
|
112
|
+
font-size: 1em;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* Magic Email Input Container */
|
|
116
|
+
.rdz-magic-email-container {
|
|
117
|
+
display: flex;
|
|
118
|
+
flex-direction: column;
|
|
119
|
+
align-items: center;
|
|
120
|
+
gap: 12px;
|
|
121
|
+
width: 100%;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Error Message */
|
|
125
|
+
.rdz-magic-email-error {
|
|
126
|
+
color: red;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* Or Sign Up Using Text */
|
|
130
|
+
.rdz-sign-up-text {
|
|
131
|
+
font-family: "Futura PT", sans-serif;
|
|
132
|
+
font-size: 1.2em;
|
|
133
|
+
font-weight: 400;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Icon Button (Rounded) */
|
|
137
|
+
.rdz-icon-button {
|
|
138
|
+
width: 55px;
|
|
139
|
+
height: 55px;
|
|
140
|
+
border-radius: 50%;
|
|
141
|
+
border: none;
|
|
142
|
+
background-color: transparent;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
padding: 0;
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
transition:
|
|
149
|
+
transform 0.2s ease,
|
|
150
|
+
filter 0.2s ease;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.rdz-icon-button img {
|
|
154
|
+
width: 100%;
|
|
155
|
+
height: 100%;
|
|
156
|
+
object-fit: contain;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.rdz-icon-button:hover {
|
|
160
|
+
transform: scale(1.1);
|
|
161
|
+
filter: brightness(1.1);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.rdz-icon-button:active {
|
|
165
|
+
transform: scale(0.95);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.rdz-icon-button-disabled,
|
|
169
|
+
.rdz-icon-button:disabled {
|
|
170
|
+
opacity: 0.4;
|
|
171
|
+
cursor: not-allowed;
|
|
172
|
+
filter: grayscale(100%);
|
|
173
|
+
pointer-events: none;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.rdz-icon-button-disabled:hover,
|
|
177
|
+
.rdz-icon-button:disabled:hover {
|
|
178
|
+
transform: none;
|
|
179
|
+
filter: grayscale(100%);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* Magic Email Button */
|
|
183
|
+
.rdz-magic-email-button {
|
|
184
|
+
background-size: 100% 100%;
|
|
185
|
+
background-position: center;
|
|
186
|
+
background-repeat: no-repeat;
|
|
187
|
+
font-family: "DRUNKWIDE", sans-serif;
|
|
188
|
+
border: none;
|
|
189
|
+
color: white;
|
|
190
|
+
padding: 16px 32px;
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
min-height: 135px;
|
|
193
|
+
margin-bottom: -20px;
|
|
194
|
+
width: 100%;
|
|
195
|
+
max-width: 410px;
|
|
196
|
+
font-size: 22px;
|
|
197
|
+
font-weight: bold;
|
|
198
|
+
text-transform: uppercase;
|
|
199
|
+
letter-spacing: 1px;
|
|
200
|
+
background-color: transparent;
|
|
201
|
+
transition:
|
|
202
|
+
transform 0.2s ease,
|
|
203
|
+
filter 0.2s ease;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.rdz-magic-email-button:hover {
|
|
207
|
+
transform: scale(1.05);
|
|
208
|
+
filter: brightness(1.1);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.rdz-magic-email-button:active {
|
|
212
|
+
transform: scale(0.98);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/* Logout Button */
|
|
216
|
+
.rdz-logout-button {
|
|
217
|
+
margin-left: 8px;
|
|
218
|
+
padding: 12px 24px;
|
|
219
|
+
background-color: #3b82f6;
|
|
220
|
+
color: white;
|
|
221
|
+
border-radius: 6px;
|
|
222
|
+
border: none;
|
|
223
|
+
cursor: pointer;
|
|
224
|
+
font-family: "Futura PT", sans-serif;
|
|
225
|
+
font-size: 16px;
|
|
226
|
+
font-weight: 500;
|
|
227
|
+
transition:
|
|
228
|
+
transform 0.2s ease,
|
|
229
|
+
filter 0.2s ease;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.rdz-logout-button:hover {
|
|
233
|
+
transform: scale(1.05);
|
|
234
|
+
filter: brightness(1.1);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.rdz-logout-button:active {
|
|
238
|
+
transform: scale(0.98);
|
|
239
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.rzd-loginui-complete{background:radial-gradient(50% 50% at 50% 50%,#132c50,#0b101b);border-radius:37px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px;padding:40px;max-width:620px;min-height:455px;min-width:500px}.rzd-loginview{box-sizing:border-box;color:#fff}.rzd-loginview .header-login{font-family:DRUNKWIDE,sans-serif;font-size:36px;font-weight:700;color:#fff;text-transform:uppercase;margin:20px 0}.rzd-loginview .logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.rzd-loginview .logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.rzd-loginview .logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.rzd-loginview .card{padding:2em}.rzd-loginview .read-the-docs{color:#888}.rdz-input{font-family:Futura PT,sans-serif!important;line-height:1.5;font-weight:400!important;color:#fff;border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1.2em;font-weight:400;font-family:inherit;background-color:transparent;cursor:pointer;transition:border-color .25s}.rdz-input:hover{border-color:#646cff}.rdz-input:focus,.rdz-input:focus-visible{outline:4px auto -webkit-focus-ring-color}input.rdz-input{box-sizing:border-box;position:relative;width:100%;max-width:480px;height:58px;border:2px solid #009df3;box-shadow:0 0 16.9px 1px #0e79f3;border-radius:11px}input.rdz-input::placeholder{color:#fff;opacity:1;font-family:Futura PT,sans-serif;font-size:1em}.rdz-magic-email-container{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.rdz-magic-email-error{color:red}.rdz-sign-up-text{font-family:Futura PT,sans-serif;font-size:1.2em;font-weight:400}.rdz-icon-button{width:55px;height:55px;border-radius:50%;border:none;background-color:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,filter .2s ease}.rdz-icon-button img{width:100%;height:100%;object-fit:contain}.rdz-icon-button:hover{transform:scale(1.1);filter:brightness(1.1)}.rdz-icon-button:active{transform:scale(.95)}.rdz-icon-button-disabled,.rdz-icon-button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(100%);pointer-events:none}.rdz-icon-button-disabled:hover,.rdz-icon-button:disabled:hover{transform:none;filter:grayscale(100%)}.rdz-magic-email-button{background-size:100% 100%;background-position:center;background-repeat:no-repeat;font-family:DRUNKWIDE,sans-serif;border:none;color:#fff;padding:16px 32px;cursor:pointer;min-height:135px;margin-bottom:-20px;width:100%;max-width:410px;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px;background-color:transparent;transition:transform .2s ease,filter .2s ease}.rdz-magic-email-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-magic-email-button:active{transform:scale(.98)}.rdz-logout-button{margin-left:8px;padding:12px 24px;background-color:#3b82f6;color:#fff;border-radius:6px;border:none;cursor:pointer;font-family:Futura PT,sans-serif;font-size:16px;font-weight:500;transition:transform .2s ease,filter .2s ease}.rdz-logout-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-logout-button:active{transform:scale(.98)}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".rzd-loginui-complete{background:radial-gradient(50% 50% at 50% 50%,#132c50,#0b101b);border-radius:37px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px;padding:40px;max-width:620px;min-height:455px;min-width:500px}.rzd-loginview{box-sizing:border-box;color:#fff;@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}.rzd-loginview .header-login{font-family:DRUNKWIDE,sans-serif;font-size:36px;font-weight:700;color:#fff;text-transform:uppercase;margin:20px 0}.rzd-loginview .logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.rzd-loginview .logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.rzd-loginview .logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@media (prefers-reduced-motion: no-preference){.rzd-loginview a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.rzd-loginview .card{padding:2em}.rzd-loginview .read-the-docs{color:#888}.rdz-input{font-family:Futura PT,sans-serif!important;line-height:1.5;font-weight:400!important;color:#fff;border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1.2em;font-weight:400;font-family:inherit;background-color:transparent;cursor:pointer;transition:border-color .25s}.rdz-input:hover{border-color:#646cff}.rdz-input:focus,.rdz-input:focus-visible{outline:4px auto -webkit-focus-ring-color}input.rdz-input{box-sizing:border-box;position:relative;width:100%;max-width:480px;height:58px;border:2px solid #009df3;box-shadow:0 0 16.9px 1px #0e79f3;border-radius:11px}input.rdz-input::placeholder{color:#fff;opacity:1;font-family:Futura PT,sans-serif;font-size:1em}.rdz-magic-email-container{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.rdz-magic-email-error{color:red}.rdz-sign-up-text{font-family:Futura PT,sans-serif;font-size:1.2em;font-weight:400}.rdz-icon-button{width:55px;height:55px;border-radius:50%;border:none;background-color:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,filter .2s ease}.rdz-icon-button img{width:100%;height:100%;object-fit:contain}.rdz-icon-button:hover{transform:scale(1.1);filter:brightness(1.1)}.rdz-icon-button:active{transform:scale(.95)}.rdz-icon-button-disabled,.rdz-icon-button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(100%);pointer-events:none}.rdz-icon-button-disabled:hover,.rdz-icon-button:disabled:hover{transform:none;filter:grayscale(100%)}.rdz-magic-email-button{background-size:100% 100%;background-position:center;background-repeat:no-repeat;font-family:DRUNKWIDE,sans-serif;border:none;color:#fff;padding:16px 32px;cursor:pointer;min-height:135px;margin-bottom:-20px;width:100%;max-width:410px;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px;background-color:transparent;transition:transform .2s ease,filter .2s ease}.rdz-magic-email-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-magic-email-button:active{transform:scale(.98)}.rdz-logout-button{margin-left:8px;padding:12px 24px;background-color:#3b82f6;color:#fff;border-radius:6px;border:none;cursor:pointer;font-family:Futura PT,sans-serif;font-size:16px;font-weight:500;transition:transform .2s ease,filter .2s ease}.rdz-logout-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-logout-button:active{transform:scale(.98)}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
1
|
import { jsx as D, jsxs as ge, Fragment as dt } from "react/jsx-runtime";
|
|
3
2
|
import { useCallback as me, createContext as Wn, useContext as qn, useState as Ye, useMemo as Bn, useEffect as Vn } from "react";
|
|
4
3
|
const zn = "https://res.cloudinary.com/dz0wa3qbj/image/upload/v1760030923/coinbase_kyknjr.png", Hn = ({
|
|
@@ -67,12 +66,13 @@ function Xn() {
|
|
|
67
66
|
}
|
|
68
67
|
const ss = ({
|
|
69
68
|
className: e,
|
|
70
|
-
|
|
69
|
+
extLoading: t = !1,
|
|
70
|
+
...r
|
|
71
71
|
}) => {
|
|
72
|
-
const { loggedIn:
|
|
73
|
-
return /* @__PURE__ */ D("div", { className: `rzd-loginview rzd-loginui-complete ${e || ""}`, children:
|
|
72
|
+
const { loggedIn: n, isLoading: i } = Qe();
|
|
73
|
+
return /* @__PURE__ */ D("div", { className: `rzd-loginview rzd-loginui-complete ${e || ""}`, children: t || i ? /* @__PURE__ */ D(Xn, {}) : n ? /* @__PURE__ */ D(Kn, {}) : /* @__PURE__ */ ge(dt, { children: [
|
|
74
74
|
/* @__PURE__ */ D("h1", { className: "header-login", children: "login" }),
|
|
75
|
-
/* @__PURE__ */ D(io, { ...
|
|
75
|
+
/* @__PURE__ */ D(io, { ...r })
|
|
76
76
|
] }) });
|
|
77
77
|
};
|
|
78
78
|
function Kn() {
|