Fix Minor Issues

src/components/creators/MobileIncreaseSubRewards.module.sass

@@ -8,7 +8,7 @@
   gap: $space_normal
   background: #FFEDF5
   border-radius: 0px 0px $border_radius_huge $border_radius_huge
-  padding: $space_normal
+  padding: $space_small $space_normal
   overflow: hidden
 
   .Title, .Link
@@ -23,4 +23,10 @@
     left: 75%
     border-radius: 50%
     width: 400px
-    height: 400px
+    height: 400px
+
+.ActiveStakingBanner
+  background: #EDF4FF
+
+  .Gradient
+    background: rgba(140, 180, 252, 0.18)

src/components/creators/MobileIncreaseSubRewards.tsx

@@ -5,25 +5,41 @@ import { ComponentProps } from 'react'
 import { useFetchStakeData } from 'src/rtk/features/creators/stakesHooks'
 import { activeStakingLinks } from 'src/utils/links'
 import { useMyAddress } from '../auth/MyAccountsContext'
+import { MutedSpan } from '../utils/MutedText'
 import styles from './MobileIncreaseSubRewards.module.sass'
 
 export type MobileIncreaseSubRewardsProps = ComponentProps<'div'> & {
-  space: SpaceData
+  space?: SpaceData
+  isActiveStakingBanner?: boolean
 }
 
 export default function MobileIncreaseSubRewards(props: MobileIncreaseSubRewardsProps) {
+  const { space, isActiveStakingBanner } = props
   const myAddress = useMyAddress()
-  const { data } = useFetchStakeData(myAddress ?? '', props.space.id)
-  if (!data?.hasStaked) return null
+  const { data } = useFetchStakeData(myAddress ?? '', space?.id || '')
+  if (!data?.hasStaked && space?.id) return null
 
   return (
-    <div {...props} className={clsx(props.className, styles.MobileIncreaseSubRewards)}>
-      <span className={styles.Title}>Increase SUB rewards</span>
-      <Link href={activeStakingLinks.learnMore} passHref>
-        <a target='_blank' className={styles.Link}>
-          Learn more
-        </a>
-      </Link>
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        styles.MobileIncreaseSubRewards,
+        isActiveStakingBanner && styles.ActiveStakingBanner,
+      )}
+    >
+      <span className={styles.Title}>
+        {isActiveStakingBanner ? 'Active Staking' : 'Increase SUB rewards'}
+      </span>
+      {isActiveStakingBanner ? (
+        <MutedSpan className={styles.Link}>Coming soon</MutedSpan>
+      ) : (
+        <Link href={activeStakingLinks.learnMore} passHref>
+          <a target='_blank' className={styles.Link}>
+            Learn more
+          </a>
+        </Link>
+      )}
       <div className={styles.Gradient} />
     </div>
   )

src/components/creators/cards/MyStakeCard.tsx

@@ -1,5 +1,5 @@
 import { SpaceData } from '@subsocial/api/types'
-import { Button, Skeleton } from 'antd'
+import { Button, Skeleton, Tooltip } from 'antd'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { BsBoxArrowUpRight } from 'react-icons/bs'
@@ -44,7 +44,9 @@ export default function MyStakeCard({ space }: MyStakeCardProps) {
         <div className={clsx(styles.MyStake, isMobile && 'flex-column')}>
           <div className='FontSmall ColorMuted d-flex align-items-center GapMini'>
             <span>My Stake</span>
-            <SlQuestion className={clsx('FontTiny', styles.HelpIcon)} />
+            <Tooltip title='How many tokens you have staked towards this creator'>
+              <SlQuestion className={clsx('FontTiny', styles.HelpIcon)} />
+            </Tooltip>
           </div>
           {loading ? (
             <Skeleton round paragraph={false} className={styles.Skeleton} />

src/components/lists/InfiniteList.tsx

@@ -1,4 +1,5 @@
 import { isEmptyArray, nonEmptyArr } from '@subsocial/utils'
+import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
@@ -52,7 +53,7 @@ export const InfiniteListByPage = <T extends any>(props: InfiniteListByPageProps
 }
 
 export const InfinitePageList = <T extends any>(props: InfiniteListByPageProps<T>) => {
-  return <InfiniteListByPage {...props} className='DfInfinitePageList' />
+  return <InfiniteListByPage {...props} className={clsx('DfInfinitePageList', props.className)} />
 }
 
 const canHaveMoreData = <T extends any>(currentPageItems?: T[]) => {

src/components/main/HomePage.tsx

@@ -8,9 +8,12 @@ import config from 'src/config'
 import { GET_TOTAL_COUNTS } from 'src/graphql/queries'
 import { GetHomePageData } from 'src/graphql/__generated__/GetHomePageData'
 import { getInitialPropsWithRedux } from 'src/rtk/app'
+import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks'
 import { PostKind } from 'src/types/graphql-global-types'
-import { useIsSignedIn } from '../auth/MyAccountsContext'
+import { useIsSignedIn, useMyAddress } from '../auth/MyAccountsContext'
 import { CreatorDashboardHomeVariant } from '../creators/CreatorDashboardSidebar'
+import MobileIncreaseSubRewards from '../creators/MobileIncreaseSubRewards'
+import { useIsMobileWidthOrDevice } from '../responsive'
 import { CreatorsSpaces } from '../spaces/LatestSpacesPage'
 import Section from '../utils/Section'
 import style from './HomePage.module.sass'
@@ -165,8 +168,18 @@ const TabsHomePage = ({
     }
   }, [tab, type, date])
 
+  const myAddress = useMyAddress()
+  const { data, loading } = useFetchTotalStake(myAddress ?? '')
+  const isMobile = useIsMobileWidthOrDevice()
+
   return (
     <>
+      {isMobile && !loading && (
+        <MobileIncreaseSubRewards
+          style={{ margin: '-12px -16px 0' }}
+          isActiveStakingBanner={!data?.hasStaked}
+        />
+      )}
       <span>
         <AffixTabs tabKey={tab} setKey={onChangeKey} visible={hidden} {...props} />
       </span>

src/components/main/PageWrapper.tsx

@@ -170,7 +170,7 @@ export const PageContent: FC<Props> = ({
                 margin: -BOX_SHADOW_OFFSET,
                 padding: BOX_SHADOW_OFFSET,
               }}
-              className='HideScrollbar'
+              className='HideScrollbar sm-hidden'
             >
               <CreatorDashboardSidebar dashboardType={creatorDashboardSidebarType} />
               {/* <OnBoardingSidebar hideOnBoardingSidebar={() => setShowOnBoardingSidebar(false)} /> */}

src/components/spaces/LatestSpacesPage.tsx

@@ -28,6 +28,7 @@ type Props = {
   totalSpaceCount: number
   filter: SpaceFilterType
   dateFilter?: DateFilterType
+  className?: string
 }
 
 const loadMoreSpacesFn = async (
@@ -69,7 +70,7 @@ const loadMoreSpacesFn = async (
 }
 
 const InfiniteListOfSpaces = (props: Props) => {
-  const { totalSpaceCount, initialSpaceIds, filter, dateFilter, customFetcher } = props
+  const { totalSpaceCount, initialSpaceIds, filter, dateFilter, customFetcher, className } = props
   const client = useDfApolloClient()
   const dispatch = useDispatch()
   const { subsocial } = useSubsocialApi()
@@ -94,6 +95,7 @@ const InfiniteListOfSpaces = (props: Props) => {
   const List = useCallback(
     () => (
       <InfinitePageList
+        className={className}
         loadingLabel='Loading more spaces...'
         dataSource={initialSpaceIds}
         loadMore={loadMore}
@@ -134,6 +136,7 @@ export const CreatorsSpaces = () => {
     shuffledCreators = shuffle(spaceIds)
     return shuffledCreators
   }
+
   return (
     <InfiniteListOfSpaces
       totalSpaceCount={creators.length ?? 0}

src/components/spaces/ViewSpace.tsx

@@ -124,7 +124,7 @@ export const InnerViewSpace = (props: Props) => {
   const setChatConfig = useSetChatEntityConfig()
   const setChatOpen = useSetChatOpen()
 
-  const { isCreatorSpace } = useIsCreatorSpace(spaceData?.id)
+  const { isCreatorSpace, loading } = useIsCreatorSpace(spaceData?.id)
 
   // We do not return 404 page here, because this component could be used to render a space in list.
   if (!spaceData) return null
@@ -292,7 +292,7 @@ export const InnerViewSpace = (props: Props) => {
     )
   }
 
-  const showCreatorCards = isCreatorSpace && isMobile
+  const showCreatorCards = isCreatorSpace && isMobile && !loading
 
   return (
     <Section className='mt-3'>
@@ -313,7 +313,9 @@ export const InnerViewSpace = (props: Props) => {
 
 function MobileCreatorCard({ spaceData }: { spaceData: SpaceData }) {
   const myAddress = useMyAddress()
-  const { data } = useFetchStakeData(myAddress ?? '', spaceData.id)
+  const { data, loading } = useFetchStakeData(myAddress ?? '', spaceData.id)
+
+  if (loading) return null
 
   return (
     <div className='mt-4'>

src/styles/subsocial-mobile.scss

@@ -28,9 +28,6 @@
   .ant-tabs-content-holder {
     padding: 0 $space_normal;
   }
-  .DfHomeTab > .ant-tabs-nav {
-    margin-bottom: $space_normal;
-  }
 }
 
 .infinite-scroll-component {
@@ -243,9 +240,6 @@
       margin-top: 0;
       font-size: $font_large;
     }
-    &.DfSegment {
-      padding-bottom: 0 !important;
-    }
   }
 
   .DfPostImagePreviewWrapper {

src/styles/subsocial.scss

@@ -534,6 +534,9 @@ a {
   // margin: $space_small 0;
   /* white-space: pre-wrap; */
 }
+.-mt-2 {
+  margin-top: -$space_small !important;
+}
 
 .DfBookPage {
   @extend .DfBoxShadow;
@@ -2168,3 +2171,9 @@ hr {
 .ant-form-item-explain {
   margin-top: 4px;
 }
+
+@media screen and (max-width: 768px) {
+  .sm-hidden {
+    display: none !important;
+  }
+}