working

apps/web/src/components/Feed/SuggestedProfileCard.tsx

@@ -168,7 +168,7 @@ const StyledSuggestedProfileCard = styled(HStack)`
   }
 
   @media only screen and ${breakpoints.desktop} {
-    min-width: 170px;
+    width: 230px;
   }
 `;
 

apps/web/src/components/Search/SearchDefault.tsx

@@ -1,13 +1,13 @@
-import { useMemo } from 'react';
 import { graphql, useLazyLoadQuery } from 'react-relay';
+import styled from 'styled-components';
 
 import { SearchDefaultQuery } from '~/generated/SearchDefaultQuery.graphql';
 import { CmsTypes } from '~/scenes/ContentPages/cms_types';
 
 import { VStack } from '../core/Spacer/Stack';
 import { SearchFilterType } from './Search';
 import SearchDefaultTrendingCuratorsSection from './SearchDefaultTrendingCuratorsSection';
-import SearchFeaturedCollectionSection from './SearchFeaturedCollectionSection';
+import SearchDefaultTrendingUsersSection from './SearchDefaultTrendingUsersSection';
 import SearchSuggestedUsersSection from './SearchSuggestedUsersSection';
 import { SearchItemType } from './types';
 
@@ -30,29 +30,23 @@ export default function SearchDefault({
     graphql`
       query SearchDefaultQuery {
         ...SearchSuggestedUsersSectionFragment
+        ...SearchDefaultTrendingUsersSectionFragment
         ...SearchDefaultTrendingCuratorsSectionFragment
       }
     `,
     {}
   );
 
-  const featuredProfiles = useMemo(() => {
-    if (pageContent) {
-      return pageContent.featuredProfiles?.slice(0, 2);
-    }
-    return [];
-  }, [pageContent]);
-
   return (
-    <VStack gap={18}>
+    <SectionWrapper gap={18}>
       {!selectedFilter && (
-        <VStack gap={12}>
-          <SearchFeaturedCollectionSection
-            profiles={featuredProfiles}
+        <VStack gap={16}>
+          <SearchSuggestedUsersSection queryRef={query} variant={variant} onSelect={onSelect} />
+          <SearchDefaultTrendingUsersSection
+            queryRef={query}
             variant={variant}
             onSelect={onSelect}
           />
-          <SearchSuggestedUsersSection queryRef={query} variant={variant} onSelect={onSelect} />
         </VStack>
       )}
       <SearchDefaultTrendingCuratorsSection
@@ -63,6 +57,10 @@ export default function SearchDefault({
         onChangeFilter={onChangeFilter}
         showAllButton={true}
       />
-    </VStack>
+    </SectionWrapper>
   );
 }
+
+const SectionWrapper = styled(VStack)`
+  padding: 12px;
+`;

apps/web/src/components/Search/SearchDefaultTrendingUsersSection.tsx

@@ -0,0 +1,89 @@
+import { graphql, useFragment } from 'react-relay';
+import styled, { keyframes } from 'styled-components';
+
+import breakpoints from '~/components/core/breakpoints';
+import { SearchDefaultTrendingUsersSectionFragment$key } from '~/generated/SearchDefaultTrendingUsersSectionFragment.graphql';
+
+import { HStack, VStack } from '../core/Spacer/Stack';
+import SuggestedProfileCard from '../Feed/SuggestedProfileCard';
+import SearchResultsHeader from './SearchResultsHeader';
+import { SearchItemType } from './types';
+
+type Props = {
+  queryRef: SearchDefaultTrendingUsersSectionFragment$key;
+  variant?: 'default' | 'compact';
+  onSelect: (item: SearchItemType) => void;
+};
+
+export default function SearchDefaultTrendingUsersSection({ queryRef, variant, onSelect }: Props) {
+  const query = useFragment(
+    graphql`
+      fragment SearchDefaultTrendingUsersSectionFragment on Query {
+        trendingUsers5Days: trendingUsers(input: { report: LAST_5_DAYS }) {
+          ... on TrendingUsersPayload {
+            __typename
+            users {
+              username
+              dbid
+              ...SuggestedProfileCardFragment
+            }
+          }
+        }
+
+        ...SuggestedProfileCardFollowFragment
+      }
+    `,
+    queryRef
+  );
+
+  if (query.trendingUsers5Days?.__typename !== 'TrendingUsersPayload') {
+    return null;
+  }
+
+  const { users: trendingUsers } = query.trendingUsers5Days;
+
+  return (
+    <StyledWrapper gap={8}>
+      <HeaderWrapper>
+        <SearchResultsHeader variant={variant}>
+          Trending collectors and creators
+        </SearchResultsHeader>
+      </HeaderWrapper>
+      <HStack gap={4}>
+        {trendingUsers?.slice(0, 2)?.map((profile) => (
+          <SuggestedProfileCard
+            key={profile.dbid}
+            userRef={profile}
+            queryRef={query}
+            onClick={() =>
+              onSelect({
+                type: 'User' as const,
+                label: profile.username ?? '',
+                value: profile.dbid,
+              })
+            }
+            showFollowButton={false}
+          />
+        ))}
+      </HStack>
+    </StyledWrapper>
+  );
+}
+
+const HeaderWrapper = styled(HStack)`
+  padding: 0px 12px;
+
+  @media only screen and ${breakpoints.desktop} {
+    padding-right: 12px;
+    padding-left: 8px;
+  }
+`;
+
+const fadeIn = keyframes`
+    from { opacity: 0 };
+    to { opacity: 0.96 };
+`;
+
+const StyledWrapper = styled(VStack)`
+  animation: ${fadeIn} 0.2s ease-out forwards;
+`;

apps/web/src/contexts/globalLayout/GlobalSidebar/AnimatedSidebarDrawer.tsx

@@ -80,7 +80,7 @@ const StyledMotion = styled(motion.div)`
 `;
 
 const StyledDrawer = styled(VStack)`
-  background-color: ${colors.offWhite};
+  background-color: ${colors.white};
   width: 100%;
   position: relative;
   min-height: 0;