misc: refactor shared styled typography to render FC with TW

src/components/customers/CustomerCreditNotesList.tsx

@@ -53,7 +53,7 @@ export const CustomerCreditNotesList = ({
 
   return (
     <SideSection>
-      <SectionHeader variant="subhead" color="grey700" $hideBottomShadow>
+      <SectionHeader variant="subhead" color="grey700" hideBottomShadow>
         {translate('text_63725b30957fd5b26b308dd7')}
       </SectionHeader>
       <div className="mb-8 flex h-18 items-center justify-between rounded-xl border border-grey-400 px-4 py-3">

src/components/customers/overview/CustomerCoupons.tsx

@@ -85,7 +85,7 @@ export const CustomerCoupons = memo(() => {
     <>
       {!!(coupons || [])?.length && (
         <Container data-test="customer-coupon-container">
-          <SectionHeader variant="subhead" $hideBottomShadow>
+          <SectionHeader variant="subhead" hideBottomShadow>
             {translate('text_628b8c693e464200e00e469d')}
             <Button
               variant="quaternary"

src/components/customers/overview/CustomerOverview.tsx

@@ -161,7 +161,7 @@ export const CustomerOverview: FC<CustomerOverviewProps> = ({
     <>
       {(!overdueBalancesError || !grossRevenuesError) && (
         <section>
-          <SectionHeader variant="subhead" $hideBottomShadow>
+          <SectionHeader variant="subhead" hideBottomShadow>
             {translate('text_6670a7222702d70114cc7954')}
 
             <Button

src/components/customers/overview/CustomerSubscriptionsList.tsx

@@ -58,7 +58,7 @@ export const CustomerSubscriptionsList = ({ customerTimezone }: CustomerSubscrip
 
   return (
     <SideSection>
-      <Header variant="subhead" $hideBottomShadow>
+      <Header variant="subhead" hideBottomShadow>
         {translate('text_6250304370f0f700a8fdc28d')}
 
         {hasPermissions(['subscriptionsCreate']) && (

src/components/wallets/CustomerWalletList.tsx

@@ -98,7 +98,7 @@ export const CustomerWalletsList = ({ customerId, customerTimezone }: CustommerW
   return (
     <>
       <SideSection $empty={!!hasNoWallet}>
-        <SectionHeader variant="subhead" $hideBottomShadow={!!loading || !hasNoWallet}>
+        <SectionHeader variant="subhead" hideBottomShadow={!!loading || !hasNoWallet}>
           {translate('text_62d175066d2dbf1d50bc9384')}
 
           {hasAnyPermissionsToShowActions && (

src/pages/CreateTax.tsx

@@ -17,7 +17,6 @@ import {
   Content,
   LineSplit,
   Main,
-  SectionTitle,
   Side,
   SkeletonHeader,
   Subtitle,
@@ -118,9 +117,9 @@ const CreateTaxRate = () => {
                 </div>
 
                 <Card>
-                  <SectionTitle variant="subhead">
+                  <Typography variant="subhead">
                     {translate('text_645bb193927b375079d28a91')}
-                  </SectionTitle>
+                  </Typography>
 
                   <LineSplit>
                     <TextInputField

src/pages/Invitation.tsx

@@ -294,8 +294,8 @@ const Invitation = () => {
         <StyledLogo height={24} />
         {(!!error || !data?.invite) && !loading ? (
           <>
-            <Title variant="headline">{translate('text_63246f875e2228ab7b63dcf4')}</Title>
-            <Subtitle $noMargins>{translate('text_63246f875e2228ab7b63dcfe')}</Subtitle>
+            <Title>{translate('text_63246f875e2228ab7b63dcf4')}</Title>
+            <Subtitle noMargins>{translate('text_63246f875e2228ab7b63dcfe')}</Subtitle>
           </>
         ) : !!loading ? (
           <>

src/pages/auth/ForgotPassword.tsx

@@ -71,7 +71,7 @@ const ForgotPassword = () => {
         <StyledLogo height={24} />
         {hasSubmitted ? (
           <>
-            <Title variant="headline">{translate('text_642707b0da1753a9bb66728e')}</Title>
+            <Title>{translate('text_642707b0da1753a9bb66728e')}</Title>
             <Subtitle>{translate('text_642707b0da1753a9bb667298')}</Subtitle>
             <ButtonLink
               type="button"
@@ -83,7 +83,7 @@ const ForgotPassword = () => {
           </>
         ) : (
           <>
-            <Title variant="headline">{translate('text_642707b0da1753a9bb66728c')}</Title>
+            <Title>{translate('text_642707b0da1753a9bb66728c')}</Title>
             <Subtitle>{translate('text_642707b0da1753a9bb667296')}</Subtitle>
             <form onSubmit={(e) => e.preventDefault()}>
               <TextInputField

src/pages/auth/ResetPassword.tsx

@@ -149,12 +149,12 @@ const ResetPassword = () => {
           </>
         ) : !!error && !loading ? (
           <>
-            <Title variant="headline">{translate('text_642707b0da1753a9bb667292')}</Title>
-            <Subtitle $noMargins>{translate('text_642707b0da1753a9bb66729c')}</Subtitle>
+            <Title>{translate('text_642707b0da1753a9bb667292')}</Title>
+            <Subtitle noMargins>{translate('text_642707b0da1753a9bb66729c')}</Subtitle>
           </>
         ) : (
           <>
-            <Title variant="headline">{translate('text_642707b0da1753a9bb667290')}</Title>
+            <Title>{translate('text_642707b0da1753a9bb667290')}</Title>
             <Subtitle>{translate('text_642707b0da1753a9bb66729a')}</Subtitle>
 
             <form>

src/pages/auth/SignUp.tsx

@@ -195,7 +195,7 @@ const SignUp = () => {
 
         <Stack spacing={8}>
           <Stack spacing={3}>
-            <Title variant="headline">
+            <Title>
               {translate(
                 isGoogleRegister
                   ? 'text_660bf95c75dd928ced0ecb04'

src/styles/auth.tsx

@@ -1,9 +1,12 @@
+import { FC, PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
 import { Typography } from '~/components/designSystem'
 import Logo from '~/public/images/logo/lago-logo.svg'
 import { theme } from '~/styles'
 
+import { tw } from './utils'
+
 export const Page = styled.div`
   box-sizing: border-box;
   background-color: ${theme.palette.grey[100]};
@@ -29,9 +32,13 @@ export const Card = styled.div`
   box-sizing: border-box;
 `
 
-export const Title = styled(Typography)`
-  margin-bottom: ${theme.spacing(3)};
-`
-export const Subtitle = styled(Typography)<{ $noMargins?: boolean }>`
-  margin-bottom: ${({ $noMargins }) => ($noMargins ? 0 : theme.spacing(8))};
-`
+export const Title: FC<PropsWithChildren> = ({ children }) => (
+  <Typography className="mb-3" variant="headline">
+    {children}
+  </Typography>
+)
+
+export const Subtitle: FC<PropsWithChildren<{ noMargins?: boolean }>> = ({
+  children,
+  noMargins,
+}) => <Typography className={tw('mb-8', { '!mb-0': !!noMargins })}>{children}</Typography>

src/styles/customer.tsx

@@ -1,18 +1,26 @@
+import { FC, PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
-import { Typography } from '~/components/designSystem'
-import { NAV_HEIGHT, theme } from '~/styles'
+import { Typography, TypographyProps } from '~/components/designSystem'
+import { theme } from '~/styles'
+
+import { tw } from './utils'
 
 export const SideSection = styled.div<{ $empty?: boolean }>`
   > *:first-child {
     margin-bottom: ${({ $empty }) => ($empty ? theme.spacing(6) : 0)};
   }
 `
 
-export const SectionHeader = styled(Typography)<{ $hideBottomShadow?: boolean }>`
-  height: ${NAV_HEIGHT}px;
-  box-shadow: ${({ $hideBottomShadow }) => ($hideBottomShadow ? undefined : theme.shadows[7])};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`
+export const SectionHeader: FC<
+  PropsWithChildren<{ hideBottomShadow?: boolean } & TypographyProps>
+> = ({ children, hideBottomShadow, ...props }) => (
+  <Typography
+    className={tw('flex h-18 items-center justify-between', {
+      'shadow-b': !hideBottomShadow,
+    })}
+    {...props}
+  >
+    {children}
+  </Typography>
+)

src/styles/detailsPage.tsx

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react'
+import { FC, PropsWithChildren, ReactNode } from 'react'
 import styled from 'styled-components'
 
-import { Typography } from '~/components/designSystem'
-import { NAV_HEIGHT, theme } from '~/styles'
+import { Typography, TypographyProps } from '~/components/designSystem'
+import { theme } from '~/styles'
 
 interface DetailsInfoItemProps {
   label: string
@@ -19,11 +19,14 @@ export const DetailsInfoItem = ({ label, value }: DetailsInfoItemProps) => {
   )
 }
 
-export const DetailsSectionTitle = styled(Typography)`
-  display: flex;
-  align-items: center;
-  height: ${NAV_HEIGHT}px;
-`
+export const DetailsSectionTitle: FC<PropsWithChildren<TypographyProps>> = ({
+  children,
+  ...props
+}) => (
+  <Typography className="flex h-18 items-center" {...props}>
+    {children}
+  </Typography>
+)
 
 export const DetailsInfoGrid = ({ grid }: { grid: Array<DetailsInfoItemProps | false> }) => {
   return (

src/styles/mainObjectsForm.tsx

@@ -1,9 +1,10 @@
 // This file contains styled components for the main objects form
 // Ultimately, only general rules such as responsive or block size should be kept here
 // Parts about spacing between elements should be moved to the components themselves
+import { FC, PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
-import { Skeleton, Typography } from '~/components/designSystem'
+import { Skeleton, Typography, TypographyProps } from '~/components/designSystem'
 
 import { NAV_HEIGHT, theme } from './muiTheme'
 
@@ -32,16 +33,17 @@ export const Content = styled.div`
   display: flex;
   min-height: calc(100vh - ${NAV_HEIGHT}px);
 `
-
-export const Title = styled(Typography)`
-  margin-bottom: ${theme.spacing(1)};
-  padding: 0 ${theme.spacing(8)};
-`
-
-export const Subtitle = styled(Typography)`
-  margin-bottom: ${theme.spacing(8)};
-  padding: 0 ${theme.spacing(8)};
-`
+export const Title: FC<PropsWithChildren<TypographyProps>> = ({ children, ...props }) => (
+  <Typography className="mb-1 px-8" {...props}>
+    {children}
+  </Typography>
+)
+
+export const Subtitle: FC<PropsWithChildren<TypographyProps>> = ({ children, ...props }) => (
+  <Typography className="mb-8 px-8" {...props}>
+    {children}
+  </Typography>
+)
 
 export const Side = styled.div`
   width: 40%;
@@ -112,12 +114,6 @@ export const StickySubmitBar = styled.div`
 
 // ------------------------------------------------------------
 
-export const SectionTitle = styled(Typography)`
-  > div:first-child {
-    margin-bottom: ${theme.spacing(3)};
-  }
-`
-
 export const FormLoadingSkeleton = ({ id, length = 2 }: { id: string; length?: number }) => {
   const array = Array.from({ length }, (_, index) => index)