versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Allow primary color changes through Tailwind config

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-15 15:42:48 -10:00
parent c1d9c64148
commit d1b9447caa
No known key found for this signature in database
25 changed files with 64 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/LoginInput.vue
View file

@ -3,7 +3,7 @@
<label class="block text-sm font-medium leading-6 text-gray-50">{{ label }}</label>
</div>
<div class="mt-2">
<input v-bind="$attrs" :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6',
<input v-bind="$attrs" :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
isInvalid && '!ring-red-600 ring-2']">
</div>
</template>

2
components/buttons/primary.vue
View file

@ -1,6 +1,6 @@
<template>
<ButtonsBase :loading="loading"
class="[--btn-border:theme(colors.pink.950/90%)] [--btn-bg:theme(colors.pink.600)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.pink.400)] active:[--btn-icon:theme(colors.pink.300)] hover:[--btn-icon:theme(colors.pink.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
class="[--btn-border:theme(colors.primary.950/90%)] [--btn-bg:theme(colors.primary.600)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.primary.400)] active:[--btn-icon:theme(colors.primary.300)] hover:[--btn-icon:theme(colors.primary.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
v-bind="$props">
<slot />
</ButtonsBase>

2
components/composer/button.vue
View file

@ -1,6 +1,6 @@
<template>
<button v-bind="$props"
:class="['rounded text-gray-300 hover:bg-dark-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-pink-500/70 hover:bg-pink-900/70']">
:class="['rounded text-gray-300 hover:bg-dark-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
<slot />
</button>
</template>

6
components/composer/composer.vue
View file

@ -2,7 +2,7 @@
<div v-if="respondingTo" class="mb-4" role="region" aria-label="Responding to">
<OverlayScrollbarsComponent :defer="true" class="max-h-72 overflow-y-auto">
<LazySocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true"
class="!rounded-none !bg-pink-500/10" />
class="!rounded-none !bg-primary-500/10" />
</OverlayScrollbarsComponent>
</div>
<div class="px-6 pb-4 pt-5">
@ -128,7 +128,7 @@ const handlePaste = (event: ClipboardEvent) => {
}
};
watch(Control_Alt, () => {
watch(Control_Alt as ComputedRef<boolean>, () => {
chosenSplash.value = splashes[Math.floor(Math.random() * splashes.length)];
});
@ -190,7 +190,7 @@ onMounted(() => {
});
watchEffect(() => {
if (Control_Enter.value || Command_Enter.value) {
if (Control_Enter?.value || Command_Enter?.value) {
send();
}
});

9
components/composer/emoji-suggestbox.vue
View file

@ -2,7 +2,7 @@
<ComposerSuggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
<div v-for="(emoji, index) in topEmojis" :key="emoji.shortcode" @click="emit('autocomplete', emoji.shortcode)"
:ref="el => { if (el) emojiRefs[index] = el as Element }" :title="emoji.shortcode"
:class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-pink-500': index === selectedEmojiIndex }]">
:class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-primary-500': index === selectedEmojiIndex }]">
<img :src="emoji.url" class="w-full h-full object-contain"
:alt="`Emoji with shortcode ${emoji.shortcode}`" />
</div>
@ -10,7 +10,6 @@
</template>
<script lang="ts" setup>
import type { LysandClient } from "@lysand-org/client";
import { distance } from "fastest-levenshtein";
import type { CustomEmoji } from "~/composables/Identities";
const props = defineProps<{
@ -48,7 +47,7 @@ watchEffect(() => {
.slice(0, 20);
else topEmojis.value = null;
if (ArrowRight.value && topEmojis.value !== null) {
if (ArrowRight?.value && topEmojis.value !== null) {
selectedEmojiIndex.value = (selectedEmojiIndex.value ?? -1) + 1;
if (selectedEmojiIndex.value >= topEmojis.value.length) {
selectedEmojiIndex.value = 0;
@ -59,7 +58,7 @@ watchEffect(() => {
});
}
if (ArrowLeft.value && topEmojis.value !== null) {
if (ArrowLeft?.value && topEmojis.value !== null) {
selectedEmojiIndex.value =
(selectedEmojiIndex.value ?? topEmojis.value.length) - 1;
if (selectedEmojiIndex.value < 0) {
@ -71,7 +70,7 @@ watchEffect(() => {
});
}
if ((Tab.value || Enter.value) && topEmojis.value !== null) {
if ((Tab?.value || Enter?.value) && topEmojis.value !== null) {
const emoji = topEmojis.value[selectedEmojiIndex.value ?? 0];
if (emoji) emit("autocomplete", emoji.shortcode);
}

2
components/composer/file-uploader.vue
View file

@ -22,7 +22,7 @@
{{ formatBytes(data.file.size) }}
<!-- Loader spinner -->
<iconify-icon v-if="data.progress < 1.0" icon="tabler:loader-2" width="none"
class="size-4 animate-spin text-pink-500" />
class="size-4 animate-spin text-primary-500" />
</div>
<button class="absolute top-1 right-1 p-1 bg-dark-800 text-white text-xs rounded size-6" role="button"
tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">

2
components/errors/ErrorBoundary.vue
View file

@ -2,7 +2,7 @@
<slot name="error" v-if="error" v-bind="{ error }">
<div id="error" class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8">
<div class="text-center prose prose-invert">
<p class="text-base font-semibold text-pink-400">404</p>
<p class="text-base font-semibold text-primary-400">404</p>
<h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">{{ error.title }}
</h1>
<p class="mt-6 text-base leading-7 text-gray-400" v-html="error.message"></p>

4
components/inputs/label.vue
View file

@ -11,10 +11,10 @@
<script lang="ts" setup>
import type { LabelHTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ LabelHTMLAttributes { }
interface Props extends /* @vue-ignore */ LabelHTMLAttributes {}
defineOptions({
inheritAttrs: false,
})
});
const props = defineProps<Props>();
</script>

2
components/inputs/text.vue
View file

@ -1,5 +1,5 @@
<template>
<input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6',
<input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
isInvalid && '!ring-red-600 ring-2']">
</template>

2
components/loading.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-if="loading" class="fixed inset-0 bg-black z-[500] flex items-center justify-center">
<!-- Progress bar stuck to top -->
<div class="fixed top-0 left-0 right-0 h-1.5 bg-pink-500" :style="{ width: `${progress}%` }"></div>
<div class="fixed top-0 left-0 right-0 h-1.5 bg-primary-500" :style="{ width: `${progress}%` }"></div>
<div class="flex flex-col items-center justify-center gap-8">
<img src="/logo.webp" class="size-20 animate-pulse" role="presentation" />
</div>

3
components/notifications/Renderer.vue
View file

@ -20,7 +20,8 @@
<iconify-icon v-else-if="notification.type === 'error'" icon="tabler:alert-triangle"
height="none" class="h-6 w-6 text-red-400" aria-hidden="true" />
<iconify-icon v-else-if="notification.type === 'progress'" icon="tabler:loader"
height="none" class="h-6 w-6 text-pink-500 animate-spin" aria-hidden="true" />
height="none" class="h-6 w-6 text-primary-500 animate-spin"
aria-hidden="true" />
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-semibold text-gray-50">{{ notification.title }}</p>

8
components/sidebars/navigation.vue
View file

@ -38,7 +38,7 @@
class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Posts</h3>
<ButtonsBase v-if="identity" @click="compose" title="Open composer (shortcut: n)"
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Compose</span>
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
@ -48,7 +48,7 @@
</kbd>
</ButtonsBase>
<ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2 ring-pink-600 overflow-hidden h-12 w-full duration-200">
class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2 ring-primary-600 overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Update</span>
</ButtonsBase>
@ -82,7 +82,7 @@
<span class="text-xs">Notifications</span>
</NuxtLink>
<button v-if="$pwa?.needRefresh"
class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-primary-600"
@click="$pwa?.updateServiceWorker(true)">
<iconify-icon icon="tabler:refresh" class="text-2xl" />
<span class="text-xs">Update</span>
@ -96,7 +96,7 @@
</button>
</SidebarsAccountPicker>
<button @click="compose" v-if="identity"
class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70">
class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-primary-300/70 via-purple-300/70 to-indigo-400/70">
<iconify-icon icon="tabler:writing" class="text-2xl" />
<span class="text-xs">Compose</span>
</button>

2
components/social-elements/notes/mention.vue
View file

@ -1,6 +1,6 @@
<template>
<a :href="`/@${account.acct}`"
class="shrink break-all rounded bg-pink-700/80 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
class="shrink break-all rounded bg-primary-700/80 text-primary-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-primary-600/30">
<img class="size-[1em] rounded ring-1 ring-white/5 !inline align-middle mb-1 mr-1" :src="account.avatar"
:alt="`${account.acct}'s avatar'`" />
{{ account.display_name }}

6
components/social-elements/notes/note.vue
View file

@ -4,7 +4,7 @@
<!-- Overlay that blocks clicks for disabled notes -->
<div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
</div>
<div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-400">
<div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-primary-400">
<Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6" aria-hidden="true" />
<AvatarsCentered v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
@ -27,9 +27,9 @@
</button>
<button class="group" @click="likeFn" :disabled="!identity">
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!outputtedNote?.favourited"
class="size-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" />
class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
class="size-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
</button>
<button class="group" @click="reblogFn" :disabled="!identity">

4
components/social-elements/users/Account.vue
View file

@ -25,7 +25,7 @@
<div class="mt-2 px-4">
<h2
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
<Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
{{ account?.display_name }}
<iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
@ -81,7 +81,7 @@
<div v-if="!skeleton && parsedFields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
<div v-for="field of parsedFields" :key="field.name" class="flex flex-col gap-1">
<span class="text-pink-500 font-semibold" v-html="field.name"></span>
<span class="text-primary-500 font-semibold" v-html="field.name"></span>
<span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
</div>
</div>

8
components/social-elements/users/Badge.vue
View file

@ -1,9 +1,9 @@
<template>
<Tooltip.Root @update:open="(o) => open = o" :open="open" :open-delay="0">
<Tooltip.Trigger><span
class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-dark-300 text-pink-200 ring-white/5 ring-1">
class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-dark-300 text-primary-200 ring-white/5 ring-1">
<svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
class="size-4 fill-pink-500">
class="size-4 fill-primary-500">
<g>
<path
d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z">
@ -11,7 +11,7 @@
</g>
</svg>
<img v-else-if="img" :src="img" alt="" class="size-4 rounded-sm" />
<iconify-icon v-else-if="icon" :icon="icon" width="none" class="text-pink-200 size-4"
<iconify-icon v-else-if="icon" :icon="icon" width="none" class="text-primary-200 size-4"
aria-hidden="true" />
<span>{{ name }}</span>
</span></Tooltip.Trigger>
@ -24,7 +24,7 @@
<Tooltip.Content v-if="open"
class="rounded px-4 py-2 text-sm bg-dark-400 text-gray-200 ring-1 ring-white/10 shadow-xl">
<svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
class="size-4 fill-pink-500 inline mb-0.5">
class="size-4 fill-primary-500 inline mb-0.5">
<g>
<path
d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z">

2
layouts/app.vue
View file

@ -15,7 +15,7 @@
<!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
<div class="text-center">
<strong
class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
class="bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
{{ instance?.lysand_version ?? instance?.version }}</strong> • <a
href="https://github.com/lysand-org/lysand" target="_blank">Source Code</a>• <a
href="https://github.com/lysand-org/lysand/issues" target="_blank">Report an Issue</a>

2
pages/[username]/[uuid].vue
View file

@ -2,7 +2,7 @@
<div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
<LazySocialElementsNotesNote v-for="note of context?.ancestors" :note="note" />
<div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
<LazySocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
<LazySocialElementsNotesNote class="!rounded-none border-2 border-primary-500" v-if="note" :note="note" />
</div>
<LazySocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
</div>

4
pages/about/apps.vue
View file

@ -11,7 +11,7 @@
<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>
<span class="underline text-pink-700">{{ client.link }}</span>
<span class="underline text-primary-700">{{ client.link }}</span>
</div>
</a>
</li>
@ -28,7 +28,7 @@
<p>
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
target="_blank" class="underline text-primary-700">the issue tracker</a>.
</p>
</div>
</template>

4
pages/oauth/authorize.vue
View file

@ -64,7 +64,7 @@
class="h-10 w-10" />
<div class="flex flex-col justify-between items-start">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span>
<span class="underline text-primary-700">{{ client.link }}</span>
</div>
</a>
</li>
@ -76,7 +76,7 @@
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
target="_blank" class="underline text-primary-700">the issue tracker</a>.
</p>
</div>
</div>

2
pages/oauth/code.vue
View file

@ -16,7 +16,7 @@
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
target="_blank" class="underline text-primary-700">the issue tracker</a>.
</p>
</div>
</div>

8
pages/oauth/consent.vue
View file

@ -9,7 +9,7 @@
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>
<a v-if="website" :href="website" target="_blank" class="underline text-pink-700">{{ website
<a v-if="website" :href="website" target="_blank" class="underline text-primary-700">{{ website
}}</a>
</div>
</div>
@ -20,7 +20,7 @@
<ul class="flex flex-col gap-y-1.5">
<li v-for="text in getScopeText(scopes)" :key="text[1]" class="flex flex-row gap-1">
<svg class="fill-pink-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
<svg class="fill-primary-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 16 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" />
@ -64,7 +64,7 @@
class="h-10 w-10" />
<div class="flex flex-col justify-between items-start">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span>
<span class="underline text-primary-700">{{ client.link }}</span>
</div>
</a>
</li>
@ -76,7 +76,7 @@
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
target="_blank" class="underline text-primary-700">the issue tracker</a>.
</p>
</div>
</div>

2
pages/oauth/reset.vue
View file

@ -54,7 +54,7 @@
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
target="_blank" class="underline text-primary-700">the issue tracker</a>.
</p>
</div>
</div>

6
pages/register/index.vue
View file

@ -50,7 +50,7 @@
<div class="mt-2">
<textarea rows="4" required :is-invalid="errors.length > 0" name="reason" :disabled="isLoading"
placeholder="Brief text (optional)"
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" />
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" />
</div>
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
@ -59,7 +59,7 @@
<VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
<input type="checkbox" :disabled="isLoading" name="tos"
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-pink-700 !ring-0 !outline-none"
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-primary-700 !ring-0 !outline-none"
required />
<span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
class="underline font-bold" target="_blank" :href="'#'">available here</a></span>
@ -69,7 +69,7 @@
</VeeField>
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
"Register" }}</ButtonsPrimary>
"Register" }}</ButtonsPrimary>
</VeeForm>
</div>
<div v-else>

30
tailwind.config.ts
View file

@ -1,25 +1,29 @@
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";
import type { Config } from "tailwindcss";
import colors from "tailwindcss/colors";
const dark = {
50: "#4a4a4a",
100: "#3c3c3c",
200: "#323232",
300: "#2d2d2d",
400: "#222222",
500: "#1f1f1f",
600: "#1c1c1e",
700: "#1b1b1b",
800: "#181818",
900: "#0f0f0f",
950: "#080808",
};
// Default are on https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration
export default (<Partial<Config>>{
theme: {
extend: {
colors: {
dark: {
50: "#4a4a4a",
100: "#3c3c3c",
200: "#323232",
300: "#2d2d2d",
400: "#222222",
500: "#1f1f1f",
600: "#1c1c1e",
700: "#1b1b1b",
800: "#181818",
900: "#0f0f0f",
950: "#080808",
},
dark,
primary: colors.pink,
},
animation: {
like: "like 1s ease-in-out",