diff --git a/pro/src/pages/Desk/Desk.module.scss b/pro/src/pages/Desk/Desk.module.scss index 14b6b5203a1..6683f103988 100644 --- a/pro/src/pages/Desk/Desk.module.scss +++ b/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); diff --git a/pro/src/pages/Desk/Desk.tsx b/pro/src/pages/Desk/Desk.tsx index e71978d2843..eef870dff91 100644 --- a/pro/src/pages/Desk/Desk.tsx +++ b/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 ( - +

Guichet

Saisissez les contremarques présentées par les bénéficiaires afin de les valider ou de les invalider. diff --git a/pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx b/pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx index f34c4ca68ad..46a4c53b726 100644 --- a/pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx +++ b/pro/src/pages/Offers/OffersTable/CollectiveOffersTable/CollectiveOffersTable.tsx @@ -117,7 +117,7 @@ export const CollectiveOffersTable = ({ ) return ( -

+
{isLoading ? ( ) : ( diff --git a/pro/src/pages/Offers/OffersTable/IndividualOffersTable/IndividualOffersTable.tsx b/pro/src/pages/Offers/OffersTable/IndividualOffersTable/IndividualOffersTable.tsx index dfec904c98c..3eb59ac8326 100644 --- a/pro/src/pages/Offers/OffersTable/IndividualOffersTable/IndividualOffersTable.tsx +++ b/pro/src/pages/Offers/OffersTable/IndividualOffersTable/IndividualOffersTable.tsx @@ -64,7 +64,7 @@ export const IndividualOffersTable = ({ ) return ( -
+
{isLoading ? ( ) : ( diff --git a/pro/src/screens/Bookings/Bookings.module.scss b/pro/src/screens/Bookings/Bookings.module.scss new file mode 100644 index 00000000000..f376ce22ad2 --- /dev/null +++ b/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); +} diff --git a/pro/src/screens/Bookings/Bookings.tsx b/pro/src/screens/Bookings/Bookings.tsx index 1956bc4b99c..7859e0a059e 100644 --- a/pro/src/screens/Bookings/Bookings.tsx +++ b/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 (
- +

{title}

{!isNewInterfaceActive && ( { return (
- +

Créer une offre réservable

Rechercher l’offre vitrine à dupliquer

diff --git a/pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.module.scss b/pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.module.scss index c98d371583c..446f5c449f2 100644 --- a/pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.module.scss +++ b/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); diff --git a/pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.tsx b/pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.tsx index bedddef5641..577c4e72640 100644 --- a/pro/src/screens/CollectiveOffersScreen/CollectiveOffersScreen.tsx +++ b/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 (
- +

Offres collectives

- Créer une offre - - ) : undefined - const areAllOffersSelected = selectedOffers.length > 0 && selectedOffers.length === offers.length @@ -198,7 +188,18 @@ export const IndividualOffersScreen = ({ return (
- +
+

{title}

+ {displayCreateOfferButton && ( + + Créer une offre + + )} +
{!isNewSideBarNavigation && ( )} - - {userHasNoOffers ? ( ) : ( diff --git a/pro/src/screens/OffererStats/OffererStatsScreen.module.scss b/pro/src/screens/OffererStats/OffererStatsScreen.module.scss index 20980cd6fec..3b6c6956419 100644 --- a/pro/src/screens/OffererStats/OffererStatsScreen.module.scss +++ b/pro/src/screens/OffererStats/OffererStatsScreen.module.scss @@ -1,4 +1,5 @@ @use "styles/mixins/_rem.scss" as rem; +@use "styles/mixins/_fonts.scss" as fonts; .dashboard-iframe { width: 100%; @@ -6,6 +7,12 @@ border: none; } +.title { + @include fonts.title1; + + margin-bottom: rem.torem(32px); +} + .offerer-stats { &-description { margin-bottom: rem.torem(32px); diff --git a/pro/src/screens/OffererStats/OffererStatsScreen.tsx b/pro/src/screens/OffererStats/OffererStatsScreen.tsx index 9c8dd046d66..1b15153b1c7 100644 --- a/pro/src/screens/OffererStats/OffererStatsScreen.tsx +++ b/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 (
- +

Statistiques

Vos statistiques sont calculées et mises à jour quotidiennement dans la nuit. diff --git a/pro/src/styles/global/_page.scss b/pro/src/styles/global/_page.scss deleted file mode 100644 index 316b218651f..00000000000 --- a/pro/src/styles/global/_page.scss +++ /dev/null @@ -1,33 +0,0 @@ -@use "styles/mixins/_rem.scss" as rem; -@use "styles/mixins/_fonts.scss" as fonts; - -.columns, -.field.is-grouped { - display: flex; -} - -main { - .section { - margin-bottom: rem.torem(32px); - padding-bottom: 0; - padding-top: 0; - - .main-list-title { - @include fonts.title4; - - border-bottom: thin solid var(--color-grey-medium); - margin: rem.torem(12px) 0; - padding-bottom: rem.torem(8px); - - span { - margin-top: rem.torem(3.5px); - } - } - - .title-actions-container { - display: flex; - flex-direction: row; - justify-content: space-between; - } - } -} diff --git a/pro/src/styles/global/index.scss b/pro/src/styles/global/index.scss index 4ed06ae3b55..15bc305cd68 100644 --- a/pro/src/styles/global/index.scss +++ b/pro/src/styles/global/index.scss @@ -1,4 +1,3 @@ @import "font_faces"; @import "forms"; @import "layout"; -@import "page"; diff --git a/pro/src/ui-kit/Titles/Titles.module.scss b/pro/src/ui-kit/Titles/Titles.module.scss deleted file mode 100644 index ffbcf945c68..00000000000 --- a/pro/src/ui-kit/Titles/Titles.module.scss +++ /dev/null @@ -1,55 +0,0 @@ -@use "styles/mixins/_fonts.scss" as fonts; -@use "styles/mixins/_rem.scss" as rem; - -.title { - @include fonts.title1; -} - -.hero-section { - display: flex; - flex-direction: column; - margin-bottom: rem.torem(32px); - padding-bottom: 0; - padding-top: 0; - position: relative; - - .subtitle { - @include fonts.title2; - - padding-top: rem.torem(8px); - } -} - -.title-subtitle-link-block { - display: flex; - justify-content: space-between; - - .title-action-links { - .link { - @include fonts.caption; - - background-color: transparent; - color: var(--color-primary); - display: flex; - justify-content: flex-end; - line-height: rem.torem(34px); - - &:focus, - &:hover { - background-color: transparent; - color: var(--color-primary); - } - } - } - - img { - height: rem.torem(25px); - width: rem.torem(25px); - } -} - -.title-description { - @include fonts.body; - - margin-top: rem.torem(20px); -} diff --git a/pro/src/ui-kit/Titles/Titles.tsx b/pro/src/ui-kit/Titles/Titles.tsx deleted file mode 100644 index 65ac7c6c779..00000000000 --- a/pro/src/ui-kit/Titles/Titles.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import styles from './Titles.module.scss' - -interface TitlesProps { - action?: JSX.Element - description?: string - subtitle?: string - title: string -} - -export const Titles = ({ - action, - description, - subtitle, - title = 'Valeur par défault', -}: TitlesProps) => { - return ( -

-
-

{title}

- {action &&
{action}
} -
- {subtitle && ( -

{subtitle.toUpperCase()}

- )} - {description && ( -
{description}
- )} -
- ) -} diff --git a/pro/src/ui-kit/Titles/__specs__/HeroSection.spec.tsx b/pro/src/ui-kit/Titles/__specs__/HeroSection.spec.tsx deleted file mode 100644 index 59d86059a56..00000000000 --- a/pro/src/ui-kit/Titles/__specs__/HeroSection.spec.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { render, screen } from '@testing-library/react' -import React from 'react' - -import { Titles } from '../Titles' - -describe('src | components | layout | Titles', () => { - describe('render', () => { - describe('subtitle', () => { - it('should display subtitle when given', () => { - // given - const props = { - subtitle: 'Fake subtitle', - title: 'Fake title', - description: 'Fake description', - } - - // when - render() - - // then - expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent( - 'FAKE SUBTITLE' - ) - expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent( - 'Fake title' - ) - expect( - screen.queryByText('Fake description', { selector: 'div' }) - ).toBeInTheDocument() - }) - }) - }) -})