feat: revamping the Navbar #1195

ngoworldcommunity · Jan 21, 2024 · 3f38589 · 3f38589
1 parent d38015d
commit 3f38589
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git 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;
-}
+}
diff --git 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
@@ -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 = () => {
                 ) : (
                   <>
                     <Button
-                      variant="outline"
+                      variant="Primary"
                       to="/auth/login"
                       fontweight="bold"
                     >
-                      Sign in
+                      <span>
+                        Contribute to Milan
+                        <IoChevronForwardSharp style={{ marginLeft: "5px" }} />
+                      </span>
                     </Button>
                     <Button to="/auth/signup" fontweight="bold" variant="solid">
-                      Sign up
+                      <span>
+                        Sign Up
+                        <IoChevronForwardSharp style={{ marginLeft: "5px" }} />
+                      </span>
                     </Button>
                   </>
                 )}