| author |  clover caruso <git@paperclover.net> 2026-10-05 10:15:31-07:00 |
| committer | clover caruso <git@paperclover.net> 2026-10-05 15:36:02-07:00 |
| log | 4a5f8261205fa9a03299e68e5fdb8d028b9e7c41 |
| tree | 1feb63bd5433563431bebee99f69a650d4aa92c0 |
| parent | a321e9b853d7d9eb4d05c508ee3c308042855c6e |
| signature | Signed by SSH key SHA256:52mNGHRsVFBDED9IAX5pe+LRWUefqTbxEReunq21QvU |
Center and brand the guest sign-in buttons
Use balanced icon columns to keep labels centered. Style Astheno in olive green with its stone icon and GitHub in white with the Octocat mark.
Assisted-by: gpt-63 files changed, 46 insertions(+), 2 deletions(-)
dashboard
web
pages
sso
dashboard/web/pages/SignIn.css+18-1
| ... | @@ -9,5 +9,22 @@ body { font: 16px "Name Sans", sans-serif; } | ... | @@ -9,5 +9,22 @@ body { font: 16px "Name Sans", sans-serif; } |
| 9 | .pf-v5-c-login__main .checkbox label:has(:focus-visible) { outline: 2px solid var(--primary); } | 9 | .pf-v5-c-login__main .checkbox label:has(:focus-visible) { outline: 2px solid var(--primary); } |
| 10 | .setup-intro { margin-bottom: 1rem; text-align: center; } | 10 | .setup-intro { margin-bottom: 1rem; text-align: center; } |
| 11 | .guest-providers { margin-top: 1.5rem; } | 11 | .guest-providers { margin-top: 1.5rem; } |
| 12 | .guest-providers a { display: flex; align-items: center; justify-content: center; text-decoration: none; } | 12 | .pf-v5-c-login__main .guest-providers a { |
| 13 | display: grid; | ||
| 14 | grid-template-columns: 20px minmax(0, 1fr) 20px; | ||
| 15 | align-items: center; | ||
| 16 | height: 36px; | ||
| 17 | padding: 0 12px; | ||
| 18 | text-align: center; | ||
| 19 | text-decoration: none; | ||
| 20 | line-height: 1.2; | ||
| 21 | transition: background-color .12s; | ||
| 22 | } | ||
| 23 | .guest-providers a[data-provider="astheno"] { background-color: #3c4a29; color: white; } | ||
| 24 | .guest-providers a[data-provider="astheno"]:hover { background-color: #4d5e35; } | ||
| 25 | .guest-providers a[data-provider="github"] { background-color: white; color: #24292f; border: 1px solid #d1d9e0; } | ||
| 26 | .guest-providers a[data-provider="github"]:hover { background-color: #f0f3f6; } | ||
| 27 | .guest-providers a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } | ||
| 28 | .guest-providers svg, .guest-providers img { display: block; } | ||
| 29 | @media (prefers-reduced-motion: reduce) { .guest-providers a { transition: none; } } | ||
| 13 | .guest-providers a + a { margin-top: .75rem; } | 30 | .guest-providers a + a { margin-top: .75rem; } |
dashboard/web/pages/SignIn.tsx+3-1
| ... | @@ -1,5 +1,7 @@ | ... | @@ -1,5 +1,7 @@ |
| 1 | import { createEffect, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"; | 1 | import { createEffect, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"; |
| 2 | import { authReason, authRequest } from "../auth.ts"; | 2 | import { authReason, authRequest } from "../auth.ts"; |
| 3 | import Stone from "lucide-solid/icons/stone"; | ||
| 4 | import githubIcon from "../sso/github.svg"; | ||
| 3 | import theme from "../sso/css/styles.css?inline"; | 5 | import theme from "../sso/css/styles.css?inline"; |
| 4 | import adjustments from "./SignIn.css?inline"; | 6 | import adjustments from "./SignIn.css?inline"; |
| 5 | 7 | ||
| ... | @@ -110,7 +112,7 @@ export function SignIn() { | ... | @@ -110,7 +112,7 @@ export function SignIn() { |
| 110 | <Show when={!setup}><a id="authenticateWebAuthnButton" href="#" class="pf-v5-c-button pf-m-secondary pf-m-block" aria-disabled={busy() || !status()} onClick={(event) => { event.preventDefault(); void passkey(); }}>sign in with passkey</a></Show> | 112 | <Show when={!setup}><a id="authenticateWebAuthnButton" href="#" class="pf-v5-c-button pf-m-secondary pf-m-block" aria-disabled={busy() || !status()} onClick={(event) => { event.preventDefault(); void passkey(); }}>sign in with passkey</a></Show> |
| 111 | <Show when={!setup && status()?.providers?.length}> | 113 | <Show when={!setup && status()?.providers?.length}> |
| 112 | <div id="kc-social-providers" class="guest-providers"> | 114 | <div id="kc-social-providers" class="guest-providers"> |
| 113 | <For each={status()?.providers}>{(provider) => <a rel="external" class="pf-v5-c-button pf-m-primary pf-m-block" href={`/auth/guest/start/${provider.id}?next=${encodeURIComponent(params.get("next") ?? "")}`}>continue with {provider.name}</a>}</For> | 115 | <For each={status()?.providers}>{(provider) => <a rel="external" data-provider={provider.id} class="pf-v5-c-button pf-m-primary pf-m-block" href={`/auth/guest/start/${provider.id}?next=${encodeURIComponent(params.get("next") ?? "")}`}>{provider.id === "astheno" ? <Stone size={18} aria-hidden="true" /> : <img src={githubIcon} width="18" height="18" alt="" />}<span>continue with {provider.name}</span></a>}</For> |
| 114 | </div> | 116 | </div> |
| 115 | </Show> | 117 | </Show> |
| 116 | </Show> | 118 | </Show> |
dashboard/web/sso/github.svg created+25
| ... | @@ -0,0 +1,25 @@ | ||
| 1 | <!-- | ||
| 2 | MIT License | ||
| 3 | |||
| 4 | Copyright (c) 2026 GitHub Inc. | ||
| 5 | |||
| 6 | Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| 7 | of this software and associated documentation files (the "Software"), to deal | ||
| 8 | in the Software without restriction, including without limitation the rights | ||
| 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| 10 | copies of the Software, and to permit persons to whom the Software is | ||
| 11 | furnished to do so, subject to the following conditions: | ||
| 12 | |||
| 13 | The above copyright notice and this permission notice shall be included in all | ||
| 14 | copies or substantial portions of the Software. | ||
| 15 | |||
| 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| 22 | SOFTWARE. | ||
| 23 | |||
| 24 | --> | ||
| 25 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656"/></svg> | ||
| \ No newline at end of file | |||