Merge pull request #21 from wethmiranasinghe/main

Update Login.jsx

front-end/src/App.jsx

@@ -5,6 +5,7 @@ import Footer from "./components/Footer";
 import './components/Header.css'
 // import './components/Footer.css'
 
+import Login from './Pages/Login';
 import Home from './Pages/Home';
 import Team from './Pages/Team';
 import News from './Pages/News';
@@ -25,6 +26,7 @@ function App() {
     <BrowserRouter>
     <nav> <Header/> </nav>
       <Routes>
+          <Route path = 'login' element = {<Login />} />
           <Route path = '/' element = {<Home />} />
           <Route path = 'project overview' element = {<SharedLayoutProjectOverview />}>
             <Route index element = {<SharedLayoutProjectOverview />}/>

front-end/src/Pages/Login.jsx

@@ -0,0 +1,9 @@
+function Login() {
+    return(
+      <>
+      <h1>Login</h1>
+        </>
+    );
+  }
+
+  export default Login;

front-end/src/components/Header.css

@@ -4,7 +4,7 @@
     color-scheme: light dark;
     color: rgba(0, 0, 0, 0.87);
     background-color: #ffffff;
-
+    text-decoration: none;
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
@@ -20,11 +20,11 @@
   a {
     font-weight: 600;
     font-size: 0.9em;
-    color: #646cff;
-    text-decoration: inherit;
+    color: white;
+    text-decoration: none;
   }
   a:hover {
-    color: #535bf2;
+    color: white;
   }
 
   h1 {
@@ -46,7 +46,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 20px;
+    margin-top: 40px;
     padding: 0px 0px;
     margin-bottom: 0px;
     box-sizing: border-box;
@@ -181,9 +181,8 @@
     }
 
     a {
-      font-weight: 500;
+      font-weight: 600;
       font-size: 0.8em;
-      color: #646cff;
       text-decoration: inherit;
     }
 

front-end/src/components/Header.jsx

@@ -1,20 +1,40 @@
-import React, {useState} from 'react';
-import {Link, Outlet} from 'react-router-dom';  // //Add page routing using router dom
+import React, {useState, useEffect} from 'react';
+import {Link, Outlet, useLocation} from 'react-router-dom';  // //Add page routing using router dom
 
 import cylcleLogo from '../assets/CYCLE-logo.png';
 import erasmusLogo from '../assets/erasmus-plus-logo.jpg';
+import style from '../pageStyling/Login.module.css';
 
 function Header(){
     // Constants for hamburger menu
     const [menuOpen, setMenuOpen] = useState(false);
 
+    // Constants for login button
+    const [isVisible, setIsVisible] = useState(true);
+
+    // Get the current location
+    const location = useLocation();
+
     // set hamburger menu to close when a link is clicked
     const handleLinkClick = () => {
         setMenuOpen(false);
+        setIsVisible(false);
     }
 
+    // Update the visibility of the login button based on the current location
+    useEffect(() => {
+        if (location.pathname === '/login') {
+            setIsVisible(false);
+        } else {
+            setIsVisible(true);
+        }
+    })
+
     return(
         <header>
+            <div>
+            {isVisible && <button className={style["Login-button"]}><Link to = '/login' onClick={handleLinkClick}>LOGIN</Link></button>}
+            </div>
             <div className='logo-block'>
             {/* Erasmus logo */}
             <a href = "https://erasmus-plus.ec.europa.eu/"><img src={erasmusLogo} alt="Erasmus+ Logo" className="Erasmus-plus-Logo"></img></a>

front-end/src/pageStyling/Login.module.css

@@ -0,0 +1,20 @@
+.Login-button{
+    position: absolute;
+    display: flex;
+    align-self: flex-start;
+    top: 30px;
+    right: 30px;
+    padding: 10px 22px;
+    font-size: 16px;
+    background-color: #203a90;
+    text-decoration: none;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.Login-button:hover {
+    background-color: #0056b3;
+}
+