feat: move top users card in right panel on medium screen

dappforce · Jan 18, 2024 · c824fcd · c824fcd
1 parent 9cfb676
commit c824fcd
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/src/components/creators/TopUsersCard.tsx b/src/components/creators/TopUsersCard.tsx
@@ -6,6 +6,7 @@ import { useFetchProfileSpaces, useSelectProfileSpace, useSelectSpace } from 'sr
 import { useFetchTopUsers } from 'src/rtk/features/activeStaking/hooks'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { SpaceAvatar } from '../spaces/helpers'
+import ViewSpaceLink from '../spaces/ViewSpaceLink'
 import { MutedSpan } from '../utils/MutedText'
 import Segment from '../utils/Segment'
 
@@ -119,19 +120,24 @@ function UserInfo({
         )}
       </div>
       <div className='d-flex flex-column' style={{ minWidth: 0 }}>
-        <span
-          className='FontWeightMedium'
-          style={{
-            minWidth: 0,
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            position: 'relative',
-            top: '2px',
-          }}
-        >
-          {space.content?.name ?? 'Unnamed'}
-        </span>
+        <ViewSpaceLink
+          title={
+            <span
+              className='FontWeightMedium'
+              style={{
+                minWidth: 0,
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                position: 'relative',
+                top: '2px',
+              }}
+            >
+              {space.content?.name ?? 'Unnamed'}
+            </span>
+          }
+          space={space.struct}
+        />
         <div className='d-flex align-items-center ColorMuted GapMini'>
           <span>{user.superLikesCount} Likes</span>
         </div>

diff --git a/src/components/main/PageWrapper.tsx b/src/components/main/PageWrapper.tsx
@@ -122,7 +122,7 @@ export const PageContent: FC<Props> = ({
   // const myAddress = useMyAddress()
 
   const isMobile = useIsMobileWidthOrDevice()
-  const { isDesktop } = useResponsiveSize()
+  const { isLargeDesktop } = useResponsiveSize()
   // const isPanels = leftPanel || rightPanel
 
   const sidebarStyles: ComponentProps<'div'> = {
@@ -151,7 +151,7 @@ export const PageContent: FC<Props> = ({
         </section>
       ) : (
         <div className={clsx('DfSectionOuterContainer')}>
-          {creatorDashboardSidebarType && isDesktop && (
+          {creatorDashboardSidebarType && isLargeDesktop && (
             <div {...sidebarStyles}>
               <div>
                 <TopUsersCard />
@@ -186,6 +186,11 @@ export const PageContent: FC<Props> = ({
           {rightPanel === undefined && creatorDashboardSidebarType && (
             <div {...sidebarStyles}>
               <CreatorDashboardSidebar dashboardType={creatorDashboardSidebarType} />
+              {!isLargeDesktop && (
+                <div className='mt-3'>
+                  <TopUsersCard />
+                </div>
+              )}
               {/* <OnBoardingSidebar hideOnBoardingSidebar={() => setShowOnBoardingSidebar(false)} /> */}
             </div>
           )}