(PC-31593)[PRO] refactor: Remove titles component and replace occurre…

pro/src/pages/Desk/Desk.module.scss

@@ -1,6 +1,12 @@
 @use "styles/mixins/_fonts.scss" as fonts;
 @use "styles/mixins/_rem.scss" as rem;
 
+.title {
+  @include fonts.title1;
+
+  margin-bottom: rem.torem(32px);
+}
+
 .desk-form {
   border-radius: rem.torem(8px);
   box-shadow: 0 0 rem.torem(5px) var(--color-large-shadow);

pro/src/pages/Desk/Desk.tsx

@@ -9,7 +9,6 @@ import { AppLayout } from 'app/AppLayout'
 import { Callout } from 'components/Callout/Callout'
 import { Button } from 'ui-kit/Button/Button'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
-import { Titles } from 'ui-kit/Titles/Titles'
 
 import { BookingDetails } from './BookingDetails'
 import { ButtonInvalidateToken } from './ButtonInvalidateToken'
@@ -142,7 +141,7 @@ export const Desk = (): JSX.Element => {
 
   return (
     <AppLayout>
-      <Titles title="Guichet" />
+      <h1 className={styles['title']}>Guichet</h1>
       <p className={styles.advice}>
         Saisissez les contremarques présentées par les bénéficiaires afin de les
         valider ou de les invalider.

pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx

@@ -117,7 +117,7 @@ export const CollectiveOffersTable = ({
   )
 
   return (
-    <div aria-busy={isLoading} aria-live="polite" className="section">
+    <div aria-busy={isLoading} aria-live="polite">
       {isLoading ? (
         <Spinner className={styles['loading-spinner']} />
       ) : (

pro/src/pages/Offers/OffersTable/IndividualOffersTable/IndividualOffersTable.tsx

@@ -64,7 +64,7 @@ export const IndividualOffersTable = ({
     )
 
   return (
-    <div aria-busy={isLoading} aria-live="polite" className="section">
+    <div aria-busy={isLoading} aria-live="polite">
       {isLoading ? (
         <Spinner className={styles['loading-spinner']} />
       ) : (

pro/src/screens/Bookings/Bookings.module.scss

@@ -0,0 +1,8 @@
+@use "styles/mixins/_fonts.scss" as fonts;
+@use "styles/mixins/_rem.scss" as rem;
+
+.title {
+  @include fonts.title1;
+
+  margin-bottom: rem.torem(32px);
+}

pro/src/screens/Bookings/Bookings.tsx

@@ -1,5 +1,5 @@
 import isEqual from 'lodash.isequal'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useLocation, useNavigate } from 'react-router-dom'
 import useSWR from 'swr'
@@ -32,10 +32,10 @@ import { formatAndOrderVenues } from 'repository/venuesService'
 import { selectCurrentOffererId } from 'store/user/selectors'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
 import { Tabs } from 'ui-kit/Tabs/Tabs'
-import { Titles } from 'ui-kit/Titles/Titles'
 
 import { stringify } from '../../utils/query-string'
 
+import styles from './Bookings.module.scss'
 import { BookingsRecapTable } from './BookingsRecapTable/BookingsRecapTable'
 import { PreFilters } from './PreFilters/PreFilters'
 
@@ -230,7 +230,7 @@ export const BookingsScreen = <
 
   return (
     <div className="bookings-page">
-      <Titles title={title} />
+      <h1 className={styles['title']}>{title}</h1>
       {!isNewInterfaceActive && (
         <Tabs
           nav="Réservations individuelles et collectives"

pro/src/screens/CollectiveOfferSelectionDuplication/CollectiveOfferSelectionDuplication.module.scss

@@ -11,6 +11,12 @@
   align-items: flex-start;
 }
 
+.title {
+  @include fonts.title1;
+
+  margin-bottom: rem.torem(32px);
+}
+
 .sub-title {
   @include fonts.title4;
 }

pro/src/screens/CollectiveOfferSelectionDuplication/CollectiveOfferSelectionDuplicationScreen.tsx

@@ -23,7 +23,6 @@ import { RadioButton } from 'ui-kit/form/RadioButton/RadioButton'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 import { Thumb } from 'ui-kit/Thumb/Thumb'
-import { Titles } from 'ui-kit/Titles/Titles'
 import { pluralize } from 'utils/pluralize'
 
 import styles from './CollectiveOfferSelectionDuplication.module.scss'
@@ -125,7 +124,7 @@ export const CollectiveOfferSelectionDuplication = (): JSX.Element => {
   return (
     <AppLayout layout={'sticky-actions'}>
       <div className="container">
-        <Titles title="Créer une offre réservable" />
+        <h1 className={styles['title']}>Créer une offre réservable</h1>
         <h2 className={styles['sub-title']} id="search-filter">
           Rechercher l’offre vitrine à dupliquer
         </h2>

pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.module.scss

@@ -1,6 +1,12 @@
 @use "styles/mixins/_rem.scss" as rem;
 @use "styles/mixins/_fonts.scss" as fonts;
 
+.title {
+  @include fonts.title1;
+
+  margin-bottom: rem.torem(32px);
+}
+
 .banner {
   margin-bottom: rem.torem(16px);
 

pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.tsx

@@ -21,7 +21,6 @@ import { SelectOption } from 'custom_types/form'
 import { CollectiveOffersActionsBar } from 'pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersActionsBar/CollectiveOffersActionsBar'
 import { CollectiveOffersTable } from 'pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable'
 import { isSameOffer } from 'pages/Offers/utils/isSameOffer'
-import { Titles } from 'ui-kit/Titles/Titles'
 
 import styles from './CollectiveOffersScreen.module.scss'
 import { CollectiveOffersSearchFilters } from './CollectiveOffersSearchFilters/CollectiveOffersSearchFilters'
@@ -158,7 +157,7 @@ export const CollectiveOffersScreen = ({
 
   return (
     <div>
-      <Titles title="Offres collectives" />
+      <h1 className={styles['title']}>Offres collectives</h1>
       <CollectiveOffersSearchFilters
         applyFilters={applyFilters}
         categories={categories}

pro/src/screens/IndividualOffersScreen/IndividualOffersScreen.module.scss

@@ -0,0 +1,16 @@
+@use "styles/mixins/_rem.scss" as rem;
+@use "styles/mixins/_fonts.scss" as fonts;
+
+.title-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: rem.torem(32px);
+  gap: rem.torem(8px);
+  flex-wrap: wrap;
+}
+
+.title {
+  @include fonts.title1;
+
+  flex-grow: 1;
+}

pro/src/screens/IndividualOffersScreen/IndividualOffersScreen.tsx

@@ -38,8 +38,8 @@ import { selectCurrentOffererId } from 'store/user/selectors'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
 import { Tabs } from 'ui-kit/Tabs/Tabs'
-import { Titles } from 'ui-kit/Titles/Titles'
 
+import styles from './IndividualOffersScreen.module.scss'
 import { IndividualOffersSearchFilters } from './IndividualOffersSearchFilters/IndividualOffersSearchFilters'
 
 export type IndividualOffersScreenProps = {
@@ -108,16 +108,6 @@ export const IndividualOffersScreen = ({
   const displayCreateOfferButton =
     !isNewSideBarNavigation && !isAdmin && isOffererValidated
 
-  const actionLink = displayCreateOfferButton ? (
-    <ButtonLink
-      variant={ButtonVariant.PRIMARY}
-      to={`/offre/creation${selectedOffererId ? `?structure=${selectedOffererId}` : ''}`}
-      icon={fullPlusIcon}
-    >
-      Créer une offre
-    </ButtonLink>
-  ) : undefined
-
   const areAllOffersSelected =
     selectedOffers.length > 0 && selectedOffers.length === offers.length
 
@@ -198,7 +188,18 @@ export const IndividualOffersScreen = ({
 
   return (
     <div>
-      <Titles action={actionLink} title={title} />
+      <div className={styles['title-container']}>
+        <h1 className={styles['title']}>{title}</h1>
+        {displayCreateOfferButton && (
+          <ButtonLink
+            variant={ButtonVariant.PRIMARY}
+            to={`/offre/creation${selectedOffererId ? `?structure=${selectedOffererId}` : ''}`}
+            icon={fullPlusIcon}
+          >
+            Créer une offre
+          </ButtonLink>
+        )}
+      </div>
       {!isNewSideBarNavigation && (
         <Tabs
           nav="Offres individuelles et collectives"
@@ -227,7 +228,6 @@ export const IndividualOffersScreen = ({
           ]}
         />
       )}
-
       <IndividualOffersSearchFilters
         applyFilters={applyFilters}
         categories={categories}
@@ -240,7 +240,6 @@ export const IndividualOffersScreen = ({
         venues={venues}
         isRestrictedAsAdmin={isRestrictedAsAdmin}
       />
-
       {userHasNoOffers ? (
         <NoData page="offers" />
       ) : (

pro/src/screens/OffererStats/OffererStatsScreen.module.scss

@@ -1,11 +1,18 @@
 @use "styles/mixins/_rem.scss" as rem;
+@use "styles/mixins/_fonts.scss" as fonts;
 
 .dashboard-iframe {
   width: 100%;
   height: 100%;
   border: none;
 }
 
+.title {
+  @include fonts.title1;
+
+  margin-bottom: rem.torem(32px);
+}
+
 .offerer-stats {
   &-description {
     margin-bottom: rem.torem(32px);

pro/src/screens/OffererStats/OffererStatsScreen.tsx

@@ -8,7 +8,6 @@ import { useIsNewInterfaceActive } from 'hooks/useIsNewInterfaceActive'
 import { selectCurrentOffererId } from 'store/user/selectors'
 import { SelectInput } from 'ui-kit/form/Select/SelectInput'
 import { FieldLayout } from 'ui-kit/form/shared/FieldLayout/FieldLayout'
-import { Titles } from 'ui-kit/Titles/Titles'
 import { sortByLabel } from 'utils/strings'
 
 import styles from './OffererStatsScreen.module.scss'
@@ -102,7 +101,7 @@ export const OffererStatsScreen = ({
 
   return (
     <div className={styles['offerer-stats']}>
-      <Titles title="Statistiques" />
+      <h1 className={styles['title']}>Statistiques</h1>
       <p className={styles['offerer-stats-description']}>
         Vos statistiques sont calculées et mises à jour quotidiennement dans la
         nuit.

pro/src/styles/global/index.scss

@@ -1,4 +1,3 @@
 @import "font_faces";
 @import "forms";
 @import "layout";
-@import "page";