fix: reduce fontSize and fontWeight of all title screens (#1446)

Signed-off-by: clegirar <[email protected]> Signed-off-by: Norman Meier <[email protected]> Co-authored-by: Norman Meier <[email protected]> Co-authored-by: n0izn0iz <[email protected]>
TERITORI · Dec 6, 2024 · 170832d · 170832d
1 parent fb82523
commit 170832d
Show file tree

Hide file tree

Showing 34 changed files with 92 additions and 120 deletions.
diff --git a/packages/components/ScreenContainer/ScreenTitle.tsx b/packages/components/ScreenContainer/ScreenTitle.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+import { BrandText } from "../BrandText";
+
+import { fontRegular15 } from "@/utils/style/fonts";
+
+export const ScreenTitle: React.FC<{
+  children?: ReactNode;
+}> = ({ children }) => {
+  return (
+    <BrandText style={[fontRegular15, { maxWidth: 180 }]} numberOfLines={1}>
+      {children}
+    </BrandText>
+  );
+};
diff --git a/packages/screens/DAppStore/DAppStoreScreen.tsx b/packages/screens/DAppStore/DAppStoreScreen.tsx
@@ -5,9 +5,9 @@ import { Header } from "./components/Header";
 import { LeftRail } from "./components/LeftRail";
 import { RightRail } from "./components/RightRail";
 
-import { BrandText } from "@/components/BrandText";
 import { FullWidthSeparator } from "@/components/FullWidthSeparator";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { Separator } from "@/components/separators/Separator";
 import { ScreenFC } from "@/utils/navigation";
 
@@ -18,7 +18,7 @@ export const DAppStoreScreen: ScreenFC<"DAppStore"> = () => {
   return (
     <ScreenContainer
       fullWidth
-      headerChildren={<BrandText>dApp Store</BrandText>}
+      headerChildren={<ScreenTitle>dApp Store</ScreenTitle>}
     >
       <Header setSearchInput={setSearchInput} />
 

diff --git a/packages/screens/Feed/FeedScreen.tsx b/packages/screens/Feed/FeedScreen.tsx
@@ -10,9 +10,9 @@ import { PicsFeed } from "./components/PicsFeed";
 import { VideosFeed } from "./components/VideosFeed";
 
 import { PostsRequest } from "@/api/feed/v1/feed";
-import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
 import { MobileTitle } from "@/components/ScreenContainer/ScreenContainerMobile";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { NewsFeed } from "@/components/socialFeed/NewsFeed/NewsFeed";
 import { useForceNetworkSelection } from "@/hooks/useForceNetworkSelection";
 import { useIsMobile } from "@/hooks/useIsMobile";
@@ -80,7 +80,7 @@ export const FeedScreen: ScreenFC<"Feed"> = ({
       noScroll
       footerChildren={<></>}
       forceNetworkFeatures={[NetworkFeature.SocialFeed]}
-      headerChildren={<BrandText>Social Feed</BrandText>}
+      headerChildren={<ScreenTitle>Social Feed</ScreenTitle>}
     >
       {feedContent}
     </ScreenContainer>

diff --git a/packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx b/packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx
@@ -10,6 +10,7 @@ import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { BrandText } from "@/components/BrandText";
 import { SVG } from "@/components/SVG";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { WalletStatusBox } from "@/components/WalletStatusBox";
 import { TertiaryBox } from "@/components/boxes/TertiaryBox";
 import { Label, TextInputCustom } from "@/components/inputs/TextInputCustom";
@@ -44,7 +45,7 @@ import {
   neutral77,
   secondaryColor,
 } from "@/utils/style/colors";
-import { fontSemibold13, fontSemibold20 } from "@/utils/style/fonts";
+import { fontSemibold13 } from "@/utils/style/fonts";
 import { layout, screenContentMaxWidth } from "@/utils/style/layout";
 import {
   CustomLatLngExpression,
@@ -248,7 +249,7 @@ export const FeedNewArticleScreen: ScreenFC<"FeedNewArticle"> = () => {
       responsive
       mobileTitle="NEW ARTICLE"
       fullWidth
-      headerChildren={<BrandText style={fontSemibold20}>New Article</BrandText>}
+      headerChildren={<ScreenTitle>New Article</ScreenTitle>}
       onBackPress={navigateBack}
       footerChildren
       noScroll

diff --git a/packages/screens/FeedPostView/FeedPostView.tsx b/packages/screens/FeedPostView/FeedPostView.tsx
@@ -5,15 +5,14 @@ import { FeedPostArticleView } from "./components/FeedPostArticleView";
 import { FeedPostDefaultView } from "./components/FeedPostDefaultView";
 import { FeedPostVideoView } from "./components/FeedPostVideoView";
 
-import { BrandText } from "@/components/BrandText";
 import { NotFound } from "@/components/NotFound";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { usePost } from "@/hooks/feed/usePost";
 import { parseNetworkObjectId } from "@/networks";
 import { convertLegacyPostId } from "@/utils/feed/queries";
 import { ScreenFC, useAppNavigation } from "@/utils/navigation";
 import { primaryColor } from "@/utils/style/colors";
-import { fontSemibold20 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 import { PostCategory } from "@/utils/types/feed";
 
@@ -26,7 +25,8 @@ export const FeedPostView: ScreenFC<"FeedPostView"> = ({
   const navigation = useAppNavigation();
   const [network] = parseNetworkObjectId(idParam);
   const { post, isLoading, refetch } = usePost(id);
-  const label = post?.category === PostCategory.Video ? "Video" : "Post";
+  const label: string =
+    post?.category === PostCategory.Video ? "Video" : "Post";
 
   if (isLoading) {
     return (
@@ -35,9 +35,7 @@ export const FeedPostView: ScreenFC<"FeedPostView"> = ({
         fullWidth
         responsive
         noMargin
-        headerChildren={
-          <BrandText style={fontSemibold20}>Loading {label}</BrandText>
-        }
+        headerChildren={<ScreenTitle>Loading {label}</ScreenTitle>}
         onBackPress={() =>
           navigation.canGoBack()
             ? navigation.goBack()
@@ -62,9 +60,7 @@ export const FeedPostView: ScreenFC<"FeedPostView"> = ({
         fullWidth
         responsive
         noMargin
-        headerChildren={
-          <BrandText style={fontSemibold20}>{label} not found</BrandText>
-        }
+        headerChildren={<ScreenTitle>{label} not found</ScreenTitle>}
         onBackPress={() =>
           navigation.canGoBack()
             ? navigation.goBack()

diff --git a/packages/screens/FeedPostView/components/FeedPostArticleView.tsx b/packages/screens/FeedPostView/components/FeedPostArticleView.tsx
@@ -10,6 +10,7 @@ import { Post } from "@/api/feed/v1/feed";
 import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
 import { MobileTitle } from "@/components/ScreenContainer/ScreenContainerMobile";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { CommentsContainer } from "@/components/cards/CommentsContainer";
 import { CreateShortPostButton } from "@/components/socialFeed/NewsFeed/CreateShortPost/CreateShortPostButton";
 import { CreateShortPostModal } from "@/components/socialFeed/NewsFeed/CreateShortPost/CreateShortPostModal";
@@ -41,7 +42,6 @@ import {
   SOCIAl_CARD_BORDER_RADIUS,
 } from "@/utils/social-feed";
 import { neutral33 } from "@/utils/style/colors";
-import { fontSemibold20 } from "@/utils/style/fonts";
 import {
   layout,
   RESPONSIVE_BREAKPOINT_S,
@@ -182,9 +182,7 @@ export const FeedPostArticleView: FC<{
       fullWidth
       responsive
       noMargin
-      headerChildren={
-        <BrandText style={fontSemibold20}>{headerLabel}</BrandText>
-      }
+      headerChildren={<ScreenTitle>{headerLabel}</ScreenTitle>}
       onBackPress={() =>
         post?.parentPostIdentifier
           ? navigation.navigate("FeedPostView", {

diff --git a/packages/screens/FeedPostView/components/FeedPostDefaultView.tsx b/packages/screens/FeedPostView/components/FeedPostDefaultView.tsx
@@ -8,9 +8,9 @@ import Animated, {
 } from "react-native-reanimated";
 
 import { Post } from "@/api/feed/v1/feed";
-import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
 import { MobileTitle } from "@/components/ScreenContainer/ScreenContainerMobile";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { CommentsContainer } from "@/components/cards/CommentsContainer";
 import { CreateShortPostButton } from "@/components/socialFeed/NewsFeed/CreateShortPost/CreateShortPostButton";
 import { CreateShortPostModal } from "@/components/socialFeed/NewsFeed/CreateShortPost/CreateShortPostModal";
@@ -29,7 +29,6 @@ import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { useNSUserInfo } from "@/hooks/useNSUserInfo";
 import { parseUserId } from "@/networks";
 import { DEFAULT_USERNAME, LINES_HORIZONTAL_SPACE } from "@/utils/social-feed";
-import { fontSemibold20 } from "@/utils/style/fonts";
 import {
   layout,
   RESPONSIVE_BREAKPOINT_S,
@@ -149,11 +148,7 @@ export const FeedPostDefaultView: FC<{
       fullWidth
       responsive
       noMargin
-      headerChildren={
-        <BrandText style={[fontSemibold20, { width: "18%" }]} numberOfLines={1}>
-          {headerLabel}
-        </BrandText>
-      }
+      headerChildren={<ScreenTitle>{headerLabel}</ScreenTitle>}
       onBackPress={() =>
         post?.parentPostIdentifier
           ? navigation.navigate("FeedPostView", {

diff --git a/packages/screens/FeedPostView/components/FeedPostVideoView.tsx b/packages/screens/FeedPostView/components/FeedPostVideoView.tsx
@@ -13,6 +13,7 @@ import { VideoComment } from "./VideoComment";
 import { Post, PostsRequest } from "@/api/feed/v1/feed";
 import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { PrimaryButton } from "@/components/buttons/PrimaryButton";
 import { UserAvatarWithFrame } from "@/components/images/AvatarWithFrame";
 import { MediaPlayerVideo } from "@/components/mediaPlayer/MediaPlayerVideo";
@@ -234,9 +235,7 @@ export const FeedPostVideoView: FC<{
   if (!video) return <BrandText>Video not valid</BrandText>;
   return (
     <ScreenContainer
-      headerChildren={
-        <BrandText style={fontSemibold20}>Video by {username}</BrandText>
-      }
+      headerChildren={<ScreenTitle>Video by {username}</ScreenTitle>}
       onBackPress={() =>
         navigation.canGoBack()
           ? navigation.goBack()

diff --git a/packages/screens/Governance/GovernanceProposal/GovernanceProposalScreen.tsx b/packages/screens/Governance/GovernanceProposal/GovernanceProposalScreen.tsx
@@ -6,15 +6,14 @@ import { GovernanceDescription } from "./GovernanceDescription/GovernanceDescrip
 import { GovernanceVoteDetails } from "./GovernanceVoteDetails/GovernanceVoteDetails";
 import { GovernanceVoteHeader } from "./GovernanceVoteHeader/GovernanceVoteHeader";
 
-import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { SpacerColumn } from "@/components/spacer";
 import { useAppConfig } from "@/context/AppConfigProvider";
 import { useGetProposal } from "@/hooks/governance/useGetProposal";
 import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork";
 import { NetworkKind } from "@/networks";
 import { ScreenFC, useAppNavigation } from "@/utils/navigation";
-import { fontSemibold20 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
 export const GovernanceProposalScreen: ScreenFC<"GovernanceProposal"> = ({
@@ -38,9 +37,7 @@ export const GovernanceProposalScreen: ScreenFC<"GovernanceProposal"> = ({
     <ScreenContainer
       forceNetworkKind={NetworkKind.Cosmos}
       isLarge
-      headerChildren={
-        <BrandText style={fontSemibold20}>{`Proposal #${id}`}</BrandText>
-      }
+      headerChildren={<ScreenTitle>{`Proposal #${id}`}</ScreenTitle>}
       onBackPress={() => navigation.navigate("Governance")}
     >
       {proposal && (

diff --git a/packages/screens/Governance/GovernanceScreen.tsx b/packages/screens/Governance/GovernanceScreen.tsx
@@ -6,12 +6,13 @@ import { GovernanceBox } from "../../components/GovernanceBox/GovernanceBox";
 
 import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { SearchInputRounded } from "@/components/sorts/SearchInputRounded";
 import { useGetAllProposals } from "@/hooks/governance/useGetAllProposals";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork";
 import { NetworkKind } from "@/networks";
-import { fontSemibold20, fontSemibold28 } from "@/utils/style/fonts";
+import { fontSemibold28 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 import { ProposalStatus } from "@/utils/types/gov";
 
@@ -32,9 +33,7 @@ export const GovernanceScreen: React.FC = () => {
     <ScreenContainer
       forceNetworkKind={NetworkKind.Cosmos}
       isLarge
-      headerChildren={
-        <BrandText style={fontSemibold20}>Decentralized Governance</BrandText>
-      }
+      headerChildren={<ScreenTitle>Decentralized Governance</ScreenTitle>}
     >
       <View
         style={{

diff --git a/packages/screens/HashtagFeed/HashtagFeedScreen.tsx b/packages/screens/HashtagFeed/HashtagFeedScreen.tsx
@@ -5,13 +5,13 @@ import { PostsRequest } from "@/api/feed/v1/feed";
 import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
 import { MobileTitle } from "@/components/ScreenContainer/ScreenContainerMobile";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { NewsFeed } from "@/components/socialFeed/NewsFeed/NewsFeed";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork";
 import { ScreenFC, useAppNavigation } from "@/utils/navigation";
 import { neutral22, primaryColor } from "@/utils/style/colors";
-import { fontSemibold20 } from "@/utils/style/fonts";
 import { layout, screenContentMaxWidth } from "@/utils/style/layout";
 
 const Header = ({ hashtag }: { hashtag: string }) => {
@@ -84,9 +84,7 @@ export const HashtagFeedScreen: ScreenFC<"HashtagFeed"> = ({
       footerChildren={<></>}
       fullWidth
       noScroll
-      headerChildren={
-        <BrandText style={fontSemibold20}>{`Tag ${hashtag}`}</BrandText>
-      }
+      headerChildren={<ScreenTitle>{`Tag ${hashtag}`}</ScreenTitle>}
       onBackPress={() =>
         navigation.canGoBack()
           ? navigation.goBack()

diff --git a/packages/screens/LaunchpadERC20/LaunchpadERC20Sales/LaunchpadERC20CreateSaleScreen.tsx b/packages/screens/LaunchpadERC20/LaunchpadERC20Sales/LaunchpadERC20CreateSaleScreen.tsx
@@ -5,13 +5,12 @@ import { CreateSaleForm } from "./LaunchpadERC20CreateSaleForm";
 import { CreateSaleSign } from "./LaunchpadERC20CreateSaleSign";
 import { useCreateSaleState } from "../hooks/useCreateSale";
 
-import { BrandText } from "@/components/BrandText";
 import { Breadcrumb } from "@/components/Breadcrumb";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { SpacerColumn } from "@/components/spacer";
 import { NetworkKind } from "@/networks";
 import { ScreenFC, useAppNavigation } from "@/utils/navigation";
-import { fontSemibold20 } from "@/utils/style/fonts";
 
 const renderStep = (stepIndice: number) => {
   if (stepIndice === 1) return <CreateSaleForm />;
@@ -34,11 +33,7 @@ export const LaunchpadERC20CreateSaleScreen: ScreenFC<
       forceNetworkKind={NetworkKind.Gno}
       isLarge
       responsive
-      headerChildren={
-        <BrandText style={fontSemibold20}>
-          Launchpad ERC20 Sale Creation
-        </BrandText>
-      }
+      headerChildren={<ScreenTitle>Launchpad ERC20 Sale Creation</ScreenTitle>}
       onBackPress={() => navigation.navigate("LaunchpadERC20Sales")}
     >
       <Breadcrumb

diff --git a/packages/screens/LaunchpadERC20/LaunchpadERC20Sales/LaunchpadERC20SalesScreen.tsx b/packages/screens/LaunchpadERC20/LaunchpadERC20Sales/LaunchpadERC20SalesScreen.tsx
@@ -7,8 +7,8 @@ import registerSVG from "../../../../assets/icons/register-neutral77.svg";
 import { SalesTable } from "../component/LaunchpadERC20SalesTable";
 import { breakpoints } from "../utils/breakpoints";
 
-import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { FlowCard } from "@/components/cards/FlowCard";
 import { SpacerColumn } from "@/components/spacer";
 import { useForceNetworkSelection } from "@/hooks/useForceNetworkSelection";
@@ -27,7 +27,7 @@ export const LaunchpadERC20SalesScreen: ScreenFC<"LaunchpadERC20Sales"> = ({
 
   return (
     <ScreenContainer
-      headerChildren={<BrandText>Launchpad ERC 20</BrandText>}
+      headerChildren={<ScreenTitle>Launchpad ERC 20</ScreenTitle>}
       forceNetworkFeatures={[NetworkFeature.LaunchpadERC20]}
       forceNetworkKind={NetworkKind.Gno}
       isLarge

diff --git a/packages/screens/LaunchpadERC20/LaunchpadERC20Screen.tsx b/packages/screens/LaunchpadERC20/LaunchpadERC20Screen.tsx
@@ -6,6 +6,7 @@ import { BrandText } from "@/components/BrandText";
 import { ImageBackgroundLogoText } from "@/components/ImageBackgroundLogoText";
 import { OmniLink } from "@/components/OmniLink";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import {
   LargeBoxButton,
   LargeBoxButtonProps,
@@ -39,7 +40,7 @@ const BUTTONS: LargeBoxButtonProps[] = [
 export const LaunchpadERC20Screen: ScreenFC<"LaunchpadERC20"> = () => {
   return (
     <ScreenContainer
-      headerChildren={<BrandText>Launchpad ERC 20</BrandText>}
+      headerChildren={<ScreenTitle>Launchpad ERC 20</ScreenTitle>}
       forceNetworkFeatures={[NetworkFeature.LaunchpadERC20]}
       forceNetworkKind={NetworkKind.Gno}
     >

diff --git a/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20CreateTokenScreen.tsx b/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20CreateTokenScreen.tsx
@@ -6,13 +6,12 @@ import { CreateTokenDetails } from "./LaunchpadERC20CreateTokenDetails";
 import { CreateTokenSign } from "./LaunchpadERC20CreateTokenSign";
 import { useCreateTokenState } from "../hooks/useCreateToken";
 
-import { BrandText } from "@/components/BrandText";
 import { Breadcrumb } from "@/components/Breadcrumb";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { SpacerColumn } from "@/components/spacer";
 import { NetworkKind } from "@/networks";
 import { ScreenFC, useAppNavigation } from "@/utils/navigation";
-import { fontSemibold20 } from "@/utils/style/fonts";
 
 const renderStep = (stepIndice: number) => {
   if (stepIndice === 1) return <CreateTokenBasics />;
@@ -36,11 +35,7 @@ export const LaunchpadERC20CreateTokenScreen: ScreenFC<
       forceNetworkKind={NetworkKind.Gno}
       isLarge
       responsive
-      headerChildren={
-        <BrandText style={fontSemibold20}>
-          Launchpad ERC20 Token Creation
-        </BrandText>
-      }
+      headerChildren={<ScreenTitle>Launchpad ERC20 Token Creation</ScreenTitle>}
       onBackPress={() => navigation.navigate("LaunchpadERC20Tokens")}
     >
       <Breadcrumb

diff --git a/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20TokensScreen.tsx b/packages/screens/LaunchpadERC20/LaunchpadERC20Tokens/LaunchpadERC20TokensScreen.tsx
@@ -7,8 +7,8 @@ import registerSVG from "../../../../assets/icons/register-neutral77.svg";
 import { TokensTable } from "../component/LaunchpadERC20TokensTable";
 import { breakpoints } from "../utils/breakpoints";
 
-import { BrandText } from "@/components/BrandText";
 import { ScreenContainer } from "@/components/ScreenContainer";
+import { ScreenTitle } from "@/components/ScreenContainer/ScreenTitle";
 import { FlowCard } from "@/components/cards/FlowCard";
 import { SpacerColumn } from "@/components/spacer";
 import { useForceNetworkSelection } from "@/hooks/useForceNetworkSelection";
@@ -27,7 +27,7 @@ export const LaunchpadERC20TokensScreen: ScreenFC<"LaunchpadERC20Tokens"> = ({
 
   return (
     <ScreenContainer
-      headerChildren={<BrandText>Launchpad ERC 20</BrandText>}
+      headerChildren={<ScreenTitle>Launchpad ERC 20</ScreenTitle>}
       forceNetworkFeatures={[NetworkFeature.LaunchpadERC20]}
       forceNetworkKind={NetworkKind.Gno}
       isLarge