fix: consistant backdrop-blur tailwind class

DesterLib · Jul 20, 2024 · cbd760a · cbd760a
1 parent 5e7e637
commit cbd760a
Show file tree

Hide file tree

Showing 17 changed files with 48,164 additions and 154 deletions.
diff --git a/dist/assets/index-BnxWG_9y.js b/dist/assets/index-BnxWG_9y.js
diff --git a/dist/assets/index-C5gZnD0s.css b/dist/assets/index-C5gZnD0s.css
diff --git a/dist/assets/index-DYDgbb6F.css b/dist/assets/index-DYDgbb6F.css
diff --git a/dist/assets/index-M_zpHYxC.js b/dist/assets/index-M_zpHYxC.js
diff --git a/dist/index.html b/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dester Desktop</title>
-    <script type="module" crossorigin src="/assets/index-BnxWG_9y.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C5gZnD0s.css">
+    <script type="module" crossorigin src="/assets/index-M_zpHYxC.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DYDgbb6F.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/lib/components/Button.tsx b/src/lib/components/Button.tsx
@@ -27,7 +27,7 @@ const button = cva(
           "hover:bg-neutral-600/40",
           "active:bg-neutral-600/60",
           "text-white",
-          "backdrop-blur-sm",
+          "backdrop-blur-lg",
           "shadow-[inset_0_1px_0_0_#ffffff1a]",
         ],
       },

diff --git a/src/lib/components/Cards/CollectionCard.tsx b/src/lib/components/Cards/CollectionCard.tsx
@@ -2,7 +2,7 @@ const CollectionCard = ({ item }: any) => {
   return (
     <div className="w-full space-y-2 group hover:cursor-pointer gradient-border relative aspect-video rounded-2xl overflow-hidden">
       <img className="h-full w-full rounded-b-2xl" src={item.backdrop} alt="" />
-      <div className="absolute bottom-0 left-0 right-0 h-20 py-6 w-full overflow-hidden flex justify-center items-center bg-black/60 backdrop-blur-xl">
+      <div className="absolute bottom-0 left-0 right-0 h-20 py-6 w-full overflow-hidden flex justify-center items-center bg-black/60 backdrop-blur-lg">
         <img
           className="object-contain group-hover:scale-110 transition-transform w-2/3 h-full brightness-0 invert"
           src={item.logo}

diff --git a/src/lib/components/Cards/ContentCard.tsx b/src/lib/components/Cards/ContentCard.tsx
@@ -77,7 +77,7 @@ const ContentCard = ({ item, type = "movie" }: any) => {
                         initial={{ opacity: 0, scale: 0.95 }}
                         animate={{ opacity: 1, scale: 1 }}
                         exit={{ opacity: 0, scale: 0.95 }}
-                        className="w-52 z-50 origin-top-right rounded-2xl border border-white/5 bg-zinc-700/60 backdrop-blur-xl p-1 text-sm/6 text-white [--anchor-gap:6px] focus:outline-none"
+                        className="w-52 z-50 origin-top-right rounded-2xl border border-white/5 bg-zinc-700/60 backdrop-blur-lg p-1 text-sm/6 text-white [--anchor-gap:6px] focus:outline-none"
                       >
                         <MenuItem>
                           <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">

diff --git a/src/lib/components/Cards/LibraryCard.tsx b/src/lib/components/Cards/LibraryCard.tsx
@@ -77,7 +77,7 @@ const LibraryCard = ({ item, type = "movie" }: any) => {
                         initial={{ opacity: 0, scale: 0.95 }}
                         animate={{ opacity: 1, scale: 1 }}
                         exit={{ opacity: 0, scale: 0.95 }}
-                        className="w-52 z-50 origin-top-right rounded-2xl border border-white/5 bg-zinc-700/60 backdrop-blur-xl p-1 text-sm/6 text-white [--anchor-gap:6px] focus:outline-none"
+                        className="w-52 z-50 origin-top-right rounded-2xl border border-white/5 bg-zinc-700/60 backdrop-blur-lg p-1 text-sm/6 text-white [--anchor-gap:6px] focus:outline-none"
                       >
                         <MenuItem>
                           <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">

diff --git a/src/lib/components/Chip.tsx b/src/lib/components/Chip.tsx
@@ -16,17 +16,11 @@ const chip = cva(
       variant: {
         neutral: [
           "bg-neutral-600/60",
-          "backdrop-blur-sm",
           "text-gray-200",
           "border",
           "border-zinc-400/20",
         ],
-        secondary: [
-          "text-white",
-          "backdrop-blur-sm",
-          "border",
-          "border-white/20",
-        ],
+        secondary: ["text-white", "border", "border-white/20"],
       },
       size: {
         medium: ["text-lg", "min-w-14", "font-semibold"],

diff --git a/src/lib/components/Filters/LibraryFilter.tsx b/src/lib/components/Filters/LibraryFilter.tsx
@@ -31,7 +31,7 @@ const SelectMenu = ({ title }: any) => {
       </ListboxButton>
       <ListboxOptions
         anchor="bottom"
-        className="w-[var(--button-width)] z-50 mt-2 rounded-xl border border-white/5 bg-white/5 backdrop-blur-xl p-1 [--anchor-gap:var(--spacing-1)] focus:outline-none transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0"
+        className="w-[var(--button-width)] z-50 mt-2 rounded-xl border border-white/5 bg-white/5 backdrop-blur-lg p-1 [--anchor-gap:var(--spacing-1)] focus:outline-none transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0"
       >
         {people.map((person) => (
           <ListboxOption
@@ -52,15 +52,25 @@ const SelectMenu = ({ title }: any) => {
 
 const LibraryFilter = () => {
   return (
-    <div className="py-10 px-16 sticky top-0 bg-[#0E0E0E]/80 backdrop-blur-xl z-40">
+    <div className="py-10 px-16 sticky top-0 bg-[#0E0E0E]/80 backdrop-blur-lg z-40">
       <div className="space-y-4 p-2 pt-12">
-        <div className="text-xl font-bold">Filter</div>
+        <div className="text-xl font-bold flex items-center space-x-2">
+          <div>Filter</div>
+          <div className="h-6 w-6 flex justify-center items-center">
+            <HeroIcon iconName="AdjustmentsHorizontalIcon" size="small" />
+          </div>
+        </div>
         <div className="flex space-x-2">
           <SelectMenu title="Category" />
           <SelectMenu title="Genre" />
           <SelectMenu title="Type" />
           <SelectMenu title="Rating" />
+        </div>
+        <div className="flex space-x-2">
           <SelectMenu title="Popularity" />
+          <SelectMenu title="Year" />
+          <SelectMenu title="Airing Status" />
+          <SelectMenu title="Country of Origin" />
         </div>
       </div>
     </div>

diff --git a/src/lib/components/IconButton.tsx b/src/lib/components/IconButton.tsx
@@ -27,7 +27,7 @@ const iconButton = cva(
           "hover:bg-neutral-600/40",
           "active:bg-neutral-600/60",
           "text-white",
-          "backdrop-blur-sm",
+          "backdrop-blur-lg",
           "shadow-[inset_0_1px_0_0_#ffffff1a]",
         ],
       },

diff --git a/src/lib/components/Menus/NavbarMenu.tsx b/src/lib/components/Menus/NavbarMenu.tsx
@@ -123,7 +123,7 @@ const NavbarMenu = () => {
                   bounce: 0.2,
                   duration: 0.4,
                 }}
-                className="w-52 z-50 origin-top-right rounded-2xl bg-neutral-600/20 backdrop-blur-xl p-1 text-sm/6 text-white [--anchor-gap:6px] focus:outline-none shadow-[inset_0_1px_0_0_#ffffff1a]"
+                className="w-52 z-50 origin-top-right rounded-2xl bg-neutral-600/20 backdrop-blur-lg p-1 text-sm/6 text-white [--anchor-gap:6px] focus:outline-none shadow-[inset_0_1px_0_0_#ffffff1a]"
               >
                 <SubMenu />
                 <MenuItem>

diff --git a/src/lib/components/WindowBar.tsx b/src/lib/components/WindowBar.tsx
diff --git a/src/lib/pages/TvInfoPage.tsx b/src/lib/pages/TvInfoPage.tsx
@@ -83,7 +83,7 @@ const TvInfoPage = () => {
         <div className="flex space-x-8">
           <div className="max-h-[400px] w-fit text-sm h-fit overflow-y-scroll rounded-2xl overflow-hidden bg-zinc-700/20 shadow-[inset_0_1px_0_0_#ffffff1a]">
             <table className="table-auto text-left">
-              <thead className="sticky top-0 bg-zinc-500/20 backdrop-blur-xl text-white/60">
+              <thead className="sticky top-0 bg-zinc-500/20 backdrop-blur-lg text-white/60">
                 <tr>
                   <td className="px-4 py-2 shadow-[inset_0_1px_0_0_#ffffff1a]">
                     Season

diff --git a/ts/tmp/movies.json b/ts/tmp/movies.json
@@ -138,7 +138,7 @@
     "title": "The Godfather",
     "video": false,
     "vote_average": 8.693,
-    "vote_count": 20096
+    "vote_count": 20097
   },
   {
     "adult": false,
@@ -227,7 +227,7 @@
     "title": "The Godfather Part II",
     "video": false,
     "vote_average": 8.577,
-    "vote_count": 12125
+    "vote_count": 12126
   },
   {
     "adult": false,
@@ -362,7 +362,7 @@
     "title": "12 Angry Men",
     "video": false,
     "vote_average": 8.544,
-    "vote_count": 8371
+    "vote_count": 8372
   },
   {
     "adult": false,
@@ -422,8 +422,8 @@
     "tagline": "",
     "title": "Spirited Away",
     "video": false,
-    "vote_average": 8.537,
-    "vote_count": 16126
+    "vote_average": 8.5,
+    "vote_count": 16127
   },
   {
     "adult": false,
@@ -483,8 +483,8 @@
     "tagline": "Come… Fall In love, All Over Again…",
     "title": "Dilwale Dulhania Le Jayenge",
     "video": false,
-    "vote_average": 8.536,
-    "vote_count": 4404
+    "vote_average": 8.535,
+    "vote_count": 4405
   },
   {
     "adult": false,
@@ -587,7 +587,7 @@
     "title": "The Dark Knight",
     "video": false,
     "vote_average": 8.516,
-    "vote_count": 32220
+    "vote_count": 32222
   },
   {
     "adult": false,
@@ -658,7 +658,7 @@
     "title": "Parasite",
     "video": false,
     "vote_average": 8.508,
-    "vote_count": 17770
+    "vote_count": 17771
   },
   {
     "adult": false,
@@ -730,7 +730,7 @@
     "title": "The Green Mile",
     "video": false,
     "vote_average": 8.506,
-    "vote_count": 16994
+    "vote_count": 16996
   },
   {
     "adult": false,
@@ -905,8 +905,8 @@
     "tagline": "You won't know the facts until you've seen the fiction.",
     "title": "Pulp Fiction",
     "video": false,
-    "vote_average": 8.488,
-    "vote_count": 27380
+    "vote_average": 8.487,
+    "vote_count": 27383
   },
   {
     "adult": false,
@@ -987,8 +987,8 @@
     "tagline": "There can be no triumph without loss. No victory without suffering. No freedom without sacrifice.",
     "title": "The Lord of the Rings: The Return of the King",
     "video": false,
-    "vote_average": 8.5,
-    "vote_count": 23634
+    "vote_average": 8.482,
+    "vote_count": 23635
   },
   {
     "adult": false,
@@ -1472,6 +1472,6 @@
     "title": "Cinema Paradiso",
     "video": false,
     "vote_average": 8.451,
-    "vote_count": 4244
+    "vote_count": 4245
   }
 ]
diff --git a/ts/tmp/tv.json b/ts/tmp/tv.json
@@ -1421,8 +1421,8 @@
     "status": "Returning Series",
     "tagline": "New episodes. New era.",
     "type": "Scripted",
-    "vote_average": 8.711,
-    "vote_count": 372
+    "vote_average": 8.704,
+    "vote_count": 373
   },
   {
     "adult": false,
@@ -4123,6 +4123,6 @@
     "tagline": "",
     "type": "Scripted",
     "vote_average": 8.65,
-    "vote_count": 4778
+    "vote_count": 4779
   }
 ]