diff --git a/src/js/components/Navigation/FooterBar.jsx b/src/js/components/Navigation/FooterBar.jsx index 5fb1179e4..0dad81ad5 100644 --- a/src/js/components/Navigation/FooterBar.jsx +++ b/src/js/components/Navigation/FooterBar.jsx @@ -1,8 +1,8 @@ -import { Groups, Home, HowToVote, Info, MoreHoriz, People, QuestionAnswer, VerifiedUser } from '@mui/icons-material'; +import { Article, CalendarMonth, Groups, Home, HowToVote, Info, MoreHoriz, People, QuestionAnswer, VerifiedUser } from '@mui/icons-material'; import { Badge, BottomNavigation, BottomNavigationAction, ClickAwayListener } from '@mui/material'; import withStyles from '@mui/styles/withStyles'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, { Suspense } from 'react'; import styled from 'styled-components'; import DesignTokenColors from '../../common/components/Style/DesignTokenColors'; import DelayedLoad from '../../common/components/Widgets/DelayedLoad'; @@ -11,7 +11,7 @@ import AppObservableStore, { messageService } from '../../common/stores/AppObser import { isIOS } from '../../common/utils/cordovaUtils'; import historyPush from '../../common/utils/historyPush'; import { normalizedHref } from '../../common/utils/hrefUtils'; -import { isAndroid, isCordova } from '../../common/utils/isCordovaOrWebApp'; +import { isAndroid, isCordova, isWebApp } from '../../common/utils/isCordovaOrWebApp'; import { renderLog } from '../../common/utils/logging'; import normalizedImagePath from '../../common/utils/normalizedImagePath'; import stringContains from '../../common/utils/stringContains'; @@ -23,14 +23,21 @@ import ShareButtonFooter from '../Share/ShareButtonFooter'; const nextReleaseFeaturesEnabled = webAppConfig.ENABLE_NEXT_RELEASE_FEATURES === undefined ? false : webAppConfig.ENABLE_NEXT_RELEASE_FEATURES; +const OpenExternalWebSite = React.lazy(() => import(/* webpackChunkName: 'OpenExternalWebSite' */ '../../common/components/Widgets/OpenExternalWebSite')); + // It's not ideal to have two images, but this is a complex svg, and I couldn't figure out how to change the fill color with a variable const capitalBuilding = '/img/global/svg-icons/capital-building.svg'; const capitalBuildingSelected = '/img/global/svg-icons/capital-building-selected.svg'; +const weVoteIcon = '/img/global/svg-icons/we-vote-icon-square-color-grey.svg'; +const weVoteIconSelected = '/img/global/svg-icons/we-vote-icon-square-color-dark.svg'; + function MoreMenuOverlay ({ anchorRef, classes, friendInvitationsSentToMeCount, onClose }) { const pathname = normalizedHref(); + const isAbout = pathname.includes('/more/faq'); const isChallenges = pathname.includes('/challenges'); const isDiscuss = pathname.includes('/news'); + const isElectionFinder = pathname.includes('/election-finder'); const isFriends = pathname.includes('/friends'); const isManage = pathname.includes('/manage') || pathname.includes('/no-candidates-claimed'); @@ -43,10 +50,34 @@ function MoreMenuOverlay ({ anchorRef, classes, friendInvitationsSentToMeCount, return ( + { onClose(); historyPush('/more/faq'); }}> + + About & FAQ + { AppObservableStore.setShowHowItWorksModal(true); }}> How it works + {nextReleaseFeaturesEnabled && ( + { onClose(); historyPush('/no-candidates-claimed'); }}> + + Candidates +
+ I'm managing +
+ )} + { onClose(); historyPush('/election-finder'); }}> + + Election Finder + { onClose(); historyPush('/friends'); }}> {friendInvitationsSentToMeCount > 0 ? ( - {nextReleaseFeaturesEnabled && ( - { onClose(); historyPush('/news'); }}> - - Discuss - - )} - {nextReleaseFeaturesEnabled && ( - { onClose(); historyPush('/no-candidates-claimed'); }}> - - Candidates -
- I'm managing -
- )} + { onClose(); historyPush('/news'); }}> + + Discuss + {nextReleaseFeaturesEnabled && ( { onClose(); historyPush('/challenges'); }}> Challenges )} + {isWebApp() && ( + }> + +
+ Blog + + )} + /> + + )} );