Mess up a lot of shit, this commit is unstable asf

src/components/media/MediaCard.tsx

@@ -66,7 +66,7 @@ function MediaCardContent({
 
   return (
     <Flare.Base
-      className={`group -m-3 mb-2 rounded-xl bg-background-main transition-colors duration-100 focus:relative focus:z-10 ${
+      className={`group -m-[0.705em] p-[0.2em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
         canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
       }`}
       tabIndex={canLink ? 0 : -1}
@@ -81,13 +81,13 @@ function MediaCardContent({
         })}
       />
       <Flare.Child
-        className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-100 ${
+        className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-300 ${
           canLink ? "group-hover:scale-95" : "opacity-60"
         }`}
       >
         <div
           className={classNames(
-            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-100",
+            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
             {
               "group-hover:rounded-lg": canLink,
             },
@@ -142,13 +142,13 @@ function MediaCardContent({
           ) : null}
 
           <div
-            className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-200 ${
+            className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${
               closable ? "opacity-100" : "pointer-events-none opacity-0"
             }`}
           >
             <IconPatch
               clickable
-              className="text-2xl text-mediaCard-badgeText"
+              className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
               onClick={() => closable && onClose?.()}
               icon={Icons.X}
             />

src/pages/Discover.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { WideContainer } from "@/components/layout/WideContainer";
 import { Divider } from "@/components/utils/Divider";
+import { Flare } from "@/components/utils/Flare";
 import { HomeLayout } from "@/pages/layouts/HomeLayout";
 import { conf } from "@/setup/config";
 import { useThemeStore } from "@/stores/theme";
@@ -270,30 +271,51 @@ export function Discover() {
           onWheel={(e) => handleWheel(e, categorySlug)}
         >
           {medias.slice(0, 20).map((media) => (
-            <a
+            <Flare.Base
-              key={media.id}
+              className="group -m-[0.705em] p-[0.2em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable"
-              onClick={
+              tabIndex={0} // Assuming all items are linkable for simplicity; adjust as needed
-                () =>
+              onKeyUp={(e) => {
+                if (e.key === "Enter") {
                   navigate(
                     `/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
                       isTVShow ? media.name : media.title
                     }`,
-                  )
+                  );
-                // Navigate instead of href!
+                }
-              }
+              }}
-              rel="noopener noreferrer"
-              className="block rounded-xl text-center relative overflow-hidden transition-transform transform hover:scale-95 duration-500 mr-5"
-              style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
             >
-              <img
+              <Flare.Light
-                src={`https://image.tmdb.org/t/p/w500${media.poster_path}`} // Dont change this fucking line!
+                flareSize={300}
-                alt={isTVShow ? media.name : media.title}
+                cssColorVar="--colors-mediaCard-hoverAccent"
-                loading="lazy"
+                backgroundClass="bg-mediaCard-hoverBackground duration-100"
-                className="rounded-xl"
+                className="rounded-xl bg-background-main group-hover:opacity-100"
               />
-            </a>
+              <Flare.Child className="pointer-events-auto relative mb-2 p-3 transition-transform duration-300 group-hover:scale-95">
+                <a
+                  key={media.id}
+                  onClick={() =>
+                    navigate(
+                      `/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
+                        isTVShow ? media.name : media.title
+                      }`,
+                    )
+                  }
+                  rel="noopener noreferrer"
+                  className="block rounded-xl text-center relative overflow-hidden transition-transform transform hover:scale-95 duration-500 mr-5"
+                  style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
+                >
+                  <img
+                    src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
+                    alt={isTVShow ? media.name : media.title}
+                    loading="lazy"
+                    className="rounded-xl"
+                  />
+                </a>
+              </Flare.Child>
+            </Flare.Base>
           ))}
         </div>
+
         <button
           type="button"
           title="Back"

themes/default.ts

@@ -70,6 +70,7 @@ const tokens = {
     c900: "#0C1216",
   },
   shade: {
+    c25: "#5d5db3",
     c50: "#676790",
     c100: "#52527A",
     c200: "#3F3F60",
@@ -172,7 +173,7 @@ export const defaultTheme = {
       // media cards
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,

themes/list/blue.ts

@@ -14,6 +14,7 @@ const tokens = {
     c900: "#03102a"
   },
   shade: {
+    c25: "#5d7db3",
     c50: "#756790",
     c100: "#60527a",
     c200: "#4a3f60",
@@ -121,7 +122,7 @@ export default createTheme({
 
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,

themes/list/gray.ts

@@ -14,6 +14,7 @@ const tokens = {
     c900: "#0b0d22"
   },
   shade: {
+    c25: "#9c9c9c",
     c50: "#7c7c7c",
     c100: "#666666",
     c200: "#4f4f4f",
@@ -121,7 +122,7 @@ export default createTheme({
 
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,

themes/list/red.ts

@@ -14,6 +14,7 @@ const tokens = {
     c900: "#220c0c"
   },
   shade: {
+    c25: "#b3675d",
     c50: "#9c605c",
     c100: "#834d49",
     c200: "#673b38",
@@ -121,7 +122,7 @@ export default createTheme({
 
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,

themes/list/teal.ts

@@ -14,6 +14,7 @@ const tokens = {
     c900: "#0b1822"
   },
   shade: {
+    c25: "#5db3a8",
     c50: "#677c90",
     c100: "#52667a",
     c200: "#3f4f60",
@@ -121,7 +122,7 @@ export default createTheme({
 
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,