diff --git a/src/components/groupImpactComponents/GroupImpactLeaderboard.js b/src/components/groupImpactComponents/GroupImpactLeaderboard.js index 0f6472a3..72a73924 100644 --- a/src/components/groupImpactComponents/GroupImpactLeaderboard.js +++ b/src/components/groupImpactComponents/GroupImpactLeaderboard.js @@ -5,9 +5,18 @@ import { makeStyles } from '@material-ui/core/styles' import PropTypes from 'prop-types' import Divider from '@material-ui/core/Divider' import Button from '@material-ui/core/Button' +import TabIcon from '@material-ui/icons/Tab' +import SearchIcon from '@material-ui/icons/Search' +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart' import ArrowBackIos from '@material-ui/icons/ArrowBackIos' import clsx from 'clsx' -import { groupImpactLeaderboardFAQ } from 'src/utils/urls' +import { + groupImpactLeaderboardFAQ, + tabLandingURL, + searchLandingURL, + shopLandingURL, +} from 'src/utils/urls' +import defaultTheme from 'src/utils/theme' import GroupImpactLeaderboardRow from './GroupImpactLeaderboardRow' const useStyles = makeStyles((theme) => ({ @@ -47,8 +56,17 @@ const useStyles = makeStyles((theme) => ({ flexDirection: 'row', width: '100%', justifyContent: 'flex-start', - paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), + paddingLeft: theme.spacing(2), + alignItems: 'center', + }, + positionRowBoard: { + display: 'flex', + flexDirection: 'row', + width: '100%', + justifyContent: 'flex-start', + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(1), alignItems: 'center', }, impactPoints: { @@ -64,6 +82,39 @@ const useStyles = makeStyles((theme) => ({ link: { color: theme.palette.primary.main, }, + iconWrapper: { + height: '24px', + width: '24px', + borderRadius: '24px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + marginRight: theme.spacing(0.5), + }, + tabIcon: { + backgroundColor: defaultTheme.palette.colors.tab, + }, + searchIcon: { + backgroundColor: defaultTheme.palette.colors.search, + }, + shopIcon: { + backgroundColor: defaultTheme.palette.colors.shop, + }, + referralIcon: { + backgroundColor: defaultTheme.palette.colors.referral, + }, + impactIcons: { + display: 'flex', + flexDirection: 'row', + }, + icon: { + height: '16px', + width: '16px', + color: 'white', + }, + legendCont: { + marginTop: theme.spacing(2), + }, })) const Leaderboard = ({ leaderboardEntries, userId, onClose }) => { @@ -161,6 +212,60 @@ const Leaderboard = ({ leaderboardEntries, userId, onClose }) => { {entriesWithEllipses} + +
+
+
+ +
+ + Points earned by opening tabs with{' '} + + Tab for a Cause + + . + +
+ +
+
+ +
+ + Earn 10x more points by searching with{' '} + + Search for a Cause + + . + +
+ +
+
+ +
+ + Earn unlimited points by shopping with{' '} + + Shop for a Cause + + . + +
+ + {/*
+
+ +
+ + Earn unlimited points by shopping with{' '} + + Shop for a Cause + + . + +
*/} +
) } diff --git a/src/pages/_document.js b/src/pages/_document.js index bed25b84..74d12b8e 100644 --- a/src/pages/_document.js +++ b/src/pages/_document.js @@ -63,7 +63,7 @@ class CustomDocument extends Document { {/* Google Analytics V4 Tag */}