diff --git a/examples/react/w3console/index.html b/examples/react/w3console/index.html index 1a2c9a8c..4cab063e 100644 --- a/examples/react/w3console/index.html +++ b/examples/react/w3console/index.html @@ -7,7 +7,7 @@ w3console -
+
diff --git a/examples/react/w3console/public/w3.svg b/examples/react/w3console/public/w3.svg new file mode 100644 index 00000000..977174e1 --- /dev/null +++ b/examples/react/w3console/public/w3.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/examples/react/w3console/src/app.tsx b/examples/react/w3console/src/app.tsx index 1b29e367..e356b08e 100644 --- a/examples/react/w3console/src/app.tsx +++ b/examples/react/w3console/src/app.tsx @@ -135,7 +135,7 @@ export function Logo (): JSX.Element { export function App (): JSX.Element { return ( - +
-
+
diff --git a/examples/react/w3console/src/index.css b/examples/react/w3console/src/index.css index a90f0749..c6795eef 100644 --- a/examples/react/w3console/src/index.css +++ b/examples/react/w3console/src/index.css @@ -2,3 +2,24 @@ @tailwind components; @tailwind utilities; + +.w3ui-authenticator { + background-image: url("/w3.svg"); + background-repeat: no-repeat; + background-position: center 95%; + @apply bg-gray-900; +} + +.w3ui-authenticator-form { + background: linear-gradient(104.3deg,#3064e0 -8.21%,#00d8ff 88.68%); + @apply shadow-md px-10 pt-14 pb-8 rounded-xl; +} + +.w3ui-authenticator-form .email-field label { + @apply text-white font-semibold uppercase text-xs tracking-wider m-1 font-mono opacity-80; +} + +.w3ui-authenticator-form .email-field input { + width: 22rem; + @apply bg-white rounded-md shadow-md +} \ No newline at end of file diff --git a/packages/react/src/Authenticator.tsx b/packages/react/src/Authenticator.tsx index ceef34c7..793a9784 100644 --- a/packages/react/src/Authenticator.tsx +++ b/packages/react/src/Authenticator.tsx @@ -5,13 +5,15 @@ export function AuthenticationForm (): JSX.Element { const [{ submitted }] = useAuthenticator() return ( - -
- - -
- - +
+ +
+ + +
+ + +
) } @@ -19,12 +21,14 @@ export function AuthenticationSubmitted (): JSX.Element { const [{ email }] = useAuthenticator() return ( -
-

Verify your email address!

-

Click the link in the email we sent to {email} to sign in.

- - Cancel - +
+
+

Verify your email address!

+

Click the link in the email we sent to {email} to sign in.

+ + Cancel + +
) } @@ -34,11 +38,11 @@ export function AuthenticationEnsurer ({ children }: { children: JSX.Element | J const registered = Boolean(spaces.some(s => s.registered())) if (registered) { return <>{children} - } else if (submitted) { + } + if (submitted) { return - } else { - return } + return } interface AuthenticatorProps { @@ -48,7 +52,7 @@ interface AuthenticatorProps { export function Authenticator ({ children, className = '' }: AuthenticatorProps): JSX.Element { return ( - + {children}