Added Logo, Modified Navbar, Updated footer

app/client/style.css

@@ -5,6 +5,11 @@
 :root {
   --matr-navbar-bg: #ECECEC;
   --matr-navbar-bg-rgb: 236, 236, 236;
+  --color1:#025159;
+  --color2:#03A696;
+  --color3:#04BF9D;
+  --color4:#6EBF34;
+  --color5:#f2f2f2;
 }
 
 /* Change bootstrap variable values.
@@ -31,4 +36,24 @@ body {
 {
   border-radius: 100%;
   max-width:100px;
+}
+.color1
+{
+  background-color: var(--color1);
+}
+.color2
+{
+  background-color: var(--color2);
+}
+.color3
+{
+  background-color: var(--color3);
+}
+.color4
+{
+  background-color: var(--color4);
+}
+.color5
+{
+  background-color: var(--color5);
 }

app/imports/ui/components/Footer.jsx

@@ -8,7 +8,9 @@ const Footer = () => {
     <footer className="mt-auto bg-light">
       <Container style={divStyle}>
         <Col className="text-center">
-          Department of Information and Computer Sciences <br />
+          Created by <a href={"https://ube-dev.github.io/"}>Ube-Dev</a> <br />
+          Based on a template provided by <br />
+          the Department of Information and Computer Sciences <br />
           University of Hawaii<br />
           Honolulu, HI 96822 <br />
           <a href="http://ics-software-engineering.github.io/meteor-application-template-production">Template Home Page</a>

app/imports/ui/components/NavBar.jsx

@@ -15,17 +15,16 @@ const NavBar = () => {
   }), []);
   const menuStyle = { marginBottom: '10px' };
   return (
-    <Navbar bg="light" expand="lg" style={menuStyle}>
+    <Navbar className="color1" bg="light" expand="lg" style={menuStyle}>
       <Container>
-        <Navbar.Brand id={COMPONENT_IDS.NAVBAR_LANDING_PAGE} as={NavLink} to="/"><h1>Voluntree</h1>
-        <Image src={"https://d1yjjnpx0p53s8.cloudfront.net"}/></Navbar.Brand>
+        <Navbar.Brand id={COMPONENT_IDS.NAVBAR_LANDING_PAGE} as={NavLink} to="/">
+        <Image src={"/images/voluntreeLogo.png"} height={"100px"} width={"100px"}/></Navbar.Brand>
         <Navbar.Toggle aria-controls={COMPONENT_IDS.NAVBAR_COLLAPSE} />
         <Navbar.Collapse id={COMPONENT_IDS.NAVBAR_COLLAPSE}>
           <Nav className="me-auto justify-content-start">
             <Nav.Link id={COMPONENT_IDS.NAVBAR_ADD_STUFF} as={NavLink} to="/Home" key="Home">Home</Nav.Link>
             <Nav.Link id={COMPONENT_IDS.NAVBAR_LIST_STUFF} as={NavLink} to="/About" key="About">About</Nav.Link>
             <Nav.Link id={COMPONENT_IDS.NAVBAR_LIST_STUFF} as={NavLink} to="/Events" key="Events">Events</Nav.Link>
-              <Nav.Link id={COMPONENT_IDS.NAVBAR_LIST_STUFF} as={NavLink} to="/FAQ" key="FAQ">FAQ</Nav.Link>
             {currentUser ? ([
 
               <Nav.Link id={COMPONENT_IDS.NAVBAR_LIST_STUFF} as={NavLink} to="/MyEvents" key="MyEvents">My Events</Nav.Link>,
@@ -37,6 +36,7 @@ const NavBar = () => {
                   <NavDropdown.Item id={COMPONENT_IDS.NAVBAR_MANAGE_DROPDOWN_DATABASE} key="manage-database" as={NavLink} to="/manage-database"><CloudDownload /> Database</NavDropdown.Item>
                 </NavDropdown>]
             ) : ''}
+            <Nav.Link id={COMPONENT_IDS.NAVBAR_LIST_STUFF} as={NavLink} to="/FAQ" key="FAQ">FAQ</Nav.Link>
           </Nav>
           <Nav className="justify-content-end">
             {currentUser === '' ? (

app/imports/ui/pages/Landing.jsx

@@ -6,12 +6,8 @@ import { PAGE_IDS } from '../utilities/PageIDs';
 const Landing = () => (
   <Container id={PAGE_IDS.LANDING} className="py-3">
     <Row className="align-middle text-center">
-      <Col xs={4}>
-        <Image roundedCircle src="/images/meteor-logo.png" width="150px" />
-      </Col>
-
-      <Col xs={8} className="d-flex flex-column justify-content-center">
-        <h1>Welcome to this template</h1>
+      <Col xs={12} className="d-flex flex-column justify-content-center">
+        <h1>Welcome to Voluntree</h1>
         <p>Now get to work and modify this app!</p>
       </Col>