From a6b43f5e2a5455ea7ba8dfb98e9befcdb55b1cc0 Mon Sep 17 00:00:00 2001
From: clegirar <clemntgirard@gmail.com>
Date: Fri, 3 Jan 2025 11:33:26 +0100
Subject: [PATCH] fix: fontWeight and fullWidth for Wallet manager screen

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  | 34 +++-------
 .../components/inputs/TextInputCustom.tsx     |  9 ++-
 .../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 ++
 11 files changed, 97 insertions(+), 147 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..9cf7d4d2ea 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;
@@ -56,20 +62,8 @@ 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}
@@ -150,19 +144,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/inputs/TextInputCustom.tsx b/packages/components/inputs/TextInputCustom.tsx
index c1ed96342a..15d5a86f8c 100644
--- a/packages/components/inputs/TextInputCustom.tsx
+++ b/packages/components/inputs/TextInputCustom.tsx
@@ -49,6 +49,8 @@ import { LegacyTertiaryBox } from "../boxes/LegacyTertiaryBox";
 import { CustomPressable } from "../buttons/CustomPressable";
 import { SpacerColumn, SpacerRow } from "../spacer";
 
+import { useTheme } from "@/hooks/useTheme";
+
 // TODO: Refacto TextInputCustom. Too much props
 
 export interface TextInputCustomProps<T extends FieldValues>
@@ -164,6 +166,7 @@ export const TextInputCustom = <T extends FieldValues>({
   });
   const inputRef = useRef<TextInput>(null);
   const [hovered, setHovered] = useState(false);
+  const theme = useTheme();
   // Passing ref to parent since I didn't find a pattern to handle generic argument <T extends FieldValues> AND forwardRef
   useEffect(() => {
     if (inputRef.current && setRef) {
@@ -313,7 +316,11 @@ export const TextInputCustom = <T extends FieldValues>({
               onKeyPress={(event) => handleKeyPress({ event, onPressEnter })}
               placeholderTextColor={neutral77}
               value={field.value}
-              style={[styles.textInput, textInputStyle]}
+              style={[
+                { color: theme.textColor },
+                styles.textInput,
+                textInputStyle,
+              ]}
               {...restProps}
             />
           </View>
diff --git a/packages/components/modals/DepositWithdrawModal.tsx b/packages/components/modals/DepositWithdrawModal.tsx
index 8056d5e59a..b7763a2bdb 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..9f73a94fb8 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),