From eb8745e3b31a2408e8611ac4104a87f8b235b2e8 Mon Sep 17 00:00:00 2001
From: clegirar <33428384+clegirar@users.noreply.github.com>
Date: Mon, 13 Jan 2025 18:24:38 +0100
Subject: [PATCH 1/2] fix: fontWeight and fullWidth for Wallet manager screen
 (#1473)

Signed-off-by: clegirar <clemntgirard@gmail.com>
---
 packages/components/Menu.tsx                  |  4 +-
 packages/components/buttons/MaxButton.tsx     |  4 +-
 packages/components/hub/MyNFTs.tsx            | 29 +++-----
 .../components/hub/WalletDashboardHeader.tsx  | 55 ++++------------
 .../modals/DepositWithdrawModal.tsx           | 25 ++++---
 packages/screens/WalletManager/Assets.tsx     | 41 ++++--------
 packages/screens/WalletManager/WalletItem.tsx | 66 ++++++-------------
 .../WalletManager/WalletManagerScreen.tsx     |  9 ++-
 .../screens/WalletManager/WalletsScreen.tsx   | 16 ++---
 packages/utils/style/fonts.ts                 |  7 ++
 10 files changed, 93 insertions(+), 163 deletions(-)

diff --git a/packages/components/Menu.tsx b/packages/components/Menu.tsx
index 5b4b85e7c4..92534995ca 100644
--- a/packages/components/Menu.tsx
+++ b/packages/components/Menu.tsx
@@ -6,7 +6,7 @@ import { PrimaryBox } from "./boxes/PrimaryBox";
 
 import { useDropdowns } from "@/hooks/useDropdowns";
 import { neutral33 } from "@/utils/style/colors";
-import { fontSemibold13 } from "@/utils/style/fonts";
+import { fontRegular13 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
 const DEFAULT_WIDTH = 164;
@@ -62,7 +62,7 @@ export const Menu: React.FC<MenuProps> = ({
                 ]}
               >
                 <BrandText
-                  style={[fontSemibold13, item.disabled && { opacity: 0.5 }]}
+                  style={[fontRegular13, item.disabled && { opacity: 0.5 }]}
                 >
                   {item.label}
                 </BrandText>
diff --git a/packages/components/buttons/MaxButton.tsx b/packages/components/buttons/MaxButton.tsx
index 3eff1c6978..d99c9ebce0 100644
--- a/packages/components/buttons/MaxButton.tsx
+++ b/packages/components/buttons/MaxButton.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Pressable, StyleSheet } from "react-native";
 
 import { neutral22, primaryColor } from "../../utils/style/colors";
-import { fontSemibold12 } from "../../utils/style/fonts";
+import { fontRegular12 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 
@@ -22,7 +22,7 @@ export const MaxButton = ({ onPress }: MaxButtonProps) => {
 // eslint-disable-next-line no-restricted-syntax
 const styles = StyleSheet.create({
   maxText: {
-    ...StyleSheet.flatten(fontSemibold12),
+    ...StyleSheet.flatten(fontRegular12),
     backgroundColor: primaryColor,
     color: neutral22,
     borderRadius: layout.borderRadius,
diff --git a/packages/components/hub/MyNFTs.tsx b/packages/components/hub/MyNFTs.tsx
index 42f6102a1e..ee411c6201 100644
--- a/packages/components/hub/MyNFTs.tsx
+++ b/packages/components/hub/MyNFTs.tsx
@@ -10,6 +10,8 @@ import { OmniLink } from "../OmniLink";
 import { SVG } from "../SVG";
 import { NFTView } from "../nfts/NFTView";
 
+import { fontRegular14, fontRegular20 } from "@/utils/style/fonts";
+
 export const MyNFTs: React.FC = () => {
   const selectedWallet = useSelectedWallet();
 
@@ -25,11 +27,7 @@ export const MyNFTs: React.FC = () => {
     priceRange: undefined,
   });
   return (
-    <View
-      style={{
-        paddingTop: 32,
-      }}
-    >
+    <View style={{ paddingTop: 32 }}>
       <View
         style={{
           flexDirection: "row",
@@ -38,33 +36,24 @@ export const MyNFTs: React.FC = () => {
           marginBottom: 24,
         }}
       >
-        <BrandText style={{ marginRight: 20, fontSize: 20 }}>My NFTs</BrandText>
+        <BrandText style={[fontRegular20, { marginRight: 20 }]}>
+          My NFTs
+        </BrandText>
         <OmniLink
-          to={{
-            screen: "MyCollection",
-          }}
+          to={{ screen: "MyCollection" }}
           style={{
             display: "flex",
             flexDirection: "row",
             alignItems: "center",
           }}
         >
-          <BrandText
-            style={{
-              fontSize: 14,
-              marginRight: 16,
-            }}
-          >
+          <BrandText style={[fontRegular14, { marginRight: 16 }]}>
             See All
           </BrandText>
           <SVG source={chevronRightSVG} height={16} />
         </OmniLink>
       </View>
-      <View
-        style={{
-          flexDirection: "row",
-        }}
-      >
+      <View style={{ flexDirection: "row" }}>
         <FlatList
           data={nfts}
           horizontal
diff --git a/packages/components/hub/WalletDashboardHeader.tsx b/packages/components/hub/WalletDashboardHeader.tsx
index 2443968476..5e7a26a772 100644
--- a/packages/components/hub/WalletDashboardHeader.tsx
+++ b/packages/components/hub/WalletDashboardHeader.tsx
@@ -18,6 +18,12 @@ import { LegacyTertiaryBox } from "../boxes/LegacyTertiaryBox";
 import { PrimaryButton } from "../buttons/PrimaryButton";
 
 import { useAppNavigation } from "@/hooks/navigation/useAppNavigation";
+import {
+  fontRegular12,
+  fontRegular13,
+  fontRegular16,
+  fontRegular20,
+} from "@/utils/style/fonts";
 
 interface WalletDashboardHeaderProps {
   title: string;
@@ -38,12 +44,8 @@ const WalletDashboardHeaderCard: React.FC<WalletDashboardHeaderProps> = ({
     <LegacyTertiaryBox
       height={116}
       width={200}
-      mainContainerStyle={{
-        backgroundColor: neutral17,
-      }}
-      style={{
-        marginLeft: 16,
-      }}
+      mainContainerStyle={{ backgroundColor: neutral17 }}
+      style={{ marginLeft: 16 }}
     >
       <View
         style={{
@@ -56,31 +58,15 @@ const WalletDashboardHeaderCard: React.FC<WalletDashboardHeaderProps> = ({
           position: "relative",
         }}
       >
-        <BrandText
-          style={{
-            fontSize: 12,
-          }}
-        >
-          {title}
-        </BrandText>
-        <BrandText
-          style={{
-            fontSize: 16,
-          }}
-        >
-          {data}
-        </BrandText>
+        <BrandText style={fontRegular12}>{title}</BrandText>
+        <BrandText style={fontRegular16}>{data}</BrandText>
         {!!actionButton && (
           <PrimaryButton
             disabled={actionButton.disabled}
             size="XS"
             text={actionButton.label}
             onPress={actionButton.onPress}
-            touchableStyle={{
-              position: "absolute",
-              bottom: 12,
-              right: 14,
-            }}
+            touchableStyle={{ position: "absolute", bottom: 12, right: 14 }}
           />
         )}
       </View>
@@ -129,12 +115,7 @@ export const WalletDashboardHeader: React.FC = () => {
         marginTop: -layout.spacing_x3,
       }}
     >
-      <View
-        style={{
-          flexDirection: "row",
-          marginTop: layout.spacing_x3,
-        }}
-      >
+      <View style={{ flexDirection: "row", marginTop: layout.spacing_x3 }}>
         <TouchableOpacity
           style={{
             backgroundColor: neutral22,
@@ -150,19 +131,11 @@ export const WalletDashboardHeader: React.FC = () => {
           <SVG width={24} height={24} source={penSVG} />
         </TouchableOpacity>
         <View>
-          <BrandText
-            style={{
-              color: neutralA3,
-              fontSize: 14,
-            }}
-          >
+          <BrandText style={[fontRegular13, { color: neutralA3 }]}>
             Hello
           </BrandText>
           <BrandText
-            style={{
-              fontSize: 20,
-              maxWidth: 324,
-            }}
+            style={[fontRegular20, { maxWidth: 324 }]}
             numberOfLines={1}
           >
             {userInfo.metadata?.tokenId ||
diff --git a/packages/components/modals/DepositWithdrawModal.tsx b/packages/components/modals/DepositWithdrawModal.tsx
index 8056d5e59a..340be21ed0 100644
--- a/packages/components/modals/DepositWithdrawModal.tsx
+++ b/packages/components/modals/DepositWithdrawModal.tsx
@@ -18,7 +18,11 @@ import {
   keplrCurrencyFromNativeCurrencyInfo,
 } from "../../networks";
 import { neutral77, primaryColor } from "../../utils/style/colors";
-import { fontSemibold13, fontSemibold14 } from "../../utils/style/fonts";
+import {
+  fontRegular13,
+  fontRegular14,
+  fontRegular16,
+} from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { capitalize, tinyAddress } from "../../utils/text";
 import { BrandText } from "../BrandText";
@@ -83,7 +87,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
       <View style={styles.rowCenter}>
         <NetworkIcon networkId={networkId} size={32} />
         <SpacerRow size={3} />
-        <BrandText>
+        <BrandText style={fontRegular16}>
           {variation === "deposit" ? "Deposit on" : "Withdraw from"}{" "}
           {getNetwork(networkId)?.displayName || "Unknown"}
         </BrandText>
@@ -110,7 +114,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
       width={460}
     >
       <View style={styles.container}>
-        <BrandText style={[fontSemibold14, styles.selfCenter]}>
+        <BrandText style={[fontRegular14, styles.selfCenter]}>
           {capitalize(variation)} {nativeTargetCurrency?.displayName}
         </BrandText>
         <SpacerColumn size={1.5} />
@@ -120,7 +124,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
               <NetworkIcon size={64} networkId={sourceNetworkId || "unknown"} />
             </View>
             <SpacerColumn size={1.5} />
-            <BrandText style={fontSemibold14}>
+            <BrandText style={fontRegular14}>
               From {sourceNetwork?.displayName || "Unknown"}
             </BrandText>
             <SpacerColumn size={1} />
@@ -149,7 +153,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
               />
             </View>
             <SpacerColumn size={1.5} />
-            <BrandText style={fontSemibold14}>
+            <BrandText style={fontRegular14}>
               To {destinationNetwork?.displayName || "Unknown"}
             </BrandText>
             <SpacerColumn size={1} />
@@ -175,9 +179,9 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
             rules={{ required: true, max }}
             placeHolder="0"
             subtitle={
-              <BrandText style={[fontSemibold13, { color: neutral77 }]}>
+              <BrandText style={[fontRegular13, { color: neutral77 }]}>
                 Available:{" "}
-                <BrandText style={[fontSemibold13, { color: primaryColor }]}>
+                <BrandText style={[fontRegular13, { color: primaryColor }]}>
                   {max}
                 </BrandText>
               </BrandText>
@@ -329,12 +333,7 @@ const styles = StyleSheet.create({
   container: {
     paddingBottom: layout.spacing_x3,
   },
-  estimatedText: StyleSheet.flatten([
-    fontSemibold14,
-    {
-      color: neutral77,
-    },
-  ]),
+  estimatedText: StyleSheet.flatten([fontRegular14, { color: neutral77 }]),
 });
 
 const convertCosmosAddress = (
diff --git a/packages/screens/WalletManager/Assets.tsx b/packages/screens/WalletManager/Assets.tsx
index 4a4e70d736..b38c18536a 100644
--- a/packages/screens/WalletManager/Assets.tsx
+++ b/packages/screens/WalletManager/Assets.tsx
@@ -14,6 +14,11 @@ import { useIsMobile } from "@/hooks/useIsMobile";
 import { parseUserId } from "@/networks";
 import { prettyPrice } from "@/utils/coins";
 import { neutral22, neutral33 } from "@/utils/style/colors";
+import {
+  fontRegular14,
+  fontRegular18,
+  fontRegular20,
+} from "@/utils/style/fonts";
 
 const collapsedCount = 5;
 
@@ -81,7 +86,7 @@ export const Assets: React.FC<{
             alignItems: "center",
           }}
         >
-          <BrandText style={{ marginRight: 20, fontSize: 20 }}>
+          <BrandText style={[fontRegular20, { marginRight: 20 }]}>
             Assets on {network.displayName}
           </BrandText>
         </View>
@@ -92,13 +97,7 @@ export const Assets: React.FC<{
               alignItems: "center",
             }}
           >
-            <BrandText
-              style={{
-                fontSize: 14,
-                lineHeight: 16,
-                marginRight: 16,
-              }}
-            >
+            <BrandText style={[fontRegular14, { marginRight: 16 }]}>
               {expanded ? "Collapse" : "Expand"} All Items
             </BrandText>
             <TouchableOpacity
@@ -138,43 +137,31 @@ export const Assets: React.FC<{
               paddingVertical: 16,
             }}
           >
-            <View
-              style={{
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-            >
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
               <CurrencyIcon
                 size={isMobile ? 32 : 64}
                 networkId={network.id}
                 denom={currency.denom}
               />
               <View style={{ marginLeft: 16 }}>
-                <BrandText numberOfLines={1} style={{ maxWidth: 600 }}>
+                <BrandText
+                  numberOfLines={1}
+                  style={[fontRegular18, { maxWidth: 600 }]}
+                >
                   {prettyPrice(
                     network.id,
                     balance?.amount || "0",
                     currency.denom,
                   )}
                 </BrandText>
-                <BrandText
-                  style={{
-                    marginTop: 8,
-                    fontSize: 14,
-                  }}
-                >
+                <BrandText style={[fontRegular14, { marginTop: 8 }]}>
                   {balance?.usdAmount
                     ? `≈ $${balance.usdAmount.toFixed(2)}`
                     : " "}
                 </BrandText>
               </View>
             </View>
-            <View
-              style={{
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-            >
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
               {!readOnly && currency.kind === "ibc" && (
                 <>
                   {currency.deprecated || (
diff --git a/packages/screens/WalletManager/WalletItem.tsx b/packages/screens/WalletManager/WalletItem.tsx
index 94d616d8c3..d1a96acdb4 100644
--- a/packages/screens/WalletManager/WalletItem.tsx
+++ b/packages/screens/WalletManager/WalletItem.tsx
@@ -29,6 +29,12 @@ import {
 } from "@/store/slices/settings";
 import { useAppDispatch } from "@/store/store";
 import { neutral33, neutral77 } from "@/utils/style/colors";
+import {
+  fontRegular12,
+  fontRegular14,
+  fontRegular16,
+  fontRegular18,
+} from "@/utils/style/fonts";
 import { modalMarginPadding } from "@/utils/style/modals";
 
 interface WalletItemProps {
@@ -75,12 +81,7 @@ export const WalletItem: React.FC<WalletItemProps> = ({
         zIndex,
       }}
     >
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-        }}
-      >
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
         {selectable && (
           <View
             style={{
@@ -112,7 +113,7 @@ export const WalletItem: React.FC<WalletItemProps> = ({
         <WalletProviderIcon walletProvider={item.provider} size={64} />
         <View style={{ marginLeft: 16 }}>
           <View>
-            <BrandText>{item.provider}</BrandText>
+            <BrandText style={fontRegular18}>{item.provider}</BrandText>
             <View
               style={{
                 flexDirection: "row",
@@ -120,13 +121,7 @@ export const WalletItem: React.FC<WalletItemProps> = ({
                 marginTop: 8,
               }}
             >
-              <BrandText
-                style={{
-                  fontSize: 12,
-                }}
-              >
-                {item.address}
-              </BrandText>
+              <BrandText style={fontRegular12}>{item.address}</BrandText>
               <TouchableOpacity
                 onPress={() => {
                   Clipboard.setStringAsync(item.address);
@@ -149,12 +144,7 @@ export const WalletItem: React.FC<WalletItemProps> = ({
           </View>
         </View>
       </View>
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-        }}
-      >
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
         <View
           style={{
             paddingRight: 32,
@@ -163,42 +153,24 @@ export const WalletItem: React.FC<WalletItemProps> = ({
           }}
         >
           <BrandText
-            style={{
-              fontSize: 12,
-              color: neutral77,
-              marginBottom: 2,
-              alignSelf: "flex-end",
-            }}
+            style={[
+              fontRegular12,
+              { color: neutral77, marginBottom: 2, alignSelf: "flex-end" },
+            ]}
           >
             Staked
           </BrandText>
-          <BrandText
-            style={{
-              fontSize: 14,
-            }}
-          >
+          <BrandText style={fontRegular14}>
             {`$${delegationsUsdBalance.toFixed(2)}`}
           </BrandText>
         </View>
-        <View
-          style={{
-            paddingHorizontal: 32,
-          }}
-        >
+        <View style={{ paddingHorizontal: 32 }}>
           <BrandText
-            style={{
-              fontSize: 12,
-              color: neutral77,
-              marginBottom: 2,
-            }}
+            style={[fontRegular12, { color: neutral77, marginBottom: 2 }]}
           >
             Pending rewards
           </BrandText>
-          <BrandText
-            style={{
-              fontSize: 14,
-            }}
-          >
+          <BrandText style={fontRegular14}>
             {`$${claimableUSD.toFixed(2)}`}
           </BrandText>
         </View>
@@ -272,7 +244,7 @@ const DetailsModal: React.FC<{
       visible={visible}
       onClose={onClose}
     >
-      <BrandText style={{ marginBottom: modalMarginPadding }}>
+      <BrandText style={[fontRegular16, { marginBottom: modalMarginPadding }]}>
         {JSON.stringify(wallet, null, 4)}
       </BrandText>
     </ModalBase>
diff --git a/packages/screens/WalletManager/WalletManagerScreen.tsx b/packages/screens/WalletManager/WalletManagerScreen.tsx
index 959f45fae7..21b0a4dee2 100644
--- a/packages/screens/WalletManager/WalletManagerScreen.tsx
+++ b/packages/screens/WalletManager/WalletManagerScreen.tsx
@@ -15,19 +15,22 @@ import { useAreThereWallets } from "@/hooks/useAreThereWallets";
 import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { ScreenFC } from "@/utils/navigation";
 import { neutral33 } from "@/utils/style/colors";
+import { fontRegular20 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
 export const WalletManagerScreen: ScreenFC<"WalletManager"> = () => {
   const selectedWallet = useSelectedWallet();
   const areThereWallets = useAreThereWallets();
-  const { height } = useMaxResolution();
+  const { height, width } = useMaxResolution({ isLarge: true });
 
   return (
-    <ScreenContainer headerChildren={<WalletHeader />}>
+    <ScreenContainer fullWidth headerChildren={<WalletHeader />}>
       {areThereWallets ? (
         <View
           style={{
             flex: 1,
+            width,
+            alignSelf: "center",
             paddingBottom: layout.contentSpacing,
           }}
         >
@@ -49,7 +52,7 @@ export const WalletManagerScreen: ScreenFC<"WalletManager"> = () => {
               zIndex: 99,
             }}
           >
-            <BrandText style={{ marginRight: 20, fontSize: 20 }}>
+            <BrandText style={[fontRegular20, { marginRight: 20 }]}>
               Wallet
             </BrandText>
             {!!selectedWallet && (
diff --git a/packages/screens/WalletManager/WalletsScreen.tsx b/packages/screens/WalletManager/WalletsScreen.tsx
index 56fdf2ec09..811a66eebd 100644
--- a/packages/screens/WalletManager/WalletsScreen.tsx
+++ b/packages/screens/WalletManager/WalletsScreen.tsx
@@ -10,20 +10,25 @@ import { ScreenContainer } from "@/components/ScreenContainer";
 import { PrimaryButton } from "@/components/buttons/PrimaryButton";
 import { ConnectWalletModal } from "@/components/modals/ConnectWalletModal";
 import { useWallets } from "@/context/WalletsProvider";
+import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { ScreenFC } from "@/utils/navigation";
 import { neutral33, neutralA3 } from "@/utils/style/colors";
+import { fontRegular14, fontRegular20 } from "@/utils/style/fonts";
 
 export const WalletManagerWalletsScreen: ScreenFC<
   "WalletManagerWallets" | "WalletManagerChains"
 > = () => {
   const [showConnectModal, setShowConnectModal] = useState(false);
   const { wallets: allWallets } = useWallets();
+  const { width } = useMaxResolution({ isLarge: true });
 
   return (
-    <ScreenContainer headerChildren={<WalletHeader />}>
+    <ScreenContainer fullWidth headerChildren={<WalletHeader />}>
       <View
         style={{
           paddingVertical: 48,
+          width,
+          alignSelf: "center",
         }}
       >
         <View
@@ -35,15 +40,10 @@ export const WalletManagerWalletsScreen: ScreenFC<
           }}
         >
           <View>
-            <BrandText style={{ marginRight: 20, fontSize: 20 }}>
+            <BrandText style={[fontRegular20, { marginRight: 20 }]}>
               All Wallets
             </BrandText>
-            <BrandText
-              style={{
-                fontSize: 14,
-                color: neutralA3,
-              }}
-            >
+            <BrandText style={[fontRegular14, { color: neutralA3 }]}>
               Manage your wallets
             </BrandText>
           </View>
diff --git a/packages/utils/style/fonts.ts b/packages/utils/style/fonts.ts
index 662240ad18..4b791bbc77 100644
--- a/packages/utils/style/fonts.ts
+++ b/packages/utils/style/fonts.ts
@@ -243,6 +243,13 @@ export const fontRegular20: TextStyle = {
   fontFamily: "Exo_400Regular",
   fontWeight: "400",
 };
+export const fontRegular18: TextStyle = {
+  fontSize: 18,
+  letterSpacing: -(18 * 0.02),
+  lineHeight: 20,
+  fontFamily: "Exo_400Regular",
+  fontWeight: "400",
+};
 export const fontRegular16: TextStyle = {
   fontSize: 16,
   letterSpacing: -(16 * 0.02),

From 427a33c484cbbbcbb3d0f9e10e2714fe2207da00 Mon Sep 17 00:00:00 2001
From: clegirar <33428384+clegirar@users.noreply.github.com>
Date: Tue, 14 Jan 2025 12:15:03 +0100
Subject: [PATCH 2/2] fix: fontWeight and fullWidth on marketplace screen
 (#1474)

Signed-off-by: clegirar <clemntgirard@gmail.com>
---
 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<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
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 && (
         <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
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,
       }}
     >
-      <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
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,
       ]}
     >
-      <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
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 && (
           <BrandText
             style={[
-              fontMedium14,
+              fontRegular14,
               { color: primaryColor, marginLeft: innerGap },
             ]}
           >
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<{
         <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
index a110328f9d..e26e8169a4 100644
--- 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
index 91ec93c1e8..1802c69a4c 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<{
             }}
           />
           <BrandText
-            style={{
-              fontSize: 14,
-              marginBottom: 12,
-            }}
+            style={[fontRegular14, { 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}>
             {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
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 }}
           />
-          <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
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}
     >
-      <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
index 04f6797a92..9df7e60a8b 100644
--- 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
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 = () => {
         <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}
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",
         }}
       >
-        <BrandText style={fontSemibold14}>Cart </BrandText>
-        <BrandText
-          style={[
-            fontSemibold14,
-            {
-              color: neutral77,
-            },
-          ]}
-        >
+        <BrandText style={fontRegular14}>Cart </BrandText>
+        <BrandText style={[fontRegular14, { color: neutral77 }]}>
           {items.length}
         </BrandText>
       </View>
@@ -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,
             }}
           />
-          <BrandText style={fontSemibold12}>{nft?.name}</BrandText>
+          <BrandText style={fontRegular12}>{nft?.name}</BrandText>
           <Pressable
             onPress={() => {
               dispatch(removeSelected(id));
@@ -184,22 +177,13 @@ const CartItems: React.FC<{ id: EntityId }> = ({ id }) => {
             marginTop: layout.spacing_x1,
           }}
         >
-          <BrandText style={[fontSemibold12, { color: primaryColor }]}>
+          <BrandText style={[fontRegular12, { color: primaryColor }]}>
             {userInfo.metadata?.tokenId ||
               shortUserAddressFromID(nft.ownerId, 10)}
           </BrandText>
-          <View
-            style={{
-              flexDirection: "row",
-            }}
-          >
+          <View style={{ flexDirection: "row" }}>
             <BrandText
-              style={[
-                fontSemibold12,
-                {
-                  marginRight: layout.spacing_x0_5,
-                },
-              ]}
+              style={[fontRegular12, { marginRight: layout.spacing_x0_5 }]}
             >
               {prettyPrice(nft.networkId, nft.price, nft.denom)}
             </BrandText>
@@ -232,7 +216,7 @@ const ItemTotal: React.FC<{
         marginTop: layout.spacing_x1,
       }}
     >
-      <BrandText style={[fontSemibold12, { color: neutralA3 }]}>
+      <BrandText style={[fontRegular12, { color: neutralA3 }]}>
         {textLeft}
       </BrandText>
       <View
@@ -243,7 +227,7 @@ const ItemTotal: React.FC<{
         }}
       >
         <BrandText
-          style={[fontSemibold12, { marginRight: layout.spacing_x0_5 }]}
+          style={[fontRegular12, { marginRight: layout.spacing_x0_5 }]}
         >
           {typeof textRight === "number" ? textRight.toFixed(2) : textRight}
         </BrandText>
@@ -404,11 +388,7 @@ const Footer: React.FC<{ items: any[] }> = ({ items }) => {
       })}
       <Separator />
 
-      <View
-        style={{
-          marginTop: layout.spacing_x1,
-        }}
-      >
+      <View style={{ marginTop: layout.spacing_x1 }}>
         <PrimaryButton
           fullWidth
           size="SM"