chore: Profile page UI updates

Author: admsk2

src/components/Button/Button.style.ts

@@ -91,3 +91,12 @@ export const SuperfestButton = styled(ButtonBase)<MuiButtonProps>(
     },
   }),
 );
+
+export const LevelButton = styled(ButtonSecondary)<MuiButtonProps>(() => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  pointerEvents: 'none',
+  paddingLeft: '12px',
+  height: '32px',
+}));

src/components/ProfilePage/AddressBox/AddressBox.style.ts

@@ -18,12 +18,15 @@ export const AddressBoxContainer = styled(Box, {
   position: 'relative',
   paddingBottom: theme.spacing(1),
   width: '100%',
+  minHeight: 200,
+  boxShadow: theme.palette.shadow.main,
 
   ...(!imgUrl && {
     background: `linear-gradient(to bottom, ${theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.accent1Alt.main} 50%, ${theme.palette.mode === 'light' ? theme.palette.grey[100] : 'transparent'} 50%)`,
   }),
 
   [theme.breakpoints.up('sm')]: {
+    minHeight: 256,
     paddingTop: 0,
     paddingBottom: 0,
   },

src/components/ProfilePage/Common/CustonInfoIcon.tsx

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material/styles';
+import InfoIcon from '@mui/icons-material/Info';
+
+export const StyledInfoIcon = styled(InfoIcon)({
+  width: 16,
+  height: 16,
+  top: '3px',
+  left: '8px',
+  position: 'relative',
+  opacity: '0.5',
+});

src/components/ProfilePage/Common/IconHeader.tsx

@@ -0,0 +1,27 @@
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { NoSelectTypography } from '../ProfilePage.style';
+import { StyledInfoIcon } from './CustonInfoIcon';
+
+interface IconHeaderProps {
+  tooltipKey: string;
+  title: string;
+}
+
+export const IconHeader = ({ tooltipKey, title }: IconHeaderProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <NoSelectTypography fontSize="14px" lineHeight="18px" fontWeight={700}>
+      {title}
+      <Tooltip
+        title={t(tooltipKey as any)}
+        placement="top"
+        enterTouchDelay={0}
+        arrow
+      >
+        <StyledInfoIcon />
+      </Tooltip>
+    </NoSelectTypography>
+  );
+};

src/components/ProfilePage/Common/Pagination.tsx

@@ -0,0 +1,64 @@
+import { Box, Button } from '@mui/material';
+import {
+  FirstPage,
+  LastPage,
+  ChevronLeft,
+  ChevronRight,
+} from '@mui/icons-material';
+import { NoSelectTypography } from '../ProfilePage.style';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onFirstPage: () => void;
+  onPreviousPage: () => void;
+  onNextPage: () => void;
+  onLastPage: () => void;
+}
+
+export const Pagination = ({
+  currentPage,
+  totalPages,
+  onFirstPage,
+  onPreviousPage,
+  onNextPage,
+  onLastPage,
+}: PaginationProps) => {
+  return (
+    <Button
+      aria-label="Page Navigation"
+      size="medium"
+      sx={{
+        alignItems: 'center',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+        pointerEvents: 'none',
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <FirstPage
+          onClick={onFirstPage}
+          sx={{ cursor: 'pointer', pointerEvents: 'auto' }}
+        />
+        <ChevronLeft
+          onClick={onPreviousPage}
+          sx={{ cursor: 'pointer', pointerEvents: 'auto' }}
+        />
+      </Box>
+      <NoSelectTypography fontSize="16px" lineHeight="18px" fontWeight={600}>
+        {currentPage}/{totalPages}
+      </NoSelectTypography>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <ChevronRight
+          onClick={onNextPage}
+          sx={{ cursor: 'pointer', pointerEvents: 'auto' }}
+        />
+        <LastPage
+          onClick={onLastPage}
+          sx={{ cursor: 'pointer', pointerEvents: 'auto' }}
+        />
+      </Box>
+    </Button>
+  );
+};

src/components/ProfilePage/Common/PaginationControl.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { SxProps, Theme } from '@mui/material';
+import { Box } from '@mui/material';
+import { FirstPage, ChevronLeft } from '@mui/icons-material';
+
+interface PaginationControlProps {
+  onClick: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+}
+
+interface PaginationControlsProps {
+  onFirstPage: () => void;
+  onPreviousPage: () => void;
+  disabled?: boolean;
+  sx?: SxProps<Theme>;
+}
+
+const PaginationControl = ({
+  onClick,
+  disabled = false,
+  children,
+}: PaginationControlProps) => (
+  <Box
+    component="span"
+    onClick={disabled ? undefined : onClick}
+    sx={{
+      cursor: disabled ? 'default' : 'pointer',
+      pointerEvents: 'auto',
+      opacity: disabled ? 0.5 : 1,
+      '&:hover': { opacity: disabled ? 0.5 : 0.7 },
+    }}
+  >
+    {children}
+  </Box>
+);
+
+export const PaginationControls = ({
+  onFirstPage,
+  onPreviousPage,
+  disabled = false,
+  sx = {},
+}: PaginationControlsProps) => {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', ...sx }}>
+      <PaginationControl onClick={onFirstPage} disabled={disabled}>
+        <FirstPage />
+      </PaginationControl>
+      <PaginationControl onClick={onPreviousPage} disabled={disabled}>
+        <ChevronLeft />
+      </PaginationControl>
+    </Box>
+  );
+};

src/components/ProfilePage/Leaderboard/Leaderboard.style.ts

@@ -1,4 +1,4 @@
-import { Box, styled } from '@mui/material';
+import { alpha, Box, styled } from '@mui/material';
 
 export const LeaderboardContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.bgSecondary.main,
@@ -8,3 +8,26 @@ export const LeaderboardContainer = styled(Box)(({ theme }) => ({
   margin: theme.spacing(4, 0, 0),
   boxShadow: theme.palette.shadow.main,
 }));
+
+export const StyledLeaderboardEntry = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'isUserPosition',
+})<{ isUserPosition: boolean }>(({ theme, isUserPosition }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  margin: '10px 0',
+  position: 'relative',
+  ...(isUserPosition && {
+    '&:before': {
+      position: 'absolute',
+      top: '-6px',
+      left: '-12px',
+      content: '""',
+      height: '36px',
+      width: '312px',
+      borderRadius: '6px',
+      backgroundColor: alpha(theme.palette.black.main, 0.04),
+    },
+  }),
+}));