Enabled Right Click + Disabled Selection + Card Image hover

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;

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>

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;
 `;

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;

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();

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);
   }

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

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;

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

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;