Improve performance

Fix gh actions error
Minor improvements to navbar
2025-12-20 04:33:54 +01:00 · 2025-11-06 12:07:44 +03:30 · 2025-11-06 11:36:41 +03:30 · 2025-11-06 11:33:32 +03:30 · 2025-11-06 11:31:00 +03:30 · 2025-11-06 11:21:26 +03:30
18 changed files with 113 additions and 102 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,10 +1,11 @@
 name: Deploy to GitHub Pages

-# on:
+on:
  # push:
  #   branches: [main]
  # pull_request:
  #   branches: [main]
+  workflow_dispatch:

 jobs:
  build-and-deploy:
--- a/src/components/AddMoreCard.vue
+++ b/src/components/AddMoreCard.vue
@@ -3,12 +3,12 @@
 <template>
  <router-link
    to="/add"
-    class="card relative w-full h-full flex items-center justify-center aspect-2/3 bg-white/40 backdrop-blur-md rounded-lg transition-all duration-300"
+    class="card relative w-full h-full flex items-center justify-center aspect-2/3 bg-base-300/40 backdrop-blur-md rounded-lg transition-all duration-300 hover:bg-base-200/50"
    v-motion-fade-visible-once
  >
    <!-- Plus icon -->
    <div
-      class="flex flex-col items-center justify-center text-gray-400 hover:text-gray-600 transition"
+      class="flex flex-col items-center justify-center text-base-content/50 hover:text-base-content/70 transition"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
--- a/src/components/ImageWithFallback.vue
+++ b/src/components/ImageWithFallback.vue
@@ -23,7 +23,7 @@ const imageSource = computed(() => {
 </script>

 <template>
-  <figure class="overflow-hidden flex items-center justify-center bg-gray-50 aspect-2/3">
+  <figure class="overflow-hidden flex items-center justify-center bg-base-300 aspect-2/3">
    <span v-if="!loaded" class="loading loading-ring loading-lg text-primary"></span>

    <div v-else-if="imageLoadFailed" class="flex items-center justify-center">
@@ -33,7 +33,7 @@ const imageSource = computed(() => {
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
-        class="w-12 h-12 text-gray-300"
+        class="w-12 h-12 text-base-content/40"
      >
        <path
          stroke-linecap="round"
--- a/src/components/MediaCard.vue
+++ b/src/components/MediaCard.vue
@@ -21,23 +21,23 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===

 <template>
  <div
-    class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-xs hover:shadow-xl transition-all duration-300"
+    class="card relative w-full h-full overflow-hidden bg-base-200/70 backdrop-blur-md border border-base-content/20 shadow-xs hover:shadow-xl transition-all duration-300"
    v-motion-fade-visible-once
  >
    <div class="relative w-full">
      <router-link
        :to="{ name: 'details', params: { type: props.media.MediaType, id: props.media.Id } }"
-        class="block w-full aspect-2/3 overflow-hidden bg-gray-100 relative"
+        class="block w-full aspect-2/3 overflow-hidden bg-base-300 relative"
      >
        <ImageWithFallback
          :src="props.media.PosterPath"
          :alt="props.media.Title"
          size="w300"
-          class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-105"
+          class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-101"
        />
        <!-- Glassy gradient shadow overlay -->
        <div
-          class="absolute bottom-0 left-0 right-0 h-16 bg-linear-to-t from-white/40 via-white/20 to-transparent backdrop-blur-[0.5px] pointer-events-none"
+          class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-base-100/40 via-base-100/20 to-transparent backdrop-blur-[0.5px] pointer-events-none"
        ></div>
      </router-link>

@@ -54,12 +54,12 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
        class="block"
      >
        <h2
-          class="card-title text-base font-semibold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent break-words"
+          class="card-title text-base font-semibold bg-gradient-to-r from-base-content to-base-content/75 bg-clip-text text-transparent break-words"
        >
          {{ props.media.Title }}
        </h2>
        <time
-          class="text-sm text-gray-400"
+          class="text-sm text-base-content/60"
          :datetime="
            props.media.ReleaseDate === '' && props.media.FirstAirDate === ''
              ? 'unknown'
@@ -93,7 +93,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
        <!-- Type badge -->
        <span
          class="badge badge-outline text-xs font-medium px-2 py-1"
-          :class="props.media.Adult ? 'badge-error' : ''"
+          :class="props.media.Adult ? 'badge-error' : 'text-base-content'"
        >
          {{ props.media.MediaType === 'movie' ? 'Movie' : 'Show' }}
        </span>
@@ -103,7 +103,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
          <button
            v-motion-fade-visible-once
            v-if="!alreadyAdded"
-            class="btn btn-circle btn-md px-1.5 bg-linear-to-r from-gray-100 to-gray-200 border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
+            class="btn btn-circle btn-md px-1.5 bg-gradient-to-r from-base-300 to-base-200 border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 transition"
            @click="emit('add-media', props.media)"
          >
            <svg
@@ -124,7 +124,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
          <button
            v-motion-fade-visible-once
            v-else
-            class="btn btn-circle btn-md px-1.5 bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200 hover:text-red-700 transition"
+            class="btn btn-circle btn-md px-1.5 bg-gradient-to-r from-error/10 to-error/20 border border-error/30 text-error hover:from-error/20 hover:to-error/30 hover:text-error-content transition"
            @click="emit('remove-media', props.media.Id)"
          >
            <svg
--- a/src/components/MediaFilters.vue
+++ b/src/components/MediaFilters.vue
@@ -50,36 +50,38 @@ watch(
 </script>

 <template>
-  <form class="flex gap-2 justify-center mb-8">
-    <label>
+  <form class="flex gap-2 justify-center mb-8 flex-wrap">
+    <label class="btn btn-outline" :class="local.includeAdult ? 'btn-error' : 'btn-ghost'">
      <input
-        class="btn"
-        :class="local.includeAdult ? 'btn-error' : ''"
        type="checkbox"
        :checked="local.includeAdult"
        @change="toggleIncludeAdult"
        aria-label="Adult"
+        class="sr-only"
      />
+      Adult
    </label>

-    <label>
+    <label class="btn btn-outline" :class="local.onlyMovies ? 'btn-primary' : 'btn-ghost'">
      <input
-        class="btn"
        type="checkbox"
        :checked="local.onlyMovies"
        @change="toggleOnlyMovies"
        aria-label="Movies"
+        class="sr-only"
      />
+      Movies
    </label>

-    <label>
+    <label class="btn btn-outline" :class="local.onlySeries ? 'btn-primary' : 'btn-ghost'">
      <input
-        class="btn"
        type="checkbox"
        :checked="local.onlySeries"
        @change="toggleOnlySeries"
        aria-label="TV Series"
+        class="sr-only"
      />
+      TV Series
    </label>
  </form>
 </template>
--- a/src/components/MediaList.vue
+++ b/src/components/MediaList.vue
@@ -31,10 +31,13 @@ window.addEventListener('scroll', () => {
  <div>
    <p
      v-if="props.medias.length === 0"
-      class="text-center text-gray-500 py-12 bg-gray-50/60 rounded-lg border border-gray-200"
+      class="text-center text-base-content/60 py-12 bg-base-300/60 rounded-lg border border-base-content/20"
    >
      No media found.<br />
-      <RouterLink to="/add" class="text-gray-700 font-semibold hover:text-gray-900 transition">
+      <RouterLink
+        to="/add"
+        class="text-base-content/70 font-semibold hover:text-base-content transition"
+      >
        Add media
      </RouterLink>
    </p>
@@ -62,7 +65,7 @@ window.addEventListener('scroll', () => {

    <div v-if="props.isSearch && props.medias.length > 0" class="flex justify-center mt-8">
      <button
-        class="btn px-6 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 disabled:opacity-50"
+        class="btn px-6 bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 disabled:opacity-50"
        @click="emit('loadMore')"
        :disabled="props.loadingMore"
      >
--- a/src/components/MediaTypeBadge.vue
+++ b/src/components/MediaTypeBadge.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<Props>(), {

 <template>
  <span
-    :class="`flex items-center w-max px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 ${type ? 'badge-' + type : ''} text-gray-700 border border-gray-300`"
+    :class="`flex items-center w-max px-3 py-1 rounded-md text-sm bg-gradient-to-r from-base-300 to-base-200 ${type ? 'badge-' + type : ''} text-base-content border border-base-content/30`"
  >
    {{ props.text }}
  </span>
--- a/src/components/MovieDetails.vue
+++ b/src/components/MovieDetails.vue
@@ -21,7 +21,7 @@ const alreadyAdded = computed(() =>
 <template>
  <!-- Hero -->
  <div
-    class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-white/70 border border-gray-200/60 rounded-xl p-8 transition"
+    class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-base-200/70 border border-base-content/20 rounded-xl p-8 transition"
    v-motion-fade-visible-once
  >
    <!-- Poster -->
@@ -34,18 +34,18 @@ const alreadyAdded = computed(() =>

    <!-- Text -->
    <div class="flex-1">
-      <h1 class="text-4xl font-bold text-gray-800 mb-2">
+      <h1 class="text-4xl font-bold text-base-content/95 mb-2">
        {{ props.movie!.Title }}
-        <span class="text-gray-400 text-lg font-normal"
+        <span class="text-base-content/70 text-lg font-normal"
          >({{ props.movie!.ReleaseDate?.slice(0, 4) }})</span
        >
      </h1>

-      <p v-if="props.movie!.Tagline" class="italic text-gray-500 mb-2">
+      <p v-if="props.movie!.Tagline" class="italic text-base-content/65 mb-2">
        {{ props.movie!.Tagline }}
      </p>

-      <p class="text-accent leading-relaxed mb-6">
+      <p class="text-base-content leading-relaxed mb-6">
        {{ props.movie!.Overview }}
      </p>

@@ -54,19 +54,21 @@ const alreadyAdded = computed(() =>
        <MediaTypeBadge v-for="g in props.movie!.Genres" :key="g.id" :text="g.name" />
      </div>

-      <div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
+      <div class="card border border-accent bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
        <div class="card-body">
-          <p class="font-semibold text-gray-900">
-            Runtime: <span class="text-gray-600">{{ props.movie!.Runtime }} minutes</span>
+          <p class="font-semibold text-base-content/90">
+            Runtime: <span class="text-base-content/70">{{ props.movie!.Runtime }} minutes</span>
          </p>
-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
            Language:
-            <span class="text-gray-600">{{ props.movie!.SpokenLanguages[0]?.englishName }}</span>
+            <span class="text-base-content/70">{{
+              props.movie!.SpokenLanguages[0]?.englishName
+            }}</span>
          </p>
-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
            Release Date:
            <time
-              class="text-sm font-semibold text-gray-600"
+              class="text-sm font-semibold text-base-content/70"
              :datetime="
                props.movie!.ReleaseDate === ''
                  ? 'unknown'
@@ -90,9 +92,9 @@ const alreadyAdded = computed(() =>
              :href="`https://www.themoviedb.org/movie/${props.movie?.Id}`"
              target="_blank"
              rel="noopener noreferrer"
-              class="btn btn-square btn-md bg-accent border-none"
+              class="btn btn-square btn-md bg-base-300 border border-base-content/30"
            >
-              <img src="/logos/tmdb.svg" alt="TMDB" class="m-0.5" />
+              <img src="/logos/tmdb.svg" alt="TMDB" class="h-6 w-6" />
            </a>

            <!-- IMDB button -->
@@ -101,9 +103,9 @@ const alreadyAdded = computed(() =>
              :href="`https://www.imdb.com/title/${props.movie.ImdbId}`"
              target="_blank"
              rel="noopener noreferrer"
-              class="btn btn-square btn-md bg-[#f5c518] border-none"
+              class="btn btn-square btn-md bg-[#f5c518] border border-[#f5c518]/30"
            >
-              <img src="/logos/imdb.svg" alt="IMDB" class="m-0.5" />
+              <img src="/logos/imdb.svg" alt="IMDB" class="h-6 w-6" />
            </a>
          </div>
        </div>
@@ -114,7 +116,7 @@ const alreadyAdded = computed(() =>
        <template v-if="props.movie && props.media">
          <button
            v-if="!alreadyAdded"
-            class="btn btn-square bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
+            class="btn btn-square bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100"
            @click="store.addMedia(props.media)"
          >
            <svg
@@ -134,7 +136,7 @@ const alreadyAdded = computed(() =>
          </button>
          <button
            v-else
-            class="btn btn-square bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
+            class="btn btn-square bg-gradient-to-r from-error/10 to-error/20 border border-error/30 text-error hover:from-error/20 hover:to-error/30"
            @click="store.removeMedia(props.media.Id)"
          >
            <svg
@@ -164,7 +166,7 @@ const alreadyAdded = computed(() =>
          }"
        >
          <button
-            class="btn relative flex items-center gap-2 px-6 bg-linear-to-r from-indigo-500 to-violet-500 text-white border-0 shadow-md hover:opacity-90 transition"
+            class="btn relative flex items-center gap-2 px-6 bg-gradient-to-r from-primary to-secondary text-primary-content border-0 shadow-md hover:opacity-90 transition"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
  <nav
-    class="navbar sticky top-0 z-30 bg-white/70 backdrop-blur-md border-b border-gray-200/60 shadow-sm"
+    class="navbar sticky top-0 z-30 bg-base-100/70 backdrop-blur-md border-b border-base-content/20 shadow-sm"
  >
    <!-- Left: Logo + Mobile Menu -->
    <div class="navbar-start">
@@ -9,7 +9,7 @@
        <label tabindex="0" class="btn btn-ghost p-2" aria-label="Menu">
          <svg
            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-gray-700"
+            class="h-6 w-6 text-base-content/70"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
@@ -24,7 +24,7 @@
        </label>
        <ul
          tabindex="0"
-          class="menu menu-sm dropdown-content mt-3 w-52 rounded-md bg-white/90 backdrop-blur-md shadow-lg border border-gray-200/60"
+          class="menu menu-sm dropdown-content mt-3 w-52 rounded-md bg-base-200/90 backdrop-blur-md shadow-lg border border-base-content/20"
        >
          <li><RouterLink to="/" class="nav-link">Home</RouterLink></li>
          <li><RouterLink to="/list" class="nav-link">Library</RouterLink></li>
@@ -35,7 +35,7 @@
      <!-- Logo -->
      <RouterLink
        to="/"
-        class="text-2xl font-extrabold tracking-tight bg-linear-to-r from-gray-700 via-indigo-500 to-cyan-400 bg-clip-text text-transparent"
+        class="text-2xl font-extrabold tracking-tight bg-gradient-to-r from-base-content/70 via-primary to-base-content/70 bg-clip-text text-transparent"
      >
        TBW
      </RouterLink>
@@ -54,7 +54,7 @@
    <div class="navbar-end">
      <RouterLink
        to="/list"
-        class="btn px-5 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
+        class="btn px-5 bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 transition"
      >
        Go to Library
      </RouterLink>
@@ -63,11 +63,11 @@
 </template>

 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .nav-link {
-  @apply text-gray-700 font-medium transition-colors hover:text-gray-900;
+  @apply text-base-content font-medium transition-colors hover:text-base-content;
 }
 .router-link-active.nav-link {
-  @apply text-indigo-600 font-semibold;
+  @apply text-primary font-semibold;
 }
 </style>
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -15,10 +15,10 @@ function onSubmit() {
 <template>
  <form @submit.prevent="onSubmit" class="flex justify-center mb-3">
    <div
-      class="flex items-center w-full max-w-md bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-sm hover:shadow-md transition rounded-lg overflow-hidden"
+      class="flex items-center w-full max-w-md bg-base-200/70 backdrop-blur-md border border-base-content/20 shadow-sm hover:shadow-md transition rounded-lg overflow-hidden"
    >
      <!-- Icon -->
-      <span class="pl-3 text-gray-400">
+      <span class="pl-3 text-base-content/50">
        <svg
          class="h-5 w-5"
          xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +41,7 @@ function onSubmit() {
        required
        :value="props.modelValue"
        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-        class="flex-1 px-3 py-2 bg-transparent outline-none text-gray-700 placeholder-gray-400"
+        class="flex-1 px-3 py-2 bg-transparent outline-none text-base-content/70 placeholder-base-content/50"
      />

      <!-- Optional button -->
--- a/src/components/TVSeriesDetails.vue
+++ b/src/components/TVSeriesDetails.vue
@@ -21,7 +21,7 @@ const alreadyAdded = computed(() =>
 <template>
  <!-- Hero -->
  <div
-    class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-white/70 border border-gray-200/60 rounded-xl p-8 transition"
+    class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-base-200/70 border border-base-content/20 rounded-xl p-8 transition"
    v-motion-fade-visible-once
  >
    <!-- Poster -->
@@ -34,18 +34,18 @@ const alreadyAdded = computed(() =>

    <!-- Text -->
    <div class="flex-1">
-      <h1 class="text-4xl font-bold text-gray-800 mb-2">
+      <h1 class="text-4xl font-bold text-base-content/95 mb-2">
        {{ props.tvSeries!.Name }}
-        <span class="text-gray-400 text-lg font-normal"
+        <span class="text-base-content/70 text-lg font-normal"
          >({{ props.tvSeries!.FirstAirDate?.slice(0, 4) }})</span
        >
      </h1>

-      <p v-if="props.tvSeries!.Tagline" class="italic text-gray-500 mb-2">
+      <p v-if="props.tvSeries!.Tagline" class="italic text-base-content/65 mb-2">
        {{ props.tvSeries!.Tagline }}
      </p>

-      <p class="text-accent leading-relaxed mb-6">
+      <p class="text-base-content leading-relaxed mb-6">
        {{ props.tvSeries!.Overview }}
      </p>

@@ -54,18 +54,18 @@ const alreadyAdded = computed(() =>
        <MediaTypeBadge v-for="g in props.tvSeries!.Genres" :key="g.id" :text="g.name" />
      </div>

-      <div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
+      <div class="card bg-base-200 w-full lg:w-96 shadow-sm border border-accent mb-6 mt-6">
        <div class="card-body">
          <div class="inline-flex items-center gap-2">
-            <span class="flex items-center font-semibold text-gray-900">
+            <span class="flex items-center font-semibold text-base-content/90">
              Seasons:
-              <span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfSeasons }}</span>
+              <span class="ml-1 text-base-content/70">{{ props.tvSeries!.NumberOfSeasons }}</span>
            </span>

            <!-- SVG star separator -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
-              class="w-4 h-4 text-yellow-500 shrink-0"
+              class="w-4 h-4 text-warning shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
@@ -75,24 +75,26 @@ const alreadyAdded = computed(() =>
              />
            </svg>

-            <span class="flex items-center font-semibold text-gray-900">
+            <span class="flex items-center font-semibold text-base-content/90">
              Episodes:
-              <span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfEpisodes }}</span>
+              <span class="ml-1 text-base-content/70">{{ props.tvSeries!.NumberOfEpisodes }}</span>
            </span>
          </div>

-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
            Last Episode:
-            <span class="text-gray-600">{{ props.tvSeries!.LastEpisodeToAir?.name }}</span>
+            <span class="text-base-content/70">{{ props.tvSeries!.LastEpisodeToAir?.name }}</span>
          </p>
-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
            Language:
-            <span class="text-gray-600">{{ props.tvSeries!.SpokenLanguages[0]?.englishName }}</span>
+            <span class="text-base-content/70">{{
+              props.tvSeries!.SpokenLanguages[0]?.englishName
+            }}</span>
          </p>
-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
            First Air Date:
            <time
-              class="text-sm font-semibold text-gray-600"
+              class="text-sm font-semibold text-base-content/70"
              :datetime="
                props.tvSeries!.FirstAirDate === ''
                  ? 'unknown'
@@ -116,9 +118,9 @@ const alreadyAdded = computed(() =>
              :href="`https://www.themoviedb.org/tv/${props.tvSeries?.Id}`"
              target="_blank"
              rel="noopener noreferrer"
-              class="btn btn-square btn-md bg-accent border-none"
+              class="btn btn-square btn-md bg-base-300 border border-base-content/30"
            >
-              <img src="/logos/tmdb.svg" alt="TMDB" class="m-0.5" />
+              <img src="/logos/tmdb.svg" alt="TMDB" class="h-6 w-6" />
            </a>

            <!-- IMDB button -->
@@ -127,9 +129,9 @@ const alreadyAdded = computed(() =>
              :href="props.tvSeries.Homepage"
              target="_blank"
              rel="noopener noreferrer"
-              class="btn btn-square btn-md bg-[#f5c518] border-none"
+              class="btn btn-square btn-md bg-[#f5c518] border border-[#f5c518]/30"
            >
-              <img src="/logos/imdb.svg" alt="IMDB" class="m-0.5" />
+              <img src="/logos/imdb.svg" alt="IMDB" class="h-6 w-6" />
            </a>
          </div>
        </div>
@@ -140,7 +142,7 @@ const alreadyAdded = computed(() =>
        <template v-if="props.tvSeries && props.media">
          <button
            v-if="!alreadyAdded"
-            class="btn btn-square bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
+            class="btn btn-square bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100"
            @click="store.addMedia(props.media)"
          >
            <svg
@@ -160,7 +162,7 @@ const alreadyAdded = computed(() =>
          </button>
          <button
            v-else
-            class="btn btn-square bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
+            class="btn btn-square bg-gradient-to-r from-error/10 to-error/20 border border-error/30 text-error hover:from-error/20 hover:to-error/30"
            @click="store.removeMedia(props.media.Id)"
          >
            <svg
@@ -190,7 +192,7 @@ const alreadyAdded = computed(() =>
          }"
        >
          <button
-            class="btn relative flex items-center gap-2 px-6 bg-linear-to-r from-indigo-500 to-violet-500 text-white border-0 shadow-md hover:opacity-90 transition"
+            class="btn relative flex items-center gap-2 px-6 bg-gradient-to-r from-primary to-secondary text-primary-content border-0 shadow-md hover:opacity-90 transition"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import HomeView from '@/views/HomeView.vue'

 const routes: RouteRecordRaw[] = [
  {
@@ -9,7 +10,7 @@ const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
-    component: () => import('@/views/HomeView.vue'),
+    component: HomeView,
  },
  {
    path: '/list',
--- a/src/style.css
+++ b/src/style.css
@@ -1,4 +1,4 @@
@import 'tailwindcss';
@plugin "daisyui" {
-  themes: lofi --default;
+  themes: halloween --default;
 }
--- a/src/views/AddView.vue
+++ b/src/views/AddView.vue
@@ -122,7 +122,7 @@ watch(filters, () => {
  <div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
    <!-- Title -->
    <h1
-      class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+      class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-base-content to-base-content/70 bg-clip-text text-transparent"
    >
      Add Media
    </h1>
@@ -151,7 +151,7 @@ watch(filters, () => {
    <!-- Empty state -->
    <p
      v-else
-      class="text-center text-gray-500 mt-16 bg-gray-50/60 border border-gray-200 rounded-lg py-12"
+      class="text-center text-base-content/60 mt-16 bg-base-300/60 border border-base-content/20 rounded-lg py-12"
    >
      Search for a movie or TV Serie to add it to your list
    </p>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>

 <template>
-  <div class="relative isolate bg-white px-6 pt-16 lg:px-8">
+  <div class="relative isolate bg-base-100 px-6 pt-16 lg:px-8">
    <!-- Top blurred gradient background -->
    <div
      class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
@@ -42,13 +42,13 @@
        <span class="text-6xl font-extrabold gradient-text"> To Be Watched </span>
      </h1>

-      <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-12">
+      <p class="text-lg text-base-content/70 max-w-2xl mx-auto mb-12">
        A simple and beautiful media list app built with Vue&nbsp;3 and Tailwind&nbsp;CSS (daisyUI).
      </p>

      <RouterLink
        to="/add"
-        class="btn px-8 py-3 text-lg font-medium bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
+        class="btn px-8 py-3 text-lg font-medium bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 transition"
      >
        Get Started
      </RouterLink>
@@ -90,9 +90,9 @@
 .gradient-text {
  background: linear-gradient(
    90deg,
-    #6b7280 0%,
-    /* gray-500 */ #818cf8 50%,
-    /* indigo-400 */ #22d3ee 100% /* cyan-400 */
+    oklch(77.48% 0.204 60.62) 0%,
+    /* primary */ oklch(45.98% 0.248 305.03) 50%,
+    /* secondary */ oklch(77.48% 0.204 60.62) 100% /* accent */
  );
  -webkit-background-clip: text;
  background-clip: text;
--- a/src/views/ListView.vue
+++ b/src/views/ListView.vue
@@ -17,7 +17,7 @@ const handleRemoveMedia = (mediaId: number) => {
 <template>
  <div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
    <h1
-      class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+      class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-base-content to-base-content/70 bg-clip-text text-transparent"
    >
      Media Library
    </h1>
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -2,24 +2,24 @@

 <template>
  <div
-    class="min-h-screen flex flex-col items-center justify-center bg-linear-to-b from-gray-50 to-white px-4"
+    class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-base-300 to-base-100 px-4"
  >
    <!-- Big 404 -->
    <h1
-      class="text-8xl font-extrabold mb-4 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+      class="text-8xl font-extrabold mb-4 bg-gradient-to-r from-base-content/70 to-base-content/50 bg-clip-text text-transparent"
    >
      404
    </h1>

    <!-- Message -->
-    <p class="text-xl text-gray-600 mb-8 text-center">
+    <p class="text-xl text-base-content/70 mb-8 text-center">
      Oops! The page you’re looking for doesn’t exist.
    </p>

    <!-- Button back home -->
    <RouterLink
      to="/"
-      class="btn px-6 py-3 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
+      class="btn px-6 py-3 bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 transition"
    >
      Back to Home
    </RouterLink>
--- a/src/views/WatchView.vue
+++ b/src/views/WatchView.vue
@@ -9,7 +9,7 @@ const isLoaded = ref(false)
 </script>

 <template>
-  <div class="flex flex-col items-center w-full min-h-screen bg-black text-white">
+  <div class="flex flex-col items-center w-full min-h-screen bg-base-100 text-base-content">
    <!-- Title -->
    <h1 class="text-2xl md:text-3xl font-bold my-4">
      {{ mediaName }}
@@ -17,7 +17,7 @@ const isLoaded = ref(false)

    <!-- Loading spinner -->
    <div v-if="!isLoaded" class="flex justify-center items-center flex-1 w-full">
-      <span class="loading loading-ring loading-lg text-white"></span>
+      <span class="loading loading-ring loading-xl text-primary"></span>
    </div>

    <!-- Video player -->
@@ -32,7 +32,7 @@ const isLoaded = ref(false)
    </div>

    <!-- Disclaimer -->
-    <p class="mt-4 text-xs text-gray-400 text-center px-4 max-w-xl">
+    <p class="mt-4 text-xs text-base-content/60 text-center px-4 max-w-xl">
      ⚠️ This player is provided by a <span class="font-semibold">third‑party service</span>. Ads
      and pop‑ups may appear, and I do not control or endorse them.
    </p>
Author	SHA1	Message	Date
Mohammad Mahdi	eb9dff9f15	Improve performance	2025-11-06 12:07:44 +03:30
Mohammad Mahdi	e1346156c8	Fix gh actions error	2025-11-06 11:36:41 +03:30
Mohammad Mahdi	c14934adae	Minor improvements to navbar	2025-11-06 11:33:32 +03:30
Mohammad Mahdi	97fc93608b	Update theme to 🎃	2025-11-06 11:31:00 +03:30
Mohammad Mahdi	97174ff945	Fix coloring inconsistencies	2025-11-06 11:21:26 +03:30
Mohammad Mahdi	542484e8e6	Change theme to forest and fix some inconsistencies	2025-11-06 10:53:51 +03:30