fix: fontWeight and fullWidth for launchpad screen (#1492)

Signed-off-by: clegirar <[email protected]>
TERITORI · Jan 15, 2025 · 871f2cc · 871f2cc
1 parent 1909854
commit 871f2cc
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 66 deletions.
diff --git a/packages/components/BrandText/BrandText.tsx b/packages/components/BrandText/BrandText.tsx
@@ -13,9 +13,7 @@ export const BrandText: React.FC<TextProps & { isTicker?: boolean }> = (
   return (
     <BrandTextBase
       style={[
-        {
-          fontFamily: exoFontFamilyFromFontWeight(flatStyle?.fontWeight),
-        },
+        { fontFamily: exoFontFamilyFromFontWeight(flatStyle?.fontWeight) },
         style,
       ]}
       {...otherProps}

diff --git a/packages/components/BrandText/BrandTextBase.tsx b/packages/components/BrandText/BrandTextBase.tsx
@@ -12,7 +12,7 @@ export const BrandTextBase: React.FC<TextProps & { isTicker?: boolean }> = (
   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
@@ -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
@@ -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 ? (
               <BrandText
-                style={[fontSemibold20, { color: neutral77, marginLeft: 9 }]}
+                style={[fontRegular20, { color: neutral77, marginLeft: 9 }]}
               >
                 {subtitle}
               </BrandText>

diff --git 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<LargeBoxButtonProps> = ({
 // 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,31 +75,18 @@ 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",
     flexDirection: "row",
     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
@@ -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 */}
       <View
-        style={{
-          justifyContent: "flex-start",
-          padding: layout.spacing_x2,
-        }}
+        style={{ justifyContent: "flex-start", padding: layout.spacing_x2 }}
       >
         <BrandText style={{ marginBottom: layout.spacing_x1_5 }}>
           {collection.collectionName}
@@ -70,11 +67,8 @@ const CarouselCollectionItem: React.FC<{
         <GradientText
           gradientType="blueReversed"
           style={[
-            fontSemibold14,
-            {
-              marginBottom: layout.spacing_x3,
-              marginRight: layout.spacing_x3,
-            },
+            fontRegular14,
+            { marginBottom: layout.spacing_x3, marginRight: layout.spacing_x3 },
           ]}
         >
           {`${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 }}
           />
         ) : (
           <ActivityIndicator size="large" style={{ margin: 40 }} />

diff --git 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 (
-    <ScreenContainer>
+    <ScreenContainer responsive isLarge>
       <ImageBackgroundLogoText
         backgroundImage={LaunchpadBannerImage}
         text="Apply to Launchpad"
       />
       <SpacerColumn size={2} />
-      <BrandText style={fontSemibold28}>Welcome</BrandText>
+      <BrandText style={fontRegular28}>Welcome</BrandText>
       <SpacerColumn size={2} />
       <BrandText style={styles.descriptionText}>
         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
@@ -10,21 +10,27 @@ 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";
 import { layout } from "@/utils/style/layout";
 
 export const LaunchpadScreen: ScreenFC<"Launchpad"> = () => {
   const selectedNetworkId = useSelectedNetworkId();
+  const { width } = useMaxResolution({ isLarge: true });
 
   return (
     <ScreenContainer
       forceNetworkFeatures={[NetworkFeature.CosmWasmNFTLaunchpad]}
+      responsive
+      isLarge
     >
       <View
         style={{
           paddingBottom: layout.contentSpacing,
+          alignSelf: "center",
+          width,
         }}
       >
         <CollectionsCarouselHeader

diff --git a/packages/utils/style/fonts.ts b/packages/utils/style/fonts.ts
@@ -6,8 +6,10 @@ export const exoFontFamilyFromFontWeight = (weight: string | undefined) => {
       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),