diff --git a/dashboard/web/pages/SignIn.css b/dashboard/web/pages/SignIn.css index dae08c77e2b8e98f2099a37003e827feac483303..842f49ab6883c7c9223c0847f94199ed5126fe25 100644 --- a/dashboard/web/pages/SignIn.css +++ b/dashboard/web/pages/SignIn.css @@ -9,5 +9,22 @@ body { font: 16px "Name Sans", sans-serif; } .pf-v5-c-login__main .checkbox label:has(:focus-visible) { outline: 2px solid var(--primary); } .setup-intro { margin-bottom: 1rem; text-align: center; } .guest-providers { margin-top: 1.5rem; } -.guest-providers a { display: flex; align-items: center; justify-content: center; text-decoration: none; } +.pf-v5-c-login__main .guest-providers a { + display: grid; + grid-template-columns: 20px minmax(0, 1fr) 20px; + align-items: center; + height: 36px; + padding: 0 12px; + text-align: center; + text-decoration: none; + line-height: 1.2; + transition: background-color .12s; +} +.guest-providers a[data-provider="astheno"] { background-color: #3c4a29; color: white; } +.guest-providers a[data-provider="astheno"]:hover { background-color: #4d5e35; } +.guest-providers a[data-provider="github"] { background-color: white; color: #24292f; border: 1px solid #d1d9e0; } +.guest-providers a[data-provider="github"]:hover { background-color: #f0f3f6; } +.guest-providers a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } +.guest-providers svg, .guest-providers img { display: block; } +@media (prefers-reduced-motion: reduce) { .guest-providers a { transition: none; } } .guest-providers a + a { margin-top: .75rem; } diff --git a/dashboard/web/pages/SignIn.tsx b/dashboard/web/pages/SignIn.tsx index b9d150109da962c3169cb186cd1afd0dd4d71932..af65408853e5ae51397da4915000cbf685ed9726 100644 --- a/dashboard/web/pages/SignIn.tsx +++ b/dashboard/web/pages/SignIn.tsx @@ -1,5 +1,7 @@ import { createEffect, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"; import { authReason, authRequest } from "../auth.ts"; +import Stone from "lucide-solid/icons/stone"; +import githubIcon from "../sso/github.svg"; import theme from "../sso/css/styles.css?inline"; import adjustments from "./SignIn.css?inline"; @@ -110,7 +112,7 @@ export function SignIn() { { event.preventDefault(); void passkey(); }}>sign in with passkey
- {(provider) => continue with {provider.name}} + {(provider) => {provider.id === "astheno" ? }
diff --git a/dashboard/web/sso/github.svg b/dashboard/web/sso/github.svg new file mode 100644 index 0000000000000000000000000000000000000000..7783c79ba36340f954484f87191864b96d3aaf35 --- /dev/null +++ b/dashboard/web/sso/github.svg @@ -0,0 +1,25 @@ + + \ No newline at end of file