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 }) => {