fix: fixes for social feed cards

packages/components/IconBox.tsx

@@ -4,7 +4,7 @@ import { SvgProps } from "react-native-svg";
 
 import { SVG } from "./SVG";
 import { CustomPressable } from "./buttons/CustomPressable";
-import { neutral33, neutral77, secondaryColor } from "../utils/style/colors";
+import { neutral77, secondaryColor } from "../utils/style/colors";
 
 interface IconBoxProps {
   onPress: () => void;
@@ -32,10 +32,6 @@ export const IconBox = ({
     <CustomPressable
       style={[
         {
-          height: 32,
-          width: 32,
-          borderRadius: 24,
-          backgroundColor: neutral33,
           alignItems: "center",
           justifyContent: "center",
         },

packages/components/OptimizedImage.tsx

@@ -27,8 +27,10 @@ export const OptimizedImage: React.FC<
           width,
           height,
           borderRadius: StyleSheet.flatten(other.style).borderRadius,
-          borderTopLeftRadius: StyleSheet.flatten(other.style).borderTopLeftRadius,
-          borderBottomLeftRadius: StyleSheet.flatten(other.style).borderBottomLeftRadius,
+          borderTopLeftRadius: StyleSheet.flatten(other.style)
+            .borderTopLeftRadius,
+          borderBottomLeftRadius: StyleSheet.flatten(other.style)
+            .borderBottomLeftRadius,
           backgroundColor: neutral33,
         }}
       />

packages/components/cards/CommentsContainer.tsx

@@ -10,7 +10,7 @@ import { RESPONSIVE_BREAKPOINT_S } from "../../utils/style/layout";
 import {
   SocialCommentCard,
   SocialCommentCardProps,
-} from "../socialFeed/SocialThread/SocialCommentCard";
+} from "../socialFeed/SocialCard/cards/SocialCommentCard";
 import { SpacerColumn } from "../spacer";
 
 interface CommentsContainerProps

packages/components/socialFeed/NewsFeed/NewsFeed.tsx

@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   LayoutChangeEvent,
   View,
-  useWindowDimensions, ViewStyle,
+  useWindowDimensions,
+  ViewStyle,
 } from "react-native";
 import Animated, {
   useAnimatedScrollHandler,
@@ -12,6 +13,7 @@ import Animated, {
 import { CreateShortPostButton } from "./CreateShortPost/CreateShortPostButton";
 import { CreateShortPostButtonRound } from "./CreateShortPost/CreateShortPostButtonRound";
 import { CreateShortPostModal } from "./CreateShortPost/CreateShortPostModal";
+import { PostCategory } from "./NewsFeed.type";
 import { NewsFeedInput } from "./NewsFeedInput";
 import { RefreshButton } from "./RefreshButton/RefreshButton";
 import { RefreshButtonRound } from "./RefreshButton/RefreshButtonRound";
@@ -28,9 +30,8 @@ import {
   screenContentMaxWidth,
 } from "../../../utils/style/layout";
 import { SpacerColumn, SpacerRow } from "../../spacer";
-import { SocialThreadCard } from "../SocialThread/SocialThreadCard";
-import {PostCategory} from "./NewsFeed.type";
-import {SocialArticleCard} from "../SocialThread/SocialArticleCard";
+import { SocialArticleCard } from "../SocialCard/cards/SocialArticleCard";
+import { SocialThreadCard } from "../SocialCard/cards/SocialThreadCard";
 
 const OFFSET_Y_LIMIT_FLOATING = 224;
 export const ROUND_BUTTON_WIDTH_L = 60;
@@ -161,15 +162,26 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
     ],
   );
 
-  const RenderItem = useCallback((post: Post ) =>
+  const RenderItem = useCallback(
+    (post: Post) => (
       <View
         style={{
-          width:
-            windowWidth < RESPONSIVE_BREAKPOINT_S ? windowWidth : width,
+          width: windowWidth < RESPONSIVE_BREAKPOINT_S ? windowWidth : width,
           maxWidth: screenContentMaxWidth,
         }}
       >
-        {post.category === PostCategory.Article ? <SocialArticleCard post={post}/> :
+        {post.category === PostCategory.Article ? (
+          <SocialArticleCard
+            post={post}
+            style={
+              windowWidth < RESPONSIVE_BREAKPOINT_S && {
+                borderRadius: 0,
+                borderLeftWidth: 0,
+                borderRightWidth: 0,
+              }
+            }
+          />
+        ) : (
           <SocialThreadCard
             post={post}
             refetchFeed={refetch}
@@ -183,10 +195,12 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
               }
             }
           />
-        }
-        <SpacerColumn size={2}/>
+        )}
+        <SpacerColumn size={2} />
       </View>
-  , [windowWidth, width, screenContentMaxWidth])
+    ),
+    [windowWidth, width, isFlagged, refetch],
+  );
 
   return (
     <>
@@ -234,11 +248,11 @@ const contentCStyle: ViewStyle = {
   alignItems: "center",
   alignSelf: "center",
   width: "100%",
-}
+};
 const floatingActions: ViewStyle = {
   position: "absolute",
   justifyContent: "center",
   alignItems: "center",
   right: 24,
   bottom: 32,
-}
+};

packages/components/socialFeed/NewsFeed/NewsFeed.type.ts

@@ -1,7 +1,8 @@
+import { z } from "zod";
+
 import { Post } from "../../../api/feed/v1/feed";
 import { PostResult } from "../../../contracts-clients/teritori-social-feed/TeritoriSocialFeed.types";
 import { LocalFileData, RemoteFileData } from "../../../utils/types/files";
-import {z} from "zod";
 
 export enum PostCategory {
   Reaction,
@@ -24,7 +25,7 @@ export interface NewPostFormValues {
   files?: LocalFileData[];
   gifs?: string[];
   nftStorageApiToken?: string;
-  coverImage?: LocalFileData;
+  thumbnailImage?: LocalFileData;
   shortDescription: string;
 }
 
@@ -50,7 +51,7 @@ export interface SocialFeedMetadata {
 export const ZodSocialFeedArticleMetadata = z.object({
   title: z.string(),
   shortDescription: z.string(),
-  coverImage: z.custom<RemoteFileData>().optional(),
+  thumbnailImage: z.custom<RemoteFileData>().optional(),
   message: z.string(),
   files: z.custom<RemoteFileData[]>().optional(),
   gifs: z.array(z.string()).optional(),
@@ -59,8 +60,9 @@ export const ZodSocialFeedArticleMetadata = z.object({
   createdAt: z.string(),
   updatedAt: z.string(),
 });
-export type SocialFeedArticleMetadata = z.infer<typeof  ZodSocialFeedArticleMetadata>;
-
+export type SocialFeedArticleMetadata = z.infer<
+  typeof ZodSocialFeedArticleMetadata
+>;
 
 export type ReplyToType = {
   username: string;

packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx

@@ -616,11 +616,11 @@ export const NewsFeedInput = React.forwardRef<
             >
               <EmojiSelector
                 onEmojiSelected={onEmojiSelected}
-                buttonStyle={{ marginRight: layout.spacing_x2_5 }}
+                buttonStyle={{ marginRight: layout.spacing_x2 }}
               />
 
               <GIFSelector
-                buttonStyle={{ marginRight: layout.spacing_x2_5 }}
+                buttonStyle={{ marginRight: layout.spacing_x2 }}
                 onGIFSelected={(url) => {
                   // Don't add if already added
                   if (formValues.gifs?.find((gif) => gif === url)) return;
@@ -643,7 +643,7 @@ export const NewsFeedInput = React.forwardRef<
                   <IconBox
                     icon={audioSVG}
                     onPress={onPress}
-                    style={{ marginRight: layout.spacing_x2_5 }}
+                    style={{ marginRight: layout.spacing_x2 }}
                     disabled={
                       !!formValues.files?.length || !!formValues.gifs?.length
                     }
@@ -658,7 +658,7 @@ export const NewsFeedInput = React.forwardRef<
                   <IconBox
                     icon={videoSVG}
                     onPress={onPress}
-                    style={{ marginRight: layout.spacing_x2_5 }}
+                    style={{ marginRight: layout.spacing_x2 }}
                     disabled={
                       !!formValues.files?.length || !!formValues.gifs?.length
                     }
@@ -723,7 +723,7 @@ export const NewsFeedInput = React.forwardRef<
                     }
                     borderColor={primaryColor}
                     touchableStyle={{
-                      marginRight: layout.spacing_x2_5,
+                      marginRight: layout.spacing_x2,
                     }}
                     backgroundColor={
                       formValues?.message.length >

packages/components/socialFeed/RichText/RichText.web.tsx

@@ -38,11 +38,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import {
-  ScrollView,
-  useWindowDimensions,
-  View, ViewStyle,
-} from "react-native";
+import { ScrollView, useWindowDimensions, View, ViewStyle } from "react-native";
 
 import { RichHashtagRenderer } from "./RichRenderer/RichHashtagRenderer";
 import { RichHashtagRendererConsultation } from "./RichRenderer/RichHashtagRendererConsultation";
@@ -192,15 +188,18 @@ export const RichText: React.FC<RichTextProps> = ({
   );
 
   // Truncate using initialValue, only if isPreview
-  const isTruncateNeeded = useMemo(() => isArticleHTMLNeedsTruncate(initialValue, isPreview)
-  , [initialValue, isPreview]);
+  const isTruncateNeeded = useMemo(
+    () => isArticleHTMLNeedsTruncate(initialValue, isPreview),
+    [initialValue, isPreview],
+  );
   useEffect(() => {
     if (isArticleHTMLNeedsTruncate(initialValue, isPreview)) {
-      const {truncatedState, truncatedHtml} = getTruncatedArticleHTML(initialValue)
+      const { truncatedState, truncatedHtml } =
+        getTruncatedArticleHTML(initialValue);
       setEditorState(EditorState.createWithContent(truncatedState));
       setHtml(truncatedHtml);
     }
-  }, [initialValue, isTruncateNeeded]);
+  }, [initialValue, isTruncateNeeded, isPreview]);
 
   const addImage = (file: LocalFileData) => {
     const state = imagePlugin.addImage(editorState, file.url, {});
@@ -487,21 +486,21 @@ export const RichText: React.FC<RichTextProps> = ({
 };
 
 /////////////// STYLES ////////////////
- const toolbarCustomButtonCStyle: ViewStyle = {
-    margin: layout.spacing_x0_5,
-  }
+const toolbarCustomButtonCStyle: ViewStyle = {
+  margin: layout.spacing_x0_5,
+};
 const toolbarCustomButtonIconCStyle: ViewStyle = {
   borderRadius: 4,
   height: 30,
   width: 30,
-}
+};
 const toolbarButtonsWrapperCStyle: ViewStyle = {
   flexDirection: "row",
   justifyContent: "center",
   alignItems: "center",
   width: "100%",
   flexWrap: "wrap",
-}
+};
 
 /////////////// SOME FUNCTIONS ////////////////
 export const createStateFromHTML = (html: string) => {
@@ -681,24 +680,20 @@ const getGIFsToPublish = (editorState: EditorState, gifsUrls: string[]) => {
   return gifsToPublish;
 };
 
-
 export const isArticleHTMLNeedsTruncate = (html: string, isPreview = false) => {
   const contentState = createStateFromHTML(html).getCurrentContent();
   return (
     isPreview &&
     contentState.getBlocksAsArray().length >= NB_ROWS_SHOWN_IN_PREVIEW
   );
-}
+};
 
 export const getTruncatedArticleHTML = (html: string) => {
-  const contentState =
-    createStateFromHTML(html).getCurrentContent();
+  const contentState = createStateFromHTML(html).getCurrentContent();
   const truncatedBlocks = contentState
     .getBlocksAsArray()
     .slice(0, NB_ROWS_SHOWN_IN_PREVIEW);
   const truncatedState = ContentState.createFromBlockArray(truncatedBlocks);
   const truncatedHtml = createHTMLFromState(truncatedState);
-  return {truncatedState, truncatedHtml}
-}
-
-
+  return { truncatedState, truncatedHtml };
+};

packages/components/socialFeed/SocialActions/CommentsCount.tsx

@@ -15,7 +15,7 @@ export const CommentsCount: React.FC<{
         source={chatSVG}
         height={20}
         width={20}
-        style={{ marginRight: layout.spacing_x1_5 }}
+        style={{ marginRight: layout.spacing_x0_75 }}
       />
       <BrandText style={fontSemibold14}>{count}</BrandText>
     </View>

packages/components/socialFeed/SocialActions/Reactions.tsx

@@ -92,7 +92,6 @@ export const Reactions: React.FC<{
                 label={String(reaction.count)}
                 emoji={reaction.icon}
                 onPress={() => onPressReaction(reaction.icon)}
-                style={{ marginHorizontal: layout.spacing_x0_25 }}
               />
             )}
             keyExtractor={(reaction: Reaction) => reaction.icon}

packages/components/socialFeed/SocialActions/TipButton.tsx

@@ -65,7 +65,7 @@ export const TipButton: React.FC<{
         disabled={disabled}
       >
         <SVG source={tipSVG} width={20} height={20} />
-        <SpacerRow size={1.5} />
+        <SpacerRow size={0.75} />
         <BrandText style={[fontSemibold14, disabled && { color: neutral77 }]}>
           {selectedNetworkInfo?.kind === NetworkKind.Gno ? (
             <GnoTipAmount

packages/components/socialFeed/SocialThread/ArticleRenderer.tsx → packages/components/socialFeed/SocialCard/ArticleRenderer.tsx

@@ -24,7 +24,7 @@ export const ArticleRenderer: React.FC<Props> = ({
   postId,
   authorId,
 }) => {
-  const coverImage = metadata.files?.find((file) => file.isCoverImage);
+  const thumbnailImage = metadata.files?.find((file) => file.isThumbnailImage);
 
   return (
     <>
@@ -33,9 +33,9 @@ export const ArticleRenderer: React.FC<Props> = ({
           {metadata.title}
         </BrandText>
       )}
-      {!!coverImage && (
+      {!!thumbnailImage && (
         <Image
-          source={{ uri: ipfsURLToHTTPURL(coverImage.url) }}
+          source={{ uri: ipfsURLToHTTPURL(thumbnailImage.url) }}
           resizeMode="cover"
           style={{
             width: "100%",

packages/components/socialFeed/SocialCard/FlaggedCardFooter.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+import { View } from "react-native";
+
+import addThreadSVG from "../../../../assets/icons/add-thread.svg";
+import { Post } from "../../../api/feed/v1/feed";
+import { parseUserId } from "../../../networks";
+import { neutral22, neutral77 } from "../../../utils/style/colors";
+import { fontSemibold13 } from "../../../utils/style/fonts";
+import { layout } from "../../../utils/style/layout";
+import { BrandText } from "../../BrandText";
+import FlexRow from "../../FlexRow";
+import { SVG } from "../../SVG";
+import { SpacerRow } from "../../spacer";
+
+export const FlaggedCardFooter: FC<{
+  post: Post;
+}> = ({ post }) => {
+  const [, authorAddress] = parseUserId(post.authorId);
+
+  return (
+    <FlexRow
+      justifyContent="space-between"
+      style={{
+        borderTopWidth: 0.5,
+        borderTopColor: neutral22,
+        paddingTop: layout.spacing_x2,
+      }}
+    >
+      <BrandText style={[fontSemibold13, { color: neutral77 }]}>
+        {authorAddress}
+      </BrandText>
+
+      <View style={{ flexDirection: "row" }}>
+        <SVG source={addThreadSVG} width={20} height={20} />
+        <SpacerRow size={0.75} />
+
+        <BrandText style={fontSemibold13}>Open the thread</BrandText>
+      </View>
+    </FlexRow>
+  );
+};