From bae7ffdd5f4503fa297dd5a69109a41108f88372 Mon Sep 17 00:00:00 2001
From: Yaxue Guo <yaxue.guo23@gmail.com>
Date: Tue, 29 Oct 2024 20:50:57 -0400
Subject: [PATCH] #356: updated navbar and footer style based on react
 bootstrap components

---
 src/components/Footer.jsx                |  21 ++--
 src/components/Header.jsx                | 142 ++++++++++++++++-------
 src/components/Home/HomepageCarousel.jsx |   2 +-
 src/components/common/Table.jsx          |   2 +-
 src/components/common/TableHeader.jsx    |   4 +-
 src/pages/PublicationTracker.jsx         |   5 +-
 src/styles/App.scss                      |  36 ++----
 7 files changed, 123 insertions(+), 89 deletions(-)

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index b32f8ab..1caa851 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -15,20 +15,19 @@ import trustedciBadge from "../imgs/trustedci.png";
 class Footer extends React.Component {
   render() {
     return (
-      <Container bsclass="app-footer bg-light">
-        <Row bsclass="py-4">
-          <Col sm={12} md={3}>
+      <Container className="app-footer bg-light">
+        <Row>
+          <Col>
             <ul>
               <li><b>Useful Links</b></li>
               <li>
                 <Link to="/aup">Acceptable Use Policy</Link>
               </li>
               <li><Link to="/cookie-policy">Cookie Policy</Link></li>
-              {/* <li><Link to="/privacy-policy">Privacy Policy</Link></li> */}
               <li><Link to="/branding">Branding Resources</Link></li>
             </ul>
           </Col>
-          <Col sm={12} md={3}>
+          <Col>
             <ul>
               <li><b>Help &amp; Support</b></li>
               <li><a href={portalData.knowledgeBaseLink} target="_blank" rel="noopener noreferrer">Knowledge Base</a></li>
@@ -43,7 +42,7 @@ class Footer extends React.Component {
               </li>
           </ul>
           </Col>
-          <Col sm={12} md={3}>
+          <Col>
             <div>
               <ul>
                 <li><b>Social</b></li>
@@ -66,7 +65,7 @@ class Footer extends React.Component {
               </ul>
             </div>
           </Col>
-          <Col sm={12} md={3}>
+          <Col>
             <img
               src={trustedciBadge}
               width="175"
@@ -76,14 +75,14 @@ class Footer extends React.Component {
             />
           </Col>
         </Row>
-        <Row>
-          <Col sm={12} md={3}>
+        <Row className="mt-3">
+          <Col>
             <ul>
               <li><u><b>© FABRIC {new Date().getFullYear()}</b></u></li>
             </ul>
           </Col>
-          <Col sm={12} md={9} bsclass="d-flex flex-column align-items-center">
-            <div className="d-flex align-items-center mb-4">
+          <Col className="d-flex flex-column align-items-center">
+            <div className="d-flex align-items-center my-4">
               <img
                 src={nsfLogo}
                 width="45"
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 5ad6cac..29bf8f7 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import withRouter from "./common/withRouter.jsx";
+import { Link, NavLink } from "react-router-dom";
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { default as portalData } from "../services/portalData.json";
@@ -9,7 +10,6 @@ import productionLogo from "../imgs/logos/fabric-brand.png";
 import alphaLogo from "../imgs/logos/fabric-brand-alpha.png";
 import betaLogo from "../imgs/logos/fabric-brand-beta.png";
 import ProfileModal from './ProfileModal';
-import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
@@ -18,51 +18,52 @@ const Header = (props) => {
   const navItems = (props.globalRoles && !props.globalRoles.isJupterhubUser) ? [
     { 
       name: "Resources",
-      href: "/resources",
+      path: "/resources",
       child: [
         {
           name: "Testbed Resources",
-          href: "/resources/overview"
+          path: "/resources/overview"
         },
         {
           name: "Measurement Metrics",
-          href: "/resources/tools"
+          path: "/resources/tools"
         }
       ]
     },
     {
       name: "Experiments",
-      href: "/experiments",
+      path: "/experiments",
       child: []
     },
     {
       name: "Knowledge Base",
       href: portalData.knowledgeBaseLink,
-      child: []
+      child: [],
+      path: ""
     },
     {
       name: "JupyterHub",
       child: [],
-      href: "/jupyter-no-access"
+      path: "/jupyter-no-access"
     },
-    { name: "Contact Us", href: "/help", child: [] },
+    { name: "Contact Us", path: "/help", child: [] },
     {
       name: "About",
       child: [
         {
           name: "Overview",
-          href: "/about/about-fabric"
+          path: "/about/about-fabric"
         },
         {
           name: "SAC",
-          href: "/about/sac"
+          path: "/about/sac"
         },
         {
           name: "Leadership",
-          href: "/about/leadership"
+          path: "/about/leadership"
         }
       ],
-      href: "/about"
+      path: "/about"
     },
     {
       name: "Community",
@@ -81,79 +82,81 @@ const Header = (props) => {
         },
         {
           name: "Newsletter Signup",
-          href: "/community/newsletter-signup"
+          path: "/community/newsletter-signup"
         },
         {
           name: "Funding Opportunities",
-          href: "/community/funding-opportunities"
+          path: "/community/funding-opportunities"
         },
         {
           name: "Testbeds and Facilities",
-          href: "/community/testbeds-and-facilities"
+          path: "/community/testbeds-and-facilities"
         },
         {
           name: "Cite FABRIC",
-          href: "/community/publications"
+          path: "/community/publications"
         },
         {
           name: "FABRIC User Publications",
-          href: "/community/fabric-user-publications"
+          path: "/community/fabric-user-publications"
         },
         {
           name: "Blogs",
           href: portalData.knowledgeBaseBlogsLink,
         }
       ],
-      href: "/community"
+      path: "/community"
     }
   ] : [
     { 
       name: "Resources",
-      href: "/resources",
+      path: "/resources",
       child: [
         {
           name: "Resources Overview",
-          href: "/resources/overview"
+          path: "/resources/overview"
         },
         {
           name: "Measuring and Monitoring Tools",
-          href: "/resources/tools"
+          path: "/resources/tools"
         }
       ]
     },
     {
       name: "Experiments",
-      href: "/experiments",
+      path: "/experiments",
       child: []
     },
     {
       name: "Knowledge Base",
       href: portalData.knowledgeBaseLink,
-      child: []
+      child: [],
+      path: ""
     },
     {
       name: "JupyterHub",
       href: portalData.jupyterHubLinks[checkPortalType(window.location.href)],
-      child: []
+      child: [],
+      path: ""
     },
-    { name: "Contact Us", href: "/help", child: [] },
+    { name: "Contact Us", path: "/help", child: [] },
     {
       name: "About",
       child: [
         {
           name: "Overview",
-          href: "/about/about-fabric"
+          path: "/about/about-fabric"
         },
         {
           name: "SAC",
-          href: "/about/sac"
+          path: "/about/sac"
         },
         {
           name: "Leadership",
-          href: "/about/leadership"
+          path: "/about/leadership"
         }
       ],
-      href: "/about"
+      path: "/about"
     },
     {
       name: "Community",
@@ -172,30 +175,30 @@ const Header = (props) => {
         },
         {
           name: "Newsletter Signup",
-          href: "/community/newsletter-signup"
+          path: "/community/newsletter-signup"
         },
         {
           name: "Funding Opportunities",
-          href: "/community/funding-opportunities"
+          path: "/community/funding-opportunities"
         },
         {
           name: "Testbeds and Facilities",
-          href: "/community/testbeds-and-facilities"
+          path: "/community/testbeds-and-facilities"
         },
         {
           name: "Cite FABRIC",
-          href: "/community/publications"
+          path: "/community/publications"
         },
         {
           name: "FABRIC User Publications",
-          href: "/community/fabric-user-publications"
+          path: "/community/fabric-user-publications"
         },
         {
           name: "Blogs",
           href: portalData.knowledgeBaseBlogsLink,
         }
       ],
-      href: "/community"
+      path: "/community"
     }
   ]
   
@@ -238,8 +241,7 @@ const Header = (props) => {
   };
 
   return (
-    <Navbar expand="lg" className="navbar">
-      <Container>
+    <Navbar expand="lg" className="bg-light">
       <Navbar.Brand href="/">
         <img
           src={getLogoSrc()}
@@ -254,24 +256,80 @@ const Header = (props) => {
           { 
             navItems.map((item, index) => {
               if (item.child.length === 0) {
-                return <Nav.Link href={item.href}>{item.name}</Nav.Link>
+                if (item.path) {
+                  return <Nav.Link as={Link} to={item.path}>{item.name}</Nav.Link>
+                } else {
+                  return <Nav.Link href={item.href}>{item.name}</Nav.Link>
+                }
               } else {
                 return <NavDropdown title={item.name} id={`nav-dropdown-${index}`}>
                 {
                   item.child.map((sub_item, sub_index) => {
-                    return <NavDropdown.Item
+                    if (sub_item.path) {
+                      return <NavDropdown.Item
+                      key={`sub-nav-${sub_index}`}
+                      as={Link}
+                      to={sub_item.path}>
+                        {sub_item.name}
+                      </NavDropdown.Item>
+                    } else {
+                      return <NavDropdown.Item
                       key={`sub-nav-${sub_index}`}
                       href={sub_item.href}>
                         {sub_item.name}
-                      </NavDropdown.Item> }
-                  )}
+                      </NavDropdown.Item> 
+                    }
+                   })}
               </NavDropdown>
               }
             })
           }
         </Nav>
+        {
+        props.userStatus === "active" && !window.location.href.includes("/search-results") &&
+        <form className="form-inline my-2 mr-2 my-lg-0">
+          <input
+            className="form-control"
+            type="search"
+            placeholder="Search People/Projects"
+            aria-label="Search"
+            onChange={props.onQueryChange}
+            onKeyDown={raiseInputKeyDown}
+          />
+           <div className="input-group-append">
+              <button
+                className="btn btn-outline-secondary"
+                type="button"
+                onClick={handleSearch}
+              >
+                  <i className="fa fa-search"></i>
+              </button>
+            </div>
+         </form>
+      }
+      { props.userStatus !== "active" ? 
+        <form className="form-inline my-2 my-lg-0">
+          <NavLink to="/login">
+            <button
+              onClick={handleLogin}
+              className="btn btn-outline-success my-2 my-sm-0 mr-2"
+            >
+              Log in
+            </button>
+          </NavLink>
+          <NavLink to="/signup/1">
+            <button
+              className="btn btn-outline-primary my-2 my-sm-0"
+            >
+              Sign up
+            </button>
+          </NavLink>
+        </form> :
+        <form className="form-inline my-2 my-lg-0">
+          <ProfileModal userName={props.userName} userEmail={props.userEmail} />
+        </form>
+      }
       </Navbar.Collapse>
-    </Container>
   </Navbar>
   )
 }
diff --git a/src/components/Home/HomepageCarousel.jsx b/src/components/Home/HomepageCarousel.jsx
index 0593e90..fd0ccc1 100644
--- a/src/components/Home/HomepageCarousel.jsx
+++ b/src/components/Home/HomepageCarousel.jsx
@@ -48,7 +48,7 @@ class HomepageCarousel extends React.Component {
           items && items.length > 0 && items.map((item, index) =>
             <Carousel.Item key={`homepage-carousel-${index}`}>
               <img src={item.background_image_url} alt={`FABRIC Portal Homepage Slide ${index}`} className="d-block w-100"/>
-              <Carousel.Caption style={{"paddingTop": "4.5rem"}}>
+              <Carousel.Caption style={{"paddingTop": "3rem"}}>
                 <h3>{item.title}</h3>
                 <div className="homepage-carousel-content">
                   {Parser(item.content)}
diff --git a/src/components/common/Table.jsx b/src/components/common/Table.jsx
index a382b70..3f0dedf 100644
--- a/src/components/common/Table.jsx
+++ b/src/components/common/Table.jsx
@@ -9,7 +9,7 @@ const Table = ({ columns, onSort, sortColumn, data, tStyle, tHeadStyle, onCheck
         columns={columns}
         sortColumn={sortColumn}
         onSort={onSort}
-        style={tHeadStyle}
+        tHeadStyle={tHeadStyle}
       />
       <TableBody
         columns={columns}
diff --git a/src/components/common/TableHeader.jsx b/src/components/common/TableHeader.jsx
index a5f6069..40b8ece 100644
--- a/src/components/common/TableHeader.jsx
+++ b/src/components/common/TableHeader.jsx
@@ -31,9 +31,9 @@ class TableHeader extends Component {
   };
 
   render() {
-    const { sortColumn, style } = this.props;
+    const { sortColumn, tHeadStyle } = this.props;
     return (
-      <thead className={style}>
+      <thead className={tHeadStyle}>
         <tr>
           {sortColumn && this.props.columns.map((column) => (
             <th
diff --git a/src/pages/PublicationTracker.jsx b/src/pages/PublicationTracker.jsx
index 89f209e..2073109 100644
--- a/src/pages/PublicationTracker.jsx
+++ b/src/pages/PublicationTracker.jsx
@@ -3,7 +3,6 @@ import BackgroundImage from "../imgs/network-bg.svg";
 import Table from "../components/common/Table";
 import { getPublications } from "../services/publicationService.js";
 import SpinnerWithText from "../components/common/SpinnerWithText";
-// import publications from "../services/staticPublications";
 import _ from "lodash";
 import { toast } from "react-toastify";
 
@@ -90,8 +89,8 @@ class PublicationTracker extends Component {
     if (searchQuery) {
       filtered = allPublications.filter((p) =>
         p.title.toLowerCase().includes(searchQuery.toLowerCase())
-        || p.authors.toLowerCase().includes(searchQuery.toLowerCase())
-        || p.project_name.toLowerCase().includes(searchQuery.toLowerCase())
+        || p.authors.join().toLowerCase().includes(searchQuery.toLowerCase())
+        || (p.project_name && p.project_name.toLowerCase().includes(searchQuery.toLowerCase()))
         || p.year.includes(searchQuery.toLowerCase())
       );
     }
diff --git a/src/styles/App.scss b/src/styles/App.scss
index 2e3ad14..12b9098 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -131,46 +131,23 @@ h1, h2, h3, h4, h5, h6 {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 50rem;
-  margin-top: 0;
-  padding: 0 2rem;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  width: 100%;
+  margin: 0 !important;
+  width: 100% !important;
+  max-width: 100vw !important;
+  height: 25rem !important;
+  max-height: 25rem !important;
+  min-height: 25rem !important;
 }
 
 .app-footer div {
   width: 100%;
 }
 
-.navbar-brand img {
-  margin-top: 2px !important;
-  margin-right: 1px !important;
-}
-
 .navbar .form-control {
   padding: 0px 8px !important;
   height: 35px !important;
 }
 
-.navbar .btn {
-  height: 33px !important;
-  padding: 3px 10px !important;
-}
-
-.homepage-carousel-content {
-  display: none;
-}
-
-.carousel-caption {
-  width: 80%;
-}
-
-.carousel-caption-content h3 {
-  font-size: 1.5rem; 
-}
-
 @media (min-width: 992px) {
   .navbar-expand-lg .navbar-nav .nav-link {
     margin-top: 0px !important;
@@ -423,6 +400,7 @@ h6[aria-expanded="false"] .fa-minus {
 
 a {
   color: $primary-color-dark;
+  text-decoration: none;
 }
 
 p a {