updated styling

gallery-so · Apr 17, 2024 · da74f4a · da74f4a
1 parent 7bac5e7
commit da74f4a
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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 (
     <WindowScroller>
       {({ 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
@@ -72,7 +72,7 @@ function FeedSuggestedProfileSection({ queryRef }: FeedSuggestedProfileSectionPr
       const rowElements = (
         <StyledSuggestedProfileSet gap={16}>
           {row.map((profile) => (
-            <SuggestedProfileCard queryRef={query} userRef={profile} />
+            <SuggestedProfileCard queryRef={query} userRef={profile} variant="compact" />
           ))}
           {row.length < itemsPerSlide && <StyledPlaceholder />}
         </StyledSuggestedProfileSet>
@@ -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
@@ -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,19 +17,24 @@ 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({
   userRef,
   queryRef,
   onClick,
   showFollowButton = true,
+  variant = 'default',
 }: Props) {
   const user = useFragment(
     graphql`
@@ -116,7 +121,7 @@ export default function SuggestedProfileCard({
             <HStack gap={8} align="center" justify="space-between">
               <HStack gap={4} align="center">
                 <ProfilePicture userRef={user} size="xs" />
-                <Username>
+                <Username variant={variant}>
                   <strong>{user.username}</strong>
                 </Username>
                 <HStack align="center" gap={0}>
@@ -127,8 +132,8 @@ export default function SuggestedProfileCard({
               </HStack>
             </HStack>
             <VStack gap={8}>
-              <StyledUserBio>
-                <Markdown text={bioFirstLine} eventContext={contexts.Search} />
+              <StyledUserBio variant={variant}>
+                <ProcessedText text={bioFirstLine} eventContext={contexts['Search']} />
               </StyledUserBio>
               {shouldShowFollowButton && (
                 <WideFollowButton
@@ -158,7 +163,7 @@ const StyledSuggestedProfileCard = styled(HStack)`
   }
 
   @media only screen and ${breakpoints.desktop} {
-    width: 230px;
+    width: 250px;
   }
 `;
 
@@ -185,23 +190,27 @@ const ProfileDetailsText = styled(VStack)`
   width: 100%;
 `;
 
-const StyledUserBio = styled(BaseM)`
+const StyledUserBio = styled(BaseM)<{ variant: variantType }>`
   height: 20px; // ensure consistent height even if bio is not present
-
   font-size: 14px;
   font-weight: 400;
   line-clamp: 1;
   overflow: hidden;
   -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)`