close

gallery-so · Apr 5, 2024 · df3c9d7 · df3c9d7
1 parent d7a8128
commit df3c9d7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 27 deletions.
diff --git a/apps/web/src/components/Feed/SuggestedProfileCard.tsx b/apps/web/src/components/Feed/SuggestedProfileCard.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 
 import { SuggestedProfileCardFollowFragment$key } from '~/generated/SuggestedProfileCardFollowFragment.graphql';
 import { SuggestedProfileCardFragment$key } from '~/generated/SuggestedProfileCardFragment.graphql';
-import { useIsMobileWindowWidth } from '~/hooks/useWindowSize';
 import { contexts } from '~/shared/analytics/constants';
 import { removeNullValues } from '~/shared/relay/removeNullValues';
 import { useLoggedInUserId } from '~/shared/relay/useLoggedInUserId';
@@ -70,7 +69,7 @@ export default function SuggestedProfileCard({
   const isOwnProfile = loggedInUserId && loggedInUserId === user?.id;
 
   if (!user) {
-    throw new Error('No user available to showcase ExploreUserCard');
+    throw new Error('No user available to showcase SuggestedProfileCard');
   }
 
   const { bio } = user;
@@ -107,8 +106,10 @@ export default function SuggestedProfileCard({
     return badges;
   }, [user.badges]);
 
-  const isMobile = useIsMobileWindowWidth();
-  const shouldShowFollowButton = showFollowButton && !isMobile && !isOwnProfile;
+  const shouldShowFollowButton = useMemo(
+    () => showFollowButton && !isOwnProfile,
+    [showFollowButton, isOwnProfile]
+  );
 
   return (
     <StyledSuggestedProfileCard onClick={onClick}>
@@ -128,26 +129,23 @@ export default function SuggestedProfileCard({
                 </Username>
                 <HStack align="center" gap={0}>
                   {userBadges.map((badge) => (
-                    <Badge key={badge.name} badgeRef={badge} eventContext={contexts['Explore']} />
+                    <Badge key={badge.name} badgeRef={badge} eventContext={contexts['Search']} />
                   ))}
                 </HStack>
               </HStack>
-              {isMobile && !isOwnProfile && (
-                <StyledFollowButton
-                  userRef={user}
-                  queryRef={query}
-                  source="Explore Page user card"
-                />
-              )}
             </HStack>
-            <StyledUserDetailsContainer gap={8}>
+            <VStack gap={8}>
               <StyledUserBio>
                 <Markdown text={bioFirstLine} eventContext={contexts.Explore} />
               </StyledUserBio>
               {shouldShowFollowButton && (
-                <WideFollowButton userRef={user} queryRef={query} source="Curated Feed user card" />
+                <WideFollowButton
+                  userRef={user}
+                  queryRef={query}
+                  source="Search Default profile card"
+                />
               )}
-            </StyledUserDetailsContainer>
+            </VStack>
           </ProfileDetailsText>
         </ProfileDetailsContainer>
       </StyledContent>
@@ -195,8 +193,6 @@ const ProfileDetailsText = styled(VStack)`
   width: 100%;
 `;
 
-const StyledUserDetailsContainer = styled(VStack)``;
-
 const StyledUserBio = styled(BaseM)`
   height: 20px; // ensure consistent height even if bio is not present
 
@@ -243,12 +239,3 @@ const WideFollowButton = styled(FollowButton)`
     height: 24px;
   }
 `;
-
-const StyledFollowButton = styled(FollowButton)`
-  padding: 2px 8px;
-  width: 100%;
-
-  @media only screen and ${breakpoints.desktop} {
-    width: initial;
-  }
-`;
diff --git a/apps/web/src/components/Search/SearchDefault.tsx b/apps/web/src/components/Search/SearchDefault.tsx
@@ -1,6 +1,7 @@
 import { graphql, useLazyLoadQuery } from 'react-relay';
 import styled from 'styled-components';
 
+import breakpoints from '~/components/core/breakpoints';
 import { SearchDefaultQuery } from '~/generated/SearchDefaultQuery.graphql';
 
 import { VStack } from '../core/Spacer/Stack';
@@ -59,5 +60,9 @@ export default function SearchDefault({
 }
 
 const SectionWrapper = styled(VStack)`
-  padding: 12px;
+  padding: 4px;
+
+  @media only screen and ${breakpoints.desktop} {
+    padding: 12px;
+  }
 `;