From 2c75fa7c4a88cd40c4457b76e7eda869a9b3fb6c Mon Sep 17 00:00:00 2001 From: andrey_kovalev_s Date: Tue, 7 Feb 2023 16:39:14 +0300 Subject: [PATCH 1/9] feature(newsfeed): fixing images --- .../app/src/ui-kit/atoms/Box/Box.styled.ts | 2 +- .../CalendarItem/CalendarItem.styled.ts | 2 +- .../components/CalendarItem/CalendarItem.tsx | 36 ++++++---------- .../ConnectedItem/ConnectedItem.styled.ts | 7 +-- .../ConnectedItem/ConnectedItem.tsx | 37 ++++++++-------- .../CreatedItem/CreatedItem.styled.ts | 2 +- .../components/CreatedItem/CreatedItem.tsx | 23 ++++------ .../DockedItem/DockedItem.styled.ts | 7 +-- .../components/DockedItem/DockedItem.tsx | 43 +++++++++---------- packages/core/src/utils/date.utils.ts | 12 ++++++ packages/ui-kit/src/molecules/Image/Image.tsx | 2 +- 11 files changed, 84 insertions(+), 89 deletions(-) diff --git a/packages/app/src/ui-kit/atoms/Box/Box.styled.ts b/packages/app/src/ui-kit/atoms/Box/Box.styled.ts index cc2db98fc..d70a4b592 100644 --- a/packages/app/src/ui-kit/atoms/Box/Box.styled.ts +++ b/packages/app/src/ui-kit/atoms/Box/Box.styled.ts @@ -8,7 +8,7 @@ export const Div = styled.div` overflow: hidden; &.big { - width: 255px; + width: 260px; padding: 10px 0; } diff --git a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/CalendarItem/CalendarItem.styled.ts b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/CalendarItem/CalendarItem.styled.ts index 285e425ef..530f6d501 100644 --- a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/CalendarItem/CalendarItem.styled.ts +++ b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/CalendarItem/CalendarItem.styled.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; -export const OneAvatar = styled.img` +export const OneAvatar = styled.div` width: 60px; height: 60px; border-radius: 50%; diff --git a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/CalendarItem/CalendarItem.tsx b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/CalendarItem/CalendarItem.tsx index dcc2c48af..0b34e1d20 100644 --- a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/CalendarItem/CalendarItem.tsx +++ b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/CalendarItem/CalendarItem.tsx @@ -1,7 +1,7 @@ -import React, {FC, useMemo} from 'react'; +import React, {FC} from 'react'; import {observer} from 'mobx-react-lite'; -import {format} from 'date-fns-tz'; -import {Button, Text} from '@momentum-xyz/ui-kit'; +import {Button, Image, Text} from '@momentum-xyz/ui-kit'; +import {newsfeedDateString} from '@momentum-xyz/core'; import {getImageAbsoluteUrl} from 'core/utils'; import {NftFeedItemInterface} from 'api'; @@ -22,30 +22,20 @@ const CalendarItem: FC = (props) => { const name = item.uuid === currentUser.id ? currentUser.name : item.name; - const formattedStartDate = useMemo(() => { - if (item.calendarStart) { - return format(new Date(item.calendarStart), `MM/dd/yyyy h:mm aa`); - } else { - return ''; - } - }, [item.calendarStart]); - - const formattedEndDate = useMemo(() => { - if (item.calendarEnd) { - return format(new Date(item.calendarEnd), `MM/dd/yyyy h:mm aa`); - } else { - return ''; - } - }, [item.calendarEnd]); - return ( <> -
- -
+ + + + - {formattedStartDate} - {formattedEndDate} + {newsfeedDateString(item.calendarStart, false)} + {' - '} + {newsfeedDateString(item.calendarEnd, false)}
diff --git a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/ConnectedItem/ConnectedItem.styled.ts b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/ConnectedItem/ConnectedItem.styled.ts index 3f175830d..b622fe63e 100644 --- a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/ConnectedItem/ConnectedItem.styled.ts +++ b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/ConnectedItem/ConnectedItem.styled.ts @@ -5,7 +5,7 @@ export const TwoAvatarsContainer = styled.div` width: 60px; `; -export const Avatar = styled.img` +export const Avatar = styled.div` width: 40px; height: 40px; border-radius: 50%; @@ -14,15 +14,16 @@ export const Avatar = styled.img` background-color: ${(props) => props.theme.bg}; `; -export const AvatarAhead = styled.img` +export const AvatarAhead = styled.div` position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--white); - right: 0; cursor: pointer; background-color: ${(props) => props.theme.bg}; + right: 0; + top: 0; `; export const Info = styled.div` diff --git a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/ConnectedItem/ConnectedItem.tsx b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/ConnectedItem/ConnectedItem.tsx index a55df3649..5a4135fc6 100644 --- a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/ConnectedItem/ConnectedItem.tsx +++ b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/ConnectedItem/ConnectedItem.tsx @@ -1,13 +1,12 @@ -import React, {FC, useMemo} from 'react'; +import React, {FC} from 'react'; import {observer} from 'mobx-react-lite'; -import {format} from 'date-fns-tz'; -import {Text} from '@momentum-xyz/ui-kit'; +import {Image, Text} from '@momentum-xyz/ui-kit'; import {useTranslation} from 'react-i18next'; +import {newsfeedDateString} from '@momentum-xyz/core'; import {UserModelInterface} from 'core/models'; import {getImageAbsoluteUrl} from 'core/utils'; import {NftFeedItemInterface} from 'api'; -import astronautIcon from 'static/images/astronaut-green.svg'; import * as styled from './ConnectedItem.styled'; @@ -22,10 +21,6 @@ const ConnectedItem: FC = (props) => { const {t} = useTranslation(); - const formattedDate = useMemo(() => { - return format(new Date(item.date), `MM/dd/yyyy - h:mm aa`); - }, [item.date]); - const userIsStaking = currentUser.id === item.uuid; const userIsStaked = currentUser.id === item.connectedTo?.uuid; @@ -37,20 +32,24 @@ const ConnectedItem: FC = (props) => { return ( <> -
- - onOpenOdyssey?.(item.uuid)} + + onOpenOdyssey?.(item.uuid)}> + - item.connectedTo?.uuid && onOpenOdyssey?.(item.connectedTo?.uuid)} + + + onOpenOdyssey?.(item.connectedTo?.uuid || '')}> + - -
+ + + - {formattedDate} + {newsfeedDateString(item.date, true)}
onOpenOdyssey?.(item.uuid)}> = (props) => { const {item, currentUser, onTeleport, onConnect, onOpenOdyssey} = props; - const formattedDate = useMemo(() => { - return format(new Date(item.date), `MM/dd/yyyy - h:mm aa`); - }, [item.date]); - const name = item.uuid === currentUser.id ? currentUser.name : item.name; const image = item.uuid === currentUser.id ? currentUser.profile.avatarHash : item.image; return ( <> -
- onOpenOdyssey?.(item.uuid)} - /> -
+ onOpenOdyssey?.(item.uuid)}> + + + - {formattedDate} + {newsfeedDateString(item.date, true)}
diff --git a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/DockedItem/DockedItem.styled.ts b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/DockedItem/DockedItem.styled.ts index 83f6dfe06..5f2ee5b5d 100644 --- a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/DockedItem/DockedItem.styled.ts +++ b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/DockedItem/DockedItem.styled.ts @@ -5,7 +5,7 @@ export const TwoAvatarsContainer = styled.div` width: 60px; `; -export const Avatar = styled.img` +export const Avatar = styled.div` width: 40px; height: 40px; border-radius: 50%; @@ -14,15 +14,16 @@ export const Avatar = styled.img` background-color: ${(props) => props.theme.bg}; `; -export const AvatarAhead = styled.img` +export const AvatarAhead = styled.div` position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--white); - right: 0; cursor: pointer; background-color: ${(props) => props.theme.bg}; + right: 0; + top: 0; `; export const Info = styled.div` diff --git a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/DockedItem/DockedItem.tsx b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/DockedItem/DockedItem.tsx index 0bf588859..3cbc3d4e2 100644 --- a/packages/app/src/ui-kit/molecules/NewsFeedItem/components/DockedItem/DockedItem.tsx +++ b/packages/app/src/ui-kit/molecules/NewsFeedItem/components/DockedItem/DockedItem.tsx @@ -1,13 +1,12 @@ -import React, {FC, useMemo} from 'react'; +import React, {FC} from 'react'; import {observer} from 'mobx-react-lite'; -import {format} from 'date-fns-tz'; -import {Text} from '@momentum-xyz/ui-kit'; +import {Image, Text} from '@momentum-xyz/ui-kit'; import {useTranslation} from 'react-i18next'; +import {newsfeedDateString} from '@momentum-xyz/core'; import {UserModelInterface} from 'core/models'; import {getImageAbsoluteUrl} from 'core/utils'; import {NftFeedItemInterface} from 'api'; -import astronautIcon from 'static/images/astronaut-green.svg'; import * as styled from './DockedItem.styled'; @@ -22,35 +21,35 @@ const DockedItem: FC = (props) => { const {t} = useTranslation(); - const formattedDate = useMemo(() => { - return format(new Date(item.date), `MM/dd/yyyy - h:mm aa`); - }, [item.date]); - const userIsStaking = currentUser.id === item.uuid; - const userIsStaked = currentUser.id === item.connectedTo?.uuid; + const userIsStaked = currentUser.id === item.dockedTo?.uuid; const dockingImage = userIsStaking ? currentUser.profile.avatarHash : item.image; - const dockedImage = userIsStaked ? currentUser.profile.avatarHash : item.connectedTo?.image; + const dockedImage = userIsStaked ? currentUser.profile.avatarHash : item.dockedTo?.image; const dockingUserLabel = userIsStaking ? t('newsfeed.you') : item.name; - const dockedUserLabel = userIsStaked ? t('newsfeed.you') : item.connectedTo?.name; + const dockedUserLabel = userIsStaked ? t('newsfeed.you') : item.dockedTo?.name; return ( <> -
- - onOpenOdyssey?.(item.uuid)} + + onOpenOdyssey?.(item.uuid)}> + - item.connectedTo?.uuid && onOpenOdyssey?.(item.connectedTo?.uuid)} + + + onOpenOdyssey?.(item.dockedTo?.uuid || '')}> + - -
+ + + - {formattedDate} + {newsfeedDateString(item.date, true)} onOpenOdyssey?.(item.uuid)}> { export const registrationDateString = (dateISO: string | undefined | null) => { return dateISO ? monthAndYearString(new Date(dateISO)) : ''; }; + +/** + * Constructs locale string for newsfeed + * + * @param {string} dateISO is ISO string or empty + * @param {string} hasDash is used as separator between date and time parts + * @returns {string} String in "31/01/2023 - 2:31 PM" format + */ +export const newsfeedDateString = (dateISO: string | undefined | null, hasDash: boolean) => { + const targetFormat = hasDash ? 'MM/dd/yyyy - h:mm aa' : 'MM/dd/yyyy h:mm aa'; + return dateISO ? format(new Date(dateISO), targetFormat) : ''; +}; diff --git a/packages/ui-kit/src/molecules/Image/Image.tsx b/packages/ui-kit/src/molecules/Image/Image.tsx index 5ce3a1ab7..287774f32 100644 --- a/packages/ui-kit/src/molecules/Image/Image.tsx +++ b/packages/ui-kit/src/molecules/Image/Image.tsx @@ -6,7 +6,7 @@ import {ComponentSizeInterface} from '../../interfaces'; import * as styled from './Image.styled'; interface PropsInterface { - src?: string; + src?: string | null; isLoading?: boolean; isError?: boolean; sizeProps?: ComponentSizeInterface; From e9665371636de33801ed35476599cee6af7cde93 Mon Sep 17 00:00:00 2001 From: Dmitry Yudakov Date: Tue, 7 Feb 2023 19:28:46 +0200 Subject: [PATCH 2/9] fix(asset-grid): long asset names break the layout Setting min-width 0 to items show prevent them from overexpanding. https://stackoverflow.com/a/43312314/279308 --- .../SpawnAssetPage/components/AssetsGrid/AssetsGrid.styled.ts | 1 + .../pages/SpawnAssetPage/components/AssetsGrid/AssetsGrid.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/app/src/scenes/odysseyCreator/pages/SpawnAssetPage/components/AssetsGrid/AssetsGrid.styled.ts b/packages/app/src/scenes/odysseyCreator/pages/SpawnAssetPage/components/AssetsGrid/AssetsGrid.styled.ts index ef0bd4c7a..512107ba1 100644 --- a/packages/app/src/scenes/odysseyCreator/pages/SpawnAssetPage/components/AssetsGrid/AssetsGrid.styled.ts +++ b/packages/app/src/scenes/odysseyCreator/pages/SpawnAssetPage/components/AssetsGrid/AssetsGrid.styled.ts @@ -14,6 +14,7 @@ export const GridItem = styled.div` padding: 10px; gap: 15px; align-items: center; + min-width: 0; `; export const GridItemImage = styled.img` diff --git a/packages/app/src/scenes/odysseyCreator/pages/SpawnAssetPage/components/AssetsGrid/AssetsGrid.tsx b/packages/app/src/scenes/odysseyCreator/pages/SpawnAssetPage/components/AssetsGrid/AssetsGrid.tsx index 2f28665a9..d43ffbd2d 100644 --- a/packages/app/src/scenes/odysseyCreator/pages/SpawnAssetPage/components/AssetsGrid/AssetsGrid.tsx +++ b/packages/app/src/scenes/odysseyCreator/pages/SpawnAssetPage/components/AssetsGrid/AssetsGrid.tsx @@ -50,7 +50,7 @@ const AssetGrid: FC = ({assets, showPreview, onSelected}) => { /> )} - +