My profile visual changes (#4279)

* nft activities adjustments

* fix info list item

* channels grid fixes

* fix useNotifications

packages/atlas/src/views/viewer/MemberView/ActivityItem.styles.ts

@@ -58,6 +58,9 @@ export const TitleAndDescriptionContainer = styled.div`
 `
 export const Title = styled(Text)`
   word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `
 export const Thumbnail = styled.img`
   height: 40px;
@@ -88,6 +91,10 @@ export const ThumbnailSkeletonLoader = styled(SkeletonLoader)`
 export const PillSkeletonLoader = styled(SkeletonLoader)`
   width: 40px;
   height: 20px;
+  align-self: flex-start;
+  ${media.sm} {
+    align-self: unset;
+  }
 `
 
 export const TitleSkeletonLoader = styled(SkeletonLoader)`
@@ -107,14 +114,3 @@ export const DescriptionSkeletonLoader = styled(SkeletonLoader)`
 export const DateText = styled(Text)`
   text-align: end;
 `
-
-export const DateRow = styled.span`
-  display: inline;
-
-  ${media.sm} {
-    display: block;
-  }
-  ${media.lg} {
-    display: inline;
-  }
-`

packages/atlas/src/views/viewer/MemberView/ActivityItem.tsx

@@ -8,7 +8,6 @@ import { imageUrlValidation } from '@/utils/asset'
 
 import {
   ActivityItemContainer,
-  DateRow,
   DateText,
   DescriptionSkeletonLoader,
   PillAndDateContainer,
@@ -71,7 +70,7 @@ export const ActivityItem: FC<ActivityItemProps> = ({
         {loading ? (
           <TitleSkeletonLoader />
         ) : (
-          <Title as="h3" variant={getTitleTextVariant()} clampAfterLine={smMatch ? 2 : 1}>
+          <Title as="h3" variant={getTitleTextVariant()} title={title}>
             {title}
           </Title>
         )}
@@ -90,8 +89,7 @@ export const ActivityItem: FC<ActivityItemProps> = ({
           <Pill label={type} size="medium" />
           {date && (
             <DateText as="p" variant="t100" color="colorText">
-              <DateRow>{format(date, 'd MMM yyyy')},</DateRow>
-              <DateRow> {format(date, 'HH:mm')}</DateRow>
+              {format(date, 'd MMM yyyy')} at {format(date, 'HH:mm')}
             </DateText>
           )}
         </PillAndDateContainer>

packages/atlas/src/views/viewer/MemberView/MemberAbout.styles.ts

@@ -3,7 +3,6 @@ import { HTMLProps } from 'react'
 
 import { LayoutGrid } from '@/components/LayoutGrid/LayoutGrid'
 import { Text } from '@/components/Text'
-import { ChannelCard } from '@/components/_channel/ChannelCard'
 import { cVar, media, sizes } from '@/styles'
 
 export const TextContainer = styled.div<{ withDivider?: boolean }>`
@@ -26,16 +25,23 @@ export const StyledLayoutGrid = styled(LayoutGrid)`
   margin-bottom: 50px;
 `
 
-export const ChannelsOwnedContainerGrid = styled(LayoutGrid)`
+export const ChannelsOwnedContainerGrid = styled.div`
   margin-top: ${sizes(4)};
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: ${sizes(4)};
 
+  ${media.sm} {
+    grid-template-columns: repeat(2, 1fr);
+  }
   ${media.md} {
+    grid-template-columns: repeat(3, 1fr);
+    gap: ${sizes(6)};
     margin-top: ${sizes(6)};
   }
-`
-
-export const StyledChannelCard = styled(ChannelCard)`
-  min-width: 136px;
+  ${media.lg} {
+    grid-template-columns: repeat(4, 1fr);
+  }
 `
 
 export const Anchor = styled(Text)<HTMLProps<HTMLAnchorElement>>`

packages/atlas/src/views/viewer/MemberView/MemberAbout.tsx

@@ -1,26 +1,28 @@
 import { useParams } from 'react-router'
 
 import { useMemberships } from '@/api/hooks/membership'
+import { EmptyFallback } from '@/components/EmptyFallback'
 import { GridItem } from '@/components/LayoutGrid/LayoutGrid'
 import { NumberFormat } from '@/components/NumberFormat'
 import { Text } from '@/components/Text'
+import { ChannelCard } from '@/components/_channel/ChannelCard'
 import { atlasConfig } from '@/config'
+import { createPlaceholderData } from '@/utils/data'
 import { formatDate } from '@/utils/time'
 
-import {
-  Anchor,
-  ChannelsOwnedContainerGrid,
-  Details,
-  StyledChannelCard,
-  StyledLayoutGrid,
-  TextContainer,
-} from './MemberAbout.styles'
+import { Anchor, ChannelsOwnedContainerGrid, Details, StyledLayoutGrid, TextContainer } from './MemberAbout.styles'
 
 export const MemberAbout = () => {
   const { handle } = useParams()
-  const { memberships } = useMemberships({ where: { handle_eq: handle } })
+  const { memberships, loading } = useMemberships({ where: { handle_eq: handle } })
   const member = memberships?.find((member) => member.handle === handle)
 
+  const placeholderItems = createPlaceholderData(2).map((_, idx) => <ChannelCard key={idx} loading={loading} />)
+
+  const channels = loading
+    ? placeholderItems
+    : member?.channels.map((channel) => <ChannelCard key={channel.id} withFollowButton={false} channel={channel} />)
+
   return (
     <StyledLayoutGrid>
       <GridItem colSpan={{ base: 12, sm: 8 }} rowStart={{ base: 2, sm: 1 }}>
@@ -34,20 +36,17 @@ export const MemberAbout = () => {
             </Text>
           </TextContainer>
         )}
-        {!!member?.channels.length && (
-          <div>
-            <Text as="h2" variant="h500">
-              Channels owned
-            </Text>
-            <ChannelsOwnedContainerGrid>
-              {member?.channels.map((channel) => (
-                <GridItem key={channel.id} colSpan={{ base: 6, lg: 3 }}>
-                  <StyledChannelCard withFollowButton={false} channel={channel} />
-                </GridItem>
-              ))}
-            </ChannelsOwnedContainerGrid>
-          </div>
-        )}
+
+        <div>
+          <Text as="h2" variant="h500">
+            Channels owned
+          </Text>
+          {channels?.length ? (
+            <ChannelsOwnedContainerGrid>{channels}</ChannelsOwnedContainerGrid>
+          ) : (
+            <EmptyFallback title="No channels" subtitle="This member hasn't created any channels yet." />
+          )}
+        </div>
       </GridItem>
       <GridItem colSpan={{ base: 12, sm: 3 }} colStart={{ sm: -4 }}>
         <Text as="h3" variant="h500" margin={{ bottom: 4 }}>

packages/atlas/src/views/viewer/MemberView/MemberActivity.styles.ts

@@ -8,12 +8,11 @@ export const GridRowWrapper = styled.div`
   display: contents;
 `
 
-export const OverviewItem = styled.div<{ divider?: boolean }>`
+export const InfoListItem = styled.div<{ divider?: boolean }>`
   display: flex;
   align-items: center;
-  gap: ${sizes(4)};
+  gap: ${sizes(2)};
   padding-bottom: ${sizes(4)};
-  margin-bottom: ${sizes(4)};
   box-shadow: ${cVar('effectDividersBottom')};
 
   ${GridRowWrapper}:last-of-type > & {
@@ -40,12 +39,13 @@ export const StyledIconWrapper = styled(IconWrapper)`
 export const OverviewTextContainer = styled.div`
   display: grid;
   grid-auto-flow: row;
-  gap: ${sizes(2)};
+  gap: ${sizes(0.5)};
 `
 
 export const OverviewContainer = styled.div`
   margin-top: ${sizes(6)};
   display: grid;
+  row-gap: ${sizes(4)};
   grid-template-columns: 1fr 1fr;
 
   ${media.sm} {

packages/atlas/src/views/viewer/MemberView/MemberActivity.tsx

@@ -15,8 +15,8 @@ import { ActivityItem } from './ActivityItem'
 import { ActivitiesRecord, useActivities } from './MemberActivity.hooks'
 import {
   GridRowWrapper,
+  InfoListItem,
   OverviewContainer,
-  OverviewItem,
   OverviewTextContainer,
   StyledIconWrapper,
   StyledLink,
@@ -227,7 +227,7 @@ export const MemberActivity: FC<MemberActivityProps> = ({
                 Overview
               </Text>
               <OverviewContainer>
-                <OverviewItem>
+                <InfoListItem>
                   <StyledIconWrapper icon={<SvgActionBuyNow />} size="large" />
                   <OverviewTextContainer>
                     <Text as="span" variant="t100" color="colorText">
@@ -237,8 +237,8 @@ export const MemberActivity: FC<MemberActivityProps> = ({
                       {activitiesTotalCounts.nftsBoughts}
                     </Text>
                   </OverviewTextContainer>
-                </OverviewItem>
-                <OverviewItem>
+                </InfoListItem>
+                <InfoListItem>
                   <StyledIconWrapper icon={<SvgActionSell />} size="large" />
                   <OverviewTextContainer>
                     <Text as="span" variant="t100" color="colorText">
@@ -248,9 +248,9 @@ export const MemberActivity: FC<MemberActivityProps> = ({
                       {activitiesTotalCounts.nftsSold}
                     </Text>
                   </OverviewTextContainer>
-                </OverviewItem>
+                </InfoListItem>
                 <GridRowWrapper>
-                  <OverviewItem>
+                  <InfoListItem>
                     <StyledIconWrapper icon={<SvgActionMint />} size="large" />
                     <OverviewTextContainer>
                       <Text as="span" variant="t100" color="colorText">
@@ -260,8 +260,8 @@ export const MemberActivity: FC<MemberActivityProps> = ({
                         {activitiesTotalCounts.nftsIssued}
                       </Text>
                     </OverviewTextContainer>
-                  </OverviewItem>
-                  <OverviewItem>
+                  </InfoListItem>
+                  <InfoListItem>
                     <StyledIconWrapper icon={<SvgActionBid />} size="large" />
                     <OverviewTextContainer>
                       <Text as="span" variant="t100" color="colorText">
@@ -271,7 +271,7 @@ export const MemberActivity: FC<MemberActivityProps> = ({
                         {activitiesTotalCounts.nftsBidded}
                       </Text>
                     </OverviewTextContainer>
-                  </OverviewItem>
+                  </InfoListItem>
                 </GridRowWrapper>
               </OverviewContainer>
             </GridItem>