diff --git a/src/pages/index.js b/src/pages/index.js index 4e00d2b8..314c97a3 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -36,6 +36,7 @@ import { makeStyles } from '@material-ui/core/styles' import grey from '@material-ui/core/colors/grey' import Typography from '@material-ui/core/Typography' import IconButton from '@material-ui/core/IconButton' +import LinearProgress from '@material-ui/core/LinearProgress' import SettingsIcon from '@material-ui/icons/Settings' import Button from '@material-ui/core/Button' import Chip from '@material-ui/core/Chip' @@ -70,6 +71,7 @@ import { import logger from 'src/utils/logger' import FullPageLoader from 'src/components/FullPageLoader' import useData from 'src/utils/hooks/useData' +import useInterval from 'src/utils/hooks/useInterval' import { CAT_CHARITY, STORAGE_NEW_USER_CAUSE_ID, @@ -282,6 +284,10 @@ const useStyles = makeStyles((theme) => ({ notificationTextLink: { textDecoration: 'underline', }, + notificationProgress: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(1), + }, searchbarNotification: { zIndex: 99999, position: 'absolute', @@ -631,6 +637,12 @@ const Index = ({ data: fallbackData, userAgent }) => { setShowCustomNotification(false) } + // Animate progress + const [sfacNotifProgress, setSfacNotifProgress] = useState(0) + useInterval(() => { + setSfacNotifProgress(20) + }, 300) + // Don't load the page until there is data. Data won't exist // if the user doesn't have auth cookies and thus doesn't fetch // any data server-side, in which case we'll fetch data in @@ -827,36 +839,33 @@ const Index = ({ data: fallbackData, userAgent }) => { gutterBottom className={classes.notificationTitle} > - Give the gift of clean water this December! + We're well on our way - - Every search you make on{' '} - - Search for a Cause - {' '} - this month will contribute to the rehabilitation of - a community well in Malawi through{' '} - charity:water.{' '} + + We’re 20% of the way to{' '} - Learn more about the project here. + restoring a well in Malawi + ! Try Search for a Cause to help us reach our goal + by the end of the month. + } buttons={
- +
} diff --git a/src/utils/constants.js b/src/utils/constants.js index f2de71c1..1d1a9894 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -9,7 +9,7 @@ export const MEDIA_ENDPOINT = process.env.NEXT_PUBLIC_MEDIA_ENDPOINT export const NOTIF_DISMISS_PREFIX = 'tab.user.dismissedNotif' // Current shown global notification code. Use Pascal case. -export const CURRENT_CUSTOM_NOTIF_CODE = 'SFACDec2022' +export const CURRENT_CUSTOM_NOTIF_CODE = 'SFACDec2022v2' // One-offs export const USER_SURVEY_2022_NOTIFICATION = 'tab.user.dismissedUserSurvey2022'