Fix leaderboard styles

src/components/Tabs.tsx

@@ -3,6 +3,7 @@ import { replaceUrl } from '@/utils/window'
 import { Tab } from '@headlessui/react'
 import { ComponentProps, Fragment, ReactNode, useEffect, useState } from 'react'
 import Container from './Container'
+import { mutedTextColorStyles } from './content-staking/utils/commonStyles'
 
 type Tab = {
   id: string
@@ -116,7 +117,8 @@ export default function Tabs({
                 >
                   <span
                     className={cx(
-                      'relative z-10 block py-3.5 text-text-muted transition-colors',
+                      mutedTextColorStyles,
+                      'relative z-10 block py-3.5 transition-colors',
                       'after:absolute after:bottom-0 after:left-0 after:h-1 after:w-full after:origin-bottom after:scale-y-0 after:rounded-t-full after:bg-text-primary after:opacity-0 after:transition',
                       'group-hover:after:opacity-100 hover-hover:group-hover:text-text-primary hover-hover:group-hover:after:scale-y-100',
                       selected &&

src/components/leaderboard/MyStats/IncreaseStakeBanner.tsx

@@ -53,10 +53,10 @@ const IncreaseStakeBanner = () => {
         )}
       />
       <div className='flex flex-col gap-2'>
-        <span className='text-base font-semibold leading-normal'>
+        <span className='text-lg font-semibold leading-normal'>
           Increase your daily rewards by locking more SUB
         </span>
-        <span className={cx('text-sm font-medium', mutedTextColorStyles)}>
+        <span className={cx('text-base font-medium', mutedTextColorStyles)}>
           You can lock {balance}more SUB to increase your future rewards
         </span>
       </div>

src/components/leaderboard/MyStats/LeaderboardProfilePreview.tsx

@@ -28,7 +28,7 @@ const LeaderboardProfilePreview = ({
   return (
     <div
       className={cx(
-        'relative flex gap-4 rounded-[20px] border md:flex-col md:items-center',
+        'relative flex justify-center gap-4 rounded-[20px] border md:flex-col md:items-center',
         ' p-4',
         {
           ['border-[rgba(99,102,241,.2)] bg-[#edf4ff] dark:bg-[rgba(0,83,255,0.10)]']:
@@ -90,6 +90,7 @@ const ProfileLink = ({ children, spaceId }: ProfileLinkProps) => {
         </CustomLink>
       }
       panelSize='sm'
+      triggerClassName='min-w-fit'
       yOffset={4}
       placement='top'
       triggerOnHover

src/components/leaderboard/MyStats/LeaderboardStatsData.tsx

@@ -67,7 +67,7 @@ export const UserStatsCard = ({
     value && decimal ? convertToBalanceWithDecimal(value, decimal) : ZERO
 
   const titleElement = (
-    <span className={cx('text-sm leading-[22px]', mutedTextColorStyles)}>
+    <span className={cx('text-base leading-[22px]', mutedTextColorStyles)}>
       {title}
     </span>
   )

src/components/leaderboard/MyStats/LeaderboardTable.tsx

@@ -45,7 +45,7 @@ export const leaderboardColumns = (
     name: 'Rewards',
     align: 'right',
     className: cx(
-      'p-0 py-2 pr-4 md:w-[20%] w-[38%]',
+      'p-0 py-2 pr-4 md:w-[20%] w-[38%] font-semibold',
       customColumnsClassNames?.[2]
     ),
   },
@@ -225,16 +225,16 @@ export const UserPreview = ({ address }: UserPreviewProps) => {
 
   return (
     <div className='flex items-center gap-2'>
-      <AddressAvatar address={address} className='h-[38px] w-[38px]' />
+      <AddressAvatar address={address} className='h-[40px] w-[40px]' />
       <div className='flex flex-col gap-2'>
         <Name
           address={address}
-          className='text-sm font-medium leading-none !text-text'
+          className='text-base font-medium leading-none !text-text'
         />
         {about && (
           <div
             className={cx(
-              'overflow-hidden overflow-ellipsis whitespace-nowrap text-xs leading-none',
+              'overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-none',
               mutedTextColorStyles
             )}
           >

src/components/leaderboard/MyStats/StakerRewards.tsx

@@ -1,4 +1,5 @@
 import FormatBalance from '@/components/FormatBalance'
+import LinkText from '@/components/LinkText'
 import { mutedTextColorStyles } from '@/components/content-staking/utils/commonStyles'
 import { ZERO } from '@/constants/config'
 import { useGetChainDataByNetwork } from '@/services/chainsInfo/query'
@@ -8,7 +9,7 @@ import { cx } from '@/utils/class-names'
 import { BN } from '@polkadot/util'
 import { convertToBalanceWithDecimal, isEmptyArray } from '@subsocial/utils'
 import dayjs from 'dayjs'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 
 type StakerRewardsProps = {
   address: string
@@ -17,6 +18,7 @@ type StakerRewardsProps = {
 
 const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => {
   const { data, isLoading } = getRewardHistoryQuery.useQuery(address)
+  const [isViewMore, setIsViewMore] = useState(false)
 
   const { tokenSymbol, decimal } = useGetChainDataByNetwork('subsocial') || {}
 
@@ -32,6 +34,11 @@ const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => {
 
   const sectionTitle = leaderboardRole === 'staker' ? 'Staker' : 'Creator'
 
+  const rewardsData = useMemo(
+    () => (isViewMore ? rewards : rewards.slice(0, 13)),
+    [rewards.length, isViewMore]
+  )
+
   return (
     <div className='flex h-fit flex-col gap-4 rounded-2xl bg-white p-4 dark:bg-slate-800 md:gap-5'>
       <div className='flex flex-col gap-2'>
@@ -49,7 +56,7 @@ const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => {
       </div>
       {rewards && !isEmptyArray(rewards) ? (
         <div className='flex flex-col gap-5'>
-          {rewards.map((reward) => {
+          {rewardsData.map((reward) => {
             const userRewardValue =
               leaderboardRole === 'staker'
                 ? reward.reward
@@ -80,6 +87,15 @@ const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => {
               />
             )
           })}
+          {!isViewMore && (
+            <LinkText
+              className='w-full text-center hover:no-underline'
+              onClick={() => setIsViewMore(true)}
+              variant={'primary'}
+            >
+              View more
+            </LinkText>
+          )}
         </div>
       ) : (
         <span className={mutedTextColorStyles}>No rewards yet</span>

src/components/leaderboard/index.tsx

@@ -82,7 +82,7 @@ const LeaderboardContent = ({ address }: LeaderboardContentProps) => {
     return (
       <Tabs
         className='w-full max-w-full border-b border-border-gray bg-background-light text-sm md:bg-background-light/50'
-        panelClassName='mt-0 w-full max-w-full px-4 pt-5'
+        panelClassName='mt-0 w-full max-w-full px-4 md:pt-5 pt-4'
         asContainer
         defaultTab={0}
         tabs={tabs}

src/constants/layout.ts

@@ -2,5 +2,13 @@ import { currentNetwork } from '@/utils/network'
 
 export const PAGES_WITH_LARGER_CONTAINER =
   currentNetwork === 'subsocial'
-    ? ['/staking', '/', '/[hubId]', '/opengov', '/opengov/[id]']
+    ? [
+        '/',
+        '/[hubId]',
+        '/staking',
+        '/opengov',
+        '/opengov/[id]',
+        '/leaderboard',
+        '/leaderboard/[address]',
+      ]
     : []