Styled navbar

frontend/src/components/navBar/navbar.css

@@ -112,15 +112,39 @@ a {
 .navbar-menu_container button {
   padding: 0.5rem 1rem;
   color: #fff;
-  background: #FF4820;
+  background: #fd603d;
   font-family: var(--font-family);
-  font-weight: 500;
+  font-weight: 450;
   font-size: 18px;
   line-height: 25px;
   border: none;
   outline: none;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: 20px;
+}
+
+.navbar-sign button:hover,
+.navbar-menu_container button:hover {
+  background-color: #ff3f14;
+  color: #ffffff;
+}
+
+.navbar-sign button:hover,
+.navbar-menu_container button:hover {
+  -webkit-transform: scale(1.1);
+  -moz-transform: scale(1.1);
+  -o-transform: scale(1.1);
+}
+
+.navbar-sign button,
+.navbar-menu_container button {
+  -webkit-transform: scale(1);
+  /* Browser Variations: */
+  -moz-transform: scale(1);
+  -o-transform: scale(1);
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  -o-transition-duration: 0.5s;
 }
 
 .navbar-menu {

frontend/src/components/navBar/navbar.js

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { RiMenu3Line, RiCloseLine } from 'react-icons/ri';
+import { useHistory, useLocation, Link } from "react-router-dom";
 import logo from './images/logo.svg';
 import './navbar.css';
 
 const Navbar = () => {
     const [toggleMenu, setToggleMenu] = useState(false);
+    const history = useHistory();
+    const location = useLocation();
+
+    const isActive = (history, path) => {
+        if (history.location.pathname === path) {
+            return { color: "#F05454" }
+        } else {
+            return { color: "#ffffff" }
+        }
+    };
 
     return (
         <div className="gradient_background">
@@ -14,15 +25,15 @@ const Navbar = () => {
                         <img src={logo} />
                     </div>
                     <div className="navbar-links_container">
-                        <p><a href="/">Home</a></p>
-                        <p><a href="#">Video summarizer</a></p>
-                        <p><a href="#">Digital human</a></p>
-                        <p><a href="/about-us">About us</a></p>
-                        <p><a href="#">Contact us</a></p>
+                        <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
+                        <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
+                        <p><Link style={isActive(history, '#')} to="#">Digital human</Link></p>
+                        <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
+                        <p><Link style={isActive(history, '#')} to="#">Contact us</Link></p>
                     </div>
                 </div>
                 <div className="navbar-sign">
-                    <p>Sign in</p>
+                    <p><Link style={isActive(history, '/login')} to="/login">Sign in</Link></p>
                     <button type="button">Sign up</button>
                 </div>
                 <div className="navbar-menu">
@@ -32,11 +43,11 @@ const Navbar = () => {
                     {toggleMenu && (
                         <div className="navbar-menu_container scale-up-center">
                             <div className="navbar-menu_container-links">
-                                <p><a href="/">Home</a></p>
-                                <p><a href="#">Video summarizer</a></p>
-                                <p><a href="#">Digital human</a></p>
-                                <p><a href="#">About us</a></p>
-                                <p><a href="#">Contact us</a></p>
+                                <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
+                                <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
+                                <p><Link style={isActive(history, '#')} to="#">Digital human</Link></p>
+                                <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
+                                <p><Link style={isActive(history, '#')} to="#">Contact us</Link></p>
                             </div>
                             <div className="navbar-menu_container-links-sign">
                                 <p>Sign in</p>

frontend/src/index.css

 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
 
 :root {
-  --font-family: 'Manrope', sans-serif;
+  /*--font-family: 'Manrope', sans-serif;*/
+  --font-family: 'Open Sans', sans-serif;
+  /*--font-family: 'Space Mono', monospace;*/
 
   --gradient-text: linear-gradient(89.97deg, #AE67FA 1.84%, #F49867 102.67%);
   --gradient-bar: linear-gradient(103.22deg, #AE67FA -13.86%, #F49867 99.55%);