From da74f4ae71210d09d062cd6a346b670647e7394b Mon Sep 17 00:00:00 2001 From: Rohan-cp Date: Wed, 17 Apr 2024 12:10:43 -0400 Subject: [PATCH] updated styling --- apps/web/src/components/Badge/Badge.tsx | 3 +- apps/web/src/components/Feed/CuratedFeed.tsx | 1 + apps/web/src/components/Feed/FeedList.tsx | 52 ++++++++++++++++--- .../Feed/FeedSuggestedProfileSection.tsx | 4 +- .../components/Feed/SuggestedProfileCard.tsx | 34 ++++++++---- 5 files changed, 74 insertions(+), 20 deletions(-) diff --git a/apps/web/src/components/Badge/Badge.tsx b/apps/web/src/components/Badge/Badge.tsx index 0376b0bcdb..011a0da807 100644 --- a/apps/web/src/components/Badge/Badge.tsx +++ b/apps/web/src/components/Badge/Badge.tsx @@ -1,7 +1,6 @@ import { Route } from 'nextjs-routes'; import { useCallback, useMemo, useState } from 'react'; import { graphql, useFragment } from 'react-relay'; -import { Size } from 'react-virtualized'; import styled from 'styled-components'; import GalleryLink from '~/components/core/GalleryLink/GalleryLink'; @@ -17,7 +16,7 @@ import { getUrlForCommunityDangerously } from '~/utils/getCommunityUrl'; type Props = { badgeRef: BadgeFragment$key; eventContext: GalleryElementTrackingProps['eventContext']; - size: IconSize; + size?: IconSize; }; export default function Badge({ badgeRef, eventContext, size = 'md' as IconSize }: Props) { diff --git a/apps/web/src/components/Feed/CuratedFeed.tsx b/apps/web/src/components/Feed/CuratedFeed.tsx index 3a0e9dbb8d..984d4815d0 100644 --- a/apps/web/src/components/Feed/CuratedFeed.tsx +++ b/apps/web/src/components/Feed/CuratedFeed.tsx @@ -89,6 +89,7 @@ export default function CuratedFeed({ queryRef }: Props) { loadNextPage={loadNextPage} hasNext={hasPrevious} feedMode={'WORLDWIDE'} + showSuggestedProfiles={true} /> ); } diff --git a/apps/web/src/components/Feed/FeedList.tsx b/apps/web/src/components/Feed/FeedList.tsx index 8e25ec9f74..e54d85b615 100644 --- a/apps/web/src/components/Feed/FeedList.tsx +++ b/apps/web/src/components/Feed/FeedList.tsx @@ -24,6 +24,7 @@ type Props = { queryRef: FeedListFragment$key; feedEventRefs: FeedListEventDataFragment$key; feedMode?: FeedMode; + showSuggestedProfiles?: boolean; }; export default function FeedList({ @@ -32,6 +33,7 @@ export default function FeedList({ hasNext, queryRef, feedMode, + showSuggestedProfiles = false, }: Props) { const query = useFragment( graphql` @@ -62,11 +64,21 @@ export default function FeedList({ ); const finalFeedData = useMemo(() => { - return [ - ...feedData.slice(0, 2), - { __typename: 'SuggestedProfileSection', dbid: '12345' }, - ...feedData.slice(0, 2), - ]; + if (showSuggestedProfiles && feedData?.length >= 8) { + const suggestedProfileSectionData = { + __typename: 'SuggestedProfileSection', + dbid: '12345', + }; + + const insertAt = feedData.length - 8; + // Create a new array with the item inserted + return [ + ...feedData.slice(0, insertAt), + suggestedProfileSectionData, + ...feedData.slice(insertAt), + ]; + } + return feedData; }, [feedData]); // Keep the current feed data in a ref so we can access it below in the @@ -230,6 +242,34 @@ export default function FeedList({ const rowCount = hasNext ? finalFeedData.length + 1 : finalFeedData.length; + // Modify the rowHeight property for the List component + const SUGGESTED_PROFILE_SECTION_HEIGHT = 360; + const DEFAULT_ROW_HEIGHT = 100; // Default height for rows if data is undefined or null + + // Memoize the rowHeight function with useCallback + const rowHeight = useCallback( + ({ index }) => { + // Handle undefined or null finalFeedData state + if (!finalFeedData) { + return DEFAULT_ROW_HEIGHT; + } + + // Determine the actual data index based on reverse order logic used in rowRenderer + const dataIndex = finalFeedData.length - index - 1; + const item = finalFeedData[dataIndex]; + + // Check the type of content + if (item && item.__typename === 'SuggestedProfileSection') { + // Return static height for SuggestedProfileSection + return SUGGESTED_PROFILE_SECTION_HEIGHT; + } else { + // Return dynamic height for other types of content + return measurerCache.rowHeight({ index }); + } + }, + [finalFeedData, measurerCache] + ); + return ( {({ height, scrollTop, registerChild }) => ( @@ -254,7 +294,7 @@ export default function FeedList({ height={height} rowRenderer={rowRenderer} rowCount={finalFeedData.length} - rowHeight={measurerCache.rowHeight} + rowHeight={rowHeight} scrollTop={scrollTop} overscanRowCount={2} onRowsRendered={onRowsRendered} diff --git a/apps/web/src/components/Feed/FeedSuggestedProfileSection.tsx b/apps/web/src/components/Feed/FeedSuggestedProfileSection.tsx index 220fbbcb6f..01aa99eac6 100644 --- a/apps/web/src/components/Feed/FeedSuggestedProfileSection.tsx +++ b/apps/web/src/components/Feed/FeedSuggestedProfileSection.tsx @@ -72,7 +72,7 @@ function FeedSuggestedProfileSection({ queryRef }: FeedSuggestedProfileSectionPr const rowElements = ( {row.map((profile) => ( - + ))} {row.length < itemsPerSlide && } @@ -148,7 +148,7 @@ const FeedSuggestedProfileSectionContainer = styled(VStack)` padding: 12px 0px; height: min-content; @media only screen and ${breakpoints.desktop} { - padding: 24px 16px; + padding: 24px 60px; max-width: initial; width: ${FEED_EVENT_ROW_WIDTH_DESKTOP}px; } diff --git a/apps/web/src/components/Feed/SuggestedProfileCard.tsx b/apps/web/src/components/Feed/SuggestedProfileCard.tsx index d6028baf3f..df099121dc 100644 --- a/apps/web/src/components/Feed/SuggestedProfileCard.tsx +++ b/apps/web/src/components/Feed/SuggestedProfileCard.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { graphql, useFragment } from 'react-relay'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { SuggestedProfileCardFollowFragment$key } from '~/generated/SuggestedProfileCardFollowFragment.graphql'; import { SuggestedProfileCardFragment$key } from '~/generated/SuggestedProfileCardFragment.graphql'; @@ -17,12 +17,16 @@ import { HStack, VStack } from '../core/Spacer/Stack'; import { BaseM } from '../core/Text/Text'; import FollowButton from '../Follow/FollowButton'; import { ProfilePicture } from '../ProfilePicture/ProfilePicture'; +import ProcessedText from '../ProcessedText/ProcessedText'; + +type variantType = 'default' | 'compact'; type Props = { userRef: SuggestedProfileCardFragment$key; queryRef: SuggestedProfileCardFollowFragment$key; showFollowButton?: boolean; onClick?: () => void; + variant?: variantType; }; export default function SuggestedProfileCard({ @@ -30,6 +34,7 @@ export default function SuggestedProfileCard({ queryRef, onClick, showFollowButton = true, + variant = 'default', }: Props) { const user = useFragment( graphql` @@ -116,7 +121,7 @@ export default function SuggestedProfileCard({ - + {user.username} @@ -127,8 +132,8 @@ export default function SuggestedProfileCard({ - - + + {shouldShowFollowButton && ( ` height: 20px; // ensure consistent height even if bio is not present - font-size: 14px; font-weight: 400; line-clamp: 1; @@ -195,13 +199,18 @@ const StyledUserBio = styled(BaseM)` -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; + + ${({ variant }) => + variant === 'compact' && + css` + font-size: 12px; + `} `; export const TokenPreviewContainer = styled.div` display: grid; grid-template-columns: repeat(2, 1fr); - min-height: 97px; grid-gap: 2px; `; @@ -212,12 +221,17 @@ export const TokenPreview = styled.img` object-fit: cover; `; -const Username = styled(BaseM)` +const Username = styled(BaseM)<{ variant: variantType }>` font-size: 16px; font-weight: 700; - overflow: hidden; text-overflow: ellipsis; + + ${({ variant }) => + variant === 'compact' && + css` + font-size: 14px; + `} `; const WideFollowButton = styled(FollowButton)`