From bcf227acf1de0d69f1849e0e0a3e7f0f79f80120 Mon Sep 17 00:00:00 2001 From: clegirar <33428384+clegirar@users.noreply.github.com> Date: Thu, 12 Dec 2024 19:23:29 +0100 Subject: [PATCH] fix: font-weight for video cards in social feed screen (#1454) Signed-off-by: clegirar --- .../components/mediaPlayer/MediaPlayerVideo.tsx | 4 ++-- packages/components/mediaPlayer/TimerSlider.tsx | 4 ++-- .../socialFeed/SocialActions/DislikeButton.tsx | 4 ++-- .../socialFeed/SocialActions/LikeButton.tsx | 4 ++-- .../socialFeed/SocialActions/ShareButton.tsx | 4 ++-- .../SocialCard/cards/SocialVideoCard.tsx | 12 ++++++------ packages/utils/style/fonts.ts | 14 ++++++++++++++ 7 files changed, 30 insertions(+), 16 deletions(-) diff --git a/packages/components/mediaPlayer/MediaPlayerVideo.tsx b/packages/components/mediaPlayer/MediaPlayerVideo.tsx index c37a763cb5..77f4c7687f 100644 --- a/packages/components/mediaPlayer/MediaPlayerVideo.tsx +++ b/packages/components/mediaPlayer/MediaPlayerVideo.tsx @@ -44,7 +44,7 @@ import { web3ToWeb2URI } from "@/utils/ipfs"; import { prettyMediaDuration } from "@/utils/mediaPlayer"; import { SOCIAl_CARD_BORDER_RADIUS } from "@/utils/social-feed"; import { neutral00, neutralA3, secondaryColor } from "@/utils/style/colors"; -import { fontSemibold13 } from "@/utils/style/fonts"; +import { fontRegular13 } from "@/utils/style/fonts"; import { layout } from "@/utils/style/layout"; import { SocialFeedVideoMetadata } from "@/utils/types/feed"; import { Media } from "@/utils/types/mediaPlayer"; @@ -392,7 +392,7 @@ function MediaPlayerController({ )} {/* Display time */} - + {`${prettyMediaDuration( playbackStatus?.positionMillis, )} / ${prettyMediaDuration(playbackStatus?.durationMillis)}`} diff --git a/packages/components/mediaPlayer/TimerSlider.tsx b/packages/components/mediaPlayer/TimerSlider.tsx index 2c80738386..7d43f72b7e 100644 --- a/packages/components/mediaPlayer/TimerSlider.tsx +++ b/packages/components/mediaPlayer/TimerSlider.tsx @@ -11,7 +11,7 @@ import { primaryColor, secondaryColor, } from "../../utils/style/colors"; -import { fontSemibold12 } from "../../utils/style/fonts"; +import { fontRegular12 } from "../../utils/style/fonts"; import { BrandText } from "../BrandText"; import { CustomPressable } from "../buttons/CustomPressable"; import { SpacerRow } from "../spacer"; @@ -92,6 +92,6 @@ export const TimerSlider: FC<{ }; const timeTextStyle: TextStyle = { - ...fontSemibold12, + ...fontRegular12, color: neutral77, }; diff --git a/packages/components/socialFeed/SocialActions/DislikeButton.tsx b/packages/components/socialFeed/SocialActions/DislikeButton.tsx index ab2fced798..9cc8bf65d6 100644 --- a/packages/components/socialFeed/SocialActions/DislikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/DislikeButton.tsx @@ -7,7 +7,7 @@ import { Post } from "../../../api/feed/v1/feed"; import { useSocialReactions } from "../../../hooks/feed/useSocialReactions"; import { DISLIKE_EMOJI } from "../../../utils/social-feed"; import { neutral22, secondaryColor } from "../../../utils/style/colors"; -import { fontSemibold13 } from "../../../utils/style/fonts"; +import { fontRegular13 } from "../../../utils/style/fonts"; import { layout } from "../../../utils/style/layout"; import { BrandText } from "../../BrandText"; import { SVG } from "../../SVG"; @@ -44,7 +44,7 @@ export const DislikeButton: FC<{ color={secondaryColor} /> - + {post.reactions.find((reaction) => reaction.icon === DISLIKE_EMOJI) ?.count || 0} diff --git a/packages/components/socialFeed/SocialActions/LikeButton.tsx b/packages/components/socialFeed/SocialActions/LikeButton.tsx index f8c425b867..5975151b12 100644 --- a/packages/components/socialFeed/SocialActions/LikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/LikeButton.tsx @@ -7,7 +7,7 @@ import { Post } from "../../../api/feed/v1/feed"; import { useSocialReactions } from "../../../hooks/feed/useSocialReactions"; import { LIKE_EMOJI } from "../../../utils/social-feed"; import { neutral22, secondaryColor } from "../../../utils/style/colors"; -import { fontSemibold13 } from "../../../utils/style/fonts"; +import { fontRegular13 } from "../../../utils/style/fonts"; import { layout } from "../../../utils/style/layout"; import { BrandText } from "../../BrandText"; import { SVG } from "../../SVG"; @@ -39,7 +39,7 @@ export const LikeButton: FC<{ > - + {post.reactions.find((reaction) => reaction.icon === LIKE_EMOJI) ?.count || 0} diff --git a/packages/components/socialFeed/SocialActions/ShareButton.tsx b/packages/components/socialFeed/SocialActions/ShareButton.tsx index fb07d345bf..045c89d4e2 100644 --- a/packages/components/socialFeed/SocialActions/ShareButton.tsx +++ b/packages/components/socialFeed/SocialActions/ShareButton.tsx @@ -9,7 +9,7 @@ import { neutralA3, secondaryColor, } from "../../../utils/style/colors"; -import { fontSemibold13 } from "../../../utils/style/fonts"; +import { fontRegular13 } from "../../../utils/style/fonts"; import { layout } from "../../../utils/style/layout"; import { BrandText } from "../../BrandText"; import { SVG } from "../../SVG"; @@ -75,7 +75,7 @@ export const ShareButton = ({ postId, useAltStyle }: ShareButtonProps) => { <> Share diff --git a/packages/components/socialFeed/SocialCard/cards/SocialVideoCard.tsx b/packages/components/socialFeed/SocialCard/cards/SocialVideoCard.tsx index bcb9a4f426..c01e9fc953 100644 --- a/packages/components/socialFeed/SocialCard/cards/SocialVideoCard.tsx +++ b/packages/components/socialFeed/SocialCard/cards/SocialVideoCard.tsx @@ -29,10 +29,10 @@ import { withAlpha, } from "@/utils/style/colors"; import { + fontRegular14, + fontRegular16, + fontRegular20, fontSemibold13, - fontSemibold14, - fontSemibold16, - fontSemibold20, } from "@/utils/style/fonts"; import { layout, SOCIAL_FEED_BREAKPOINT_M } from "@/utils/style/layout"; import { @@ -126,8 +126,8 @@ export const SocialVideoCard: FC<{ numberOfLines={2} style={ windowWidth < SOCIAL_FEED_BREAKPOINT_M - ? fontSemibold16 - : fontSemibold20 + ? fontRegular16 + : fontRegular20 } > {title?.trim()} @@ -184,7 +184,7 @@ export const SocialVideoCard: FC<{ {description.trim()} diff --git a/packages/utils/style/fonts.ts b/packages/utils/style/fonts.ts index 5bbb7a3be2..163b4f5940 100644 --- a/packages/utils/style/fonts.ts +++ b/packages/utils/style/fonts.ts @@ -222,6 +222,20 @@ export const fontNormal15: TextStyle = { fontFamily: "Exo_500Medium", fontWeight: "400", }; +export const fontRegular20: TextStyle = { + fontSize: 20, + letterSpacing: -(20 * 0.02), + lineHeight: 22, + fontFamily: "Exo_400Regular", + fontWeight: "400", +}; +export const fontRegular16: TextStyle = { + fontSize: 16, + letterSpacing: -(16 * 0.02), + lineHeight: 18, + fontFamily: "Exo_400Regular", + fontWeight: "400", +}; export const fontRegular15: TextStyle = { fontSize: 15, letterSpacing: -(15 * 0.02),