Merge pull request #35 from ScilifelabDataCentre/jan-pre-dev

Header & Footer Update
ScilifelabDataCentre · Apr 12, 2024 · 978e015 · 978e015
2 parents 3f2da9b + 25e030a
commit 978e015
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git a/pmp-frontend-app/src/components/FooterComponent.tsx b/pmp-frontend-app/src/components/FooterComponent.tsx
@@ -6,15 +6,14 @@ import { LINK_CLASSES } from '../constants';
 export default function FooterComponent(): ReactElement {
 
   let linksCol1: { [id: string] : ILink; } = {
-      'l2': { text: 'Data Search', classes: LINK_CLASSES, link: '/' },
-      'l3': { text: 'Data Types', classes: LINK_CLASSES, link: '/' },
-      'l4': { text: 'Events & News', classes: LINK_CLASSES, link: '/' },
+      'l1': { text: 'Data Sources', classes: LINK_CLASSES, link: '/datasources' },
+      'l2': { text: 'Events & Trainings', classes: LINK_CLASSES, link: '/eventsandtrainings' },
   };
 
   let linksCol2: { [id: string] : ILink; } = {
-      'l1': { text: 'About us', classes: LINK_CLASSES, link: '/about' },
-      'l2': { text: 'Contact', classes: LINK_CLASSES, link: '/contact' },
-      'l4': { text: 'Privacy Policy', classes: LINK_CLASSES, link: '/privacy' },
+      'l3': { text: 'About us', classes: LINK_CLASSES, link: '/about' },
+      'l4': { text: 'Contact', classes: LINK_CLASSES, link: '/contact' },
+      'l5': { text: 'Privacy Policy', classes: LINK_CLASSES, link: '/privacy' },
   };
 
   let svgs: { [id: string] : ISVG; } = {

diff --git a/pmp-frontend-app/src/components/HeaderComponent.tsx b/pmp-frontend-app/src/components/HeaderComponent.tsx
@@ -6,37 +6,43 @@ import sciLifeLogo from '../assets/SciLifeLab logo/NEG/Digital/SciLifeLab_Logoty
 export default function HeaderComponent() {
 
     let links: { [id: string] : ILink; } = {
-        'l1': { text: 'Data', classes: LINK_CLASSES, link: 'data' },
-        'l2': { text: 'Events & News', classes: LINK_CLASSES, link: 'eventsandnews' },
+        'l1': { text: 'Data Sources', classes: LINK_CLASSES, link: 'datasources' },
+        'l2': { text: 'Events & Trainings', classes: LINK_CLASSES, link: 'eventsandtrainings' },
         'l3': { text: 'Contact', classes: LINK_CLASSES, link: 'contact' },
-        'l4': { text: 'About', classes: LINK_CLASSES, link: 'about' },
+        'l4': { text: 'About Us', classes: LINK_CLASSES, link: 'about' },
     };
-
+
+    {/*
+            // This is the signin button. We  can add this again once we have a user page, login, registration and features for users.
     let buttons: { [id: string] : ILink; } = {
         'b1': { text: 'Sign In', classes: BUTTON_TYPE_ONE, link: 'signin' },
     };
+    */}
 
     return (
         // use bg-zinc-200 instead? similar to daisyUI light-theme footer
-        <div className="navbar bg-base-100 px-8">
+        <div className="navbar bg-gradient-to-b from-neutral-500 to-teal-800 px-8">
             <div className="navbar-start">
                 <Link to="/">
                     <img className="h-auto w-80" src={sciLifeLogo} alt="SciLifeLab Logo" />
                 </Link>
             </div>
             <div className="navbar-center lg:flex">
                 <ul className="menu menu-horizontal">
-                    <li><p className="pointer-events-none">Random text for now</p></li>
                 {Object.keys(links).map( key => (
                     <li>{<NavLink className={links[key].classes} to={links[key].link}>{links[key].text}</NavLink>}</li>
                 ))}
                 </ul>
             </div>
+            <div className="navbar-end">
+            </div>
+            {/*
+            // This is the signin button. We  can add this again once we have a user page, login, registration and features for users.
             {Object.keys(buttons).map( key => (
                 <div className="navbar-end">
                     {<Link className={buttons[key].classes} to={buttons[key].link}>{buttons[key].text}</Link>}
                 </div>
-            ))}
+            ))} */}
         </div>
     )
   }

diff --git a/pmp-frontend-app/src/components/Routes.tsx b/pmp-frontend-app/src/components/Routes.tsx
@@ -4,8 +4,8 @@ import App from '../App';
 import HomePage from '../pages/HomePage';
 import AboutPage from '../pages/AboutPage';
 import ContactPage from '../pages/ContactPage';
-import DataPage from '../pages/DataPage';
-import EventsAndNewsPage from '../pages/EventsAndNewsPage';
+import DataSourcesPage from '../pages/DataSourcesPage';
+import EventsAndTrainingsPage from '../pages/EventsAndTrainingsPage';
 import SignInPage from '../pages/SignInPage';
 import PrivacyPage from '../pages/PrivacyPage';
 import AboutProductPage from '../pages/AboutProductPage';
@@ -48,12 +48,12 @@ const router = createBrowserRouter([
                 element: <ContactPage />,
             },
             {
-                path: 'data',
-                element: <DataPage />,
+                path: 'datasources',
+                element: <DataSourcesPage />,
             },
             {
-                path: 'eventsandnews',
-                element: <EventsAndNewsPage />,
+                path: 'eventsandtrainings',
+                element: <EventsAndTrainingsPage />,
             },
             {
                 path: 'signin',

diff --git a/pmp-frontend-app/src/pages/DataPage.tsx → ...rontend-app/src/pages/DataSourcesPage.tsx b/pmp-frontend-app/src/pages/DataPage.tsx → ...rontend-app/src/pages/DataSourcesPage.tsx
diff --git a/...ntend-app/src/pages/EventsAndNewsPage.tsx → ...-app/src/pages/EventsAndTrainingsPage.tsx b/...ntend-app/src/pages/EventsAndNewsPage.tsx → ...-app/src/pages/EventsAndTrainingsPage.tsx
@@ -1,12 +1,12 @@
 import { ReactElement } from 'react';
 import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
 
-export default function EventsAndNewsPage(): ReactElement {
+export default function EventsAndTrainingsPage(): ReactElement {
     TrackPageViewIfEnabled();
 
     return (
         <div>
-            <p className="bg-green text-bold">Events & News page under construction</p>
+            <p className="bg-green text-bold">Events & Trainings page under construction</p>
         </div>
     );
 }