jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style wiki auth screens with guild design system

Browse source 
Add guild-styled HTML templates for OIDC logout confirmation, post-logout
success, and error pages. Update wiki login heading to brand convention
(candlelight + warm-text). Restyle magic link email from blue to guild
colour tokens.
This commit is contained in:
Jennie Robinson Faber 2026-03-04 17:26:48 +00:00
parent 79d3ba0f78
commit bf57f4b33d
3 changed files with 175 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/pages/auth/wiki-login.vue
View file

@ -31,12 +31,12 @@ async function sendMagicLink() {
</script>
<template>
<div class="min-h-screen flex items-center justify-center bg-gray-50 px-4">
<div class="min-h-screen flex items-center justify-center bg-guild-900 px-4">
<div class="w-full max-w-sm">
<div class="bg-white rounded-lg shadow-md p-8">
<div class="bg-guild-800 rounded-lg shadow-md p-8">
<div class="text-center mb-6">
<h1 class="text-2xl font-bold text-gray-900">Ghost Guild Wiki</h1>
<p class="mt-2 text-sm text-gray-600">
<h1 class="text-display-sm font-bold text-candlelight-400 warm-text">Ghost Guild Wiki</h1>
<p class="mt-2 text-sm text-guild-400">
Sign in with your Ghost Guild account
</p>
</div>
@ -44,7 +44,7 @@ async function sendMagicLink() {
<template v-if="!sent">
<form @submit.prevent="sendMagicLink" class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">
<label for="email" class="block text-sm font-medium text-guild-300 mb-1">
Email address
</label>
<input
@ -53,23 +53,23 @@ async function sendMagicLink() {
type="email"
required
placeholder="you@example.com"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
class="w-full px-3 py-2 border border-guild-600 rounded-md shadow-sm bg-guild-900 text-guild-100 focus:ring-2 focus:ring-candlelight-500 focus:border-candlelight-500 text-sm"
:disabled="loading"
/>
</div>
<p v-if="error" class="text-sm text-red-600">{{ error }}</p>
<p v-if="error" class="text-sm text-ember-400">{{ error }}</p>
<button
type="submit"
:disabled="loading || !email"
class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
class="w-full py-2 px-4 bg-candlelight-600 text-guild-100 text-sm font-medium rounded-md hover:bg-candlelight-500 focus:outline-none focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
>
{{ loading ? "Sending..." : "Send magic link" }}
</button>
</form>
<p class="mt-4 text-xs text-center text-gray-500">
<p class="mt-4 text-xs text-center text-guild-500">
We'll send a sign-in link to your email.
</p>
</template>
@ -77,14 +77,14 @@ async function sendMagicLink() {
<template v-else>
<div class="text-center space-y-3">
<div class="text-4xl">✉️</div>
<h2 class="text-lg font-semibold text-gray-900">Check your email</h2>
<p class="text-sm text-gray-600">
<h2 class="text-lg font-semibold text-guild-100">Check your email</h2>
<p class="text-sm text-guild-400">
We sent a sign-in link to <strong>{{ email }}</strong>.
Click the link in the email to continue.
</p>
<button
@click="sent = false; email = '';"
class="mt-4 text-sm text-blue-600 hover:text-blue-800"
class="mt-4 text-sm text-candlelight-600 hover:text-candlelight-500"
>
Use a different email
</button>