fix: fontWeight and fullWidth on marketplace screen

Signed-off-by: clegirar <[email protected]>
TERITORI · Jan 3, 2025 · 5db633c · 5db633c
1 parent c7b7de7
commit 5db633c
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 121 deletions.
diff --git a/packages/components/DropdownOption.tsx b/packages/components/DropdownOption.tsx
@@ -7,7 +7,7 @@ import { SVG } from "./SVG";
 import { CustomPressable } from "./buttons/CustomPressable";
 import { SpacerRow } from "./spacer";
 import { secondaryColor } from "../utils/style/colors";
-import { fontSemibold14 } from "../utils/style/fonts";
+import { fontRegular14 } from "../utils/style/fonts";
 import { layout } from "../utils/style/layout";
 
 interface DropdownOptionProps {
@@ -32,7 +32,7 @@ export const DropdownOption: React.FC<DropdownOptionProps> = ({
         <>
           <SVG source={icon} width={20} height={20} color={secondaryColor} />
           <SpacerRow size={1.5} />
-          <BrandText style={fontSemibold14}>
+          <BrandText style={fontRegular14}>
             {hovered && isComingSoon ? "Coming Soon" : label}
           </BrandText>
         </>

diff --git a/packages/components/ImageWithTextInsert.tsx b/packages/components/ImageWithTextInsert.tsx
@@ -4,6 +4,8 @@ import { View, ViewStyle, StyleProp, StyleSheet } from "react-native";
 import { BrandText } from "./BrandText";
 import { OptimizedImage } from "./OptimizedImage";
 
+import { fontRegular16 } from "@/utils/style/fonts";
+
 export const ImageWithTextInsert: React.FC<{
   imageURL?: string;
   textInsert?: string;
@@ -26,13 +28,15 @@ export const ImageWithTextInsert: React.FC<{
       />
       {!!textInsert && (
         <BrandText
-          style={{
-            position: "absolute",
-            fontSize: sourceSize * 0.063,
-            right: padding,
-            bottom: padding,
-            maxWidth: sourceSize - padding,
-          }}
+          style={[
+            fontRegular16,
+            {
+              position: "absolute",
+              right: padding,
+              bottom: padding,
+              maxWidth: sourceSize - padding,
+            },
+          ]}
         >
           {textInsert}
         </BrandText>

diff --git a/packages/components/SideFilters.tsx b/packages/components/SideFilters.tsx
@@ -66,6 +66,7 @@ import {
 import {
   fontBold11,
   fontMedium14,
+  fontRegular14,
   fontSemibold12,
   fontSemibold14,
 } from "../utils/style/fonts";
@@ -92,7 +93,7 @@ const Header: React.FC = () => {
         marginBottom: layout.spacing_x1,
       }}
     >
-      <BrandText style={fontSemibold14}>Filters</BrandText>
+      <BrandText style={fontRegular14}>Filters</BrandText>
       <TouchableOpacity
         containerStyle={[{ marginLeft: modalMarginPadding }]}
         style={{ justifyContent: "flex-end" }}
@@ -544,7 +545,7 @@ export const SideFilters: React.FC<{
     <View style={style}>
       <Header />
       <FilterContainer>
-        <BrandText style={fontSemibold14}>Buy Now</BrandText>
+        <BrandText style={fontRegular14}>Buy Now</BrandText>
         <Switch
           value={buyNow}
           onValueChange={() => {

diff --git a/packages/components/badges/TertiaryBadge.tsx b/packages/components/badges/TertiaryBadge.tsx
@@ -8,7 +8,7 @@ import {
   paddingHorizontalBadge,
 } from "../../utils/style/badges";
 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 { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
@@ -34,7 +34,7 @@ export const TertiaryBadge: React.FC<{
         style,
       ]}
     >
-      <BrandText style={[fontSemibold14, { color: textColor }]}>
+      <BrandText style={[fontRegular14, { color: textColor }]}>
         {label}
       </BrandText>
       {!!iconSVG && (

diff --git a/packages/components/buttons/SocialButtonSecondary.tsx b/packages/components/buttons/SocialButtonSecondary.tsx
@@ -13,7 +13,7 @@ import {
   primaryTextColor,
   withAlpha,
 } from "@/utils/style/colors";
-import { fontMedium14 } from "@/utils/style/fonts";
+import { fontRegular14 } from "@/utils/style/fonts";
 
 export const SocialButtonSecondary: React.FC<{
   text?: string;
@@ -53,7 +53,7 @@ export const SocialButtonSecondary: React.FC<{
         {!!text && (
           <BrandText
             style={[
-              fontMedium14,
+              fontRegular14,
               { color: primaryColor, marginLeft: innerGap },
             ]}
           >

diff --git a/packages/components/collections/CollectionHeader.tsx b/packages/components/collections/CollectionHeader.tsx
@@ -15,7 +15,7 @@ import { contractExplorerLink, parseCollectionId } from "../../networks";
 import { prettyPrice } from "../../utils/coins";
 import { CollectionInfo } from "../../utils/collection";
 import { codGrayColor, neutral33 } from "../../utils/style/colors";
-import { fontSemibold28 } from "../../utils/style/fonts";
+import { fontRegular28 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 import { SocialButtonSecondary } from "../buttons/SocialButtonSecondary";
@@ -117,7 +117,7 @@ export const CollectionHeader: React.FC<{
         <View style={{ flex: 1 }}>
           <BrandText
             style={[
-              fontSemibold28,
+              fontRegular28,
               isMobile
                 ? {
                     marginTop: layout.spacing_x1,

diff --git a/packages/components/collections/CollectionStat.tsx b/packages/components/collections/CollectionStat.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { StyleSheet, View } from "react-native";
 
 import { neutral22, neutralA3 } from "../../utils/style/colors";
-import { fontSemibold12, fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular12, fontRegular14 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 import { CurrencyIcon } from "../CurrencyIcon";
@@ -36,11 +36,8 @@ export const CollectionStat = ({
       <View style={styles.rowCenter}>
         <BrandText
           style={[
-            fontSemibold14,
-            {
-              lineHeight: 19,
-              marginRight: layout.spacing_x0_5,
-            },
+            fontRegular14,
+            { lineHeight: 19, marginRight: layout.spacing_x0_5 },
           ]}
         >
           {value}
@@ -70,12 +67,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: neutral22,
   },
-  labelText: StyleSheet.flatten([
-    fontSemibold12,
-    {
-      color: neutralA3,
-    },
-  ]),
+  labelText: StyleSheet.flatten([fontRegular12, { color: neutralA3 }]),
   rowCenter: {
     flexDirection: "row",
     justifyContent: "center",

diff --git a/packages/components/nfts/NFTView.tsx b/packages/components/nfts/NFTView.tsx
@@ -59,6 +59,11 @@ import { nftBurnerUserCountQueryKey } from "@/hooks/nft-burner/useNFTBurnerUserC
 import { collectionStatsQueryKey } from "@/hooks/useCollectionStats";
 import { nftsQueryKey } from "@/hooks/useNFTs";
 import { getKeplrSigningCosmWasmClient } from "@/networks/signer";
+import {
+  fontRegular10,
+  fontRegular12,
+  fontRegular14,
+} from "@/utils/style/fonts";
 
 // NOTE: we put content in a memoized component to only rerender the container when the window width changes
 
@@ -186,10 +191,7 @@ const NFTViewContent: React.FC<{
             }}
           />
           <BrandText
-            style={{
-              fontSize: 14,
-              marginBottom: 12,
-            }}
+            style={[fontRegular14, { fontSize: 14, marginBottom: 12 }]}
             ellipsizeMode="tail"
             numberOfLines={1}
           >
@@ -203,19 +205,12 @@ const NFTViewContent: React.FC<{
             }}
           >
             <View
-              style={{
-                flexDirection: "row",
-                alignItems: "center",
-                flex: 1,
-              }}
+              style={{ flexDirection: "row", alignItems: "center", flex: 1 }}
             >
               <NetworkIcon size={12} networkId={nft.networkId} />
               <BrandText
                 numberOfLines={1}
-                style={{
-                  fontSize: 12,
-                  marginLeft: layout.spacing_x1,
-                }}
+                style={[fontRegular12, { marginLeft: layout.spacing_x1 }]}
               >
                 {nft.collectionName}
               </BrandText>
@@ -269,20 +264,10 @@ const NFTViewHeader: React.FC<{
             params: { id: nft.ownerId },
           }}
         >
-          <BrandText
-            style={{
-              fontSize: 10,
-              color: neutral77,
-            }}
-          >
+          <BrandText style={[fontRegular10, { color: neutral77 }]}>
             Owned by
           </BrandText>
-          <BrandText
-            style={{
-              fontSize: 12,
-              lineHeight: 16,
-            }}
-          >
+          <BrandText style={[fontRegular12, { lineHeight: 16 }]}>
             {userInfo.metadata?.tokenId ||
               shortUserAddressFromID(nft.ownerId, 10)}
           </BrandText>
@@ -463,22 +448,13 @@ const NFTViewFooter: React.FC<{ nft: NFT; localSelected: boolean }> = memo(
               />
               {/* FIXME: should come from price denom */}
               <BrandText
-                style={{
-                  fontSize: 12,
-                  color: neutral77,
-                  marginLeft: 10,
-                }}
+                style={[fontRegular12, { color: neutral77, marginLeft: 10 }]}
               >
                 Price
               </BrandText>
             </>
           ) : (
-            <BrandText
-              style={{
-                fontSize: 12,
-                color: neutral77,
-              }}
-            >
+            <BrandText style={[fontRegular12, { color: neutral77 }]}>
               Not listed
             </BrandText>
           )}

diff --git a/packages/components/sorts/SortButton.tsx b/packages/components/sorts/SortButton.tsx
@@ -6,7 +6,7 @@ import chevronUpSVG from "../../../assets/icons/chevron-up.svg";
 import sortSVG from "../../../assets/icons/sort.svg";
 import { SortDirection } from "../../api/marketplace/v1/marketplace";
 import { neutral11, secondaryColor } from "../../utils/style/colors";
-import { fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular14 } from "../../utils/style/fonts";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
 import { LegacyTertiaryBox } from "../boxes/LegacyTertiaryBox";
@@ -55,7 +55,7 @@ export const SortButton: React.FC<{
             width={16}
             style={{ marginRight: 8 }}
           />
-          <BrandText style={fontSemibold14}>
+          <BrandText style={fontRegular14}>
             Price{" "}
             {sortDirection === SortDirection.SORT_DIRECTION_ASCENDING
               ? "Ascending"

diff --git a/packages/screens/Marketplace/CollectionScreen.tsx b/packages/screens/Marketplace/CollectionScreen.tsx
@@ -56,12 +56,7 @@ export const CollectionScreen: ScreenFC<"Collection"> = ({ route }) => {
       onBackPress={() => navigation.navigate("Marketplace")}
       forceNetworkId={network?.id}
     >
-      <View
-        style={{
-          flexDirection: "row",
-          flexWrap: "nowrap",
-        }}
-      >
+      <View style={{ flexDirection: "row", flexWrap: "nowrap" }}>
         <ScrollView
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={{

diff --git a/packages/screens/Marketplace/MarketplaceScreen.tsx b/packages/screens/Marketplace/MarketplaceScreen.tsx
@@ -18,7 +18,7 @@ import { NetworkFeature } from "@/networks";
 import { CollectionsTable } from "@/screens/Marketplace/CollectionsTable";
 import { selectTimePeriod } from "@/store/slices/marketplaceFilters";
 import { ScreenFC } from "@/utils/navigation";
-import { fontSemibold28 } from "@/utils/style/fonts";
+import { fontRegular28 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 import { arrayIncludes } from "@/utils/typescript";
 
@@ -65,11 +65,7 @@ export const MarketplaceScreen: ScreenFC<"Marketplace"> = () => {
       headerChildren={<ScreenTitle>NFT Marketplace</ScreenTitle>}
       responsive
     >
-      <View
-        style={{
-          marginTop: layout.spacing_x4,
-        }}
-      >
+      <View style={{ marginTop: layout.spacing_x4 }}>
         <View
           style={{
             flexDirection: isMobile ? "column" : "row",
@@ -78,7 +74,7 @@ export const MarketplaceScreen: ScreenFC<"Marketplace"> = () => {
             alignItems: "center",
           }}
         >
-          <BrandText style={fontSemibold28}>Popular Collections</BrandText>
+          <BrandText style={fontRegular28}>Popular Collections</BrandText>
           <Tabs
             items={tabs}
             selected={selectedTab}
@@ -98,9 +94,7 @@ export const MarketplaceScreen: ScreenFC<"Marketplace"> = () => {
           }}
         >
           <SearchInput
-            style={{
-              flex: 7,
-            }}
+            style={{ flex: 7 }}
             handleChangeText={handleChangeText}
           />
           <SpacerRow size={2} />

diff --git a/packages/screens/Marketplace/PeriodFilter.tsx b/packages/screens/Marketplace/PeriodFilter.tsx
@@ -1,5 +1,5 @@
 import React, { FC, Fragment, useState } from "react";
-import { TouchableOpacity, useWindowDimensions, View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { useSelector } from "react-redux";
 
 import chevronDownSVG from "../../../assets/icons/chevron-down.svg";
@@ -10,6 +10,7 @@ import { BrandText } from "@/components/BrandText";
 import { SVG } from "@/components/SVG";
 import { SpacerColumn, SpacerRow } from "@/components/spacer";
 import { useDropdowns } from "@/hooks/useDropdowns";
+import { useMaxResolution } from "@/hooks/useMaxResolution";
 import {
   marketplacePeriodItems,
   PeriodItem,
@@ -18,11 +19,11 @@ import {
 } from "@/store/slices/marketplaceFilters";
 import { useAppDispatch } from "@/store/store";
 import { neutral33, secondaryColor } from "@/utils/style/colors";
-import { fontSemibold14 } from "@/utils/style/fonts";
+import { fontRegular14 } from "@/utils/style/fonts";
 import { layout, RESPONSIVE_BREAKPOINT_S } from "@/utils/style/layout";
 
 export const PeriodFilter: FC = () => {
-  const { width } = useWindowDimensions();
+  const { width } = useMaxResolution({ isLarge: true });
   const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
 
   const timePeriod = useSelector(selectTimePeriod);
@@ -52,7 +53,7 @@ export const PeriodFilter: FC = () => {
         <SVG source={sortSVG} width={16} height={16} />
         <SpacerRow size={1} />
 
-        <BrandText style={fontSemibold14}>
+        <BrandText style={fontRegular14}>
           {width < RESPONSIVE_BREAKPOINT_S
             ? selectedItem.shortLabel
             : selectedItem.label}
@@ -84,7 +85,7 @@ export const PeriodFilter: FC = () => {
             .map((periodItem, index) => (
               <Fragment key={index}>
                 <TouchableOpacity onPress={() => onPressPeriodItem(periodItem)}>
-                  <BrandText style={fontSemibold14}>
+                  <BrandText style={fontRegular14}>
                     {width < RESPONSIVE_BREAKPOINT_S
                       ? periodItem.shortLabel
                       : periodItem.label}