fix: fontWeight and fullWidth for Wallet manager screen (#1473)

Signed-off-by: clegirar <[email protected]>
TERITORI · Jan 13, 2025 · eb8745e · eb8745e
1 parent 918b2c0
commit eb8745e
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 163 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 || (