From 5db633c4a5f6cc6f74cf9053eb80233765f7725b Mon Sep 17 00:00:00 2001 From: clegirar Date: Fri, 3 Jan 2025 14:08:46 +0100 Subject: [PATCH] fix: fontWeight and fullWidth on marketplace screen Signed-off-by: clegirar --- packages/components/DropdownOption.tsx | 4 +- packages/components/ImageWithTextInsert.tsx | 18 ++++--- packages/components/SideFilters.tsx | 5 +- packages/components/badges/TertiaryBadge.tsx | 4 +- .../buttons/SocialButtonSecondary.tsx | 4 +- .../collections/CollectionHeader.tsx | 4 +- .../components/collections/CollectionStat.tsx | 16 ++----- packages/components/nfts/NFTView.tsx | 48 +++++-------------- packages/components/sorts/SortButton.tsx | 4 +- .../screens/Marketplace/CollectionScreen.tsx | 7 +-- .../screens/Marketplace/MarketplaceScreen.tsx | 14 ++---- packages/screens/Marketplace/PeriodFilter.tsx | 11 +++-- packages/screens/Marketplace/SideCart.tsx | 46 +++++------------- 13 files changed, 64 insertions(+), 121 deletions(-) diff --git a/packages/components/DropdownOption.tsx b/packages/components/DropdownOption.tsx index 86ee666c88..f914e1b4a8 100644 --- 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 = ({ <> - + {hovered && isComingSoon ? "Coming Soon" : label} diff --git a/packages/components/ImageWithTextInsert.tsx b/packages/components/ImageWithTextInsert.tsx index 336e630e1e..062aeef06d 100644 --- 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 && ( {textInsert} diff --git a/packages/components/SideFilters.tsx b/packages/components/SideFilters.tsx index 58e00ff679..2e2601e26e 100644 --- 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, }} > - Filters + Filters
- Buy Now + Buy Now { diff --git a/packages/components/badges/TertiaryBadge.tsx b/packages/components/badges/TertiaryBadge.tsx index 421b67f2c2..c9093fad5b 100644 --- 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, ]} > - + {label} {!!iconSVG && ( diff --git a/packages/components/buttons/SocialButtonSecondary.tsx b/packages/components/buttons/SocialButtonSecondary.tsx index f850c5b62f..f49de84346 100644 --- 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 && ( diff --git a/packages/components/collections/CollectionHeader.tsx b/packages/components/collections/CollectionHeader.tsx index ab2cf45630..f431f6c68f 100644 --- 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<{ {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 index 91ec93c1e8..a863a86e3b 100644 --- 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<{ }} /> @@ -203,19 +205,12 @@ const NFTViewContent: React.FC<{ }} > {nft.collectionName} @@ -269,20 +264,10 @@ const NFTViewHeader: React.FC<{ params: { id: nft.ownerId }, }} > - + Owned by - + {userInfo.metadata?.tokenId || shortUserAddressFromID(nft.ownerId, 10)} @@ -463,22 +448,13 @@ const NFTViewFooter: React.FC<{ nft: NFT; localSelected: boolean }> = memo( /> {/* FIXME: should come from price denom */} Price ) : ( - + Not listed )} diff --git a/packages/components/sorts/SortButton.tsx b/packages/components/sorts/SortButton.tsx index 4a6f85163a..d664e215f6 100644 --- 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 }} /> - + Price{" "} {sortDirection === SortDirection.SORT_DIRECTION_ASCENDING ? "Ascending" diff --git a/packages/screens/Marketplace/CollectionScreen.tsx b/packages/screens/Marketplace/CollectionScreen.tsx index 3d76a0a447..45f2508cc6 100644 --- 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} > - + = () => { headerChildren={NFT Marketplace} responsive > - + = () => { alignItems: "center", }} > - Popular Collections + Popular Collections = () => { }} > diff --git a/packages/screens/Marketplace/PeriodFilter.tsx b/packages/screens/Marketplace/PeriodFilter.tsx index 6fdfe470c0..57815e3869 100644 --- 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 = () => { - + {width < RESPONSIVE_BREAKPOINT_S ? selectedItem.shortLabel : selectedItem.label} @@ -84,7 +85,7 @@ export const PeriodFilter: FC = () => { .map((periodItem, index) => ( onPressPeriodItem(periodItem)}> - + {width < RESPONSIVE_BREAKPOINT_S ? periodItem.shortLabel : periodItem.label} diff --git a/packages/screens/Marketplace/SideCart.tsx b/packages/screens/Marketplace/SideCart.tsx index 7c33718564..5370d741fd 100644 --- a/packages/screens/Marketplace/SideCart.tsx +++ b/packages/screens/Marketplace/SideCart.tsx @@ -53,9 +53,9 @@ import { primaryColor, } from "@/utils/style/colors"; import { - fontMedium10, - fontSemibold12, - fontSemibold14, + fontRegular10, + fontRegular12, + fontRegular14, } from "@/utils/style/fonts"; import { layout } from "@/utils/style/layout"; import { modalMarginPadding } from "@/utils/style/modals"; @@ -83,15 +83,8 @@ const Header: React.FC<{ flexDirection: "row", }} > - Cart - + Cart + {items.length} @@ -111,7 +104,7 @@ const Header: React.FC<{ paddingBottom: 2, paddingLeft: 6, }, - fontMedium10, + fontRegular10, ]} onPress={onPressClear} > @@ -165,7 +158,7 @@ const CartItems: React.FC<{ id: EntityId }> = ({ id }) => { marginRight: 6, }} /> - {nft?.name} + {nft?.name} { dispatch(removeSelected(id)); @@ -184,22 +177,13 @@ const CartItems: React.FC<{ id: EntityId }> = ({ id }) => { marginTop: layout.spacing_x1, }} > - + {userInfo.metadata?.tokenId || shortUserAddressFromID(nft.ownerId, 10)} - + {prettyPrice(nft.networkId, nft.price, nft.denom)} @@ -232,7 +216,7 @@ const ItemTotal: React.FC<{ marginTop: layout.spacing_x1, }} > - + {textLeft} {typeof textRight === "number" ? textRight.toFixed(2) : textRight} @@ -404,11 +388,7 @@ const Footer: React.FC<{ items: any[] }> = ({ items }) => { })} - +