footer added (#1225)

* footer added

* style: format

* .

* updated footer

* fix: errors,imports

---------

Co-authored-by: Narayan soni <narayansoni854@gmail.com>

src/components/SideBar/index.css

@@ -198,7 +198,7 @@ footer {
 }
 
 .footer-link:hover {
-  color: var(--color);
+  color: #5f85db;
 }
 
 .copyright {

src/index.css

@@ -262,7 +262,7 @@ input:focus {
 }
 
 .centeredScroll {
-  margin-left: 0;
+  margin-left:40%;
 }
 
 .scrollTop:hover {

src/pages/FooterPages/About/index.jsx

@@ -3,6 +3,7 @@ import "../design.css";
 
 import { useEffect, useState } from "react";
 
+import Footer from "../Footer";
 import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
 import about from "../../../assets/about-us.webp";
 import { useNavigate } from "react-router-dom";
@@ -164,6 +165,7 @@ const About = () => {
           </div>
         </div>
       </div>
+      <Footer />
     </div>
   );
 };

src/pages/FooterPages/ContributorPage/index.jsx

@@ -5,6 +5,7 @@ import { Box, Pagination } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
 import ContributorCard from "./ContributorCard";
+import Footer from "../Footer";
 import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
 import backgroundimg from "../../../assets/contributors.webp";
 import { useNavigate } from "react-router-dom";
@@ -129,6 +130,7 @@ function Contributor() {
           <h1 className="no-result">Sorry no result matches your query</h1>
         )}
       </div>
+      <Footer />
     </div>
   );
 }

src/pages/FooterPages/Feedback/index.jsx

@@ -3,7 +3,9 @@ import "../design.css";
 
 import React, { useRef } from "react";
 
-import { SideBar } from "../../../components";
+import Footer from "../Footer";
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import Scroll from "../../../reusableComponents";
 import emailjs from "@emailjs/browser";
 import { playSuccessSound } from "../../../js/sounds";
 import { useSnackbar } from "notistack";
@@ -36,7 +38,16 @@ export const Feedback = () => {
 
   return (
     <>
-      <SideBar />
+      <div
+        className="back-icon"
+        style={{ height: "90px", cursor: "pointer", marginTop: "35px" }}
+        onClick={() => navigate("/dummygram/")}
+      >
+        <KeyboardBackspaceIcon className="icon" />
+      </div>
+      <h1 style={{ textAlign: "center", color: "#5f85db" }}>
+        Your opinion matters to us !
+      </h1>
       <div className="feedback-form-container footer-page-para-color">
         <span className="grad3 grad"></span>
         <span className="grad4 grad"></span>
@@ -75,6 +86,8 @@ export const Feedback = () => {
           </button>
         </form>
       </div>
+      <Scroll />
+      <Footer />
     </>
   );
 };

src/pages/FooterPages/Footer/index.css

@@ -0,0 +1,35 @@
+.footerpages-footer {
+  background-color: var(--input-bg);
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  margin-top: 1rem;
+}
+.footerpages-footer ul {
+  list-style: none;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  padding-bottom: 1rem;
+}
+.footerpages-footer ul li {
+  padding: 1rem;
+  color: var(--text-color);
+}
+.footerpages-footer .footer-link {
+  text-decoration: none;
+}
+.footerpages-footer p {
+  color: var(--text-color);
+}
+@media only screen and (max-width: 760px) {
+  .footerpages-footer {
+    margin-bottom: 4.5rem;
+  }
+  .footerpages-footer ul {
+    flex-direction: column;
+  }
+  .footerpages-footer ul li {
+    padding: 0.2rem;
+  }
+}

src/pages/FooterPages/Footer/index.jsx

@@ -0,0 +1,41 @@
+import "./index.css";
+
+import { Link } from "react-router-dom";
+import { Logo } from "../../../reusableComponents";
+
+const Footer = () => {
+  return (
+    <div className="footerpages-footer">
+      <ul>
+        <li>
+          <Link to="/dummygram/about" className="footer-link">
+            About
+          </Link>
+        </li>
+        <li>
+          <Link to="/dummygram/feedback" className="footer-link">
+            Feedback
+          </Link>
+        </li>
+        <li>
+          <Link to="/dummygram/contributors" className="footer-link">
+            Contributors
+          </Link>
+        </li>
+        <li>
+          <Link to="/dummygram/help-center" className="footer-link">
+            Help-center
+          </Link>
+        </li>
+        <li>
+          <Link to="/dummygram/guidelines" className="footer-link">
+            Guidelines
+          </Link>
+        </li>
+      </ul>
+      <p>&copy; 2023 NARAYAN SONI. All rights reserved.</p>
+    </div>
+  );
+};
+
+export default Footer;

src/pages/FooterPages/Guidelines/index.jsx

@@ -3,6 +3,7 @@ import "../design.css";
 
 import { Link, useNavigate } from "react-router-dom";
 
+import Footer from "../Footer";
 import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
 import background from "../../../assets/guidelines.webp";
 
@@ -177,6 +178,7 @@ const Guidelines = () => {
           </ul>
         </div>
       </div>
+      <Footer />
     </div>
   );
 };

src/pages/FooterPages/HelpCenter/index.jsx

@@ -3,6 +3,7 @@ import "./index.css";
 import React, { useState } from "react";
 
 import Faq from "../../../assets/preview.webp";
+import Footer from "../Footer";
 import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
 import { useNavigate } from "react-router-dom";
 
@@ -69,6 +70,7 @@ export default function HelpCenter() {
           );
         })}
       </div>
+      <Footer />
     </>
   );
 }