Update hover effect using more of Material-UI color pallete (#29)

Suwayomi · Sep 17, 2021 · bdbaf25 · bdbaf25
1 parent 32c9bd7
commit bdbaf25
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/src/components/anime/EpisodeCard.tsx b/src/components/anime/EpisodeCard.tsx
@@ -46,12 +46,12 @@ const useStyles = makeStyles((theme) => ({
     card: {
         margin: '10px',
         '&:hover': {
-            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-            transition: 'background-color 0ms ease',
+            backgroundColor: theme.palette.action.hover,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
         '&:active': {
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            transition: 'background-color 100ms ease-out',
+            backgroundColor: theme.palette.action.selected,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
     },
 }));

diff --git a/src/components/anime/SourceCard.tsx b/src/components/anime/SourceCard.tsx
@@ -41,6 +41,14 @@ const useStyles = makeStyles((theme) => ({
     },
     card: {
         margin: '10px',
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        },
+        '&:active': {
+            backgroundColor: theme.palette.action.selected,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        },
     },
 }));
 

diff --git a/src/components/manga/ChapterCard.tsx b/src/components/manga/ChapterCard.tsx
@@ -46,12 +46,12 @@ const useStyles = makeStyles((theme) => ({
     card: {
         margin: '10px',
         '&:hover': {
-            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-            transition: 'background-color 0ms ease',
+            backgroundColor: theme.palette.action.hover,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
         '&:active': {
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            transition: 'background-color 100ms ease-out',
+            backgroundColor: theme.palette.action.selected,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
     },
 }));

diff --git a/src/components/manga/SourceCard.tsx b/src/components/manga/SourceCard.tsx
@@ -46,12 +46,12 @@ const useStyles = makeStyles((theme) => ({
     card: {
         margin: '10px',
         '&:hover': {
-            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-            transition: 'background-color 0ms ease',
+            backgroundColor: theme.palette.action.hover,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
         '&:active': {
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            transition: 'background-color 100ms ease-out',
+            backgroundColor: theme.palette.action.selected,
+            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         },
     },
     showMobile: {