Improve classes

src/components/AddMoreCard.vue

@@ -3,7 +3,7 @@
 <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 border-2 border-dashed border-gray-300 rounded-lg shadow-sm hover:shadow-md hover:border-gray-400 transition-all duration-300"
+    class="card relative w-full h-full flex items-center justify-center aspect-2/3 bg-white/40 backdrop-blur-md border-2 border-dashed border-gray-300 rounded-lg shadow-sm hover:shadow-md hover:border-gray-400 transition-all duration-300"
     v-motion-fade-visible-once
   >
     <!-- Plus icon -->

src/components/MediaCard.vue

@@ -30,7 +30,7 @@ const imageSource = computed(() => {
     <router-link
       :to="{ name: 'details', params: { type: props.movie.MediaType, id: props.movie.Id } }"
     >
-      <figure class="overflow-hidden flex items-center justify-center aspect-[2/3] bg-gray-50">
+      <figure class="overflow-hidden flex items-center justify-center aspect-2/3 bg-gray-50">
         <span v-if="!loaded" class="loading loading-ring loading-lg text-primary"></span>
 
         <div v-else-if="imageLoadFailed" class="flex items-center justify-center">
@@ -72,7 +72,7 @@ const imageSource = computed(() => {
         :to="{ name: 'details', params: { type: props.movie.MediaType, id: props.movie.Id } }"
       >
         <h2
-          class="card-title text-base font-semibold bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+          class="card-title text-base font-semibold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
         >
           {{ props.movie.Title }}
         </h2>
@@ -83,7 +83,7 @@ const imageSource = computed(() => {
         <button
           v-motion-fade-visible-once
           v-if="!alreadyAdded"
-          class="btn btn-sm px-4 bg-gradient-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 btn-sm px-4 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"
           @click="store.addMedia(props.movie)"
         >
           Add
@@ -91,7 +91,7 @@ const imageSource = computed(() => {
         <button
           v-motion-fade-visible-once
           v-else
-          class="btn btn-sm px-4 bg-gradient-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-sm px-4 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"
           @click="store.removeMedia(props.movie.Id)"
         >
           Remove

src/components/MediaDetails.vue

@@ -37,7 +37,7 @@ const alreadyAdded = computed(() =>
     v-motion-fade-visible-once
   >
     <!-- Poster -->
-    <figure class="flex-shrink-0">
+    <figure class="shrink-0">
       <span v-if="!imageLoaded" class="loading loading-ring loading-lg text-primary"></span>
       <img
         v-show="imageLoaded"
@@ -85,19 +85,19 @@ const alreadyAdded = computed(() =>
         <span
           v-for="g in props.type === 'movie' ? props.movie!.Genres : props.tvSeries!.Genres"
           :key="g.id"
-          class="px-3 py-1 rounded-md text-sm bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
+          class="px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
         >
           {{ g.name }}
         </span>
         <span
           v-if="props.type === 'movie'"
-          class="px-3 py-1 rounded-md text-sm bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
+          class="px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
         >
           Runtime: {{ props.movie!.Runtime }} min
         </span>
         <span
           v-if="props.type === 'tv'"
-          class="px-3 py-1 rounded-md text-sm bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
+          class="px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 text-gray-700 border border-gray-300"
         >
           Seasons: {{ props.tvSeries!.NumberOfSeasons }}
         </span>
@@ -108,14 +108,14 @@ const alreadyAdded = computed(() =>
         <template v-if="(props.movie && props.media) || (props.tvSeries && props.media)">
           <button
             v-if="!alreadyAdded"
-            class="btn px-6 bg-gradient-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 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"
             @click="store.addMedia(props.media)"
           >
             Add to list
           </button>
           <button
             v-else
-            class="btn px-6 bg-gradient-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 px-6 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"
             @click="store.removeMedia(props.media.Id)"
           >
             Remove from library
@@ -132,7 +132,7 @@ const alreadyAdded = computed(() =>
           }"
         >
           <button
-            class="btn relative flex items-center gap-2 px-6 bg-gradient-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-linear-to-r from-indigo-500 to-violet-500 text-white border-0 shadow-md hover:opacity-90 transition"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"

src/components/MovieList.vue

@@ -39,7 +39,7 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
 
     <div v-if="props.isSearch && props.movies.length > 0" class="flex justify-center mt-8">
       <button
-        class="btn px-6 bg-gradient-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-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"
         @click="emit('loadMore')"
         :disabled="props.loadingMore"
       >

src/components/NavBar.vue

@@ -36,7 +36,7 @@
 
       <!-- Logo -->
       <RouterLink
-        class="btn btn-ghost normal-case text-2xl font-bold bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+        class="btn btn-ghost normal-case text-2xl font-bold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
         to="/"
       >
         To Vue
@@ -65,7 +65,7 @@
     <!-- Right -->
     <div class="navbar-end">
       <RouterLink
-        class="btn px-5 bg-gradient-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 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"
         to="/list"
       >
         Go to library

src/components/SearchBar.vue

@@ -48,7 +48,7 @@ function onSubmit() {
       <!--
       <button
         type="submit"
-        class="px-4 py-2 bg-gradient-to-r from-gray-100 to-gray-200
+        class="px-4 py-2 bg-linear-to-r from-gray-100 to-gray-200
                border-l border-gray-200 text-gray-600 hover:text-gray-800
                transition"
       >

src/views/AddView.vue

@@ -88,7 +88,7 @@ watch(searchQuery, () => {
   <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-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+      class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
     >
       Add a Movie
     </h1>

src/views/DetailsView.vue

@@ -64,7 +64,7 @@ onMounted(async () => {
     <!-- Details -->
     <MediaDetails
       v-else-if="movieDetails || tvSeriesDetails"
-      :type="(route.params.type as 'movie' | 'tv')"
+      :type="route.params.type === 'movie' ? 'movie' : 'tv'"
       :media="media"
       :movie="movieDetails"
       :tv-series="tvSeriesDetails"

src/views/HomeView.vue

@@ -14,7 +14,7 @@
 
       <RouterLink
         to="/add"
-        class="btn px-8 py-3 text-lg font-medium bg-gradient-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-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"
       >
         Get Started
       </RouterLink>

src/views/ListView.vue

@@ -8,7 +8,7 @@ const store = useMediaStore()
 <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-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+      class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
     >
       Movie Library
     </h1>

src/views/NotFoundView.vue

@@ -2,11 +2,11 @@
 
 <template>
   <div
-    class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-gray-50 to-white px-4"
+    class="min-h-screen flex flex-col items-center justify-center bg-linear-to-b from-gray-50 to-white px-4"
   >
     <!-- Big 404 -->
     <h1
-      class="text-8xl font-extrabold mb-4 bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+      class="text-8xl font-extrabold mb-4 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
     >
       404
     </h1>
@@ -19,7 +19,7 @@
     <!-- Button back home -->
     <RouterLink
       to="/"
-      class="btn px-6 py-3 bg-gradient-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-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"
     >
       Back to Home
     </RouterLink>

src/views/WatchView.vue

@@ -9,7 +9,7 @@ const isLoaded = ref(false)
 </script>
 
 <template>
-  <div class="flex justify-center min-h-auto px-4 py-12 bg-gradient-to-b from-gray-50 to-white">
+  <div class="flex justify-center min-h-auto px-4 py-12 bg-linear-to-b from-gray-50 to-white">
     <div
       class="w-full max-w-6xl bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-md rounded-xl p-4 lg:p-8 transition flex flex-col items-center"
       v-motion-fade-visible-once
@@ -18,7 +18,7 @@ const isLoaded = ref(false)
       <div class="flex items-center gap-3 mb-6">
         <h1 class="text-3xl font-bold text-gray-700">
           Watch <br />
-          <span class="bg-gradient-to-r from-indigo-500 to-cyan-400 bg-clip-text text-transparent">
+          <span class="bg-linear-to-r from-indigo-500 to-cyan-400 bg-clip-text text-transparent">
             {{ movieName }}
           </span>
         </h1>