From 871f2cc2b66710ab6b591001115166d406256c26 Mon Sep 17 00:00:00 2001 From: clegirar <33428384+clegirar@users.noreply.github.com> Date: Wed, 15 Jan 2025 12:05:27 +0100 Subject: [PATCH] fix: fontWeight and fullWidth for launchpad screen (#1492) Signed-off-by: clegirar --- packages/components/BrandText/BrandText.tsx | 4 +-- .../components/BrandText/BrandTextBase.tsx | 2 +- packages/components/CollectionView.tsx | 18 ++++++++----- packages/components/Section.tsx | 7 ++--- .../components/buttons/LargeBoxButton.tsx | 27 +++++-------------- .../carousels/CollectionsCarouselHeader.tsx | 20 ++++---------- .../LaunchpadApply/LaunchpadApplyScreen.tsx | 18 ++++--------- .../LaunchpadHome/LaunchpadScreen.tsx | 6 +++++ packages/utils/style/fonts.ts | 11 +++++++- 9 files changed, 47 insertions(+), 66 deletions(-) diff --git a/packages/components/BrandText/BrandText.tsx b/packages/components/BrandText/BrandText.tsx index 33642f8fe6..101dbf26e9 100644 --- a/packages/components/BrandText/BrandText.tsx +++ b/packages/components/BrandText/BrandText.tsx @@ -13,9 +13,7 @@ export const BrandText: React.FC = ( return ( = ( const baseStyle: TextStyle = { color: theme.textColor, fontSize: 20, - fontWeight: "600", + fontWeight: "400", }; if (isTicker) diff --git a/packages/components/CollectionView.tsx b/packages/components/CollectionView.tsx index c1476d80c9..3c17a60b6b 100644 --- a/packages/components/CollectionView.tsx +++ b/packages/components/CollectionView.tsx @@ -8,7 +8,11 @@ import { GradientText } from "./gradientText"; import { Collection, MintState } from "../api/marketplace/v1/marketplace"; import { useCollectionThumbnailInfo } from "../hooks/collection/useCollectionThumbnailInfo"; import { useNavigateToCollection } from "../hooks/useNavigateToCollection"; -import { fontBold11, fontMedium10, fontSemibold14 } from "../utils/style/fonts"; +import { + fontRegular10, + fontRegular11, + fontRegular14, +} from "../utils/style/fonts"; import { layout } from "../utils/style/layout"; type CollectionViewSize = "XL" | "XS"; @@ -162,13 +166,13 @@ const styles = { marginTop: layout.spacing_x2, }, collectionName: { - ...fontSemibold14, + ...fontRegular14, }, percentage: { - ...fontSemibold14, + ...fontRegular14, }, creatorName: { - ...fontSemibold14, + ...fontRegular14, }, }, @@ -190,13 +194,13 @@ const styles = { marginTop: layout.spacing_x1, }, collectionName: { - ...fontBold11, + ...fontRegular11, }, percentage: { - ...fontBold11, + ...fontRegular11, }, creatorName: { - ...fontMedium10, + ...fontRegular10, }, }, }; diff --git a/packages/components/Section.tsx b/packages/components/Section.tsx index dccc538991..420118c283 100644 --- a/packages/components/Section.tsx +++ b/packages/components/Section.tsx @@ -2,9 +2,8 @@ import React, { ReactNode } from "react"; import { View } from "react-native"; import { BrandText } from "./BrandText"; -import { useMaxResolution } from "../hooks/useMaxResolution"; import { neutral77 } from "../utils/style/colors"; -import { fontSemibold20 } from "../utils/style/fonts"; +import { fontRegular20 } from "../utils/style/fonts"; import { layout } from "../utils/style/layout"; export const Section: React.FC<{ @@ -14,7 +13,6 @@ export const Section: React.FC<{ children: ReactNode; }> = ({ children, title, subtitle, topRightChild }) => { const fontSize = 20; - const { width } = useMaxResolution(); // components return ( @@ -23,7 +21,6 @@ export const Section: React.FC<{ marginTop: layout.contentSpacing, overflow: "hidden", width: "100%", - maxWidth: width, }} > <> @@ -51,7 +48,7 @@ export const Section: React.FC<{ {subtitle ? ( {subtitle} diff --git a/packages/components/buttons/LargeBoxButton.tsx b/packages/components/buttons/LargeBoxButton.tsx index a6ad445d2b..37012d2a68 100644 --- a/packages/components/buttons/LargeBoxButton.tsx +++ b/packages/components/buttons/LargeBoxButton.tsx @@ -14,7 +14,7 @@ import { neutral77, primaryColor, } from "@/utils/style/colors"; -import { fontSemibold12, fontSemibold14 } from "@/utils/style/fonts"; +import { fontRegular12, fontRegular14 } from "@/utils/style/fonts"; import { layout } from "@/utils/style/layout"; export interface LargeBoxButtonProps { @@ -56,9 +56,7 @@ export const LargeBoxButton: React.FC = ({ // FIXME: remove StyleSheet.create // eslint-disable-next-line no-restricted-syntax const styles = StyleSheet.create({ - fill: { - flex: 1, - }, + fill: { flex: 1 }, box: { width: "100%", minHeight: 156, @@ -77,11 +75,7 @@ const styles = StyleSheet.create({ alignItems: "flex-start", backgroundColor: neutral17, }, - detailContainer: { - flex: 1, - alignItems: "flex-start", - flexWrap: "wrap", - }, + detailContainer: { flex: 1, alignItems: "flex-start", flexWrap: "wrap" }, buttonIconTextContainer: { flex: 1, alignSelf: "flex-end", @@ -89,19 +83,10 @@ const styles = StyleSheet.create({ justifyContent: "flex-end", alignItems: "center", }, - buttonTitleText: StyleSheet.flatten([ - fontSemibold14, - { - color: primaryColor, - }, - ]), + buttonTitleText: StyleSheet.flatten([fontRegular14, { color: primaryColor }]), descriptionText: StyleSheet.flatten([ - fontSemibold12, - { - color: neutral77, - width: 200, - flexWrap: "wrap", - }, + fontRegular12, + { color: neutral77, width: 200, flexWrap: "wrap" }, ]), iconContainer: { width: layout.iconButton, diff --git a/packages/components/carousels/CollectionsCarouselHeader.tsx b/packages/components/carousels/CollectionsCarouselHeader.tsx index 00fcb76bc8..7643ee0d00 100644 --- a/packages/components/carousels/CollectionsCarouselHeader.tsx +++ b/packages/components/carousels/CollectionsCarouselHeader.tsx @@ -15,7 +15,7 @@ import { useCollections } from "../../hooks/useCollections"; import { useMaxResolution } from "../../hooks/useMaxResolution"; import { useNavigateToCollection } from "../../hooks/useNavigateToCollection"; import { getNetwork } from "../../networks"; -import { fontSemibold14 } from "../../utils/style/fonts"; +import { fontRegular14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { BrandText } from "../BrandText"; import { OptimizedImage } from "../OptimizedImage"; @@ -58,10 +58,7 @@ const CarouselCollectionItem: React.FC<{ > {/* Left container */} {collection.collectionName} @@ -70,11 +67,8 @@ const CarouselCollectionItem: React.FC<{ {`${getNetwork(networkId)?.displayName} Collections`} @@ -94,11 +88,7 @@ const CarouselCollectionItem: React.FC<{ sourceURI={collection.imageUri} width={HERO_SIZE} height={HERO_SIZE} - style={{ - height: HERO_SIZE, - width: HERO_SIZE, - borderRadius: 8, - }} + style={{ height: HERO_SIZE, width: HERO_SIZE, borderRadius: 8 }} /> ) : ( diff --git a/packages/screens/Launchpad/LaunchpadApply/LaunchpadApplyScreen.tsx b/packages/screens/Launchpad/LaunchpadApply/LaunchpadApplyScreen.tsx index 6fd2715f5e..715157aa14 100644 --- a/packages/screens/Launchpad/LaunchpadApply/LaunchpadApplyScreen.tsx +++ b/packages/screens/Launchpad/LaunchpadApply/LaunchpadApplyScreen.tsx @@ -12,7 +12,7 @@ import { import { SpacerColumn, SpacerRow } from "@/components/spacer"; import { ScreenFC } from "@/utils/navigation"; import { neutral77 } from "@/utils/style/colors"; -import { fontSemibold14, fontSemibold28 } from "@/utils/style/fonts"; +import { fontRegular14, fontRegular28 } from "@/utils/style/fonts"; const BUTTONS: LargeBoxButtonProps[] = [ { @@ -35,13 +35,13 @@ const BUTTONS: LargeBoxButtonProps[] = [ export const LaunchpadApplyScreen: ScreenFC<"LaunchpadApply"> = () => { return ( - + - Welcome + Welcome Looking for a fast and efficient way to build an NFT collection? @@ -70,14 +70,6 @@ export const LaunchpadApplyScreen: ScreenFC<"LaunchpadApply"> = () => { // FIXME: remove StyleSheet.create // eslint-disable-next-line no-restricted-syntax const styles = StyleSheet.create({ - descriptionText: StyleSheet.flatten([ - fontSemibold14, - { - color: neutral77, - }, - ]), - buttonsContainer: { - flexDirection: "row", - flex: 1, - }, + descriptionText: StyleSheet.flatten([fontRegular14, { color: neutral77 }]), + buttonsContainer: { flexDirection: "row", flex: 1 }, }); diff --git a/packages/screens/Launchpad/LaunchpadHome/LaunchpadScreen.tsx b/packages/screens/Launchpad/LaunchpadHome/LaunchpadScreen.tsx index 6337588388..4ea949eed4 100644 --- a/packages/screens/Launchpad/LaunchpadHome/LaunchpadScreen.tsx +++ b/packages/screens/Launchpad/LaunchpadHome/LaunchpadScreen.tsx @@ -10,6 +10,7 @@ import { import { ScreenContainer } from "@/components/ScreenContainer"; import { CollectionsCarouselHeader } from "@/components/carousels/CollectionsCarouselHeader"; import { CollectionGallery } from "@/components/collections/CollectionGallery"; +import { useMaxResolution } from "@/hooks/useMaxResolution"; import { useSelectedNetworkId } from "@/hooks/useSelectedNetwork"; import { getNetwork, NetworkFeature } from "@/networks"; import { ScreenFC } from "@/utils/navigation"; @@ -17,14 +18,19 @@ import { layout } from "@/utils/style/layout"; export const LaunchpadScreen: ScreenFC<"Launchpad"> = () => { const selectedNetworkId = useSelectedNetworkId(); + const { width } = useMaxResolution({ isLarge: true }); return ( { return "Exo_500Medium"; case "700": return "Exo_700Bold"; - default: + case "600": return "Exo_600SemiBold"; + default: + return "Exo_400Regular"; } }; @@ -285,6 +287,13 @@ export const fontRegular12: TextStyle = { fontFamily: "Exo_400Regular", fontWeight: "400", }; +export const fontRegular11: TextStyle = { + fontSize: 11, + letterSpacing: -(11 * 0.02), + lineHeight: 13, + fontFamily: "Exo_400Regular", + fontWeight: "400", +}; export const fontRegular10: TextStyle = { fontSize: 10, letterSpacing: -(10 * 0.02),