diff --git a/src/apps/feed/components/feed/index.tsx b/src/apps/feed/components/feed/index.tsx index ce2bca25f..fc4d650d2 100644 --- a/src/apps/feed/components/feed/index.tsx +++ b/src/apps/feed/components/feed/index.tsx @@ -5,7 +5,6 @@ import { Post } from '../post'; import { PostInput } from '../post-input-hook'; import { Waypoint } from 'react-waypoint'; import { Panel, PanelBody, PanelHeader, PanelTitle } from '../../../../components/layout/panel'; -import { FeedChat } from '../feed-chat/container'; import styles from './styles.module.scss'; @@ -32,54 +31,50 @@ export const Feed = ({ zid, hideZidAction }: FeedProps) => { } = useFeed(zid); return ( -
- - - {headerText} - - - {channelZid && } - {isLoading && Loading posts...} - {isEmpty && This feed is empty} - {hasLoadedMessages && ( -
    - {posts?.pages.map((page) => - page.map((reply) => ( -
  1. - {}} - meowPost={meowPostFeed} - messageId={reply.id.toString()} - nickname={reply.sender?.firstName} - numberOfReplies={reply.numberOfReplies} - ownerUserId={reply.sender?.userId} - reactions={reply.reactions} - text={reply.message} - timestamp={reply.createdAt} - userMeowBalance={userMeowBalance} - variant='default' - hideZidAction={hideZidAction} - /> -
  2. - )) - )} -
- )} - {isError && Failed to load posts} - {isFetchingNextPage && Loading more posts} - {hasNextPage && !isFetchingNextPage && !isError && ( - fetchNextPage()} bottomOffset={'-90%'} /> - )} -
-
- - -
+ + + {headerText} + + + {channelZid && } + {isLoading && Loading posts...} + {isEmpty && This feed is empty} + {hasLoadedMessages && ( +
    + {posts?.pages.map((page) => + page.map((reply) => ( +
  1. + {}} + meowPost={meowPostFeed} + messageId={reply.id.toString()} + nickname={reply.sender?.firstName} + numberOfReplies={reply.numberOfReplies} + ownerUserId={reply.sender?.userId} + reactions={reply.reactions} + text={reply.message} + timestamp={reply.createdAt} + userMeowBalance={userMeowBalance} + variant='default' + hideZidAction={hideZidAction} + /> +
  2. + )) + )} +
+ )} + {isError && Failed to load posts} + {isFetchingNextPage && Loading more posts} + {hasNextPage && !isFetchingNextPage && !isError && ( + fetchNextPage()} bottomOffset={'-90%'} /> + )} +
+
); }; diff --git a/src/apps/feed/components/post-view-container/styles.module.scss b/src/apps/feed/components/post-view-container/styles.module.scss index 0e395cb56..58577f6be 100644 --- a/src/apps/feed/components/post-view-container/styles.module.scss +++ b/src/apps/feed/components/post-view-container/styles.module.scss @@ -1,9 +1,7 @@ @use '../../../../variables' as variables; .Wrapper { - margin: 24px auto 24px auto; max-width: 600px; - pointer-events: all; } diff --git a/src/apps/feed/index.tsx b/src/apps/feed/index.tsx index 173eb47a8..23ce65437 100644 --- a/src/apps/feed/index.tsx +++ b/src/apps/feed/index.tsx @@ -8,6 +8,7 @@ import { Sidekick } from './components/sidekick'; import { PostView } from './components/post-view-container'; import { PanelBody } from '../../components/layout/panel'; import { IconSlashes } from '@zero-tech/zui/icons'; +import { FeedChat } from './components/feed-chat/container'; import styles from './styles.module.scss'; @@ -15,14 +16,17 @@ export const FeedApp = () => { return (
- - } - /> - } /> - - +
+ + } + /> + } /> + + + +
); }; diff --git a/src/apps/feed/styles.module.scss b/src/apps/feed/styles.module.scss index 853bec40b..77695f45d 100644 --- a/src/apps/feed/styles.module.scss +++ b/src/apps/feed/styles.module.scss @@ -1,3 +1,5 @@ +@use '../../variables' as variables; + .Feed { display: flex; width: 100%; @@ -13,3 +15,12 @@ padding: 32px; color: var(--color-greyscale-11); } + +.Wrapper { + display: flex; + justify-content: center; + flex-direction: row; + flex: 1; + gap: variables.$default-gap; + padding: 24px variables.$default-gap; +} diff --git a/src/apps/home/index.tsx b/src/apps/home/index.tsx index 29c64d122..329bdd365 100644 --- a/src/apps/home/index.tsx +++ b/src/apps/home/index.tsx @@ -2,13 +2,23 @@ import { useRouteMatch } from 'react-router-dom'; import { PostView } from '../feed/components/post-view-container'; import { Feed } from '../feed/components/feed'; +import styles from './styles.module.scss'; + export const HomeApp = () => { const route = useRouteMatch<{ postId: string }>('/home/:postId'); const postId = route?.params?.postId; if (postId) { - return ; + return ( +
+ +
+ ); } - return ; + return ( +
+ +
+ ); }; diff --git a/src/apps/home/styles.module.scss b/src/apps/home/styles.module.scss new file mode 100644 index 000000000..af02b6a07 --- /dev/null +++ b/src/apps/home/styles.module.scss @@ -0,0 +1,10 @@ +@use '../../variables' as variables; + +.Home { + display: flex; + justify-content: center; + width: 100%; + padding: 24px variables.$default-gap; + + pointer-events: all; +}