From b308544be43f7d93128569560c6c84e499a1e991 Mon Sep 17 00:00:00 2001
From: voltrare <30526233+voltrare@users.noreply.github.com>
Date: Thu, 9 Sep 2021 09:58:08 +0800
Subject: [PATCH] added on hover, active effect (#25)

added hover effect on chapter, episode card
---
 src/components/anime/EpisodeCard.tsx | 8 ++++++++
 src/components/manga/ChapterCard.tsx | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/components/anime/EpisodeCard.tsx b/src/components/anime/EpisodeCard.tsx
index 46f7d116..4c6d687a 100644
--- a/src/components/anime/EpisodeCard.tsx
+++ b/src/components/anime/EpisodeCard.tsx
@@ -44,6 +44,14 @@ const useStyles = makeStyles((theme) => ({
     },
     card: {
         margin: '10px',
+        '&:hover': {
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            transition: 'background-color 0ms ease',
+        },
+        '&:active': {
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            transition: 'background-color 100ms ease-out',
+        },
     },
 }));
 
diff --git a/src/components/manga/ChapterCard.tsx b/src/components/manga/ChapterCard.tsx
index 557cbaca..5d7a1774 100644
--- a/src/components/manga/ChapterCard.tsx
+++ b/src/components/manga/ChapterCard.tsx
@@ -44,6 +44,14 @@ const useStyles = makeStyles((theme) => ({
     },
     card: {
         margin: '10px',
+        '&:hover': {
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            transition: 'background-color 0ms ease',
+        },
+        '&:active': {
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            transition: 'background-color 100ms ease-out',
+        },
     },
 }));