💄 ✨ minor UI enhancements

src/components/layout/DashboardLayout.jsx

@@ -8,15 +8,11 @@ import {
   useNavigate,
 } from "react-router-dom";
 import Login from "../../pages/auth/Login";
-import {BsFillArrowUpCircleFill} from 'react-icons/bs'
-
 
 import "../../styles/argon.css";
 import "../../styles/style.css";
-import BackToTop from "../common/BackToTop";
 
 const DashboardLayout = () => {
-
   const navigate = useNavigate();
 
   const logout = () => {
@@ -46,7 +42,6 @@ const DashboardLayout = () => {
         </Container>
       </Navbar>
       <Outlet />
-     <BackToTop/>
     </React.Fragment>
   );
 };

src/components/layout/HomeLayout.jsx

@@ -7,7 +7,6 @@ import { Link, Outlet } from "react-router-dom";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "../../styles/argon.css";
 import "../../styles/style.css";
-import BackToTop from "../common/BackToTop";
 
 const HomeLayout = () => {
 
@@ -118,11 +117,7 @@ const HomeLayout = () => {
             </Col>
           </Row>
         </Container>
-      </footer>
-
-
-      <BackToTop/>
-
+      </footer>      
     </React.Fragment>
   );
 };

src/pages/portfolio/template/common/BackToTop.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+import { FaChevronUp } from "react-icons/fa";
+
+const BackToTop = () => {
+  const [backToTop, setBackToTop] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > 150) {
+        setBackToTop(true);
+      } else {
+        setBackToTop(false);
+      }
+    });
+  }, []);
+
+  const scrollUp = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <>
+      {backToTop && (
+        <div className="back-to-top-div">
+          <FaChevronUp onClick={() => scrollUp()} size={24} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default BackToTop;

src/pages/portfolio/template/common/Footer.jsx

@@ -6,7 +6,7 @@ const Footer = ({ portfolioDetails }) => {
     <footer>
       <Container className="bg-tranparent py-4">
         <div className="text-center">
-          <p className="mb-0">Copyrights © 2022 {portfolioDetails?.name}</p>
+          <p className="mb-0">Copyrights © 2023 {portfolioDetails?.name}</p>
         </div>
       </Container>
     </footer>

src/pages/portfolio/template/template1/Template1.jsx

@@ -4,13 +4,14 @@ import Projects from "./components/Projects";
 import Skills from "./components/Skills";
 import Works from "./components/Works";
 import Toggle from "../common/Toggle";
+import BackToTop from "../common/BackToTop";
+
 import { useParams } from "react-router";
 import { apiCommon } from "../../../../services/models/CommonModel";
 
 import { PageLoader } from "../../../../components/common/CustomLoaders";
 
 import "./styles/style.css";
-import BackToTop from "../../../../components/common/BackToTop";
 
 const Portfolio = () => {
   const [isLoading, setLoading] = useState(true);
@@ -28,6 +29,7 @@ const Portfolio = () => {
         });
         setLoading(false);
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.log(error);
       }
     };
@@ -42,15 +44,15 @@ const Portfolio = () => {
       ) : (
         <React.Fragment>
           <div className={`text-${portfolioDetails.font} template1`}>
-            <Toggle  style={{bottom:'30px'}}/>
+            <Toggle style={{ bottom: "30px" }} />
+            <BackToTop />
             <Intro portfolioDetails={portfolioDetails} />
             <Projects portfolioDetails={portfolioDetails} />
             <Skills portfolioDetails={portfolioDetails} />
             <Works portfolioDetails={portfolioDetails} />
           </div>
         </React.Fragment>
       )}
-      <BackToTop/>
     </React.Fragment>
   );
 };

src/pages/portfolio/template/template1/styles/style.css

@@ -34,7 +34,7 @@
 
 .img-align {
   justify-content: left;
-  margin-left: -50px;
+  margin-left: -80px;
 }
 @media only screen and (max-width: 770px) {
   .img-align {
@@ -113,23 +113,6 @@ li.timeline-item::before {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
-.toggle-div {
-  position: fixed;
-  width: 52px;
-  height: 50px;
-  bottom: 10px;
-  right: 10px;
-  background-color: #fff;
-  border-radius: 50%;
-  text-align: center;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-
 .template1 .btn-resume-1 {
   background-color: transparent;
   border: 1px solid #fff;

src/pages/portfolio/template/template1/styles/style.scss

@@ -115,22 +115,6 @@ li.timeline-item::before {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
-.toggle-div {
-  position: fixed;
-  width: 60px;
-  height: 60px;
-  bottom: 70px;
-  right: 10px;
-  background-color: #fff;
-  border-radius: 50px;
-  text-align: center;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-  z-index: 10;
-  svg {
-    margin-top: 18px;
-  }
-}
-
 .template1 .btn-resume-1 {
   background-color: transparent;
   border: 1px solid #fff;

src/pages/portfolio/template/template2/Template2.jsx

@@ -8,11 +8,11 @@ import Gallery from "./components/Gallery";
 import Footer from "../common/Footer";
 
 import Toggle from "../common/Toggle";
+import BackToTop from "../common/BackToTop";
 
 import { PageLoader } from "../../../../components/common/CustomLoaders";
 
 import "./styles/style.css";
-import BackToTop from "../../../../components/common/BackToTop";
 
 const Portfolio = () => {
   const [isLoading, setLoading] = useState(true);
@@ -33,6 +33,7 @@ const Portfolio = () => {
         });
         setLoading(false);
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.log(error);
       }
     };
@@ -47,14 +48,14 @@ const Portfolio = () => {
       ) : (
         <React.Fragment>
           <Toggle />
+          <BackToTop />
           <div className={`text-${portfolioDetails.font} ${className}`}>
             <Intro portfolioDetails={portfolioDetails} />
             <Gallery portfolioDetails={portfolioDetails} />
             <Footer portfolioDetails={portfolioDetails} />
           </div>
         </React.Fragment>
       )}
-      <BackToTop/>
     </React.Fragment>
   );
 };

src/pages/portfolio/template/template2/styles/style.css

@@ -14,21 +14,31 @@
 .name::before {
   content: "";
   display: block;
-  width: 11%;
+  width: 200px;
   height: 2px;
   left: 0;
   top: 50%;
   position: absolute;
 }
+@media only screen and (max-width: 700px) {
+  .name::before {
+    width: 50px;
+  }
+}
 .name::after {
   content: "";
   display: block;
-  width: 11%;
+  width: 200px;
   height: 2px;
   right: 0;
   top: 50%;
   position: absolute;
 }
+@media only screen and (max-width: 700px) {
+  .name::after {
+    width: 50px;
+  }
+}
 
 .gallery .col-md-3 {
   padding: 0.35rem;
@@ -39,4 +49,4 @@
 
 .bg-dark {
   background-color: #212121 !important;
-} /*# sourceMappingURL=style.css.map */
+}/*# sourceMappingURL=style.css.map */

src/pages/portfolio/template/template2/styles/style.scss

@@ -1,31 +1,45 @@
-.ba1::before,.ba1::after{
+$tab-device: 700px;
+
+.ba1::before,
+.ba1::after {
   background: white;
 }
-.ba2::before,.ba2::after{
+.ba2::before,
+.ba2::after {
   background: black;
 }
+
 .name {
   position: relative;
 
   &::before {
     content: "";
     display: block;
-    width: 120px;
+    width: 200px;
     height: 2px;
-    
+
     left: 0;
     top: 50%;
     position: absolute;
+
+    @media only screen and (max-width: $tab-device) {
+      width: 50px;
+    }
   }
+
   &::after {
     content: "";
     display: block;
-    width: 120px;
+    width: 200px;
     height: 2px;
-    
+
     right: 0;
     top: 50%;
     position: absolute;
+
+    @media only screen and (max-width: $tab-device) {
+      width: 50px;
+    }
   }
 }