v4

Author: dev-nitinrai

src/components/Home/DashFeatures.js

@@ -8,7 +8,7 @@ const DashFeatures = () => {
   return (
     <StyledDashFeature>
         <Container>
-            <h2>And there is more! the 3-<b>POWERS</b>..</h2>
+            <h2>And there is more!</h2>
             <Flex justifyCenter gap='2rem'>
                 <Flex alignCenter spaceBetween flexColumn gap='4rem'>
                     <h4>Profile</h4>
@@ -38,18 +38,8 @@ const StyledDashFeature = styled.section`
     width: 100%;
     background: ${({ theme }) => theme.text};
     text-align: center;
-    padding-block: 10rem 6rem;
+    padding-block: 5rem;
     z-index: 1;
-    &::before {
-        content: '';
-        position: absolute;
-        top: -2px;
-        left: 0;
-        width: 100%;
-        height: 1.5rem;
-        border-radius: 0 0 10rem 10rem;
-        background: ${({ theme }) => theme.background};
-    }
     &::after {
         content: '';
         position: absolute;
@@ -69,7 +59,7 @@ const StyledDashFeature = styled.section`
         margin-inline: auto;
         color: ${({ theme }) => theme.background};
         & + div {
-            padding: 4rem 10vw;
+            padding: 4rem 10vw 0;
             & > * {
                 flex: 1;
                 height: auto;

src/components/Home/DashLook.js

@@ -10,7 +10,6 @@ const DashLook = () => {
       <Container>
         <img src={DashIMG} alt="nvnn mbjb" />
         <div>
-          <h2>It’s all about making things happen.</h2>
           <Flex alignCenter spaceBetween gap="2rem">
             <Flex alignCenter justifyCenter flexColumn gap='1rem'>
               <IoLogoReact />
@@ -40,15 +39,15 @@ export default DashLook;
 const StyleDashLook = styled.section`
   width: 100%;
   text-align: center;
-  padding-block: 6rem;
+  padding-block: 2rem;
   & > div > img {
     display: block;
     width: min(1080px, 100%);
     height: auto;
     margin-inline: auto;
   }
   & > div > div {
-    padding-block: 15rem 0;
+    padding-block: 2rem 0;
     & > div {
       padding-block: 4rem;
       & > * {

src/components/Home/Footer.js

@@ -45,19 +45,8 @@ const Footer = () => {
 export default Footer;
 
 const StyledFooter = styled.footer`
-  position: relative;
-  padding-block: 12.5rem 4rem;
+  padding-block: 5rem;
   text-align: center;
-  &::before {
-    content: "";
-    position: absolute;
-    top: -2px;
-    left: 0;
-    width: 100%;
-    height: 1.5rem;
-    border-radius: 0 0 10rem 10rem;
-    background: ${({ theme }) => theme.text};
-  }
   & form {
     position: relative;
     width: min(500px, 90%);

src/components/Home/Hero.js

@@ -1,36 +1,30 @@
-import { useState, useContext, useRef } from "react";
+import { useContext } from "react";
 import UserContext from "../../Hooks/userContext";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
-import { IconCircle, IconClose, IconSearch } from "../../assets/SVG";
+import { IconCircle, IconSearch } from "../../assets/SVG";
 import { Flex } from "../Styles/Flexbox";
 
 const Hero = () => {
-  const { setUsername } = useContext(UserContext);
+  const { username, setUsername } = useContext(UserContext);
 
-  const [isActive, setIsActive] = useState(false);
   const handleChange = (e) => setUsername(e.target.value);
   const navigate = useNavigate();
-  const ref = useRef(null);
 
-  const handleClick = () => {
-    ref.current.focus();
-    setIsActive(!isActive);
-  };
+  const handleSubmit = event => {
+    event.preventDefault();
+    if (username) {
+      return navigate("/dashboard");
+    } 
+  }
 
   return (
     <StyledHero>
       <Flex alignCenter justifyEnd flexColumn>
         <h1>Find Your Github Profile</h1>
         <form
-          className={isActive ? "active" : ""}
-          onSubmit={(e) => {
-            e.preventDefault();
-            navigate("/dashboard");
-          }}
-        >
+          onSubmit={handleSubmit}>
           <input
-            ref={ref}
             name="username"
             placeholder=":search username"
             type="text"
@@ -39,9 +33,7 @@ const Hero = () => {
         </form>
       </Flex>
       <StyledCircleButton>
-        <button className={isActive ? "active" : null} onClick={handleClick}>
-          {!isActive ? <IconSearch /> : <IconClose />}
-        </button>
+        <button onClick={handleSubmit}><IconSearch /></button>
         <IconCircle />
         <h2>A simple yet creative way to interact with your  GitHub profile.</h2>
         <p>Scroll Down</p>
@@ -57,22 +49,14 @@ export default Hero;
 const StyledHero = styled.section`
   position: relative;
   text-align: center;
-  height: 100%;
-  min-height: 100vh;
+  padding-top: 30vh;
   & > *:first-child {
-    position: relative;
     margin-inline: auto;
     width: min(600px, 100%);
-    padding-block: 22rem 2rem;
+    padding-bottom: 2rem;
     & form {
       width: 100%;
-      margin-block-end: -6rem;
-      opacity: 0;
       transition: ${({ theme }) => theme.transPrime};
-      &.active {
-        margin-block-end: -1rem;
-        opacity: 1;
-      }
       & input {
         display: block;
         border: 0;

src/components/Home/Layout.js

@@ -1,33 +1,15 @@
-import styled, { ThemeProvider } from "styled-components";
-import SmoothScrollbar from "../Global/smoothScroll";
+import { ThemeProvider } from "styled-components";
 import { GlobalStyle, darkTheme } from "../Styles/GlobalStyle";
 import Header from "./Header";
 
 const Layout = ({ children }) => {
   return (
     <ThemeProvider theme={darkTheme}>
-      <StyledHome className="Home">
-        <SmoothScrollbar />
         <GlobalStyle />
         <Header />
         <main>{children}</main>
-      </StyledHome>
     </ThemeProvider>
   );
 };
 
 export default Layout;
-
-const StyledHome = styled.div`
-  width: 100vw;
-  height: 100vh;
-  & .scrollbar-track {
-    background: transparent;
-    & .scrollbar-thumb {
-      background: ${({ theme }) => theme.pink};
-      width: 2px;
-      left: unset;
-      right: 2px;
-    }
-  }
-`

src/components/Profile/Header.js

@@ -2,7 +2,7 @@ import { useContext, useState } from "react";
 import UserContext from "../../Hooks/userContext";
 import styled from "styled-components";
 import { Flex } from "../Styles/Flexbox";
-import { IconSun, IconMoon } from "../../assets/SVG";
+import { BiMoon, BiSun } from "react-icons/bi";
 import RateLimit from "./RateLimit";
 import UserInfo from "./UserInfo";
 
@@ -41,7 +41,7 @@ const Header = ({ theme, themeToggler, userData, rateLimit }) => {
         </form>
 
         <button onClick={themeToggler}>
-          {theme === "light" ? <IconMoon /> : <IconSun />}
+          {theme === "light" ? <BiMoon /> : <BiSun />}
         </button>
       </Flex>
 
@@ -102,14 +102,15 @@ const StyledHeader = styled.header`
       }
     }
     & button {
-      width: 44px;
-      height: 44px;
-      background: ${({ theme }) => theme.text};
+      background: transparent;
       border: 0;
-      border-radius: 100%;
       cursor: pointer;
-      & path {
-        fill: ${({ theme }) => theme.background};
+      & svg {
+        width: 30px;
+        height: 30px;
+        & path {
+          fill: ${({ theme }) => theme.text};
+        }
       }
     }
   }

src/components/Profile/UserInfo.js

@@ -83,7 +83,7 @@ const StyledUserInfo = styled.div`
   justify-content: center;
   gap: 1rem;
   width: min(750px, 90%);
-  background-color: #f8f7ff;
+  background-color: ${({ theme }) => theme.background};
   border-radius: 10px;
   padding: 4rem 2rem;
   text-align: center;
@@ -98,6 +98,7 @@ const StyledUserInfo = styled.div`
     & svg {
       width: 18px;
       height: auto;
+      color: ${({ theme }) => theme.text};
     }
   }
   & .avatar {
@@ -138,14 +139,14 @@ const StyledStats = styled.ul`
   list-style: none;
   margin-block-start: 1rem;
   & > li {
-    background: #fff;
+    background: ${({ theme }) => theme.light};
     padding: 1rem 2rem;
     border-radius: 6px;
     & span {
       display: block;
-      color: #777;
+      color: ${({ theme }) => theme.textLighter};
       &:first-child {
-        color: #121316;
+        color: ${({ theme }) => theme.text};
         font-weight: 500;
       }
     }

src/components/Styles/GlobalStyle.js

@@ -4,7 +4,7 @@ import Mutant from "./Fonts/Mutant.otf";
 export const lightTheme = {
   purple: 'linear-gradient(120deg,#D270FF,#8338EC)',
   pink: '#FF006E',
-  background: 'radial-gradient(circle farthest-corner at 50% 50%,#f9fafe,#f9fafe 53%,#eff2f9)',
+  background: '#f8f9fe',
   text: '#121316',
   textLight: 'hsl(0, 0%, 13%)',
   textLighter: 'hsl(0, 0%, 30%)',
@@ -62,7 +62,7 @@ a {
     cursor: pointer;
 }
 h1 {
-    font-size: 3.052rem;
+    font-size: 3.52rem;
     font-family: 'Mutant';
 }
 h2 {font-size: 2.074rem;}