Fixing formatting for total contributions, improved perf for images, added team data

src/components/candidatesListItem.js

@@ -4,7 +4,7 @@ import Bar from "./bar"
 import { Link } from "gatsby"
 import React from "react"
 import styles from "./candidatesListItem.module.scss"
-import BlankProfile from "../images/blankProfile.png"
+import BlankProfile from "../images/blankProfile.webp"
 
 export default function CandidatesListItem({
   Name,

src/components/landingPageHero.module.scss

@@ -24,17 +24,17 @@
 }
 
 .orange {
-  background: url("../images/orangeHeaderBlob.png") right/auto 100% no-repeat
+  background: url("../images/orangeHeaderBlob.webp") right/auto 100% no-repeat
     $primaryOffWhite;
 }
 
 .blue {
-  background: url("../images/blueHeaderBlob.png") right/auto 100% no-repeat
+  background: url("../images/blueHeaderBlob.webp") right/auto 100% no-repeat
     $primaryOffWhite;
 }
 
 .green {
-  background: url("../images/greenHeaderBlob.png") right/auto 100% no-repeat
+  background: url("../images/greenHeaderBlob.webp") right/auto 100% no-repeat
     $primaryOffWhite;
 }
 

src/components/layout.js

@@ -7,7 +7,7 @@ import styles from "./layout.module.scss"
 import SEO from "./seo"
 import Navbar from "./navbar"
 import Logo from "./logo"
-import cfsjLogo from "../images/cfsj-logo.png"
+import cfsjLogo from "../images/cfsj-logo.webp"
 
 const renderNavItems = items => (
   <ul>
@@ -99,10 +99,6 @@ export default function Layout({
           links.unshift({
             name: "Candidates",
             endpoint: `/${election.Date}/candidates/${election.OfficeElections[0].fields.slug}`,
-            links: election.OfficeElections.map(office => ({
-              position: office.Title,
-              endpoint: `/${election.Date}/candidates/${office.fields.slug}`,
-            })),
           })
         }
 

src/components/layout.module.scss

@@ -119,7 +119,7 @@
     margin: 0 0 0 1.5rem;
     color: $primaryGreen;
   }
-  &:hover {
+  a:hover {
     p {
       color: $hoverGreen;
     }

src/components/menu.js

@@ -3,27 +3,25 @@ import NavbarItem from "./navbarItem"
 
 import styles from "./menu.module.scss"
 
-const Menu = ({ links, menuIsOpen, submenu, windowIsLarge }) => {
-  const navItems = () =>
-    links.map((link, index) => {
-      return (
-        <NavbarItem
-          key={index}
-          menuIsOpen={menuIsOpen}
-          windowIsLarge={windowIsLarge}
-          {...link}
-        />
-      )
-    })
-
+const Menu = ({ links, menuIsOpen, windowIsLarge, closeMenu }) => {
   return (
     <ul
       className={`${styles.navigation} ${styles.closed} ${menuIsOpen &&
-        styles.open} ${submenu && styles.submenu} ${menuIsOpen &&
-        submenu &&
-        styles.openSubmenu}`}
+        styles.open}`}
     >
-      {(menuIsOpen || windowIsLarge) && navItems()}
+      {(menuIsOpen || windowIsLarge) &&
+        links.map((link, index) => {
+          return (
+            <NavbarItem
+              key={index}
+              menuIsOpen={menuIsOpen}
+              windowIsLarge={windowIsLarge}
+              isLast={links.length === index + 1}
+              closeMenu={closeMenu}
+              {...link}
+            />
+          )
+        })}
     </ul>
   )
 }

src/components/menu.module.scss

@@ -5,10 +5,6 @@
   justify-content: space-around;
 }
 
-.submenu {
-  width: 0;
-}
-
 @media screen and (max-width: 760px) {
   .navigation {
     flex-direction: column;
@@ -28,9 +24,4 @@
     height: 100vh;
     transform: scaleY(1);
   }
-
-  .openSubmenu {
-    height: 13rem;
-    transform: scaleY(1);
-  }
 }

src/components/navbar.js

@@ -18,7 +18,7 @@ function enableScroll() {
   window.onscroll = function() {}
 }
 
-export default function Navbar(props) {
+export default function Navbar({ links, windowIsLarge }) {
   const [menuIsOpen, setMenuIsOpen] = useState(false)
 
   useEffect(() => {
@@ -27,14 +27,13 @@ export default function Navbar(props) {
     return enableScroll
   }, [menuIsOpen])
 
-  const links = [
+  const allLinks = [
     { name: "Home", endpoint: "/", hidden: true },
-    ...props.links,
+    ...links,
     {
       name: "Register to vote",
       endpoint: "/registerToVote",
       hidden: true,
-      arrow: true,
     },
     { name: "Find your ballot", endpoint: "/findYourBallot", hidden: true },
   ]
@@ -57,9 +56,10 @@ export default function Navbar(props) {
         </div>
         <div className={styles.navbarBottom}>
           <Menu
+            closeMenu={() => setMenuIsOpen(false)}
             menuIsOpen={menuIsOpen}
-            windowIsLarge={props.windowIsLarge}
-            links={links}
+            windowIsLarge={windowIsLarge}
+            links={allLinks}
           />
         </div>
       </nav>

src/components/navbarItem.js

@@ -1,82 +1,23 @@
-import React, { useState, useEffect } from "react"
+import React from "react"
 import styles from "./navbarItem.module.scss"
-import linkArrow from "../images/linkArrow.png"
-import Menu from "./menu.js"
 import { Link } from "gatsby"
 
 export default function NavbarItem(props) {
-  const [menuItemIsOpen, setMenuItemIsOpen] = useState(false)
-  const [hasLinks, setHasLinks] = useState(false)
-
-  useEffect(() => {
-    const { links } = props
-    setHasLinks(links && links.length)
-  })
-
-  const Anchor = ({ children }) => {
-    if (hasLinks && !props.windowIsLarge) {
-      return (
-        <div
-          className={`${styles.link} ${styles.fullWidth} ${menuItemIsOpen &&
-            styles.bold}`}
-        >
-          {children}
-        </div>
-      )
-    }
-
-    return (
-      <Link
-        className={`${styles.link} ${styles.fullWidth} ${hasLinks &&
-          styles.disabled} ${hasLinks && menuItemIsOpen && styles.bold}`}
-        to={props.endpoint}
-      >
-        {children}
-      </Link>
-    )
-  }
-
-  const toggleMenu = () => {
-    hasLinks && setMenuItemIsOpen(!menuItemIsOpen)
-  }
-
   return (
     <li
       key={`navbar-item-${props.name}`}
-      className={`${props.hidden && styles.hidden}`}
+      onBlur={() => props.isLast && props.closeMenu()}
+      className={`${styles.item} ${props.hidden && styles.hidden}`}
     >
-      <div
-        className={`${styles.item} ${props.menuIsOpen &&
-          styles.open} ${props.submenu && styles.submenu}`}
-        onClick={toggleMenu}
-        onKeyUp={toggleMenu}
-        role="presentation"
+      <Link
+        className={`${styles.link} ${styles.fullWidth}`}
+        to={props.endpoint}
       >
-        <Anchor>
-          <div className={`${styles.linkInner}`}>
-            <span>{props.name || props.position}</span>
-            <div className={styles.selected} />
-          </div>
-          {hasLinks || props.arrow ? (
-            <img
-              alt="link-arrow"
-              src={linkArrow}
-              height="9.2px"
-              width="15.5px"
-              className={`${styles.arrow} ${menuItemIsOpen &&
-                styles.openMenuItem}`}
-            />
-          ) : null}
-        </Anchor>
-        {hasLinks && !props.windowIsLarge ? (
-          <Menu
-            menuIsOpen={menuItemIsOpen}
-            submenu
-            windowIsLarge={props.windowIsLarge}
-            links={props.links}
-          />
-        ) : null}
-      </div>
+        <div className={`${styles.linkInner}`}>
+          <span>{props.name || props.position}</span>
+          <div className={styles.selected} />
+        </div>
+      </Link>
     </li>
   )
 }

src/components/navbarItem.module.scss

@@ -18,12 +18,6 @@
   z-index: 2;
 }
 
-.submenu {
-  .linkInner {
-    display: none;
-  }
-}
-
 .link,
 .link:visited {
   display: flex;
@@ -47,17 +41,6 @@
   }
 }
 
-.arrow {
-  display: none;
-  transform: rotate(270deg);
-  -webkit-transform: rotate(270deg);
-  transition: transform 0.26s linear;
-}
-
-.openMenuItem {
-  transform: rotate(360deg);
-}
-
 .bold > .linkInner {
   font-weight: bold;
 }
@@ -93,18 +76,6 @@
     }
   }
 
-  .submenu {
-    width: 50%;
-    .linkInner {
-      display: block;
-      padding-left: 1.5rem;
-    }
-  }
-
-  .arrow {
-    display: block;
-  }
-
   .open {
     visibility: visible;
     opacity: 1;

src/components/noData.js

@@ -1,6 +1,6 @@
 import React from "react"
 import styles from "./noData.module.scss"
-import noDataImg from "../images/noData.png"
+import noDataImg from "../images/noData.webp"
 
 const text = {
   candidate: {

src/components/teamMembers.js

@@ -1,6 +1,6 @@
 import React from "react"
 import styles from "./teamMembers.module.scss"
-import Blank from "../images/blankProfile.png"
+import Blank from "../images/blankProfile.webp"
 
 const PersonalInfo = ({ position, name, image }) => (
   <>

src/pages/404.js

@@ -6,10 +6,14 @@ import styles from "./404.module.scss"
 import { graphql, StaticQuery } from "gatsby"
 import Layout from "../components/layout"
 import useWindowIsLarge from "../common/hooks/useWindowIsLarge"
-import pageNotFound from "../images/404.png"
+import pageNotFound from "../images/404.webp"
 import { Link } from "gatsby"
 
-const handleClick = () => window.history.back()
+const handleClick = e => {
+  if (e.key === "Enter") {
+    window.history.back()
+  }
+}
 
 export default () => {
   return (

src/pages/aboutUs.js

@@ -10,9 +10,9 @@ import TeamMembers from "../components/teamMembers"
 import useWindowIsLarge from "../common/hooks/useWindowIsLarge"
 import { sortTeamByAlphabeticalOrder } from "../common/util/sorting"
 // Images
-import Alex from "../images/alex.jpg"
-import Geraldine from "../images/geraldine.jpg"
-import Ryan from "../images/ryan.jpg"
+import Alex from "../images/alex.webp"
+import Geraldine from "../images/geraldine.webp"
+import Ryan from "../images/ryan.webp"
 
 export default function AboutUs() {
   const title = "About Us"
@@ -38,13 +38,25 @@ export default function AboutUs() {
     { name: "Coco M", position: "Backend" },
     { name: "Diane L", position: "UX & Design" },
     { name: "Irina R", position: "UX & Design" },
+    { name: "Yan-Yin C", position: "Frontend"}
   ])
   const alumni = sortTeamByAlphabeticalOrder([
     { name: "Helen", position: "Project Lead", lead: true },
     { name: "Jacky H", position: "Backend" },
     { name: "Karan B", position: "Backend" },
     { name: "Tim W", position: "Frontend" },
     { name: "Guy W", position: "Frontend" },
+    { name: "Myra C", position: "Fullstack" },
+    { name: "Duy N", position: "Fullstack" },
+    { name: "Glenn S", position: "Fullstack" },
+    { name: "Matthew N", position: "Fullstack" },
+    { name: "K Siddana", position: "Fullstack" },
+    { name: "Michele C", position: "Backend" },
+    { name: "Emily R", position: "Fullstack" },
+    { name: "Vivek B", position: "Fullstack" },
+    { name: "Lynna J", position: "Fullstack" },
+    { name: "Gajan N", position: "Fullstack" },
+    { name: "Nicole", position: "Fullstack" },
   ])
 
   return (