versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ♻️ Rename dark to background, refactor themes

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-07-22 01:05:51 +02:00
parent 4f2c1901d1
commit 842033c950
No known key found for this signature in database
54 changed files with 244 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

2
pages/about/apps.vue
View file

@ -10,7 +10,7 @@
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
<img crossorigin="anonymous" :src="client.icon" class="h-10 w-10" :alt="`${client.name}'s logo'`" />
<div class="flex flex-col justify-between items-start">
<h2 class="text-gray-100 font-semibold">{{ client.name }}</h2>
<h2 class="text-text-100 font-semibold">{{ client.name }}</h2>
<span class="underline text-primary-700">{{ client.link }}</span>
</div>
</a>

6
pages/notifications.vue
View file

@ -2,9 +2,9 @@
<div class="mx-auto max-w-2xl w-full">
<div class="shrink-0 p-10 h-dvh" v-if="!identity">
<button type="button"
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
class="relative block h-full w-full rounded-lg border-2 border-dashed border-background-300 p-12 text-center">
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-text-400" />
<span class="mt-3 block text-sm font-semibold text-text-200 max-w-56 mx-auto">Notifications
will
appear here
when you

20
pages/oauth/authorize.vue
View file

@ -5,7 +5,7 @@
<div v-if="validUrlParameters" class="mx-auto w-full max-w-md">
<VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema"
:action="redirectUrl.toString()">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
<h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Login to your account</h1>
<div v-if="params.error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
<h2 class="font-bold text-lg">An error occured</h2>
@ -36,8 +36,8 @@
<div v-if="ssoConfig && ssoConfig.providers.length > 0" class="w-full space-y-3">
<div
class="flex items-center text-center w-full after:border-b after:border-dark-200 after:flex-1 after:ml-2 before:border-b before:border-dark-200 before:flex-1 before:mr-2">
<h2 class="text-sm text-gray-200 font-semibold">Or sign in with</h2>
class="flex items-center text-center w-full after:border-b after:border-background-200 after:flex-1 after:ml-2 before:border-b before:border-background-200 before:flex-1 before:mr-2">
<h2 class="text-sm text-text-200 font-semibold">Or sign in with</h2>
</div>
<div class="grid md:grid-cols-2 md:[&:has(>:last-child:nth-child(1))]:grid-cols-1 gap-4 w-full">
<a v-for="provider of ssoConfig.providers" :key="provider.id"
@ -53,7 +53,7 @@
</div>
</div>
<p class="text-xs text-gray-300">
<p class="text-xs text-text-300">
You are signing in to <strong>{{ hostname }}</strong>. If you did not intend to sign in
here, please close this page.
</p>
@ -62,14 +62,14 @@
</VeeForm>
</div>
<div v-else class="mx-auto max-w-md">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Invalid access
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
<p class="mt-6 text-lg leading-8 text-text-300">This page should be accessed
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
API</strong> client to access this page.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
<p class="mt-6 text-lg leading-8 text-text-300">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<a :href="client.link" target="_blank"
@ -77,18 +77,18 @@
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
class="h-10 w-10" />
<div class="flex flex-col justify-between items-start">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<h2 class="font-bold text-text-100">{{ client.name }}</h2>
<span class="underline text-primary-700">{{ client.link }}</span>
</div>
</a>
</li>
</ul>
<p class="mt-6 text-lg leading-8 text-gray-300">
<p class="mt-6 text-lg leading-8 text-text-300">
Many other clients exist, but <strong class="font-bold">they have not been tested for
compatibility</strong>. Bug reports are nevertheless welcome.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
<p class="mt-6 text-lg leading-8 text-text-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-primary-700">the issue tracker</a>.
</p>

10
pages/oauth/code.vue
View file

@ -2,19 +2,19 @@
<div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
<div class="mx-auto max-w-md mt-10">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Here's your code
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
<p class="mt-6 text-lg leading-8 text-text-300">You have signed in successfully. Your code is
</p>
<div class="prose prose-invert select-all mt-6">
<pre
class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
class="overflow-x-hidden whitespace-normal break-all bg-background-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
</div>
<p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in
<p class="mt-6 text-lg leading-8 text-text-300">Paste this code into the application you are signing in
to.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
<p class="mt-6 text-lg leading-8 text-text-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-primary-700">the issue tracker</a>.
</p>

24
pages/oauth/consent.vue
View file

@ -4,17 +4,17 @@
<form class="space-y-6" method="POST" :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
<input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
<div class="flex flex-col items-center gap-y-5">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to
<h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Allow this application to
access your
account?</h1>
<div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
<h2 class="font-bold text-gray-200">{{ application }}</h2>
<h2 class="font-bold text-text-200">{{ application }}</h2>
<a v-if="website" :href="website" target="_blank" class="underline text-primary-700">{{ website
}}</a>
</div>
</div>
<h2 class="text-gray-50 tracking-tight text-xl font-semibold">
<h2 class="text-text-50 tracking-tight text-xl font-semibold">
This application will be able to:
</h2>
@ -25,16 +25,16 @@
<path
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" />
</svg>
<h2 class="text-sm text-gray-200">
<h2 class="text-sm text-text-200">
<strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
</h2>
</li>
</ul>
<div class="flex-col flex gap-y-1">
<p class="text-sm text-gray-200">You are signing in to <b>{{ application }}</b> with your
<p class="text-sm text-text-200">You are signing in to <b>{{ application }}</b> with your
account.</p>
<p class="text-sm text-gray-200">This allows <b>{{ application }}</b> to perform the above
<p class="text-sm text-text-200">This allows <b>{{ application }}</b> to perform the above
account
actions.</p>
</div>
@ -48,14 +48,14 @@
</form>
</div>
<div v-else class="mx-auto max-w-md mt-10">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Invalid access
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
<p class="mt-6 text-lg leading-8 text-text-300">This page should be accessed
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
API</strong> client to access this page.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
<p class="mt-6 text-lg leading-8 text-text-300">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<a :href="client.link" target="_blank"
@ -63,18 +63,18 @@
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
class="h-10 w-10" />
<div class="flex flex-col justify-between items-start">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<h2 class="font-bold text-text-100">{{ client.name }}</h2>
<span class="underline text-primary-700">{{ client.link }}</span>
</div>
</a>
</li>
</ul>
<p class="mt-6 text-lg leading-8 text-gray-300">
<p class="mt-6 text-lg leading-8 text-text-300">
Many other clients exist, but <strong class="font-bold">they have not been tested for
compatibility</strong>. Bug reports are nevertheless welcome.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
<p class="mt-6 text-lg leading-8 text-text-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-primary-700">the issue tracker</a>.
</p>

12
pages/oauth/reset.vue
View file

@ -6,7 +6,7 @@
<VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
<input type="hidden" name="token" :value="params.token" />
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
<h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Reset your password</h1>
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
<h2 class="font-bold text-lg">An error occured</h2>
@ -43,22 +43,22 @@
</VeeForm>
</div>
<div v-else-if="params.success">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl text-center">Password reset
successful!
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300 text-center">
<p class="mt-6 text-lg leading-8 text-text-300 text-center">
You can now login to your account with your new password.
</p>
</div>
<div v-else class="mx-auto max-w-md">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Invalid access
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
<p class="mt-6 text-lg leading-8 text-text-300">This page should be accessed
through a valid password reset request. Please ask your admin to reset your password.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
<p class="mt-6 text-lg leading-8 text-text-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-primary-700">the issue tracker</a>.
</p>

12
pages/register/index.vue
View file

@ -9,7 +9,7 @@
<span class="text-sm">{{ errors.error }}</span>
</div>
<VeeForm class="flex flex-col gap-y-6" @submit="s => register((s as any))" :validation-schema="schema">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Account details</h1>
<h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Account details</h1>
<VeeField name="username" v-slot="{ errorMessage, field }" validate-on-change>
<Field>
@ -60,7 +60,7 @@
<Field>
<div class="flex flex-row gap-x-2 items-center">
<CheckboxInput :checked="true" id="tos" required :disabled="true" v-bind="field" />
<Label for="tos" class="!text-gray-200">
<Label for="tos" class="!text-text-200">
I agree to the Terms of Service
</Label>
</div>
@ -73,12 +73,12 @@
<Button theme="secondary" class="w-full">View Terms of Service</Button>
</Collapsible.Trigger>
<Collapsible.Content
class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-dark-700 rounded mt-3">
class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-background-700 rounded mt-3">
<div v-html="tos?.content"></div>
</Collapsible.Content>
</Collapsible.Root>
<p class="text-xs font-semibold text-gray-300">
<p class="text-xs font-semibold text-text-300">
Passwords are stored securely and hashed. We do not store your password in plain text.
Administrators
cannot see your password.
@ -90,10 +90,10 @@
</VeeForm>
</div>
<div v-else>
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl text-center">Registrations are
disabled
</h1>
<p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
<p class="mt-6 text-lg leading-8 text-text-200 text-center">Ask this instance's admin to enable them in
config!
</p>
</div>

4
pages/register/success.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
<div>
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registration was a
<h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl text-center">Registration was a
success!
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300 text-center"> You can now login to your account in any
<p class="mt-6 text-lg leading-8 text-text-300 text-center"> You can now login to your account in any
Mastodon
client </p>
</div>