diff --git a/apps/web/src/components/Feed/SuggestedProfileCard.tsx b/apps/web/src/components/Feed/SuggestedProfileCard.tsx index 4dc8fbd194..b1da7f0174 100644 --- 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 ( @@ -128,26 +129,23 @@ export default function SuggestedProfileCard({ {userBadges.map((badge) => ( - + ))} - {isMobile && !isOwnProfile && ( - - )} - + {shouldShowFollowButton && ( - + )} - + @@ -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 index 4ba8b48e44..808ac03ef4 100644 --- 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; + } `;