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: ✨ 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
Download patch file Download diff file Expand all files Collapse all files

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)">