From c2c5b7da4823df18735816a7e069066eb30ceedf Mon Sep 17 00:00:00 2001
From: clegirar <33428384+clegirar@users.noreply.github.com>
Date: Wed, 15 Jan 2025 10:33:07 +0100
Subject: [PATCH] fix: font weight multisig screen (#1493)

Signed-off-by: clegirar <clemntgirard@gmail.com>
---
 packages/components/EmptyList.tsx             |  4 +-
 packages/components/ErrorText.tsx             |  9 ++--
 .../inputs/TextInputOutsideLabel.tsx          | 14 ++-----
 .../multisig/MultisigTransactions.tsx         |  8 ++--
 .../screens/Multisig/MultisigCreateScreen.tsx | 42 ++++++-------------
 packages/screens/Multisig/MultisigScreen.tsx  | 25 ++++-------
 .../MultisigWalletDashboardScreen.tsx         | 14 ++-----
 .../Multisig/components/GetStartedOption.tsx  | 12 +++---
 .../Multisig/components/MultisigFormInput.tsx |  4 +-
 .../components/MultisigRightSection.tsx       |  8 ++--
 .../Multisig/components/MultisigSection.tsx   |  8 ++--
 packages/utils/style/fonts.ts                 |  7 ++++
 12 files changed, 59 insertions(+), 96 deletions(-)

diff --git a/packages/components/EmptyList.tsx b/packages/components/EmptyList.tsx
index 61739edad6..b725da717f 100644
--- a/packages/components/EmptyList.tsx
+++ b/packages/components/EmptyList.tsx
@@ -6,7 +6,7 @@ import { AnimationFadeIn } from "./animations/AnimationFadeIn";
 import { SpacerColumn } from "./spacer";
 import emptyListSVG from "../../assets/icons/empty-list.svg";
 import { neutral77 } from "../utils/style/colors";
-import { fontSemibold16 } from "../utils/style/fonts";
+import { fontRegular16 } from "../utils/style/fonts";
 
 interface EmptyListProps {
   text: string;
@@ -24,7 +24,7 @@ export const EmptyList: React.FC<EmptyListProps> = ({ text, size = 250 }) => {
     >
       <SVG source={emptyListSVG} width={size} height={size} />
       <SpacerColumn size={2} />
-      <BrandText style={[fontSemibold16, { color: neutral77 }]}>
+      <BrandText style={[fontRegular16, { color: neutral77 }]}>
         {text}
       </BrandText>
     </AnimationFadeIn>
diff --git a/packages/components/ErrorText.tsx b/packages/components/ErrorText.tsx
index 9c29fb1986..fdea10fc3b 100644
--- a/packages/components/ErrorText.tsx
+++ b/packages/components/ErrorText.tsx
@@ -8,7 +8,7 @@ import Animated, {
 
 import { BrandText } from "./BrandText";
 import { errorColor } from "../utils/style/colors";
-import { fontSemibold14 } from "../utils/style/fonts";
+import { fontRegular14 } from "../utils/style/fonts";
 
 interface ErrorTextProps extends TextProps {
   center?: boolean;
@@ -66,10 +66,7 @@ export const ErrorText: React.FC<ErrorTextProps> = ({
 // eslint-disable-next-line no-restricted-syntax
 const styles = StyleSheet.create({
   text: StyleSheet.flatten([
-    fontSemibold14,
-    {
-      marginTop: 6,
-      color: errorColor,
-    },
+    fontRegular14,
+    { marginTop: 6, color: errorColor },
   ]),
 });
diff --git a/packages/components/inputs/TextInputOutsideLabel.tsx b/packages/components/inputs/TextInputOutsideLabel.tsx
index e905e51a89..23d2b063eb 100644
--- a/packages/components/inputs/TextInputOutsideLabel.tsx
+++ b/packages/components/inputs/TextInputOutsideLabel.tsx
@@ -2,7 +2,7 @@ import { TextStyle, View, ViewStyle } from "react-native";
 
 import asteriskSignSVG from "../../../assets/icons/asterisk-sign.svg";
 import { neutral77 } from "../../utils/style/colors";
-import { fontSemibold13, fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular13, fontRegular14 } from "../../utils/style/fonts";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
 import { SpacerColumn, SpacerRow } from "../spacer";
@@ -23,15 +23,7 @@ export const TextInputOutsideLabel: React.FC<TextInputLabelProps> = ({
   <>
     <View style={rowEndCStyle}>
       <View style={rowCStyle}>
-        <BrandText
-          style={[
-            {
-              color: neutral77,
-            },
-            fontSemibold14,
-            labelStyle,
-          ]}
-        >
+        <BrandText style={[{ color: neutral77 }, fontRegular14, labelStyle]}>
           {label}
         </BrandText>
         {isAsterickSign && (
@@ -41,7 +33,7 @@ export const TextInputOutsideLabel: React.FC<TextInputLabelProps> = ({
           </>
         )}
       </View>
-      {!!subtitle && <BrandText style={fontSemibold13}>{subtitle}</BrandText>}
+      {!!subtitle && <BrandText style={fontRegular13}>{subtitle}</BrandText>}
     </View>
     <SpacerColumn size={1} />
   </>
diff --git a/packages/components/multisig/MultisigTransactions.tsx b/packages/components/multisig/MultisigTransactions.tsx
index cb79d9627b..449038d67d 100644
--- a/packages/components/multisig/MultisigTransactions.tsx
+++ b/packages/components/multisig/MultisigTransactions.tsx
@@ -14,7 +14,7 @@ import {
 import { useMultisigTransactions } from "../../hooks/multisig/useMultisigTransactions";
 import { useMultisigTransactionsCounts } from "../../hooks/multisig/useMultisigTransactionsCounts";
 import { secondaryColor } from "../../utils/style/colors";
-import { fontSemibold28 } from "../../utils/style/fonts";
+import { fontRegular28 } from "../../utils/style/fonts";
 import { headerHeight, layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 import { EmptyList } from "../EmptyList";
@@ -111,7 +111,7 @@ export const MultisigTransactions: FC<{
       <View>
         {title && (
           <>
-            <BrandText style={fontSemibold28}>{title}</BrandText>
+            <BrandText style={fontRegular28}>{title}</BrandText>
             <SpacerColumn size={1.5} />
           </>
         )}
@@ -120,9 +120,7 @@ export const MultisigTransactions: FC<{
           items={tabs}
           onSelect={setSelectedTab}
           selected={selectedTab}
-          tabContainerStyle={{
-            height: 64,
-          }}
+          tabContainerStyle={{ height: 64 }}
         />
       </View>
 
diff --git a/packages/screens/Multisig/MultisigCreateScreen.tsx b/packages/screens/Multisig/MultisigCreateScreen.tsx
index f84fcc7979..e24e569b2b 100644
--- a/packages/screens/Multisig/MultisigCreateScreen.tsx
+++ b/packages/screens/Multisig/MultisigCreateScreen.tsx
@@ -37,9 +37,9 @@ import {
   trashBackground,
 } from "@/utils/style/colors";
 import {
-  fontSemibold13,
-  fontSemibold14,
-  fontSemibold28,
+  fontRegular13,
+  fontRegular14,
+  fontRegular28,
 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
@@ -188,33 +188,22 @@ export const MultisigCreateScreen = () => {
           ? navigation.goBack()
           : navigation.navigate("Multisig")
       }
-      footerChildren={<></>}
-      noMargin
-      fullWidth
-      noScroll
+      isLarge
       forceNetworkKind={NetworkKind.Cosmos}
     >
       <ScrollView
         contentContainerStyle={{
-          padding: layout.contentSpacing,
           paddingTop: layout.topContentSpacingWithHeading,
         }}
       >
-        <View
-          style={{
-            height: "100%",
-            maxWidth: 793,
-          }}
-        >
-          <BrandText style={fontSemibold28}>Create a Legacy Multisig</BrandText>
+        <View style={{ height: "100%", maxWidth: 793 }}>
+          <BrandText style={fontRegular28}>Create a Legacy Multisig</BrandText>
           <SpacerColumn size={2.5} />
           <MultisigSection
             title="What is a Multisignature Wallet?"
-            containerStyle={{
-              maxWidth: 487,
-            }}
+            containerStyle={{ maxWidth: 487 }}
           >
-            <BrandText style={[fontSemibold13, { color: neutralA3 }]}>
+            <BrandText style={[fontRegular13, { color: neutralA3 }]}>
               This wallet adress is owned managed by at least 2 different
               addresses and require signatures from co-owners to execute a
               transaction.
@@ -227,9 +216,7 @@ export const MultisigCreateScreen = () => {
             variant="labelOutside"
             noBrokenCorners
             label="Multisig name"
-            rules={{
-              required: true,
-            }}
+            rules={{ required: true }}
             placeHolder="Type the name of the multisig"
             iconSVG={walletInputSVG}
           />
@@ -308,12 +295,7 @@ export const MultisigCreateScreen = () => {
               label="Number of Signatures required"
               isAsterickSign
             />
-            <View
-              style={{
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-            >
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
               <TextInputCustom<CreateMultisigWalletFormType>
                 defaultValue={defaultNbSignaturesRequired}
                 control={control}
@@ -331,7 +313,7 @@ export const MultisigCreateScreen = () => {
                 errorStyle={{ paddingLeft: layout.spacing_x1_5 }}
               />
               <SpacerRow size={2} />
-              <BrandText style={[fontSemibold14, { color: neutral77 }]}>
+              <BrandText style={[fontRegular14, { color: neutral77 }]}>
                 signatures required on total of
               </BrandText>
               <SpacerRow size={2} />
@@ -348,7 +330,7 @@ export const MultisigCreateScreen = () => {
             </View>
           </View>
 
-          <BrandText style={[fontSemibold14, { color: neutral77 }]}>
+          <BrandText style={[fontRegular14, { color: neutral77 }]}>
             This means that each transaction this multisig makes will require{" "}
             {signatureRequiredValue || defaultNbSignaturesRequired} of the
             members to sign it for it to be accepted by the validators.
diff --git a/packages/screens/Multisig/MultisigScreen.tsx b/packages/screens/Multisig/MultisigScreen.tsx
index ab02bce759..3af9372f1e 100644
--- a/packages/screens/Multisig/MultisigScreen.tsx
+++ b/packages/screens/Multisig/MultisigScreen.tsx
@@ -26,7 +26,7 @@ import { useUserMultisigs } from "@/hooks/multisig/useUserMultisigs";
 import { getUserId, NetworkKind } from "@/networks";
 import { ScreenFC, useAppNavigation } from "@/utils/navigation";
 import { neutral33, neutral77, secondaryColor } from "@/utils/style/colors";
-import { fontSemibold16, fontSemibold28 } from "@/utils/style/fonts";
+import { fontRegular16, fontRegular28 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 import { tinyAddress } from "@/utils/text";
 
@@ -49,16 +49,13 @@ export const MultisigScreen: ScreenFC<"Multisig"> = () => {
   return (
     <ScreenContainer
       headerChildren={<ScreenTitle>Multisig Wallets</ScreenTitle>}
-      footerChildren={<></>}
-      noMargin
-      fullWidth
+      isLarge
       onBackPress={() => navigation.navigate("Multisig")}
-      noScroll
       forceNetworkKind={NetworkKind.Cosmos}
     >
       <ScrollView>
         <View style={containerCStyle}>
-          <View style={horizontalContentPaddingCStyle}>
+          <View>
             <View
               style={{
                 flexDirection: "row",
@@ -66,11 +63,11 @@ export const MultisigScreen: ScreenFC<"Multisig"> = () => {
                 alignItems: "center",
               }}
             >
-              <BrandText style={fontSemibold28}>My Multisigs</BrandText>
+              <BrandText style={fontRegular28}>My Multisigs</BrandText>
               <LoginButton userId={selectedWallet?.userId} />
             </View>
             <SpacerColumn size={1.5} />
-            <BrandText style={[fontSemibold16, { color: neutral77 }]}>
+            <BrandText style={[fontRegular16, { color: neutral77 }]}>
               Overview of your Multisignatures Wallets
             </BrandText>
             <SpacerColumn size={2.5} />
@@ -119,10 +116,10 @@ export const MultisigScreen: ScreenFC<"Multisig"> = () => {
           <SpacerColumn size={3} />
           {!!invitations?.length && (
             <>
-              <View style={horizontalContentPaddingCStyle}>
-                <BrandText style={fontSemibold28}>Invitations</BrandText>
+              <View>
+                <BrandText style={fontRegular28}>Invitations</BrandText>
                 <SpacerColumn size={1.5} />
-                <BrandText style={[fontSemibold16, { color: neutral77 }]}>
+                <BrandText style={[fontRegular16, { color: neutral77 }]}>
                   Multisignatures Wallets you did not join yet
                 </BrandText>
                 <SpacerColumn size={2.5} />
@@ -166,7 +163,7 @@ export const MultisigScreen: ScreenFC<"Multisig"> = () => {
             </>
           )}
           {!!authToken && (
-            <View style={horizontalContentPaddingCStyle}>
+            <View>
               <Separator color={neutral33} />
               <SpacerColumn size={3} />
               <MultisigTransactions
@@ -186,10 +183,6 @@ const containerCStyle: ViewStyle = {
   paddingTop: layout.topContentSpacingWithHeading,
 };
 
-const horizontalContentPaddingCStyle: ViewStyle = {
-  paddingHorizontal: layout.contentSpacing,
-};
-
 const contentCenterCStyle: ViewStyle = {
   flex: 1,
   justifyContent: "center",
diff --git a/packages/screens/Multisig/MultisigWalletDashboardScreen.tsx b/packages/screens/Multisig/MultisigWalletDashboardScreen.tsx
index 7ddedf0972..a78a4c153a 100644
--- a/packages/screens/Multisig/MultisigWalletDashboardScreen.tsx
+++ b/packages/screens/Multisig/MultisigWalletDashboardScreen.tsx
@@ -19,7 +19,7 @@ import { getUserId, parseUserId } from "@/networks";
 import { validateAddress } from "@/utils/formRules";
 import { ScreenFC, useAppNavigation } from "@/utils/navigation";
 import { neutral33 } from "@/utils/style/colors";
-import { fontSemibold28 } from "@/utils/style/fonts";
+import { fontRegular28 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
 type MultisigFormType = {
@@ -43,10 +43,8 @@ export const MultisigWalletDashboardScreen: ScreenFC<
   return (
     <ScreenContainer
       headerChildren={<ScreenTitle>Dashboard {walletName}</ScreenTitle>}
+      isLarge
       onBackPress={() => navigation.navigate("Multisig")}
-      footerChildren={<></>}
-      noMargin
-      fullWidth
       forceNetworkId={network?.id}
     >
       <View
@@ -60,13 +58,9 @@ export const MultisigWalletDashboardScreen: ScreenFC<
         key={multisigUserId}
       >
         <View
-          style={{
-            flex: 1,
-            padding: layout.contentSpacing,
-            paddingTop: layout.topContentSpacingWithHeading,
-          }}
+          style={{ flex: 1, paddingTop: layout.topContentSpacingWithHeading }}
         >
-          <BrandText style={fontSemibold28}>General information</BrandText>
+          <BrandText style={fontRegular28}>General information</BrandText>
           <SpacerColumn size={2.5} />
           <MultisigSection title="Multisig Address">
             <MultisigFormInput<MultisigFormType>
diff --git a/packages/screens/Multisig/components/GetStartedOption.tsx b/packages/screens/Multisig/components/GetStartedOption.tsx
index 936df2992e..4548ec68bd 100644
--- a/packages/screens/Multisig/components/GetStartedOption.tsx
+++ b/packages/screens/Multisig/components/GetStartedOption.tsx
@@ -12,9 +12,9 @@ import {
   secondaryColor,
 } from "@/utils/style/colors";
 import {
-  fontSemibold12,
-  fontSemibold14,
-  fontSemibold9,
+  fontRegular12,
+  fontRegular14,
+  fontRegular9,
 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
@@ -61,7 +61,7 @@ export const GetStartedOption: React.FC<GetStartedOptionProps> = ({
       <View>
         <BrandText
           style={[
-            fontSemibold14,
+            fontRegular14,
             { color: styleDarker ? neutral55 : secondaryColor },
             variant === "small" && smallTextCStyle,
             titleStyle,
@@ -73,7 +73,7 @@ export const GetStartedOption: React.FC<GetStartedOptionProps> = ({
         {subtitle && (
           <BrandText
             style={[
-              fontSemibold9,
+              fontRegular9,
               { color: neutral55 },
               variant === "small" && smallTextCStyle,
             ]}
@@ -111,7 +111,7 @@ const smallContainerCStyle: ViewStyle = {
 const smallTextCStyle: TextStyle = { textAlign: "center" };
 
 const topTextCStyle: TextStyle = {
-  ...fontSemibold12,
+  ...fontRegular12,
   position: "absolute",
   top: 0,
   right: 0,
diff --git a/packages/screens/Multisig/components/MultisigFormInput.tsx b/packages/screens/Multisig/components/MultisigFormInput.tsx
index 0146362ff8..4365ef87bf 100644
--- a/packages/screens/Multisig/components/MultisigFormInput.tsx
+++ b/packages/screens/Multisig/components/MultisigFormInput.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/components/inputs/TextInputCustom";
 import { SpacerRow } from "@/components/spacer";
 import { neutral55, neutral77, neutralA3 } from "@/utils/style/colors";
-import { fontSemibold14 } from "@/utils/style/fonts";
+import { fontRegular14 } from "@/utils/style/fonts";
 
 interface MultisigFormInputProps<T extends FieldValues>
   extends TextInputCustomProps<T> {
@@ -70,7 +70,7 @@ export const MultisigFormInput = <T extends FieldValues>({
           <SpacerRow size={3} />
           <BrandText
             style={[
-              fontSemibold14,
+              fontRegular14,
               { color: neutral77, textTransform: "uppercase" },
             ]}
           >
diff --git a/packages/screens/Multisig/components/MultisigRightSection.tsx b/packages/screens/Multisig/components/MultisigRightSection.tsx
index f6d53c1247..0c1d198db6 100644
--- a/packages/screens/Multisig/components/MultisigRightSection.tsx
+++ b/packages/screens/Multisig/components/MultisigRightSection.tsx
@@ -49,7 +49,7 @@ import {
   neutral77,
   primaryColor,
 } from "@/utils/style/colors";
-import { fontSemibold12, fontSemibold13 } from "@/utils/style/fonts";
+import { fontRegular12, fontRegular13 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
 export const MultisigRightSection: React.FC = () => {
@@ -251,7 +251,7 @@ export const MultisigRightSection: React.FC = () => {
   return (
     <View style={containerCStyle}>
       <SpacerColumn size={5} />
-      <BrandText style={[fontSemibold12, { color: neutral55 }]}>
+      <BrandText style={[fontRegular12, { color: neutral55 }]}>
         ACTIONS
       </BrandText>
       <SpacerColumn size={2} />
@@ -327,9 +327,9 @@ const BurnModal: React.FC<{
         placeHolder="0"
         defaultValue=""
         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>
diff --git a/packages/screens/Multisig/components/MultisigSection.tsx b/packages/screens/Multisig/components/MultisigSection.tsx
index 8830a55abb..e08a534140 100644
--- a/packages/screens/Multisig/components/MultisigSection.tsx
+++ b/packages/screens/Multisig/components/MultisigSection.tsx
@@ -16,7 +16,7 @@ import {
   neutralA3,
   secondaryColor,
 } from "@/utils/style/colors";
-import { fontSemibold14, fontSemibold16 } from "@/utils/style/fonts";
+import { fontRegular14, fontRegular16 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
 interface MultisigSectionProps {
@@ -52,7 +52,7 @@ export const MultisigSection: React.FC<MultisigSectionProps> = ({
         <View style={rowCenterCStyle}>
           <SVG source={walletSVG} height={28} width={28} />
           <SpacerRow size={2} />
-          <BrandText style={[fontSemibold16, { color: neutralA3 }]}>
+          <BrandText style={[fontRegular16, { color: neutralA3 }]}>
             {title}
           </BrandText>
         </View>
@@ -61,7 +61,7 @@ export const MultisigSection: React.FC<MultisigSectionProps> = ({
           {!isLoading && tresholdMax && (
             <>
               <View style={badgeCStyle}>
-                <BrandText style={[fontSemibold14, { color: neutral77 }]}>
+                <BrandText style={[fontRegular14, { color: neutral77 }]}>
                   Threshold: {tresholdCurrentCount}/{tresholdMax}
                 </BrandText>
               </View>
@@ -72,7 +72,7 @@ export const MultisigSection: React.FC<MultisigSectionProps> = ({
           {!isLoading && toriText && (
             <>
               <View style={badgeCStyle}>
-                <BrandText style={[fontSemibold14, { color: neutral77 }]}>
+                <BrandText style={[fontRegular14, { color: neutral77 }]}>
                   TORI
                 </BrandText>
               </View>
diff --git a/packages/utils/style/fonts.ts b/packages/utils/style/fonts.ts
index 42c0b97dff..edc328f1b6 100644
--- a/packages/utils/style/fonts.ts
+++ b/packages/utils/style/fonts.ts
@@ -301,3 +301,10 @@ export const fontRegular10: TextStyle = {
   fontFamily: "Exo_400Regular",
   fontWeight: "400",
 };
+export const fontRegular9: TextStyle = {
+  fontSize: 9,
+  letterSpacing: -(9 * 0.02),
+  lineHeight: 11,
+  fontFamily: "Exo_400Regular",
+  fontWeight: "400",
+};