Merge pull request #71 from wethmiranasinghe/main

Repository page Updated
cepdnaclk · Sep 1, 2024 · d1bdc75 · d1bdc75
2 parents 90a95e9 + 216c500
commit d1bdc75
Show file tree

Hide file tree

Showing 20 changed files with 105 additions and 25 deletions.
diff --git a/front-end/src/Pages/Dashboard.jsx b/front-end/src/Pages/Dashboard.jsx
@@ -1,7 +1,11 @@
+import style from "../components/Dashboard.module.css";
+
 function Dashboard() {
     return(
       <>
-      <h1>Dashboard</h1>
+      <div className={style["DashboardTitle"]}>
+          <h3>Dashboard</h3>
+    </div>
         </>
     );
   }

diff --git a/front-end/src/Pages/Deliverables.module.css b/front-end/src/Pages/Deliverables.module.css
@@ -7,6 +7,7 @@
   text-align: left;
   margin-bottom: 1%;
   font-size: 20px;
+  font-family: 'Caudex';
 }
 
 /* Table containers */

diff --git a/front-end/src/Pages/Gallery.jsx b/front-end/src/Pages/Gallery.jsx
@@ -21,7 +21,7 @@ const Gallery = () => {
 
     return(
       <>
-      <div className="Gallery">
+      <div className="GalleryTitle">
         <h3>Gallery</h3>
       </div>
       <div className = "gallery-container">

diff --git a/front-end/src/Pages/Home.jsx b/front-end/src/Pages/Home.jsx
@@ -107,6 +107,7 @@ function Home() {
       <div className={style["proj_desc"]}>
         <div>
           <span style={{ fontWeight: 'bold', fontSize: '26px', color: 'white' }}>Project description</span><br></br>
+          <h3><span style={{ color:'rgb(50, 78, 148)'}}>Project Number: GAP-101128627</span></h3>
         </div>
         <p style={{ fontSize: '18px', textAlign: 'center' }}>There is an increasing demand for cybersecurity professionals worldwide,
           however, in Asia Pacific the largest regional workforce gap of 1.42 million professionals exists. 

diff --git a/front-end/src/Pages/News.jsx b/front-end/src/Pages/News.jsx
@@ -68,7 +68,7 @@ const News = () => {
 
   return (
     <>
-      <div className="News">
+      <div className="NewsTitle">
         <h3>News</h3>
         {loggedInUser.isLoggedIn && (
           <div>

diff --git a/front-end/src/Pages/ProjectManagement.jsx b/front-end/src/Pages/ProjectManagement.jsx
@@ -185,6 +185,9 @@ const onDeleteClick = async (task_ID) => {
 
      {/* all tasks */}
      <div>
+     <div className={style["ProjectManagementTitle"]}>
+          <h3>Project Management</h3>
+    </div>
      <Button onClick={RefreshTasks} variant="outlined" startIcon={<RefreshIcon />}>
           Refresh
      </Button>

diff --git a/front-end/src/Pages/Repository.jsx b/front-end/src/Pages/Repository.jsx
@@ -1,7 +1,22 @@
+import style from "../components/Repository.module.css";
+
 function Repository() {
     return(
       <>
-      <h1> Repository</h1>
+      <div className={style["RepositoryTitle"]}>
+          <h3>Repository</h3>
+      </div>
+      <div className={style["ButtonContainer"]}>
+                {/* Left Button */}
+                <a href="https://link1.com">
+                    <button className={style["RepoButton"]}>CYCLE Data</button>
+                </a>
+
+                {/* Right Button */}
+                <a href="https://link2.com">
+                    <button className={style["RepoButton"]}>UOP Working Folder</button>
+                </a>
+            </div>
         </>
     );
   }

diff --git a/front-end/src/Pages/Workplan.module.css b/front-end/src/Pages/Workplan.module.css
@@ -5,6 +5,7 @@
   text-align: left;
   margin-bottom: 1%;
   font-size: 20px;
+  font-family: 'Caudex';
 }
 
 /* Table containers */

diff --git a/front-end/src/bodyComponents/SlideShow.jsx b/front-end/src/bodyComponents/SlideShow.jsx
@@ -7,7 +7,7 @@ import 'react-slideshow-image/dist/styles.css'
 const Slideshow = ({imageList}) => {
   return (
 
-<div className="slide-container" style={{width:'100%', margin:"0.3% 3% 3% 0%"} }>
+<div className="slide-container" style={{width:'40%', margin:"0% 0% 0% 30%"} }>
       <Slide>
         {imageList.map((fadeImage, index) => (
           <div key={index}>

diff --git a/front-end/src/components/Contact.css b/front-end/src/components/Contact.css
@@ -14,6 +14,7 @@
     text-align: left;
     margin-bottom: 3%;
     font-size: 20px;
+    font-family: 'Caudex';
 }
 
 /* Contact details of the manager and coordinator alignment */

diff --git a/front-end/src/components/Dashboard.module.css b/front-end/src/components/Dashboard.module.css
@@ -0,0 +1,8 @@
+.DashboardTitle{
+    margin-top: 2%;
+    margin-left: 5%;
+    text-align: left;
+    margin-bottom: 3%;
+    font-size: 20px;
+    font-family: 'Caudex';
+}
diff --git a/front-end/src/components/Download.css b/front-end/src/components/Download.css
@@ -5,6 +5,7 @@
   text-align: left;
   margin-bottom: 3%;
   font-size: 20px;
+  font-family: 'Caudex';
 }
 
 .upload-section {

diff --git a/front-end/src/components/Gallery.css b/front-end/src/components/Gallery.css
@@ -1,9 +1,10 @@
-.Gallery{
+.GalleryTitle{
     margin-top: 2%;
     margin-left: 5%;
     text-align: left;
     margin-bottom: 3%;
     font-size: 20px;
+    font-family: 'Caudex';
 }
 
 .gallery-container{

diff --git a/front-end/src/components/Header.css b/front-end/src/components/Header.css
@@ -36,7 +36,7 @@
   h2 {
     font-family:'Caudex';
     text-align: center;
-    font-size: 1.7em;
+    font-size: 1.4em;
     margin-top: 0px;
   }
 
@@ -76,13 +76,15 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0px 0px;
-  margin-bottom: 0px;
-  margin-top: 20px;
-  box-sizing: border-box;
+  /* box-sizing: border-box; */
   transition: transform 2s ease, opacity 0.5s ease;
 }
 
+.Heading {
+  margin-top: -80px; /* Adjust the value as needed */
+  margin-bottom: 10px;
+}
+
 .Erasmus-plus-Logo:hover {
   transform: scale(1.02);
   opacity: 0.8;
@@ -108,7 +110,7 @@
   display: flex;
   justify-content: right;
   align-items: center;
-  background-color: rgb(255, 255, 255, 0.9);
+  background-color: rgba(228, 246, 250, 0.9);
   /* padding: 1rem; */
   padding: 20px 5px;
   height: 2rem;
@@ -168,7 +170,7 @@
   position: absolute;
   padding: 12px 0;
   left: 0;
-  background-color: rgb(255, 255, 255, 0.9);
+  background-color: rgba(228, 246, 250, 0.9);
   min-width: 100%;
   height: auto;
   z-index: 1;
@@ -297,7 +299,7 @@
   right: 0.5%;
   width: 250px;
   max-height: 500px;
-  z-index: 1000;  /*change this */
+  z-index: 5000;  /*change this */
   border: 1px solid #ccc;
   border-radius: 4px;
   background-color: rgb(255, 255, 255);
@@ -378,7 +380,7 @@
   width: 250px;
   height:100vh;
   max-height: 500px;
-  z-index: 1000; 
+  z-index: 2000; 
   border: 1px solid #ccc;
   border-radius: 4px;
   background-color: rgb(255, 255, 255);
@@ -394,7 +396,7 @@
   width: 250px;
   height:100vh;
   max-height: 500px;
-  z-index: 1000; 
+  z-index: 2000; 
   border: 1px solid #ccc;
   border-radius: 4px;
   background-color: rgb(255, 255, 255);

diff --git a/front-end/src/components/Header.jsx b/front-end/src/components/Header.jsx
@@ -51,7 +51,9 @@ function Header(){
         else {
             setIsVisible(true);
         }
-    })
+
+}, [location.pathname, loggedInUserState, loggedInUser]);
+
 
     function logOut(){
    //TODO: okay to do this?
@@ -79,11 +81,29 @@ function Header(){
         setShowNotifications(previousShowNotifications=>!previousShowNotifications)       
     }
 
-
-
+  // Function to close the sidebar when clicking outside of it
+function closeOnClickOutside(selector, toggleClass) {
+    document.addEventListener('click', function(event) {
+      const element = document.querySelector(selector);
+      const isClickInside = element.contains(event.target);
+      const isClickOnToggleButton = event.target.closest('.adminNavBarRight li'); // Update with the toggle button selector
+
+      if (!isClickInside && !isClickOnToggleButton) {
+        element.classList.add(toggleClass); // Add the class to hide the element
+      }
+    });
+  }
+
+  // Call the function for the notification and message boxes
+  useEffect(() => {
+    closeOnClickOutside('.sideBarNotifications-Open', 'sideBar-Close');
+    closeOnClickOutside('.sideBarMessages-Open', 'sideBar-Close');
+    closeOnClickOutside('.userAccount-Open', 'userAccount-Close');
+}, []);
 
     return(
         <header>
+
 
             {/* Navigation bar */}
             <nav className = "headerNavBar">
@@ -123,7 +143,7 @@ function Header(){
                         </div>
                     </li>
                     <li><Link to = '/downloads' onClick={handleLinkClick}>Downloads</Link></li>
-                    <li><Link to = '/contact' onClick={handleLinkClick}>contact</Link></li>
+                    <li><Link to = '/contact' onClick={handleLinkClick}>Contact</Link></li>
                 </ul>
                 </ul>
             </nav>
@@ -214,17 +234,18 @@ function Header(){
             {/* Erasmus logo */}
             <a href = "https://erasmus-plus.ec.europa.eu/"><img src={erasmusLogo} alt="Erasmus+ Logo" className="Erasmus-plus-Logo"></img></a>
 
-            {/* Main heading */}
-            <h1><span style={{ color:'rgb(50, 78, 148)'}}>ERASMUS+</span> <span style={{ color:'rgba(44, 110, 11, 0.634)'}}>CYCLE</span></h1>
 
             {/* Cycle logo */}
             <img src={cylcleLogo} alt="Cycle Logo" className="Cycle-Logo"></img>
             </div>
 
-
+            <div className='Heading'>
+            {/* Main heading */}
+            <h1><span style={{ color:'rgb(50, 78, 148)'}}>ERASMUS+</span> <span style={{ color:'rgba(44, 110, 11, 0.634)'}}>CYCLE</span></h1>
+
             {/* Sub heading */}
             <h2><span style={{ color:'rgb(50, 78, 148)'}}>CYberseCurityLEarning: Master's degree in Cyber security</span></h2>
-
+            </div>
 
         </header>
     );

diff --git a/front-end/src/components/News.css b/front-end/src/components/News.css
@@ -1,10 +1,11 @@
 
-.News{
+.NewsTitle{
     margin-top: 2%;
     margin-left: 5%;
     text-align: left;
     margin-bottom: 3%;
     font-size: 20px;
+    font-family: 'Caudex';
 }
 
 .AddNewsButton{

diff --git a/front-end/src/components/Overview.css b/front-end/src/components/Overview.css
@@ -5,6 +5,7 @@
     text-align: left;
     margin-bottom: 3%;
     font-size: 20px;
+    font-family: 'Caudex';
 }
 
 /* CYCLE Overview part alignments */

diff --git a/front-end/src/components/ProjectManagement.module.css b/front-end/src/components/ProjectManagement.module.css
@@ -1,3 +1,11 @@
+.ProjectManagementTitle{
+  margin-top: 2%;
+  margin-left: 5%;
+  text-align: left;
+  margin-bottom: 1%;
+  font-size: 20px;
+  font-family: 'Caudex';
+}
 .showDiv{
 
     display: block;

diff --git a/front-end/src/components/Repository.module.css b/front-end/src/components/Repository.module.css
@@ -0,0 +1,10 @@
+.RepositoryTitle{
+    margin-top: 2%;
+    margin-left: 5%;
+    text-align: left;
+    margin-bottom: 1%;
+    font-size: 20px;
+    font-family: 'Caudex';
+  }
+
+
diff --git a/front-end/src/components/Team.css b/front-end/src/components/Team.css
@@ -4,6 +4,7 @@
     text-align: left;
     margin-bottom: 3%;
     font-size: 20px;
+    font-family: 'Caudex';
 }
 
 .UoPTeamTitle {