From 3f385897c11bda981f4a8dfff2b9ec5a5471191a Mon Sep 17 00:00:00 2001 From: Pranay Gaikwad Date: Sun, 21 Jan 2024 18:40:22 +0530 Subject: [PATCH] feat: revamping the Navbar #1195 --- .../Button/GlobalButton/Button.module.css | 8 ++++---- src/components/Navbar/Navbar.css | 8 ++++---- src/components/Navbar/Navbar.jsx | 13 ++++++++++--- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/Button/GlobalButton/Button.module.css b/src/components/Button/GlobalButton/Button.module.css index feef3075..4dc12d02 100644 --- a/src/components/Button/GlobalButton/Button.module.css +++ b/src/components/Button/GlobalButton/Button.module.css @@ -1,12 +1,12 @@ .btn { - padding: 8px 15px; + padding: 8px 25px; text-align: center; cursor: pointer; - border-radius: 8px; + border-radius: 40px; display: flex; justify-content: center; align-items: center; - gap: 10px; + gap: 15px; width: auto; letter-spacing: 1px; font-weight: 500; @@ -75,4 +75,4 @@ .btn.bold { font-weight: 600; -} +} \ No newline at end of file diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css index c61d3b6f..fd497dec 100644 --- a/src/components/Navbar/Navbar.css +++ b/src/components/Navbar/Navbar.css @@ -57,25 +57,25 @@ text-decoration: none; cursor: pointer; font-family: Poppins, sans-serif; - color: #28183b; + color: #e26959; font-size: 1rem; } .nav-item div:not(.active-link) { - border-bottom: 2px solid #e26959; + border-bottom: 2px solid #28183b; width: 0%; margin: auto; transition: all 0.2s ease-in; } .nav-item:hover div { - border-bottom: 2px solid #e26959; + border-bottom: 2px solid #28183b; width: 50%; animation: all 0.5 infinite; } .active-link { - border-bottom: 2px solid #e26959; + border-bottom: 2px solid #28183b; width: 50%; margin: auto; } diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 1df89ef0..5054071e 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -5,6 +5,7 @@ import { Link, useNavigate, useLocation } from "react-router-dom"; import Cookies from "js-cookie"; import { FaBars } from "react-icons/fa"; import { IoMdClose } from "react-icons/io"; +import { IoChevronForwardSharp } from "react-icons/io5"; import Button from "../Button/GlobalButton/Button"; import ClickAwayListener from "../../utils/ClickAwayListener"; @@ -127,14 +128,20 @@ const Navbar = () => { ) : ( <> )}