Merge remote-tracking branch 'origin/main' into feat-feed-article-mar…

…kdown
TERITORI · Dec 20, 2024 · 74ad2d9 · 74ad2d9
2 parents af89a05 + 0088374
commit 74ad2d9
Show file tree

Hide file tree

Showing 26 changed files with 135 additions and 126 deletions.
diff --git a/packages/components/inputs/TextInputCustom.tsx b/packages/components/inputs/TextInputCustom.tsx
@@ -40,7 +40,7 @@ import {
   neutralA3,
   secondaryColor,
 } from "../../utils/style/colors";
-import { fontMedium10, fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular10, fontRegular14 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 import { ErrorText } from "../ErrorText";
@@ -100,7 +100,7 @@ export const Label: React.FC<{
     <BrandText
       style={[
         styles.labelText,
-        fontSemibold14,
+        fontRegular14,
         style,
         hovered && { color: secondaryColor },
       ]}
@@ -111,7 +111,7 @@ export const Label: React.FC<{
       <BrandText
         style={[
           styles.labelText,
-          fontSemibold14,
+          fontRegular14,
           { color: additionalRed, marginLeft: layout.spacing_x0_5 },
         ]}
       >
@@ -284,9 +284,23 @@ export const TextInputCustom = <T extends FieldValues>({
               (variant !== "labelOutside" && !hideLabel && (
                 <>
                   <BrandText
-                    style={[styles.labelText, fontMedium10, labelStyle]}
+                    style={[styles.labelText, fontRegular10, labelStyle]}
                   >
                     {label}
+                    {rules?.required && (
+                      <BrandText
+                        style={[
+                          styles.labelText,
+                          fontRegular10,
+                          {
+                            color: additionalRed,
+                            marginLeft: layout.spacing_x0_5,
+                          },
+                        ]}
+                      >
+                        *
+                      </BrandText>
+                    )}
                   </BrandText>
                   <SpacerColumn size={0.5} />
                 </>

diff --git a/packages/components/mini/SelectPicture.tsx b/packages/components/mini/SelectPicture.tsx
@@ -10,7 +10,7 @@ import { SVG } from "@/components/SVG";
 import { CustomPressable } from "@/components/buttons/CustomPressable";
 import { IMAGE_MIME_TYPES } from "@/utils/mime";
 import { neutral33 } from "@/utils/style/colors";
-import { fontSemibold14 } from "@/utils/style/fonts";
+import { fontRegular14 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 import { LocalFileData } from "@/utils/types/files";
 
@@ -107,7 +107,7 @@ export const SelectPicture = ({
           >
             <SVG source={Img} width={16} height={16} />
             {squareSelectorOptions.placeholder && (
-              <BrandText style={fontSemibold14}>
+              <BrandText style={fontRegular14}>
                 {squareSelectorOptions.placeholder}
               </BrandText>
             )}

diff --git a/packages/components/modals/ModalBase.tsx b/packages/components/modals/ModalBase.tsx
@@ -18,7 +18,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import chevronLeft from "../../../assets/icons/chevron-left.svg";
 import closeSVG from "../../../assets/icons/hamburger-button-cross.svg";
 import { neutral77, neutral22 } from "../../utils/style/colors";
-import { fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular20, fontSemibold14 } from "../../utils/style/fonts";
 import { layout, RESPONSIVE_BREAKPOINT_S } from "../../utils/style/layout";
 import { modalMarginPadding } from "../../utils/style/modals";
 import { BrandText } from "../BrandText";
@@ -200,7 +200,13 @@ const ModalBase: React.FC<ModalBaseProps> = ({
 
                   <View style={{ flex: 1, width: "100%" }}>
                     {!!label && (
-                      <BrandText style={{ color: "white", lineHeight: 24 }}>
+                      <BrandText
+                        style={{
+                          ...fontRegular20,
+                          color: "white",
+                          lineHeight: 24,
+                        }}
+                      >
                         {label}
                       </BrandText>
                     )}

diff --git a/packages/components/music/FeedMusicList.tsx b/packages/components/music/FeedMusicList.tsx
@@ -15,7 +15,7 @@ import { useAppMode } from "../../hooks/useAppMode";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { NetworkFeature } from "../../networks";
 import { zodTryParseJSON } from "../../utils/sanitize";
-import { fontSemibold20 } from "../../utils/style/fonts";
+import { fontRegular20 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import {
   PostCategory,
@@ -108,7 +108,7 @@ export const FeedMusicList: React.FC<{
   return (
     <View style={[containerCStyle, style]}>
       <View style={oneLineCStyle}>
-        <BrandText style={fontSemibold20}>{title}</BrandText>
+        <BrandText style={fontRegular20}>{title}</BrandText>
         <View style={buttonGroupCStyle}>
           {allowUpload && <UploadMusicButton onPress={onPressUploadMusic} />}
         </View>

diff --git a/packages/components/music/TrackCard.tsx b/packages/components/music/TrackCard.tsx
@@ -30,7 +30,7 @@ import {
   neutralFF,
   primaryColor,
 } from "@/utils/style/colors";
-import { fontMedium13, fontSemibold14 } from "@/utils/style/fonts";
+import { fontRegular13, fontRegular14 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 import { ZodSocialFeedTrackMetadata } from "@/utils/types/feed";
 import { Media } from "@/utils/types/mediaPlayer";
@@ -124,7 +124,7 @@ export const TrackCard: React.FC<{
             </View>
           )}
         </CustomPressable>
-        <BrandText style={[fontSemibold14, { height: 40 }]} numberOfLines={2}>
+        <BrandText style={[fontRegular14, { height: 40 }]} numberOfLines={2}>
           {track?.title || ""}
         </BrandText>
         <SpacerColumn size={0.5} />
@@ -176,11 +176,11 @@ const positionButtonBoxStyle: ViewStyle = {
 };
 
 const contentDescriptionStyle: TextStyle = {
-  ...fontMedium13,
+  ...fontRegular13,
   color: neutral77,
 };
 
 const contentNameStyle: TextStyle = {
-  ...fontSemibold14,
+  ...fontRegular14,
   color: primaryColor,
 };
diff --git a/packages/components/music/TrackOptionsButton.tsx b/packages/components/music/TrackOptionsButton.tsx
@@ -12,6 +12,7 @@ import { SpacerColumn } from "../spacer";
 import { Post } from "@/api/feed/v1/feed";
 import ThreeDotsCircleWhite from "@/assets/icons/music/three-dot-circle-white.svg";
 import { useAppMode } from "@/hooks/useAppMode";
+import { fontRegular16, fontRegular20 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
 const BUTTONS_HEIGHT = 28;
@@ -29,7 +30,14 @@ export const TrackOptionsButton: FC<{
   };
 
   const TrackOptionModalHeader = () => {
-    return <BrandText numberOfLines={2}>{trackName}</BrandText>;
+    return (
+      <BrandText
+        numberOfLines={2}
+        style={{ ...fontRegular20, alignSelf: "center" }}
+      >
+        {trackName}
+      </BrandText>
+    );
   };
 
   return (
@@ -70,7 +78,7 @@ export const TrackOptionsButton: FC<{
               alignItems: "center",
             }}
           >
-            <BrandText>Share</BrandText>
+            <BrandText style={fontRegular16}>Share</BrandText>
             <ShareButton postId={post.id} useAltStyle />
           </View>
           <View
@@ -79,7 +87,7 @@ export const TrackOptionsButton: FC<{
               alignItems: "center",
             }}
           >
-            <BrandText>Tip</BrandText>
+            <BrandText style={fontRegular16}>Tip</BrandText>
             <TipButton
               postId={post.id}
               authorId={post.authorId}

diff --git a/packages/components/music/UploadMusicButton.tsx b/packages/components/music/UploadMusicButton.tsx
@@ -3,7 +3,7 @@ import { TextStyle, TouchableOpacity, ViewStyle } from "react-native";
 
 import Upload from "../../../assets/icons/upload_alt.svg";
 import { neutral30, primaryColor } from "../../utils/style/colors";
-import { fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular14 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
@@ -42,7 +42,6 @@ const buttonContainerStyle: ViewStyle = {
   borderRadius: 999,
 };
 const buttonTextStyle: TextStyle = {
-  ...fontSemibold14,
-
+  ...fontRegular14,
   color: primaryColor,
 };
diff --git a/packages/components/music/UploadMusicModal/UploadTrack.tsx b/packages/components/music/UploadMusicModal/UploadTrack.tsx
@@ -26,7 +26,7 @@ import {
   neutral77,
   primaryColor,
 } from "../../../utils/style/colors";
-import { fontSemibold14 } from "../../../utils/style/fonts";
+import { fontRegular14, fontSemibold14 } from "../../../utils/style/fonts";
 import { layout } from "../../../utils/style/layout";
 import {
   CustomLatLngExpression,
@@ -282,14 +282,7 @@ export const UploadTrack: React.FC<Props> = ({ onUploadDone }) => {
       </TouchableOpacity>
 
       <SpacerColumn size={3} />
-      <BrandText
-        style={[
-          fontSemibold14,
-          {
-            color: neutral77,
-          },
-        ]}
-      >
+      <BrandText style={[fontRegular14, { color: neutral77 }]}>
         Provide FLAC, WAV or AIFF for highest audio quality.
       </BrandText>
       <SpacerColumn size={2.5} />
@@ -357,7 +350,7 @@ const buttonContainerStyle: ViewStyle = {
   // marginBottom: layout.spacing_x2,
 };
 const buttonTextStyle: TextStyle = {
-  ...fontSemibold14,
+  ...fontRegular14,
   color: primaryColor,
 };
 const divideLineStyle: ViewStyle = {
@@ -374,8 +367,7 @@ const footerBottomCStyle: ViewStyle = {
   marginBottom: layout.spacing_x2,
 };
 const footerTextStyle: TextStyle = {
-  ...fontSemibold14,
-
+  ...fontRegular14,
   color: neutral77,
 };
 const inputBoxStyle: ViewStyle = {

diff --git a/packages/components/socialFeed/FeedFeeText.tsx b/packages/components/socialFeed/FeedFeeText.tsx
@@ -3,7 +3,7 @@ import { StyleProp, TextStyle, View, ViewStyle } from "react-native";
 import { useFeedPosting } from "../../hooks/feed/useFeedPosting";
 import { useTheme } from "../../hooks/useTheme";
 import { errorColor, neutral77 } from "../../utils/style/colors";
-import { fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular14 } from "../../utils/style/fonts";
 import { PostCategory } from "../../utils/types/feed";
 import { BrandText } from "../BrandText";
 
@@ -45,6 +45,6 @@ export const FeedFeeText: React.FC<{
 };
 
 const testCStyle: TextStyle = {
-  ...fontSemibold14,
+  ...fontRegular14,
   color: neutral77,
 };
diff --git a/packages/components/socialFeed/NewsFeed/NewsFeed.tsx b/packages/components/socialFeed/NewsFeed/NewsFeed.tsx
@@ -23,20 +23,16 @@ import {
   useFetchFeed,
 } from "../../../hooks/feed/useFetchFeed";
 import { useIsMobile } from "../../../hooks/useIsMobile";
-import { useMaxResolution } from "../../../hooks/useMaxResolution";
 import useSelectedWallet from "../../../hooks/useSelectedWallet";
-import {
-  layout,
-  RESPONSIVE_BREAKPOINT_S,
-  screenContentMaxWidth,
-} from "../../../utils/style/layout";
+import { layout, RESPONSIVE_BREAKPOINT_S } from "../../../utils/style/layout";
 import { PostCategory } from "../../../utils/types/feed";
 import { SpacerColumn, SpacerRow } from "../../spacer";
 import { SocialArticleCard } from "../SocialCard/cards/SocialArticleCard";
 import { SocialThreadCard } from "../SocialCard/cards/SocialThreadCard";
 import { SocialVideoCard } from "../SocialCard/cards/SocialVideoCard";
 
 import { SocialArticleMarkdownCard } from "@/components/socialFeed/SocialCard/cards/SocialArticleMarkdownCard";
+import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { DeepPartial } from "@/utils/typescript";
 
 const OFFSET_Y_LIMIT_FLOATING = 224;
@@ -64,7 +60,7 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
 }) => {
   const isMobile = useIsMobile();
   const { width: windowWidth } = useWindowDimensions();
-  const { width } = useMaxResolution();
+  const { width } = useMaxResolution({ isLarge: true });
   const selectedWallet = useSelectedWallet();
   const reqWithQueryUser = { ...req, queryUserId: selectedWallet?.userId };
   const { data, isFetching, refetch, hasNextPage, fetchNextPage, isLoading } =
@@ -180,7 +176,6 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
         <View
           style={{
             width: windowWidth < RESPONSIVE_BREAKPOINT_S ? windowWidth : width,
-            maxWidth: screenContentMaxWidth,
           }}
         >
           {post.category === PostCategory.Article ? (
@@ -217,21 +212,21 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
     [windowWidth, width, isFlagged, refetch, cardStyle],
   );
 
+  // We have to keep the first fragment here to don't have a loop of re-renders
   return (
     <>
       <Animated.FlatList
         data={posts}
         renderItem={({ item: post }) => RenderItem(post)}
-        ListHeaderComponentStyle={{
-          zIndex: 1,
-          width: windowWidth,
-          maxWidth: screenContentMaxWidth,
-        }}
+        ListHeaderComponentStyle={{ zIndex: 1 }}
         ListHeaderComponent={
           <>
             <View
               onLayout={onHeaderLayout}
-              style={{ width, alignSelf: "center", alignItems: "center" }}
+              style={{
+                alignSelf: "center",
+                alignItems: "center",
+              }}
             >
               <Header />
             </View>
@@ -240,7 +235,17 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
         }
         keyExtractor={(post) => post.id}
         onScroll={scrollHandler}
-        contentContainerStyle={contentCStyle}
+        contentContainerStyle={
+          isMobile
+            ? {
+                alignItems: "center",
+                width: "100%",
+              }
+            : {
+                alignSelf: "center",
+                width,
+              }
+        }
         onEndReachedThreshold={4}
         onEndReached={onEndReached}
       />
@@ -269,11 +274,6 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
   );
 };
 
-const contentCStyle: ViewStyle = {
-  alignItems: "center",
-  alignSelf: "center",
-  width: "100%",
-};
 const floatingActionsCStyle: ViewStyle = {
   position: "absolute",
   justifyContent: "center",

diff --git a/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx b/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx
@@ -38,7 +38,6 @@ import { useWalletControl } from "@/context/WalletControlProvider";
 import { useFeedPosting } from "@/hooks/feed/useFeedPosting";
 import { useAppMode } from "@/hooks/useAppMode";
 import { useIpfs } from "@/hooks/useIpfs";
-import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { useSelectedNetworkInfo } from "@/hooks/useSelectedNetwork";
 import useSelectedWallet from "@/hooks/useSelectedWallet";
 import { NetworkFeature, getNetworkFeature } from "@/networks";
@@ -133,7 +132,6 @@ export const NewsFeedInput = React.forwardRef<
   ) => {
     const [appMode] = useAppMode();
     const { width: windowWidth } = useWindowDimensions();
-    const { width } = useMaxResolution();
     const [viewWidth, setViewWidth] = useState(0);
     const { uploadFilesToPinata, ipfsUploadProgress } = useIpfs();
     const inputMaxHeight = 400;
@@ -355,7 +353,7 @@ export const NewsFeedInput = React.forwardRef<
 
     return (
       <View
-        style={[{ width }, style]}
+        style={[{ width: "100%" }, style]}
         onLayout={(e) => setViewWidth(e.nativeEvent.layout.width)}
       >
         {isMapShown && (