Added Icons to the Footer links (#552)

Hey @PSS2134 I have added icons to the Footer Links - Fixes #547 ![image](https://github.com/user-attachments/assets/be072753-a36a-4dfd-9829-7064c5686ec1) Please take a look and review It, Thank you!
HimanshuNarware · Aug 9, 2024 · afda8a4 · afda8a4
2 parents 6e24266 + 81e81be
commit afda8a4
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Component/Footer.css b/src/Component/Footer.css
@@ -1,13 +1,13 @@
 .footer {
     background-color: #000;
     color: #fff;
-    padding: 40px 20px;
+    padding: 20px 0;
 }
 
 .footer-wrapper {
     display: grid;
     grid-template-columns: 1fr 2fr;
-    gap: 40px;
+    gap: 0;
     max-width: 1200px;
     margin: 0 auto;
 }
@@ -29,7 +29,7 @@
     padding: 2px;
     margin-right: 5px;
     width: 30px;
-    border: 2px solid;
+    border: 2px solid #8a2be2; /* Ensure border color matches theme */
     border-radius: 20px;
 }
 
@@ -41,12 +41,12 @@
 
 .footer-section-links {
     display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px; /* Added spacing between links */
 }
 
 .footer-subsection {
     flex: 1;
-    margin-left: 5%;
 }
 
 .footer-heading {
@@ -56,7 +56,7 @@
 }
 
 .footer-links {
-    list-style-type: none;
+    list-style: none;
     padding: 0;
 }
 
@@ -68,9 +68,10 @@
 .footer-links li a,
 .footer-links li span {
     position: relative;
-    color: white;
+    color: #fff;
     text-decoration: none;
-    display: inline-block;
+    display: flex;
+    align-items: center;
     transition: color 0.3s ease-in-out;
 }
 
@@ -82,8 +83,8 @@
     height: 2px;
     bottom: -5px;
     left: 0;
-    background-color: white;
-    transition: all 0.3s ease-in-out;
+    background-color: #8a2be2;
+    transition: width 0.3s ease-in-out;
 }
 
 .footer-links li:hover a,
@@ -94,7 +95,6 @@
 .footer-links li:hover a::after,
 .footer-links li:hover span::after {
     width: 100%;
-    background-color: #8a2be2;
 }
 
 .footer-social-icons {
@@ -104,7 +104,7 @@
 }
 
 .footer-social-icons a {
-    color: white;
+    color: #fff;
     font-size: 24px;
     transition: transform 0.3s, color 0.3s;
 }
@@ -117,7 +117,7 @@
 .footer-qr {
     width: 90px;
     margin: 0 auto;
-    display: block;
+    margin-left: 49px;
 }
 
 .footer-rate-us {
@@ -128,7 +128,7 @@
 }
 
 .footer-rate-us a {
-    color: white;
+    color: #fff;
     font-size: 20px;
     text-decoration: none;
     transition: color 0.3s, transform 0.3s;
@@ -166,7 +166,15 @@
     border-top: 1px solid #333;
     font-size: 0.9em;
     font-style: italic;
-    max-height: 10px;
+}
+
+.footer-link-icon {
+    font-size: 16px;
+    color: #8a2be2;
+    background: none;
+    border: none;
+    padding: 0;
+    margin-right: 8px;
 }
 
 @media screen and (max-width: 768px) {
@@ -178,51 +186,38 @@
     .footer-section-links {
         flex-direction: column;
         align-items: center;
+        gap: 10px; /* Adjusted gap for better alignment */
     }
-    .footer-title{
-     justify-content: center;
+
+    .footer-title {
+        justify-content: center;
     }
 
-    .footer-pera{
+    .footer-pera {
         max-width: 450px;
         margin: 0 auto;
         text-align: center;
-        margin-top: 3px;
     }
 
     .footer-subsection {
         margin-left: 0;
         margin-bottom: 20px;
-        text-align: center;
-    }
-
-    .footer-qr-section {
-        text-align: center;
     }
 
     .footer-qr {
         margin: 0 auto 10px;
     }
 
     .footer-rate-us {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
         margin: 0 auto;
     }
 
-    .footer-star-icon {
-        display: inline-flex;
-        align-items: center;
-    }
-
     .rate-us {
         margin-top: 5px;
-        margin-left: -1rem !important;
+        margin-left: 0;
     }
 }
 
-
 @media screen and (max-width: 600px) {
     .footer-title {
         font-size: 1.5em;
@@ -237,15 +232,15 @@
     }
 
     .footer-links li {
-        font-size: 16px;
+        font-size: 14px; /* Reduced size for smaller screens */
     }
 
     .footer-social-icons a {
         font-size: 20px;
     }
 
     .footer-qr {
-        width: 80px; /* Adjust width for smaller screens */
+        width: 80px;
         margin-left: 2px;
     }
 

diff --git a/src/Component/Footer.jsx b/src/Component/Footer.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { FaGithub, FaLinkedin, FaStar } from 'react-icons/fa';
-import { FaXTwitter } from "react-icons/fa6";
+import { FaGithub, FaLinkedin, FaStar, FaTwitter, FaFacebook, FaInstagram, FaFileAlt, FaLock, FaGavel, FaCode } from 'react-icons/fa';
 import favicon from "../image/footer/favicon.png";
 import img from "../image/footer/footer-qr.jpg";
 import './Footer.css';
+import { FaXTwitter } from "react-icons/fa6";
+
 
 function Footer() {
   const currentYear = new Date().getFullYear();
@@ -21,26 +22,30 @@ function Footer() {
         </div>
         <div className="footer-section footer-section-links">
           <div className="footer-subsection">
-            <h4 className="footer-heading">Documentation</h4>
+            <h4 className="footer-heading">
+              Documentation
+            </h4>
             <ul className="footer-links">
               <li onClick={() => window.open('https://opensource.com/resources/what-open-source')}>
-                <span>What is Open-Source</span>
+                <span> 📄 What is Open-Source</span>
               </li>
               <li onClick={() => window.open('https://opensource.guide/how-to-contribute/')}>
-                <span>What is Git and GitHub</span>
+                <span> 📄 What is Git and GitHub</span>
               </li>
               <li onClick={() => window.open('https://docs.github.com/en/get-started/using-git/about-git')}>
-                <span>How to start contributing to Open-Source</span>
+                <span> 📄 How to start contributing to Open-Source</span>
               </li>
             </ul>
           </div>
           <div className="footer-subsection">
-            <h4 className="footer-heading">Legal</h4>
+            <h4 className="footer-heading">
+               Legal
+            </h4>
             <ul className="footer-links">
-              <li><span><a href="/privacypolicy">Privacy Policy</a></span></li>
-              <li><span><a href="/terms">Terms and Conditions</a></span></li>
-              <li><span><a href="/licensing">MIT License</a></span></li>
-              <li><span><a href="/codeofconduct">Code of Conduct</a></span></li>
+              <li><span><a href="/privacypolicy"><FaLock className="footer-link-icon" /> Privacy Policy</a></span></li>
+              <li><span><a href="/terms"><FaGavel className="footer-link-icon" /> Terms and Conditions</a></span></li>
+              <li><span><a href="/licensing"><FaCode className="footer-link-icon" /> MIT License</a></span></li>
+              <li><span><a href="/codeofconduct"><FaFileAlt className="footer-link-icon" /> Code of Conduct</a></span></li>
             </ul>
           </div>
           <div className="footer-subsection">