From b2305456eac2050a823964de67d4cec81aee79ae Mon Sep 17 00:00:00 2001
From: ANKeshri <ankeshri2003@gmail.com>
Date: Tue, 2 Jul 2024 20:26:53 +0530
Subject: [PATCH] change colour and add hover effect

---
 package-lock.json    |  1 +
 package.json         |  1 +
 src/pages/footer.css | 29 ++++++++++++++++++++++++++++-
 src/pages/footer.js  |  4 ++--
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4a81c3c..bb307f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "react-scripts": "5.0.1",
         "react-simple-chatbot": "^0.6.1",
         "react-toastify": "^10.0.5",
+        "urix": "^0.1.0",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
diff --git a/package.json b/package.json
index 8c3f1c4..dfd178d 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "react-scripts": "5.0.1",
     "react-simple-chatbot": "^0.6.1",
     "react-toastify": "^10.0.5",
+    "urix": "^0.1.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/pages/footer.css b/src/pages/footer.css
index cd7d018..ee16ff2 100644
--- a/src/pages/footer.css
+++ b/src/pages/footer.css
@@ -108,8 +108,35 @@
   align-items: center;
   width: 1.5rem;
   height: 1.5rem;
+  color:rgba(0,0,0,0.5);
+  transition: all 0.3s ease-in-out;
 }
 
 .footer-icons .icon:last-child {
   margin-right: 0;
-}
\ No newline at end of file
+}
+body.active .footer-icons .icon{
+color: white;
+}
+.footer-icons .git:hover{
+  color: #000016;
+  transform: scale(1.2);
+  background-color: white;
+  border-radius: 50%;
+}
+.footer-icons .linkedin:hover{
+  color: #0077B5;
+  transform: scale(1.2);
+  background-color: white;
+}
+body.active .footer-icons .git:hover{
+  color: #000016;
+  transform: scale(1.2);
+  background-color: white;
+  border-radius: 50%;
+}
+body.active .footer-icons .linkedin:hover{
+  color: #0077B5;
+  transform: scale(1.2);
+  background-color: white;
+}
diff --git a/src/pages/footer.js b/src/pages/footer.js
index 0587435..bf109cb 100644
--- a/src/pages/footer.js
+++ b/src/pages/footer.js
@@ -18,10 +18,10 @@ const Footer = () => {
           </div>
           <div className="footer-item footer-icons">
             <a href="https://github.com/AbhiDiva96/75per">
-              <GitHubIcon className="icon" />
+              <GitHubIcon className="icon git" />
             </a>
             <a href="https://www.linkedin.com/in/abhishek-kumar-062231198/">
-              <LinkedInIcon className="icon" />
+              <LinkedInIcon className="icon linkedin" />
             </a>
           </div>
         </div>