From d421f4054668e4c088d3e0036524f7afb9e0d607 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Thu, 30 May 2024 19:49:05 +0530 Subject: [PATCH 01/13] fix: update README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7bdc1383..4a712385 100644 --- a/README.md +++ b/README.md @@ -134,8 +134,8 @@ To test the mobile app, run: ```bash cd JoyboyCommunity -npm i -npm start +yarn install +yarn start ``` Select Expo web, Android or IOS. You can scan it with Expo GO on your phone. From 05041fb30d29c5aa6909b7bae0b7731cb349b3c0 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Fri, 31 May 2024 07:05:10 +0530 Subject: [PATCH 02/13] add: dayjs package --- JoyboyCommunity/package.json | 1 + JoyboyCommunity/yarn.lock | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/JoyboyCommunity/package.json b/JoyboyCommunity/package.json index 7475ac85..701dc11e 100644 --- a/JoyboyCommunity/package.json +++ b/JoyboyCommunity/package.json @@ -30,6 +30,7 @@ "@tanstack/react-query": "^5.40.0", "buffer": "^6.0.3", "crypto-es": "^2.1.0", + "dayjs": "^1.11.11", "events": "^3.3.0", "expo": "~51.0.8", "expo-crypto": "~13.0.2", diff --git a/JoyboyCommunity/yarn.lock b/JoyboyCommunity/yarn.lock index 8d7da5ed..5d6ffc18 100644 --- a/JoyboyCommunity/yarn.lock +++ b/JoyboyCommunity/yarn.lock @@ -3207,7 +3207,7 @@ data-view-byte-offset@^1.0.0: es-errors "^1.3.0" is-data-view "^1.0.1" -dayjs@^1.8.15: +dayjs@^1.11.11, dayjs@^1.8.15: version "1.11.11" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e" integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg== From 0dbc90058a6fc57a8f2fce53464e93b0c93dfcd3 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Fri, 31 May 2024 07:06:06 +0530 Subject: [PATCH 03/13] fix: typescript errors --- JoyboyCommunity/tsconfig.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/JoyboyCommunity/tsconfig.json b/JoyboyCommunity/tsconfig.json index 12f15398..8027bda8 100644 --- a/JoyboyCommunity/tsconfig.json +++ b/JoyboyCommunity/tsconfig.json @@ -1,5 +1,7 @@ { "extends": "expo/tsconfig.base", - "compilerOptions": {}, + "compilerOptions": { + "jsx": "react-jsx" + }, "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"] } From 22175d9fcd50229ffedfe1bce12592a5c917e426 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Fri, 31 May 2024 07:06:31 +0530 Subject: [PATCH 04/13] add: helper function --- JoyboyCommunity/src/utils/common-utils.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 JoyboyCommunity/src/utils/common-utils.ts diff --git a/JoyboyCommunity/src/utils/common-utils.ts b/JoyboyCommunity/src/utils/common-utils.ts new file mode 100644 index 00000000..44f8a893 --- /dev/null +++ b/JoyboyCommunity/src/utils/common-utils.ts @@ -0,0 +1,21 @@ +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; + +dayjs.extend(relativeTime); + +export const timestampToHumanReadable = (timestamp: number): string => { + // Convert timestamp to dayjs object + const date = dayjs.unix(timestamp); + const fromNow = date.fromNow(true); // Get the relative time string without the "ago" + + // Replace long forms with short forms and remove spaces + const formattedDate = fromNow + .replace(/\sseconds?/, 's') + .replace(/\sminutes?/, 'm') + .replace(/\shours?/, 'h') + .replace(/\sdays?/, 'd') + .replace(/\smonths?/, 'mo') + .replace(/\syears?/, 'y'); + + return formattedDate; +}; From 08c7982d96528549ad065170b635c9013952f3e1 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Fri, 31 May 2024 07:06:39 +0530 Subject: [PATCH 05/13] add: new icons --- JoyboyCommunity/src/assets/icons.tsx | 63 +++++++++++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/JoyboyCommunity/src/assets/icons.tsx b/JoyboyCommunity/src/assets/icons.tsx index 39ebbaf5..a5e7930c 100644 --- a/JoyboyCommunity/src/assets/icons.tsx +++ b/JoyboyCommunity/src/assets/icons.tsx @@ -1,4 +1,4 @@ -import Svg, {Path, Rect, SvgProps} from 'react-native-svg'; +import Svg, {Path, Rect, SvgProps, G} from 'react-native-svg'; export const AddPostIcon: React.FC = (props) => ( @@ -189,3 +189,64 @@ export const SendIcon: React.FC = (props) => { ); }; + +export const RepostIcon: React.FC = (props) => { + return ( + + + + + + + + ); +}; + +export const LikeIcon: React.FC = (props) => { + return ( + + + + ); +}; + +export const LikeFillIcon: React.FC = (props) => { + return ( + + + + ); +}; + +export const CommentIcon: React.FC = (props) => { + return ( + + + + + ); +}; From 9be528b2e42cd1396a5062eee086dd3ebcf26b18 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Fri, 31 May 2024 07:07:19 +0530 Subject: [PATCH 06/13] feat: post card ui overhaul - updated ui + icons according to figma designs - updated reposted message with icon + better ui - made timestamps dynamic and readable - added post like feature + animation --- .../src/shared/components/Post.tsx | 269 +++++++++++++----- 1 file changed, 201 insertions(+), 68 deletions(-) diff --git a/JoyboyCommunity/src/shared/components/Post.tsx b/JoyboyCommunity/src/shared/components/Post.tsx index f77ccde3..cfe5cba7 100644 --- a/JoyboyCommunity/src/shared/components/Post.tsx +++ b/JoyboyCommunity/src/shared/components/Post.tsx @@ -1,35 +1,126 @@ -import {MaterialIcons, Octicons} from '@expo/vector-icons'; +import {MaterialIcons} from '@expo/vector-icons'; import {NDKEvent} from '@nostr-dev-kit/ndk'; import {useNavigation} from '@react-navigation/native'; import {Image, Pressable, Text, View} from 'react-native'; import styled from 'styled-components/native'; import {Typography} from '../../components'; +import {CommentIcon, LikeFillIcon, LikeIcon, RepostIcon} from '../../assets/icons'; +import {timestampToHumanReadable} from '../../utils/common-utils'; import {MainStackNavigationProps, Post as PostType} from '../../types'; +import Animated, { + Easing, + useSharedValue, + useAnimatedStyle, + withTiming, + withSequence, + withSpring, +} from 'react-native-reanimated'; +import {useEffect, useState} from 'react'; + +export const Icon = styled(View)` + padding-horizontal: 4px; +`; + +const FlexView = styled(View)` + display: flex; + flex-direction: row; +`; + +const RepostMessage = styled(Typography)` + font-size: 14px; + color: #8f979d; + position: relative; + bottom: 3px; + margin-bottom: 5px; +`; const PostCard = styled(View)` background-color: #ffffff; border-radius: 16px; - padding: 8px; + padding: 10px; margin: 0 20px 18px 20px; `; -const PostLayout = styled(View)` + +const PostHeader = styled(View)` + display: flex; flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; `; -export const InteractionContainer = styled(View)` - margin-top: 30px; - width: 100%; +const PostTitle = styled(Text)` + color: #121212; + font-weight: 500; + font-size: 17px; + letter-spacing: 0.5px; +`; + +const PostSubtitleWrapper = styled(View)` + display: flex; + flex-direction: row; + margin-top: 4px; + align-items: center; +`; + +const PostSubtitle = styled(Text)` + color: #8f979d; + font-size: 11px; + letter-spacing: 0.5px; +`; + +const PostSubtitleCenterElement = styled(View)` + margin-horizontal: 8px; + height: 3px; + width: 3px; + border-radius: 1.5px; + background-color: #8f979d; +`; + +const PostContent = styled(View)` + display: flex; + margin-bottom: 16px; +`; + +const LikeWrapper = styled(View)` + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; +`; + +const LikeText = styled(Animated.Text)` + font-size: 14px; + color: #406686; + letter-spacing: 0.5px; +`; + +const AnimatedIcon = styled(Animated.View)` + height: 26px; +`; + +const PostFooter = styled(View)` display: flex; - gap: 8px; flex-direction: row; - align-content: center; - align-self: center; + width: 100%; + gap: 8px; justify-content: space-between; + align-items: center; `; -export const Icon = styled(View)` - padding-horizontal: 4px; +const CommentWrapper = styled(View)` + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; +`; + +const CommentsText = styled(Text)` + color: #6b6b8c; + font-weight: 400; + font-size: 12px; + letter-spacing: 0.5px; `; interface PostProps { @@ -42,6 +133,24 @@ interface PostProps { export const Post: React.FC = (props) => { const {post, event, repostedEvent} = props; const navigation = useNavigation(); + + const [isLiked, setIsLiked] = useState(false); + const [likes, setLikes] = useState(2); + + const scale = useSharedValue(1); + const textOpacity = useSharedValue(likes > 0 ? 1 : 0); + const iconPosition = useSharedValue(likes > 0 ? 0 : 6); // Adjusted to account for the gap + + const animatedIconStyle = useAnimatedStyle(() => ({ + transform: [{scale: withTiming(scale.value, {duration: 25, easing: Easing.out(Easing.ease)})}], + marginLeft: withTiming(iconPosition.value, {duration: 25}), // Animation for moving the icon + })); + + const animatedTextStyle = useAnimatedStyle(() => ({ + opacity: withTiming(textOpacity.value, {duration: 25}), + transform: [{scale: withTiming(textOpacity.value, {duration: 25})}], + })); + const handleProfilePress = (userId?: string) => { if (userId) { navigation.navigate('Profile', {publicKey: userId}); @@ -51,9 +160,6 @@ export const Post: React.FC = (props) => { /** @TODO comment in Nostr */ const handleComment = () => {}; - /** @TODO comment in Nostr */ - const handleLike = () => {}; - /** @TODO repost in Nostr */ const handleRepostNote = () => { alert('Handle repost'); @@ -62,84 +168,111 @@ export const Post: React.FC = (props) => { const handleNavigateToPostDetails = () => { navigation.navigate('PostDetail', {postId: event?.id, post: event}); }; + /** @TODO react in Nostr */ const handleReact = () => {}; + /** @TODO comment in Nostr */ + const toggleLike = () => { + setIsLiked((prev) => !prev); + setLikes((prev) => { + const newLikes = isLiked ? prev - 1 : prev + 1; + textOpacity.value = newLikes > 0 ? 1 : 0; + iconPosition.value = newLikes > 0 ? 0 : 6; + return newLikes; + }); + scale.value = withSequence( + withTiming(1.5, {duration: 25, easing: Easing.out(Easing.ease)}), + withSpring(1, {damping: 6, stiffness: 200}), // Small rebound effect + ); + }; + + useEffect(() => { + if (likes > 0) setIsLiked(true); + }, []); + return ( + {/* to show reposted message */} {repostedEvent && ( - - Reposted - + + + Reposted + )} {/* TODO different rendering base on kind =1,6,7 and tags for kind = 1 */} - - + + handleProfilePress(event?.pubkey)}> - - - - - {event?.pubkey} - - {post?.source && ( - - )} + + + {/* using static data for name */} + Monkey D Luffy + + @luffy + + {timestampToHumanReadable(event.created_at)} + - + - {/* TODO check tags if it's: + + + + {isLiked ? : } + + {likes > 0 && ( + + {likes} {likes === 1 ? 'like' : 'likes'} + + )} + + + + + + + {repostedEvent?.content ? repostedEvent?.content : event?.content} + + {post?.source && ( + + )} + + + + {/* TODO check tags if it's: quote repost reply */} - - - - - {repostedEvent?.content ? repostedEvent?.content : event?.content} - - - - - - - 16 comments - + + + + + 16 comments + - + ); }; From 8a2c558ddf10a7125e3d3d74445bb912d22bbb83 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Fri, 31 May 2024 07:30:37 +0530 Subject: [PATCH 07/13] fix: linting --- JoyboyCommunity/src/assets/icons.tsx | 2 +- JoyboyCommunity/src/shared/components/Post.tsx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/JoyboyCommunity/src/assets/icons.tsx b/JoyboyCommunity/src/assets/icons.tsx index a5e7930c..2287a0e4 100644 --- a/JoyboyCommunity/src/assets/icons.tsx +++ b/JoyboyCommunity/src/assets/icons.tsx @@ -1,4 +1,4 @@ -import Svg, {Path, Rect, SvgProps, G} from 'react-native-svg'; +import Svg, {G, Path, Rect, SvgProps} from 'react-native-svg'; export const AddPostIcon: React.FC = (props) => ( diff --git a/JoyboyCommunity/src/shared/components/Post.tsx b/JoyboyCommunity/src/shared/components/Post.tsx index cfe5cba7..0a8c75eb 100644 --- a/JoyboyCommunity/src/shared/components/Post.tsx +++ b/JoyboyCommunity/src/shared/components/Post.tsx @@ -1,22 +1,22 @@ import {MaterialIcons} from '@expo/vector-icons'; import {NDKEvent} from '@nostr-dev-kit/ndk'; import {useNavigation} from '@react-navigation/native'; +import {useEffect, useState} from 'react'; import {Image, Pressable, Text, View} from 'react-native'; -import styled from 'styled-components/native'; - -import {Typography} from '../../components'; -import {CommentIcon, LikeFillIcon, LikeIcon, RepostIcon} from '../../assets/icons'; -import {timestampToHumanReadable} from '../../utils/common-utils'; -import {MainStackNavigationProps, Post as PostType} from '../../types'; import Animated, { Easing, - useSharedValue, useAnimatedStyle, - withTiming, + useSharedValue, withSequence, withSpring, + withTiming, } from 'react-native-reanimated'; -import {useEffect, useState} from 'react'; +import styled from 'styled-components/native'; + +import {CommentIcon, LikeFillIcon, LikeIcon, RepostIcon} from '../../assets/icons'; +import {Typography} from '../../components'; +import {MainStackNavigationProps, Post as PostType} from '../../types'; +import {timestampToHumanReadable} from '../../utils/common-utils'; export const Icon = styled(View)` padding-horizontal: 4px; From 95dc64f4f6b5cc921811426a6467b403d41ab716 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Fri, 31 May 2024 17:40:33 +0530 Subject: [PATCH 08/13] fix: reset tsconfig for mobile app --- JoyboyCommunity/tsconfig.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/JoyboyCommunity/tsconfig.json b/JoyboyCommunity/tsconfig.json index 8027bda8..12f15398 100644 --- a/JoyboyCommunity/tsconfig.json +++ b/JoyboyCommunity/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "expo/tsconfig.base", - "compilerOptions": { - "jsx": "react-jsx" - }, + "compilerOptions": {}, "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"] } From 1062ca27b52c9906761b4ac1f5b7da5c22f62c05 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Fri, 31 May 2024 17:55:33 +0530 Subject: [PATCH 09/13] fix: camelCasing for svg attributes --- JoyboyCommunity/src/assets/icons.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/JoyboyCommunity/src/assets/icons.tsx b/JoyboyCommunity/src/assets/icons.tsx index 2287a0e4..9c16c43d 100644 --- a/JoyboyCommunity/src/assets/icons.tsx +++ b/JoyboyCommunity/src/assets/icons.tsx @@ -195,10 +195,10 @@ export const RepostIcon: React.FC = (props) => { @@ -214,7 +214,7 @@ export const LikeIcon: React.FC = (props) => { ); @@ -237,15 +237,15 @@ export const CommentIcon: React.FC = (props) => { ); From 46f6b202f4d8ea5b6293a2c7ace215284e6454d1 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Fri, 31 May 2024 18:07:42 +0530 Subject: [PATCH 10/13] fix: svg color props --- JoyboyCommunity/src/assets/icons.tsx | 8 ++++---- JoyboyCommunity/src/shared/components/Post.tsx | 8 ++++++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/JoyboyCommunity/src/assets/icons.tsx b/JoyboyCommunity/src/assets/icons.tsx index 9c16c43d..00d9c208 100644 --- a/JoyboyCommunity/src/assets/icons.tsx +++ b/JoyboyCommunity/src/assets/icons.tsx @@ -213,7 +213,7 @@ export const LikeIcon: React.FC = (props) => { @@ -225,7 +225,7 @@ export const LikeFillIcon: React.FC = (props) => { ); @@ -236,14 +236,14 @@ export const CommentIcon: React.FC = (props) => { diff --git a/JoyboyCommunity/src/shared/components/Post.tsx b/JoyboyCommunity/src/shared/components/Post.tsx index 0a8c75eb..6dbaefb4 100644 --- a/JoyboyCommunity/src/shared/components/Post.tsx +++ b/JoyboyCommunity/src/shared/components/Post.tsx @@ -224,7 +224,11 @@ export const Post: React.FC = (props) => { - {isLiked ? : } + {isLiked ? ( + + ) : ( + + )} {likes > 0 && ( @@ -261,7 +265,7 @@ export const Post: React.FC = (props) => { - + 16 comments From d8163365a1b4ff31098b6e0ff851138a06ab3c35 Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Sun, 2 Jun 2024 04:08:59 +0530 Subject: [PATCH 11/13] feat: improve animation functions --- .../src/shared/components/Post.tsx | 43 +++++++++---------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/JoyboyCommunity/src/shared/components/Post.tsx b/JoyboyCommunity/src/shared/components/Post.tsx index 6dbaefb4..fd457924 100644 --- a/JoyboyCommunity/src/shared/components/Post.tsx +++ b/JoyboyCommunity/src/shared/components/Post.tsx @@ -135,20 +135,13 @@ export const Post: React.FC = (props) => { const navigation = useNavigation(); const [isLiked, setIsLiked] = useState(false); - const [likes, setLikes] = useState(2); + const [likes, setLikes] = useState(12); // static value for now - const scale = useSharedValue(1); - const textOpacity = useSharedValue(likes > 0 ? 1 : 0); - const iconPosition = useSharedValue(likes > 0 ? 0 : 6); // Adjusted to account for the gap + const scale = useSharedValue(1); // Control scale for icon animation + // Animated style for the icon const animatedIconStyle = useAnimatedStyle(() => ({ - transform: [{scale: withTiming(scale.value, {duration: 25, easing: Easing.out(Easing.ease)})}], - marginLeft: withTiming(iconPosition.value, {duration: 25}), // Animation for moving the icon - })); - - const animatedTextStyle = useAnimatedStyle(() => ({ - opacity: withTiming(textOpacity.value, {duration: 25}), - transform: [{scale: withTiming(textOpacity.value, {duration: 25})}], + transform: [{scale: scale.value}], })); const handleProfilePress = (userId?: string) => { @@ -174,17 +167,23 @@ export const Post: React.FC = (props) => { /** @TODO comment in Nostr */ const toggleLike = () => { - setIsLiked((prev) => !prev); - setLikes((prev) => { - const newLikes = isLiked ? prev - 1 : prev + 1; - textOpacity.value = newLikes > 0 ? 1 : 0; - iconPosition.value = newLikes > 0 ? 0 : 6; - return newLikes; + setIsLiked((prevIsLiked) => { + const newIsLiked = !prevIsLiked; + setLikes((prevLikes) => { + const newLikes = newIsLiked ? prevLikes + 1 : prevLikes - 1; + + // Only trigger the animation if not unliking from 1 like to zero + if (!(prevLikes === 1 && !newIsLiked)) { + scale.value = withSequence( + withTiming(1.5, {duration: 100, easing: Easing.out(Easing.ease)}), // Scale up + withSpring(1, {damping: 6, stiffness: 200}), // Bounce back + ); + } + + return newLikes; + }); + return newIsLiked; }); - scale.value = withSequence( - withTiming(1.5, {duration: 25, easing: Easing.out(Easing.ease)}), - withSpring(1, {damping: 6, stiffness: 200}), // Small rebound effect - ); }; useEffect(() => { @@ -231,7 +230,7 @@ export const Post: React.FC = (props) => { )} {likes > 0 && ( - + {likes} {likes === 1 ? 'like' : 'likes'} )} From 45b98f00b0354284262f46282cbe79ef997a982e Mon Sep 17 00:00:00 2001 From: bhavyagosai Date: Sun, 2 Jun 2024 04:21:43 +0530 Subject: [PATCH 12/13] fix: minor fixes - improve code - remove useless/irrelevant code --- JoyboyCommunity/src/shared/components/Post.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/JoyboyCommunity/src/shared/components/Post.tsx b/JoyboyCommunity/src/shared/components/Post.tsx index fd457924..44defffb 100644 --- a/JoyboyCommunity/src/shared/components/Post.tsx +++ b/JoyboyCommunity/src/shared/components/Post.tsx @@ -1,7 +1,7 @@ import {MaterialIcons} from '@expo/vector-icons'; import {NDKEvent} from '@nostr-dev-kit/ndk'; import {useNavigation} from '@react-navigation/native'; -import {useEffect, useState} from 'react'; +import {useState} from 'react'; import {Image, Pressable, Text, View} from 'react-native'; import Animated, { Easing, @@ -186,10 +186,6 @@ export const Post: React.FC = (props) => { }); }; - useEffect(() => { - if (likes > 0) setIsLiked(true); - }, []); - return ( {/* to show reposted message */} @@ -240,7 +236,7 @@ export const Post: React.FC = (props) => { - {repostedEvent?.content ? repostedEvent?.content : event?.content} + {repostedEvent?.content ?? event?.content} {post?.source && ( Date: Sun, 2 Jun 2024 05:19:38 +0530 Subject: [PATCH 13/13] fix: layout 1:1 with design --- .../src/shared/components/Post.tsx | 54 ++++++++++--------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/JoyboyCommunity/src/shared/components/Post.tsx b/JoyboyCommunity/src/shared/components/Post.tsx index 44defffb..2debca6b 100644 --- a/JoyboyCommunity/src/shared/components/Post.tsx +++ b/JoyboyCommunity/src/shared/components/Post.tsx @@ -38,8 +38,8 @@ const RepostMessage = styled(Typography)` const PostCard = styled(View)` background-color: #ffffff; border-radius: 16px; - padding: 10px; - margin: 0 20px 18px 20px; + padding: 8px; + margin: 0 16px 24px 16px; `; const PostHeader = styled(View)` @@ -47,31 +47,32 @@ const PostHeader = styled(View)` flex-direction: row; justify-content: space-between; align-items: center; - margin-bottom: 16px; + margin-bottom: 12px; `; const PostTitle = styled(Text)` color: #121212; - font-weight: 500; - font-size: 17px; - letter-spacing: 0.5px; + font-weight: 700; + font-size: 15px; + line-height: 20px; `; const PostSubtitleWrapper = styled(View)` display: flex; flex-direction: row; - margin-top: 4px; + margin-top: 2px; align-items: center; `; const PostSubtitle = styled(Text)` color: #8f979d; font-size: 11px; - letter-spacing: 0.5px; + line-height: 16px; `; const PostSubtitleCenterElement = styled(View)` - margin-horizontal: 8px; + margin-left: 16px; + margin-right: 7px; height: 3px; width: 3px; border-radius: 1.5px; @@ -83,28 +84,34 @@ const PostContent = styled(View)` margin-bottom: 16px; `; +const PostContentText = styled(Text)` + font-size: 13px; + line-height: 20px; + color: #000; +`; + const LikeWrapper = styled(View)` display: flex; flex-direction: row; align-items: center; - gap: 6px; + gap: 4px; + padding: 2px; `; const LikeText = styled(Animated.Text)` - font-size: 14px; + font-size: 11px; color: #406686; - letter-spacing: 0.5px; + line-height: 16px; `; const AnimatedIcon = styled(Animated.View)` - height: 26px; + height: 20px; `; const PostFooter = styled(View)` display: flex; flex-direction: row; width: 100%; - gap: 8px; justify-content: space-between; align-items: center; `; @@ -113,14 +120,13 @@ const CommentWrapper = styled(View)` display: flex; flex-direction: row; align-items: center; - gap: 6px; + gap: 4px; `; const CommentsText = styled(Text)` color: #6b6b8c; - font-weight: 400; - font-size: 12px; - letter-spacing: 0.5px; + font-size: 11px; + line-height: 16px; `; interface PostProps { @@ -220,9 +226,9 @@ export const Post: React.FC = (props) => { {isLiked ? ( - + ) : ( - + )} {likes > 0 && ( @@ -236,7 +242,7 @@ export const Post: React.FC = (props) => { - {repostedEvent?.content ?? event?.content} + {repostedEvent?.content ?? event?.content} {post?.source && ( = (props) => { width: '100%', height: 160, borderRadius: 8, - marginTop: 14, + marginTop: 12, objectFit: 'cover', }} /> @@ -260,14 +266,14 @@ export const Post: React.FC = (props) => { - + 16 comments