From 98a23721281cdae6095bd912c27cf8d76580b081 Mon Sep 17 00:00:00 2001
From: biskwt <akioni.uwu@gmail.com>
Date: Mon, 28 Nov 2022 17:12:12 +0100
Subject: [PATCH] Enabled Right Click + Disabled Selection + Card Image hover

---
 docs/assets/css/styles.css            |  5 -----
 src/components/Footer/Footer.js       |  2 +-
 src/components/Footer/FooterStyles.js | 17 ++++++++++++++---
 src/components/Home/AnimeCards.js     |  7 +------
 src/index.js                          |  5 +++--
 src/pages/AnimeDetails.js             |  6 +++---
 src/pages/FavouriteAnime.js           |  2 +-
 src/pages/PopularAnime.js             |  3 ++-
 src/pages/TrendingAnime.js            |  2 +-
 src/styles/globalStyles.js            | 14 +++++++++++++-
 10 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
index f158aaa..314381a 100644
--- a/docs/assets/css/styles.css
+++ b/docs/assets/css/styles.css
@@ -1,11 +1,6 @@
 /*=============== GOOGLE FONTS ===============*/
 @import url("https://fonts.googleapis.com/css2?family=Monsterrat");
 
-::selection {
-  color: #fff;
-  background-color: aqua; 
-}
-
 /*=============== VARIABLES CSS ===============*/
 :root {
   --header-height: 3.5rem;
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 3e1a237..5f35bd3 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -17,7 +17,7 @@ return (
 		<Column>
 		<img src="https://cdn.discordapp.com/attachments/985501610455224389/1041882683166445699/logo2.png" width="130" alt="Akio"></img>
 		
-		<Heading>Miruro</Heading>
+		<Heading>MIRURO</Heading>
 		</Column>
 		<Column>
 			<Heading>  </Heading>
diff --git a/src/components/Footer/FooterStyles.js b/src/components/Footer/FooterStyles.js
index bb88660..f91aba2 100644
--- a/src/components/Footer/FooterStyles.js
+++ b/src/components/Footer/FooterStyles.js
@@ -16,6 +16,15 @@ export const Container = styled.div`
   justify-content: center;
   max-width: 1000px;
   margin: 0 auto;
+
+  img {
+    border-radius: 5px;
+    transition: 0.5s;
+
+    :hover {
+      box-shadow: 0 0px 20px rgba(150, 150, 150, 1);
+    }
+  }
 `;
 
 export const Column = styled.div`
@@ -47,11 +56,13 @@ export const FooterLink = styled.a`
 `;
 
 export const Heading = styled.p`
-  font-size: 24px;
+  color: #CCC;
   width: 130px;
+  font-size: 24px;
+  font-family: 'Poppins', sans-serif;
+  font-weight: bold;
+  letter-spacing: 6px;
   text-align: center;
-  color: #aaa;
   margin-top: 10px;
   margin-bottom: 20px;
-  font-weight: bold;
 `;
\ No newline at end of file
diff --git a/src/components/Home/AnimeCards.js b/src/components/Home/AnimeCards.js
index 6946ea6..c67263c 100644
--- a/src/components/Home/AnimeCards.js
+++ b/src/components/Home/AnimeCards.js
@@ -69,7 +69,7 @@ function AnimeCards(props) {
                       : item.title.english)
                   }
                 >
-                  <img src={item.coverImage.large} alt="" />
+                  <img className="card-img" src={item.coverImage.large} alt="" />
                 </Link>
                 <p>
                   {item.title.english !== null
@@ -92,11 +92,6 @@ const Wrapper = styled.div`
     border-radius: 0.5rem;
     margin-bottom: 0.3rem;
     object-fit: cover;
-    transition: 0.2s;
-
-    :hover {
-      transform: scale(0.95);
-    }
 
     @media screen and (max-width: 600px) {
       width: 120px;
diff --git a/src/index.js b/src/index.js
index ea4736b..5653ebd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,13 +10,14 @@ root.render(
   </React.StrictMode>
 );
 
-window.addEventListener(
+//* Function to disable right click on website
+/* window.addEventListener(
   'contextmenu',
   function (e) {
     e.preventDefault();
   },
   false
-);
+); */
 
 // register the service worker
 serviceWorkerRegistration.register();
diff --git a/src/pages/AnimeDetails.js b/src/pages/AnimeDetails.js
index 932cdc3..6cfd775 100644
--- a/src/pages/AnimeDetails.js
+++ b/src/pages/AnimeDetails.js
@@ -94,7 +94,7 @@ function AnimeDetails() {
               />
               <ContentWrapper>
                 <Poster>
-                  <img src={animeDetails[0].gogoResponse.image} alt="" />
+                  <img className="card-img" src={animeDetails[0].gogoResponse.image} alt="" />
                   {localStorageDetails !== 0 &&
                   animeDetails[0].gogoResponse.numOfEpisodes > 1 ? (
                     <Button
@@ -287,10 +287,10 @@ const Button = styled(Link)`
   position: relative;
   top: -25%;
   white-space: nowrap;
-  transition: 0.5s;
+  transition: 0.2s;
 
   :hover {
-    transform: scale(1.05);
+    transform: scale(0.95);
     background-color: rgb(155 0 59);
     color: rgb(255 255 255);
   }
diff --git a/src/pages/FavouriteAnime.js b/src/pages/FavouriteAnime.js
index 39faf03..0468a03 100644
--- a/src/pages/FavouriteAnime.js
+++ b/src/pages/FavouriteAnime.js
@@ -38,7 +38,7 @@ function FavouriteAnime() {
                     : item.title.english)
                 }
               >
-                <img src={item.coverImage.large} alt="" />
+                <img className="card-img" src={item.coverImage.large} alt="" />
                 <p>
                   {item.title.english !== null
                     ? item.title.english
diff --git a/src/pages/PopularAnime.js b/src/pages/PopularAnime.js
index 0d49ac3..af3dd64 100644
--- a/src/pages/PopularAnime.js
+++ b/src/pages/PopularAnime.js
@@ -38,7 +38,7 @@ function PopularAnime() {
                     : item.title.english)
                 }
               >
-                <img src={item.coverImage.large} alt="" />
+                <img className="card-img" src={item.coverImage.large} alt="" />
                 <p>
                   {item.title.english !== null
                     ? item.title.english
@@ -93,6 +93,7 @@ const Links = styled(Link)`
     height: 235px;
     border-radius: 0.5rem;
     object-fit: cover;
+    
     @media screen and (max-width: 600px) {
       width: 120px;
       height: 180px;
diff --git a/src/pages/TrendingAnime.js b/src/pages/TrendingAnime.js
index cc5826f..1921c76 100644
--- a/src/pages/TrendingAnime.js
+++ b/src/pages/TrendingAnime.js
@@ -38,7 +38,7 @@ function TrendingAnime() {
                     : item.title.english)
                 }
               >
-                <img src={item.coverImage.large} alt="" />
+                <img className="card-img" src={item.coverImage.large} alt="" />
                 <p>
                   {item.title.english !== null
                     ? item.title.english
diff --git a/src/styles/globalStyles.js b/src/styles/globalStyles.js
index ca9cb24..3bcb4d5 100644
--- a/src/styles/globalStyles.js
+++ b/src/styles/globalStyles.js
@@ -1,6 +1,10 @@
 import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyle = createGlobalStyle`
+	::selection {
+		color: none;
+		background-color: none; 
+ 	}
 	* {
 		margin: 0;
 		padding: 0;
@@ -63,7 +67,7 @@ const GlobalStyle = createGlobalStyle`
 	}
 	.swiper-button-next,
 	.swiper-button-prev {
-    color: #FFFFFF !important;
+    	color: #FFFFFF !important;
 		padding-bottom: 20px;
 	}
 	.swiper-wrapper{
@@ -88,6 +92,14 @@ const GlobalStyle = createGlobalStyle`
 		-webkit-user-select: none;
 		-ms-user-select: none;
 	 }
+	
+	.card-img {
+		transition: 0.2s;
+		  
+		:hover {
+			transform: scale(0.95);
+		}
+	}
 	 
 	.skip-button {
 		padding: 0.3rem 1rem;