style: update profile + leaderboard

src/components/Blog/BlogArticleCard/BlogArticleCard.style.ts

@@ -23,6 +23,7 @@ export const BlogArticleCardContainer = styled(Card)(({ theme }) => ({
   borderRadius: '32px',
   background: theme.palette.bgTertiary.main,
   transition: 'background-color 250ms',
+  boxShadow: theme.shadows[2],
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     minWidth: 250,
     width: 416,

src/components/Blog/BlogCarousel/BlogCarousel.style.ts

@@ -6,18 +6,22 @@ export const BlogCarouselContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.bgSecondary.main,
   borderRadius: '32px',
   padding: theme.spacing(2),
+  paddingBottom: theme.spacing(1.25),
   margin: theme.spacing(6, 2, 0),
   boxShadow: theme.shadows[1],
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     margin: theme.spacing(2, 8, 0),
     padding: theme.spacing(3),
+    paddingBottom: theme.spacing(2.25),
   },
   [theme.breakpoints.up('md' as Breakpoint)]: {
     padding: theme.spacing(4),
+    paddingBottom: theme.spacing(3.25),
     margin: theme.spacing(12, 8, 0),
   },
   [theme.breakpoints.up('lg' as Breakpoint)]: {
     padding: theme.spacing(6),
+    paddingBottom: theme.spacing(5.25),
   },
   [theme.breakpoints.up('xl' as Breakpoint)]: {
     margin: `${theme.spacing(12, 'auto', 0)}`,

src/components/Blog/BlogCarousel/CarouselContainer.style.ts

@@ -1,4 +1,4 @@
-import { IconButtonTertiary } from '@/components/IconButton.style';
+import { IconButtonSecondary } from '@/components/IconButton.style';
 import type {
   BoxProps,
   Breakpoint,
@@ -11,22 +11,24 @@ export interface CarouselContainerBoxProps extends Omit<BoxProps, 'variant'> {
   styles?: CSSObject;
 }
 
-export const CarouselContainerBox = styled(Box)<CarouselContainerBoxProps>(
-  ({ theme }) => ({
-    display: 'flex',
-    gap: theme.spacing(4),
-    marginTop: theme.spacing(3),
-    overflow: 'auto',
-    width: '100%',
-    overflowY: 'hidden',
-    scrollSnapType: 'x mandatory',
-    '& > *': {
-      flexShrink: 0,
-      scrollSnapAlign: 'center',
-    },
-    '::-webkit-scrollbar': { display: 'none' },
-  }),
-);
+export const CarouselContainerBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'styles',
+})<CarouselContainerBoxProps>(({ theme, styles }) => ({
+  display: 'flex',
+  gap: theme.spacing(4),
+  marginTop: theme.spacing(3),
+  overflow: 'auto',
+  width: '100%',
+  overflowY: 'hidden',
+  scrollSnapType: 'x mandatory',
+  paddingBottom: theme.spacing(0.75),
+  '& > *': {
+    flexShrink: 0,
+    scrollSnapAlign: 'center',
+  },
+  '::-webkit-scrollbar': { display: 'none' },
+  ...styles,
+}));
 
 export const CarouselHeader = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'styles',
@@ -63,7 +65,7 @@ export const CarouselNavigationContainer = styled(Box, {
   ],
 }));
 
-export const CarouselNavigationButton = styled(IconButtonTertiary, {
+export const CarouselNavigationButton = styled(IconButtonSecondary, {
   shouldForwardProp: (prop) => prop !== 'styles',
 })<IconButtonProps>(({ theme }) => ({
   width: 40,

src/components/Blog/BlogCarousel/CarouselContainer.tsx

@@ -1,7 +1,6 @@
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { Box, useTheme, type CSSObject } from '@mui/material';
-
 import type { ReactNode } from 'react';
 import { useCallback, useRef } from 'react';
 import IconHeader from 'src/components/ProfilePage/Common/IconHeader';
@@ -81,6 +80,13 @@ export const CarouselContainer = ({
                 <IconHeader
                   tooltipKey={updateTooltip || ''}
                   title={updateTitle}
+                  sx={(theme) => ({
+                    [theme.breakpoints.down('sm')]: {
+                      '.icon-header-title': {
+                        display: 'none',
+                      },
+                    },
+                  })}
                 />
               )}
             </Box>
@@ -91,14 +97,14 @@ export const CarouselContainer = ({
             aria-label="previous"
             onClick={() => handleChange('prev')}
           >
-            <ArrowBackIcon sx={{ width: '22px', height: '22px' }} />
+            <ChevronLeftIcon sx={{ width: '24px', height: '24px' }} />
           </CarouselNavigationButton>
           <CarouselNavigationButton
             aria-label="next"
             sx={{ marginLeft: theme.spacing(1) }}
             onClick={() => handleChange('next')}
           >
-            <ArrowForwardIcon sx={{ width: '22px', height: '22px' }} />
+            <ChevronRightIcon sx={{ width: '24px', height: '24px' }} />
           </CarouselNavigationButton>
         </CarouselNavigationContainer>
       </CarouselHeader>

src/components/Leaderboard/Leaderboard.style.ts

@@ -18,7 +18,6 @@ export const LeaderboardHeader = styled(Box)(({ theme }) => ({
   flexDirection: 'column-reverse',
   gap: theme.spacing(1.5),
   alignItems: 'flex-start',
-  paddingLeft: theme.spacing(3),
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     gap: 0,
     justifyContent: 'space-between',

src/components/Leaderboard/Leaderboard.tsx

@@ -1,14 +1,18 @@
 'use client';
-import { Typography } from '@mui/material';
+import type { Breakpoint } from '@mui/material';
+import { Typography, useTheme } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAccount } from '@lifi/wallet-management';
+import { Box } from '@mui/material';
+import useClient from 'src/hooks/useClient';
 import type { LeaderboardEntryData } from '../../hooks/useLeaderboard';
 import {
   useLeaderboardList,
   useLeaderboardUser,
 } from '../../hooks/useLeaderboard';
+import IconHeader from '../ProfilePage/Common/IconHeader';
 import { Pagination } from '../ProfilePage/Common/Pagination';
 import { PageContainer } from '../ProfilePage/ProfilePage.style';
 import {
@@ -22,9 +26,6 @@ import {
 import { LeaderboardEntry } from './LeaderboardEntry';
 import { LeaderboardEntrySkeleton } from './LeaderboardEntrySkeleton';
 import { LeaderboardUserEntry } from './LeaderboardUserEntry';
-import IconHeader from '../ProfilePage/Common/IconHeader';
-import useClient from 'src/hooks/useClient';
-import { Box } from '@mui/material';
 
 export const LEADERBOARD_LENGTH = 25;
 
@@ -36,7 +37,7 @@ export const Leaderboard = ({ page: defaultPage }: { page: number }) => {
   const { account } = useAccount();
 
   const { t } = useTranslation();
-
+  const theme = useTheme();
   const isClient = useClient();
 
   const { data: leaderboardData, meta } = useLeaderboardList(
@@ -70,6 +71,11 @@ export const Leaderboard = ({ page: defaultPage }: { page: number }) => {
                 <IconHeader
                   tooltipKey={t('leaderboard.description')}
                   title={`Updated: ${t('format.date', { value: new Date() })}`}
+                  sx={{
+                    [theme.breakpoints.down('sm' as Breakpoint)]: {
+                      display: 'none',
+                    },
+                  }}
                 />
               )}
             </LeaderboardUpdateDateBox>

src/components/Leaderboard/LeaderboardEntry.style.ts

@@ -79,6 +79,11 @@ export const LeaderboardEntryWrapper = styled(Box, {
             right: -12,
           },
         },
+        ':last-of-type': {
+          borderBottomRightRadius: '16px',
+          borderBottomLeftRadius: '16px',
+          backgroundColor: 'red',
+        },
       },
     },
   ],

src/components/Navbar/WalletButtons.tsx

@@ -1,4 +1,6 @@
 'use client';
+import ConnectButton from '@/components/Navbar/ConnectButton';
+import { useWalletAddressImg } from '@/hooks/useAddressImg';
 import { useChains } from '@/hooks/useChains';
 import { useMenuStore } from '@/stores/menu';
 import { getAddressLabel } from '@/utils/getAddressLabel';
@@ -22,7 +24,6 @@ import { mainnet } from 'wagmi/chains';
 import { JUMPER_WASH_PATH } from '../../const/urls';
 import { XPIcon } from '../illustrations/XPIcon';
 import {
-  ConnectButtonLabel,
   ImageWalletMenuButton,
   SkeletonWalletMenuButton,
   WalletLabel,
@@ -31,8 +32,6 @@ import {
   WalletMgmtChainAvatar,
   WalletMgmtWalletAvatar,
 } from './WalletButton.style';
-import { useWalletAddressImg } from '@/hooks/useAddressImg';
-import ConnectButton from '@/components/Navbar/ConnectButton';
 
 export const WalletButtons = () => {
   const { chains } = useChains();
@@ -108,7 +107,7 @@ export const WalletButtons = () => {
                     {points ? t('format.decimal2Digit', { value: points }) : 0}
                   </Typography>
                 )}
-                <XPIcon />
+                <XPIcon props={{ style: { width: 32, height: 32 } }} />
               </WalletMenuButton>
             )}
           <WalletMenuButton

src/components/ProfilePage/Common/IconHeader.style.ts

@@ -9,6 +9,7 @@ export const IconHeaderContainer = styled(Box)(({ theme }) => ({
   paddingRight: '6px',
   paddingLeft: '6px',
   borderRadius: '32px',
+  width: 'fit-content',
 }));
 
 export const IconHeaderTitle = styled(Typography)(({ theme }) => ({

src/components/ProfilePage/Common/IconHeader.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { SxProps, Theme } from '@mui/material';
 import { Tooltip, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { StyledInfoIcon } from '../../TooltipInfo/TooltipInfo.style';
@@ -9,16 +10,19 @@ export interface IconHeaderProps {
   tooltipKey: string;
   title: string;
   icon?: React.ReactNode;
+  sx?: SxProps<Theme>;
 }
 
-const IconHeader = ({ tooltipKey, title, icon }: IconHeaderProps) => {
+const IconHeader = ({ tooltipKey, title, icon, sx }: IconHeaderProps) => {
   const { t } = useTranslation();
   const theme = useTheme();
 
   return (
-    <IconHeaderContainer>
+    <IconHeaderContainer sx={sx}>
       {icon}
-      <IconHeaderTitle variant="title2XSmall">{title}</IconHeaderTitle>
+      <IconHeaderTitle className="icon-header-title" variant="title2XSmall">
+        {title}
+      </IconHeaderTitle>
       <Tooltip
         title={t(tooltipKey as any)}
         sx={{ cursor: 'help', color: theme.palette.text.primary }}

src/components/ProfilePage/LeaderboardCard/LeaderboardCard.style.ts

@@ -54,12 +54,17 @@ export const CardButton = styled(ButtonSecondary)(({ theme }) => ({
   width: '100%',
   lineHeight: '18px',
   height: 40,
-  color: theme.palette.text.primary,
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.primary.main
+      : theme.palette.text.primary,
 }));
 
 export const LeaderboardUserPositionButton = styled(ButtonTransparent)(
   ({ theme }) => ({
     padding: theme.spacing(0, 1),
+    textDecoration: 'none',
+    position: 'relative',
     marginTop: theme.spacing(0.5),
     height: 64,
     background: 'transparent',

src/components/ProfilePage/LeaderboardCard/LeaderboardCard.tsx

@@ -1,10 +1,10 @@
 import { Box } from '@mui/material';
-import Link from 'next/link';
 import { useTranslation } from 'react-i18next';
 import { RankIcon } from 'src/components/illustrations/IconRANK';
 import { LEADERBOARD_LENGTH } from 'src/components/Leaderboard/Leaderboard';
 import type { LeaderboardEntryData } from '../../../hooks/useLeaderboard';
 import { useLeaderboardUser } from '../../../hooks/useLeaderboard';
+import IconHeader from '../Common/IconHeader';
 import {
   CardButton,
   CardButtonContainer,
@@ -13,7 +13,6 @@ import {
   RankContainer,
   RankContentContainer,
 } from './LeaderboardCard.style';
-import IconHeader from '../Common/IconHeader';
 
 export const LeaderboardCard = ({ address }: { address?: string }) => {
   const { data: leaderboardUserData }: { data: LeaderboardEntryData } =
@@ -35,19 +34,17 @@ export const LeaderboardCard = ({ address }: { address?: string }) => {
       </Box>
       <RankContentContainer>
         {position ? (
-          <Link
+          <LeaderboardUserPositionButton
+            as={'a'}
             aria-label="Open leaderboard with your position"
             href={`/leaderboard?page=${userPage}`}
-            passHref
           >
-            <LeaderboardUserPositionButton aria-label="Open leaderboard page with your position">
-              <LeaderboardUserTitle variant="titleLarge">
-                {leaderboardUserData?.position
-                  ? t('format.decimal2Digit', { value: position })
-                  : 'N/A'}
-              </LeaderboardUserTitle>
-            </LeaderboardUserPositionButton>
-          </Link>
+            <LeaderboardUserTitle variant="titleLarge">
+              {leaderboardUserData?.position
+                ? t('format.decimal2Digit', { value: position })
+                : 'N/A'}
+            </LeaderboardUserTitle>
+          </LeaderboardUserPositionButton>
         ) : (
           <LeaderboardUserTitle variant="titleLarge">N/A</LeaderboardUserTitle>
         )}

src/components/ProfilePage/LevelBox/PointsBox.tsx

@@ -1,19 +1,19 @@
 'use client';
 
-import { Box } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { XPIcon } from 'src/components/illustrations/XPIcon';
-import { PointsDisplay } from './PointsDisplay';
-import IconHeader from '../Common/IconHeader';
 import useClient from 'src/hooks/useClient';
+import IconHeader from '../Common/IconHeader';
+import { PointsDisplay } from './PointsDisplay';
 
 interface PointsBoxProps {
   points?: number;
 }
 
 export const PointsBox = ({ points }: PointsBoxProps) => {
   const { t } = useTranslation();
-
+  const theme = useTheme();
   const isClient = useClient();
 
   return (
@@ -23,6 +23,14 @@ export const PointsBox = ({ points }: PointsBoxProps) => {
           tooltipKey="profile_page.pointsInfo"
           title={`Updated: ${t('format.date', { value: new Date() })}`}
           icon={<XPIcon />}
+          sx={{
+            [theme.breakpoints.down('sm')]: {
+              // display: 'none',
+              '.icon-header-title': {
+                display: 'none',
+              },
+            },
+          }}
         />
       )}
       <Box display="flex" alignItems="center">

src/components/ProfilePage/LevelBox/ProgressionBar.style.ts

@@ -47,7 +47,7 @@ export const ProgressionChart = styled(Box, {
   position: 'relative',
   overflow: 'hidden',
   borderRadius: '12px',
-  height: '16px',
+  height: 8,
   width: '100%',
   display: 'flex',
   variants: [

src/components/ProfilePage/ProfilePage.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { useLoyaltyPass } from '@/hooks/useLoyaltyPass';
-import { useAccount } from '@lifi/wallet-management';
 import { useContext } from 'react';
 import { useMerklRewardsOnCampaigns } from 'src/hooks/useMerklRewardsOnCampaigns';
 import { useTraits } from 'src/hooks/useTraits';
@@ -21,7 +20,6 @@ import { ProfileContext } from '@/providers/ProfileProvider';
 import { CampaignBanner } from './CampaignBanner/CampaignBanner';
 
 export const ProfilePage = () => {
-  const { account } = useAccount();
   const { walletAddress, isPublic } = useContext(ProfileContext);
   const { isLoading, points, pdas } = useLoyaltyPass(walletAddress);
   const { traits } = useTraits();