Theming

website/app/app.config.ts

@@ -0,0 +1,13 @@
+export default defineAppConfig({
+    ui: {
+        colors: {
+            primary: 'pink',
+            secondary: 'blue',
+            success: 'green',
+            info: 'cyan',
+            warning: 'yellow',
+            error: 'red',
+            neutral: 'zinc'
+        }
+    }
+})

website/app/app.vue

@@ -29,9 +29,9 @@
                 </NuxtLink>
             </template>
             <template #right>
-                <UButton icon="i-lucide-plus" to="/search">Add</UButton>
+                <UButton icon="i-lucide-plus" to="/search" color="primary">Add</UButton>
-                <UColorModeButton />
+                <UColorModeButton color="secondary" />
-                <UButton icon="i-lucide-settings" variant="ghost" to="/settings" />
+                <UButton icon="i-lucide-settings" variant="ghost" to="/settings" color="secondary" />
             </template>
         </UHeader>
         <UMain>
@@ -41,4 +41,5 @@
         </UMain>
     </UApp>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>

website/app/components/AddLibraryModal.vue

@@ -8,7 +8,7 @@
                 <UFormField label="Directory Path" required>
                     <UInput v-model="path" placeholder="Path for the library" class="w-full" :disabled="busy" />
                 </UFormField>
-                <UButton icon="i-lucide-plus" :loading="busy" @click="onAddClick">Add</UButton>
+                <UButton icon="i-lucide-plus" :loading="busy" @click="onAddClick" class="w-fit">Add</UButton>
             </div>
         </template>
     </UModal>

website/app/components/ChaptersList.vue

@@ -3,19 +3,24 @@
         <UPageCard
             v-for="chapter in chapters"
             :key="chapter.key"
-            :title="chapter.title"
             orientation="horizontal"
             :ui="{ container: 'p-2 sm:p-2' }">
+            <template #title>
+                <p class="text-primary">{{ chapter.title }}</p>
+            </template>
             <template #leading>
+                <p class="mr-1">Downloaded:</p>
                 <Icon v-if="chapter.downloaded" name="i-lucide-circle-x" />
                 <Icon v-else name="i-lucide-circle-check-big" class="stroke-green-500" />
             </template>
             <template #footer>
-                <p v-if="chapter.volume" class="inline mr-1">Vol. {{ chapter.volume }}</p>
+                <p class="text-secondary">
-                <p class="inline">Ch. {{ chapter.chapterNumber }}</p>
+                    <span v-if="chapter.volume" class="mr-1">Vol. {{ chapter.volume }}</span>
+                    <span class="inline">Ch. {{ chapter.chapterNumber }}</span>
+                </p>
             </template>
             <template #description>
-                {{ chapter.fileName }}
+                <p>{{ chapter.fileName }}</p>
             </template>
             <template #default>
                 <div>

website/app/components/MangaCard.vue

@@ -21,7 +21,7 @@
             <div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
                 <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
             </div>
-            <div class="flex flex-col h-[350px] shrink mx-2">
+            <div class="flex flex-col h-[350px] shrink mx-2 mt-4">
                 <p class="font-semibold text-xl">{{ manga.name }}</p>
                 <p class="max-h-30 overflow-y-hidden grow">{{ manga.description }}</p>
             </div>

website/app/components/MangaCover.vue

@@ -9,7 +9,7 @@
                 backdrop-filter: blur(2px) brightness(70%);
                 -webkit-backdrop-filter: blur(2px) brightness(70%);
             ">
-            <p class="p-3 text-xl font-semibold max-h-full overflow-clip">{{ manga?.name }}</p>
+            <p class="p-3 text-xl font-semibold max-h-full overflow-clip text-shadow-lg">{{ manga?.name }}</p>
         </div>
         <LazyNuxtImg
             :src="`${$config.public.openFetch.api.baseURL}v2/Manga/${manga.key}/Cover/Medium`"

website/app/components/MangaDetailPage.vue

@@ -13,9 +13,9 @@
                     <UBadge v-for="author in manga.authors" :key="author.key" variant="outline" color="neutral">{{
                         author.name
                     }}</UBadge>
-                    <UBadge v-for="tag in manga.tags" :key="tag" variant="outline">{{ tag }}</UBadge>
+                    <UBadge v-for="tag in manga.tags" :key="tag" variant="outline" color="primary">{{ tag }}</UBadge>
                     <NuxtLink v-for="link in manga.links" :key="link.key" :to="link.url" external no-prefetch>
-                        <UBadge variant="outline" color="warning">{{ link.provider }}</UBadge>
+                        <UBadge variant="outline" color="secondary">{{ link.provider }}</UBadge>
                     </NuxtLink>
                 </div>
                 <USkeleton v-else class="w-full h-lh" />
@@ -25,14 +25,14 @@
                 <USkeleton v-else class="w-full h-30" />
             </div>
         </template>
-        <UPageBody class="relative pr-4">
+        <UPageBody class="relative pr-12">
             <div class="w-full flex flex-row justify-between">
                 <div>
                     <UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton>
                     <p v-if="title" class="text-3xl">{{ title }}</p>
                 </div>
                 <div v-if="manga" class="flex flex-row gap-2">
-                    <UButton trailing-icon="i-lucide-merge" :to="`${manga.key}/merge/`">Merge</UButton>
+                    <UButton trailing-icon="i-lucide-merge" :to="`${manga.key}/merge/`" color="secondary" >Merge</UButton>
                     <slot name="actions" />
                 </div>
             </div>

website/app/components/MangaconnectorIcon.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="w-6 h-6 inline-block align-middle m-1">
-        <NuxtLink :href="$props.websiteUrl ?? ''">
+        <NuxtLink :href="props.websiteUrl ?? ''">
+            <UTooltip :text="`${props.useForDownload ? 'Downloading' : 'Not downloading'}, click to see website`">
                 <NuxtImg
                     v-if="mangaConnector"
                     :src="mangaConnector?.iconUrl"
@@ -9,6 +10,7 @@
                     props.useForDownload ? 'outline-green-500' : 'outline-red-500',
                 ]" />
                 <p v-else>{{ mangaConnectorName }}</p>
+            </UTooltip>
         </NuxtLink>
     </div>
 </template>

website/app/pages/manga/[mangaId]/merge/[targetId].vue

@@ -14,7 +14,7 @@
             <MangaCard v-if="target" :manga="target" :expanded="true" />
             <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
         </div>
-        <p>This action is irreversible!</p>
+        <p class="text-warning">This action is irreversible!</p>
         <UButton color="warning" class="w-fit">Merge</UButton>
     </UPageBody>
 </template>

website/app/pages/manga/[mangaId]/merge/index.vue

@@ -1,11 +1,11 @@
 <template>
     <UPageBody>
         <UPageHeader class="text-3xl px-4"
-            >Merge <span v-if="manga">{{ manga.name }}</span
+            >Merge <span v-if="manga" class="italic text-secondary">{{ manga.name }}</span
-            ><USkeleton v-else as="span" class="w-60 h-lh" /> into</UPageHeader
+            ><USkeleton v-else as="span" class="w-60 h-lh" /> with</UPageHeader
         >
         <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
-            <NuxtLink v-for="m in mangas" :key="m.key" :to="`/manga/${m.key}`">
+            <NuxtLink v-for="m in mangas" :key="m.key" :to="m.key">
                 <MangaCard :manga="m" />
             </NuxtLink>
         </UPageBody>