fix: fontWeight for all tns screens (#1472)

Signed-off-by: clegirar <[email protected]>
TERITORI · Jan 2, 2025 · fcb709c · fcb709c
1 parent 099df17
commit fcb709c
Show file tree

Hide file tree

Showing 22 changed files with 98 additions and 83 deletions.
diff --git a/packages/components/ImageBackgroundLogoText.tsx b/packages/components/ImageBackgroundLogoText.tsx
@@ -7,7 +7,7 @@ import { SpacerColumn } from "./spacer";
 
 import logoSVG from "@/assets/logos/logo-white.svg";
 import { useMaxResolution } from "@/hooks/useMaxResolution";
-import { fontSemibold22, fontSemibold28 } from "@/utils/style/fonts";
+import { fontRegular22, fontRegular28 } from "@/utils/style/fonts";
 import { RESPONSIVE_BREAKPOINT_S } from "@/utils/style/layout";
 
 export const ImageBackgroundLogoText: FC<{
@@ -17,7 +17,7 @@ export const ImageBackgroundLogoText: FC<{
   const { width } = useMaxResolution();
   const isSmallScreen = width < RESPONSIVE_BREAKPOINT_S;
   const logoSize = isSmallScreen ? 70 : 88;
-  const fontStyle: TextStyle = isSmallScreen ? fontSemibold22 : fontSemibold28;
+  const fontStyle: TextStyle = isSmallScreen ? fontRegular22 : fontRegular28;
   const height = 380;
 
   return (

diff --git a/packages/components/Pagination.tsx b/packages/components/Pagination.tsx
@@ -20,7 +20,7 @@ import {
   neutralA3,
   secondaryColor,
 } from "@/utils/style/colors";
-import { fontSemibold13, fontSemibold14 } from "@/utils/style/fonts";
+import { fontRegular13, fontRegular14 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
 export interface PaginationProps {
@@ -64,7 +64,7 @@ export const Pagination = ({
       <View style={[sectionCStyle, { justifyContent: "flex-start" }]}>
         <BrandText
           style={[
-            fontSemibold14,
+            fontRegular14,
             {
               color: neutral77,
               paddingRight: layout.spacing_x1,
@@ -153,7 +153,7 @@ export const Pagination = ({
               }}
             >
               <BrandText
-                style={[fontSemibold14, { marginRight: layout.spacing_x1 }]}
+                style={[fontRegular14, { marginRight: layout.spacing_x1 }]}
               >
                 {itemsPerPage}
               </BrandText>
@@ -197,7 +197,7 @@ export const Pagination = ({
               >
                 <BrandText
                   style={[
-                    fontSemibold13,
+                    fontRegular13,
                     { marginLeft: layout.spacing_x1_5, color: neutralA3 },
                   ]}
                 >

diff --git a/packages/components/badges/PrimaryBadge.tsx b/packages/components/badges/PrimaryBadge.tsx
@@ -11,7 +11,7 @@ import {
   secondaryColor,
   primaryTextColor,
 } from "../../utils/style/colors";
-import { fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular14 } from "../../utils/style/fonts";
 import { BrandText } from "../BrandText";
 
 export const PrimaryBadge: React.FC<{
@@ -35,7 +35,7 @@ export const PrimaryBadge: React.FC<{
         style,
       ]}
     >
-      <BrandText style={[fontSemibold14, { color: primaryTextColor }]}>
+      <BrandText style={[fontRegular14, { color: primaryTextColor }]}>
         {label}
       </BrandText>
     </View>

diff --git a/packages/components/buttons/SecondaryButton.tsx b/packages/components/buttons/SecondaryButton.tsx
@@ -15,7 +15,7 @@ import {
   heightButton,
 } from "../../utils/style/buttons";
 import { neutral30, primaryColor } 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 { BoxStyle } from "../boxes/Box";
@@ -117,7 +117,7 @@ export const SecondaryButton: React.FC<{
 
           <BrandText
             style={[
-              fontSemibold14,
+              fontRegular14,
               {
                 color,
                 textAlign: "center",

diff --git a/packages/components/cards/FlowCard.tsx b/packages/components/cards/FlowCard.tsx
@@ -10,7 +10,7 @@ import {
   neutral44,
   neutral77,
 } from "../../utils/style/colors";
-import { fontSemibold14, fontSemibold20 } from "../../utils/style/fonts";
+import { fontRegular14, fontRegular20 } from "../../utils/style/fonts";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
 import { TertiaryBox } from "../boxes/TertiaryBox";
@@ -45,7 +45,7 @@ export const FlowCard: React.FC<{
         <View>
           <BrandText
             style={[
-              fontSemibold14,
+              fontRegular14,
               {
                 color: neutral77,
                 marginBottom: 14,
@@ -54,7 +54,7 @@ export const FlowCard: React.FC<{
           >
             {description}
           </BrandText>
-          <BrandText style={[fontSemibold20]}>{label}</BrandText>
+          <BrandText style={[fontRegular20]}>{label}</BrandText>
         </View>
         <View
           style={{

diff --git a/packages/components/footers/LegalFooter.tsx b/packages/components/footers/LegalFooter.tsx
@@ -3,7 +3,7 @@ import { View } from "react-native";
 
 import logoSVG from "../../../assets/logos/logo.svg";
 import { neutral33, neutral77 } from "../../utils/style/colors";
-import { fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular14 } from "../../utils/style/fonts";
 import { layout, legalFooterHeight } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 import { ExternalLink } from "../ExternalLink";
@@ -35,7 +35,7 @@ export const LegalFooter: React.FC<{ children: ReactNode }> = ({
         <SVG source={logoSVG} width={32} height={32} />
         <BrandText
           style={[
-            fontSemibold14,
+            fontRegular14,
             { color: neutral77, marginLeft: layout.spacing_x1_5 },
           ]}
         >
@@ -57,12 +57,7 @@ export const LegalFooter: React.FC<{ children: ReactNode }> = ({
         <ExternalLink
           gradientType="gray"
           externalUrl="https://teritori.notion.site/Important-Notice-74e66ded18164023b80602b17b284d93"
-          style={[
-            fontSemibold14,
-            {
-              marginRight: layout.spacing_x1,
-            },
-          ]}
+          style={[fontRegular14, { marginRight: layout.spacing_x1 }]}
           numberOfLines={1}
         >
           Important Notice
@@ -71,12 +66,7 @@ export const LegalFooter: React.FC<{ children: ReactNode }> = ({
         <ExternalLink
           gradientType="gray"
           externalUrl="https://teritori.notion.site/Privacy-Policy-16e2332744d346db9b78909a91cb44e3"
-          style={[
-            fontSemibold14,
-            {
-              marginRight: layout.spacing_x1,
-            },
-          ]}
+          style={[fontRegular14, { marginRight: layout.spacing_x1 }]}
           numberOfLines={1}
         >
           Privacy Policy
@@ -85,7 +75,7 @@ export const LegalFooter: React.FC<{ children: ReactNode }> = ({
         <ExternalLink
           gradientType="gray"
           externalUrl="https://teritori.notion.site/Terms-Conditions-6007160a0c74472cbb75a07bdfdd5f73"
-          style={[fontSemibold14, { textDecorationLine: "none" }]}
+          style={[fontRegular14, { textDecorationLine: "none" }]}
           numberOfLines={1}
         >
           Terms & Conditions

diff --git a/packages/components/inputs/AvailableNamesInput.tsx b/packages/components/inputs/AvailableNamesInput.tsx
@@ -3,7 +3,7 @@ import { Control, FieldValues, Path } from "react-hook-form";
 import { TextInputProps, View, ViewStyle } from "react-native";
 
 import { TextInputCustom } from "./TextInputCustom";
-import { fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular14 } from "../../utils/style/fonts";
 import { BrandText } from "../BrandText";
 
 import { useNSAvailability } from "@/hooks/useNSAvailability";
@@ -62,7 +62,7 @@ const AvailabilityInfo: React.FC<AvailabilityInfoProps> = ({
   if (nameValue) {
     if (nameAvailability.availability === "invalid") {
       return (
-        <BrandText style={{ color: redDefault, ...fontSemibold14 }}>
+        <BrandText style={{ color: redDefault, ...fontRegular14 }}>
           Invalid
         </BrandText>
       );
@@ -73,15 +73,15 @@ const AvailabilityInfo: React.FC<AvailabilityInfoProps> = ({
         <View style={{ flexDirection: "row" }}>
           {!!usdPrice && (
             <>
-              <BrandText style={{ color: neutral77, ...fontSemibold14 }}>
+              <BrandText style={{ color: neutral77, ...fontRegular14 }}>
                 ${usdPrice?.toFixed(2)}
               </BrandText>
-              <BrandText style={{ color: neutral33, ...fontSemibold14 }}>
+              <BrandText style={{ color: neutral33, ...fontRegular14 }}>
                 {" - "}
               </BrandText>
             </>
           )}
-          <BrandText style={{ color: primaryColor, ...fontSemibold14 }}>
+          <BrandText style={{ color: primaryColor, ...fontRegular14 }}>
             {price}
           </BrandText>
         </View>
@@ -93,7 +93,7 @@ const AvailabilityInfo: React.FC<AvailabilityInfoProps> = ({
       nameAvailability.availability === "none"
     ) {
       return (
-        <BrandText style={{ color: redDefault, ...fontSemibold14 }}>
+        <BrandText style={{ color: redDefault, ...fontRegular14 }}>
           Taken
         </BrandText>
       );
@@ -161,6 +161,7 @@ export const AvailableNamesInput = <T extends FieldValues>({
       boxMainContainerStyle={{
         backgroundColor: readOnly ? neutral17 : undefined,
       }}
+      textInputStyle={[fontRegular14]}
       control={
         control
           ? (control as unknown as Control<NameFinderFormType>)

diff --git a/packages/components/inputs/SelectInput.tsx b/packages/components/inputs/SelectInput.tsx
@@ -26,7 +26,7 @@ import {
   neutralA3,
   secondaryColor,
 } from "../../utils/style/colors";
-import { fontMedium13, fontSemibold14 } from "../../utils/style/fonts";
+import { fontRegular13, fontRegular14 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
@@ -185,7 +185,7 @@ export const SelectInput: React.FC<Props> = ({
             ) : (
               <BrandText
                 style={[
-                  fontSemibold14,
+                  fontRegular14,
                   { color: selectedItem ? secondaryColor : neutral77 },
                 ]}
               >
@@ -293,7 +293,7 @@ const dropdownMenuStyle: ViewStyle = {
   maxHeight: 330,
   zIndex: 10,
 };
-const dropdownMenuTextStyle: TextStyle = fontMedium13;
+const dropdownMenuTextStyle: TextStyle = fontRegular13;
 const dropdownMenuRowStyle: ViewStyle = {
   borderRadius: 6,
   padding: layout.spacing_x1,

diff --git a/packages/components/inputs/TextInputCustom.tsx b/packages/components/inputs/TextInputCustom.tsx
@@ -352,9 +352,7 @@ const styles = StyleSheet.create({
     color: neutralA3,
   },
   textInput: {
-    fontSize: 14,
-    color: secondaryColor,
-    fontFamily: "Exo_600SemiBold",
+    ...fontRegular14,
     outlineStyle: "none",
   } as TextStyle,
   innerContainer: {

diff --git a/packages/components/modals/GradientModalBase.tsx b/packages/components/modals/GradientModalBase.tsx
@@ -24,6 +24,8 @@ import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
 import { SeparatorGradient } from "../separators/SeparatorGradient";
 
+import { fontRegular20 } from "@/utils/style/fonts";
+
 const getModalColors = (status?: ModalBaseProps["modalStatus"]) => {
   switch (status) {
     case "danger":
@@ -162,7 +164,7 @@ const GradientModalBase: React.FC<ModalBaseProps> = ({
                 </TouchableOpacity>
               )}
               {label && (
-                <BrandText style={{ color: "white", lineHeight: 24 }}>
+                <BrandText style={[fontRegular20, { color: "white" }]}>
                   {label}
                 </BrandText>
               )}

diff --git a/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx b/packages/components/modals/teritoriNameService/TNSNameFinderModal.tsx
@@ -7,7 +7,7 @@ import {
   neutral33,
   neutral77,
 } from "../../../utils/style/colors";
-import { fontSemibold14 } from "../../../utils/style/fonts";
+import { fontRegular14 } from "../../../utils/style/fonts";
 import { BrandText } from "../../BrandText";
 import { PrimaryButton } from "../../buttons/PrimaryButton";
 import ModalBase from "../ModalBase";
@@ -29,7 +29,7 @@ const DomainsAvailability = () => {
     >
       <BrandText
         style={[
-          fontSemibold14,
+          fontRegular14,
           {
             color: neutral77,
             lineHeight: 16,
@@ -43,7 +43,7 @@ const DomainsAvailability = () => {
           <BrandText
             key={domain}
             style={[
-              fontSemibold14,
+              fontRegular14,
               {
                 color: additionalRed,
                 lineHeight: 20,
@@ -57,7 +57,7 @@ const DomainsAvailability = () => {
       </View>
       <BrandText
         style={[
-          fontSemibold14,
+          fontRegular14,
           {
             color: neutral77,
             marginTop: 20,
@@ -71,7 +71,7 @@ const DomainsAvailability = () => {
           <BrandText
             key={domain}
             style={[
-              fontSemibold14,
+              fontRegular14,
               {
                 color: neutral77,
                 lineHeight: 20,
@@ -84,7 +84,7 @@ const DomainsAvailability = () => {
         ))}
         <BrandText
           style={[
-            fontSemibold14,
+            fontRegular14,
             {
               color: neutral77,
               lineHeight: 20,

diff --git a/packages/components/table/utils.ts b/packages/components/table/utils.ts
@@ -1,12 +1,12 @@
-import { fontSemibold12, fontSemibold13 } from "@/utils/style/fonts";
+import { fontRegular12, fontRegular13 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 
 export const tableColumnsGap = layout.spacing_x1;
 export const tablePaddingHorizontal = layout.spacing_x2;
 export const tableHeaderHeight = 48;
 export const tableRowHeight = 50;
-export const tableCellTextStyle = fontSemibold13;
-export const tableHeaderTextStyle = fontSemibold12;
+export const tableCellTextStyle = fontRegular13;
+export const tableHeaderTextStyle = fontRegular12;
 
 export interface TableColumns {
   [key: string]: { label: string; flex: number; minWidth?: number };

diff --git a/packages/components/teritoriNameService/FindAName.tsx b/packages/components/teritoriNameService/FindAName.tsx
@@ -7,6 +7,7 @@ import { neutral17 } from "../../utils/style/colors";
 import { TextInputCustom } from "../inputs/TextInputCustom";
 
 import { LETTERS_REGEXP } from "@/utils/regex";
+import { fontRegular14 } from "@/utils/style/fonts";
 
 // TODO: Maybe it can be a screen that is called in Register and Explore flow... TNSRegisterScreen.tsx and TNSExploreScreen.tsx have duplicated code
 
@@ -36,6 +37,7 @@ export const FindAName: React.FC<{
         name="name"
         label="NAME"
         placeHolder="Type name here"
+        textInputStyle={[fontRegular14]}
         style={{ marginBottom: 12 }}
         onChangeText={setName}
         value={name || ""}

diff --git a/packages/components/teritoriNameService/NameAndTldText.tsx b/packages/components/teritoriNameService/NameAndTldText.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 
-import { fontSemibold20 } from "../../utils/style/fonts";
+import { fontRegular20 } from "../../utils/style/fonts";
 import { tldFromNSToken, nsTokenWithoutTLD } from "../../utils/tns";
 import { BrandText } from "../BrandText";
 import { GradientText } from "../gradientText";
@@ -23,14 +23,17 @@ export const NameAndTldText: React.FC<{
     >
       {/*---- White part*/}
       <BrandText
-        style={{
-          letterSpacing: -(20 * 0.04),
-          maxWidth: "100%",
-        }}
+        style={[
+          fontRegular20,
+          {
+            letterSpacing: -(20 * 0.04),
+            maxWidth: "100%",
+          },
+        ]}
       >
         {nsTokenWithoutTLD(nameAndTldStr)}
         {/*---- Gray part*/}
-        <GradientText gradientType="gray" style={fontSemibold20}>
+        <GradientText gradientType="gray" style={fontRegular20}>
           {tldFromNSToken(nameAndTldStr)}
         </GradientText>
       </BrandText>