Update "In Collection" Design and Indicator Check.

ShokoAnime · Oct 22, 2023 · 5a8ac9a · 5a8ac9a
1 parent 6b1f47b
commit 5a8ac9a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/src/components/BackgroundImagePlaceholderDiv.tsx b/src/components/BackgroundImagePlaceholderDiv.tsx
@@ -75,7 +75,7 @@ function BackgroundImagePlaceholderDiv(props: Props) {
     <div className={`${className} relative overflow-hidden`}>
       <div
         className={cx(
-          'absolute w-full h-full flex flex-col top-0 left-0 text-center z-[-1] rounded-md',
+          'absolute w-full h-full flex flex-col top-0 left-0 text-center z-[-1] rounded-lg',
           zoomOnHover && 'group-hover:scale-105 transition-transform',
         )}
         style={{ background: backgroundImage ? `center / cover no-repeat url('${backgroundImage.src}')` : undefined }}

diff --git a/src/pages/dashboard/components/EpisodeDetails.tsx b/src/pages/dashboard/components/EpisodeDetails.tsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import type { JSX } from 'react';
 import { Link } from 'react-router-dom';
-import { mdiLayersTripleOutline } from '@mdi/js';
-import { Icon } from '@mdi/react';
 import moment from 'moment';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
@@ -37,17 +35,17 @@ const ImageSection: React.FC<
 > = ({ episode, isInCollection, percentage }) => (
   <BackgroundImagePlaceholderDiv
     image={episode.SeriesPoster}
-    className="mb-3 h-80 rounded border border-panel-border drop-shadow-md"
+    className="mb-3 h-80 rounded-lg border border-panel-border drop-shadow-md"
     hidePlaceholderOnHover
     zoomOnHover
   >
     {percentage && <div className="absolute bottom-0 left-0 h-1 bg-panel-text-primary" style={{ width: percentage }} />}
     {isInCollection && (
-      <div className="absolute right-3 top-3 rounded bg-panel-background-transparent p-1">
-        <Icon path={mdiLayersTripleOutline} size={0.75} title="Episode is Already in Collection!" />
+      <div className="absolute bottom-0 left-0 flex w-full justify-center bg-panel-background-overlay py-1.5 text-sm font-semibold text-panel-text opacity-100 transition-opacity group-hover:opacity-0">
+        In Collection
       </div>
     )}
-    <div className="pointer-events-none z-50 flex h-full bg-panel-background-transparent p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100" />
+    <div className="pointer-events-none z-50 flex h-full bg-panel-background-transparent p-3 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100" />
   </BackgroundImagePlaceholderDiv>
 );
 

diff --git a/src/pages/dashboard/panels/UpcomingAnime.tsx b/src/pages/dashboard/panels/UpcomingAnime.tsx
@@ -33,9 +33,7 @@ const UpcomingAnime = () => {
       <div className="shoko-scrollbar relative flex">
         <TransitionDiv show={!showAll} className="absolute flex w-full">
           {(localItems.data?.length ?? 0) > 0
-            ? localItems.data?.map(item => (
-              <EpisodeDetails episode={item} showDate key={item.IDs.ID} isInCollection={item.IDs.ShokoFile !== null} />
-            ))
+            ? localItems.data?.map(item => <EpisodeDetails episode={item} showDate key={item.IDs.ID} />)
             : (
               <div className="mt-4 flex w-full flex-col justify-center gap-y-2 text-center">
                 <div>No Upcoming Anime.</div>
@@ -46,7 +44,12 @@ const UpcomingAnime = () => {
         <TransitionDiv show={showAll} className="absolute flex w-full">
           {(items.data?.length ?? 0) > 0
             ? items.data?.map(item => (
-              <EpisodeDetails episode={item} showDate key={item.IDs.ID} isInCollection={item.IDs.ShokoFile !== null} />
+              <EpisodeDetails
+                episode={item}
+                showDate
+                key={item.IDs.ID}
+                isInCollection={item.IDs.ShokoSeries !== null}
+              />
             ))
             : (
               <div className="mt-4 flex w-full flex-col justify-center gap-y-2 text-center">