authorgravatar for git@paperclover.netclover caruso <git@paperclover.net> 2026-10-05 10:15:31-07:00
committergravatar for git@paperclover.netclover caruso <git@paperclover.net> 2026-10-05 15:36:02-07:00
log4a5f8261205fa9a03299e68e5fdb8d028b9e7c41
tree1feb63bd5433563431bebee99f69a650d4aa92c0
parenta321e9b853d7d9eb4d05c508ee3c308042855c6e
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-6

3 files changed, 46 insertions(+), 2 deletions(-)

dashboard/web/pages/SignIn.css+18-1
......@@ -9,5 +9,22 @@ body { font: 16px "Name Sans", sans-serif; }
99.pf-v5-c-login__main .checkbox label:has(:focus-visible) { outline: 2px solid var(--primary); }
1010.setup-intro { margin-bottom: 1rem; text-align: center; }
1111.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; } }
1330.guest-providers a + a { margin-top: .75rem; }
dashboard/web/pages/SignIn.tsx+3-1
......@@ -1,5 +1,7 @@
11import { createEffect, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js";
22import { authReason, authRequest } from "../auth.ts";
3import Stone from "lucide-solid/icons/stone";
4import githubIcon from "../sso/github.svg";
35import theme from "../sso/css/styles.css?inline";
46import adjustments from "./SignIn.css?inline";
57
......@@ -110,7 +112,7 @@ export function SignIn() {
110112 <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>
111113 <Show when={!setup && status()?.providers?.length}>
112114 <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>
114116 </div>
115117 </Show>
116118 </Show>
dashboard/web/sso/github.svg created+25
......@@ -0,0 +1,25 @@
1<!--
2MIT License
3
4Copyright (c) 2026 GitHub Inc.
5
6Permission is hereby granted, free of charge, to any person obtaining a copy
7of this software and associated documentation files (the "Software"), to deal
8in the Software without restriction, including without limitation the rights
9to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10copies of the Software, and to permit persons to whom the Software is
11furnished to do so, subject to the following conditions:
12
13The above copyright notice and this permission notice shall be included in all
14copies or substantial portions of the Software.
15
16THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22SOFTWARE.
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