📱 Quelques améliorations user friendly (#2273)

MTES-MCT · Oct 3, 2024 · c3ff626 · c3ff626
1 parent 36a66ad
commit c3ff626
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/packages/applications/ssr/src/components/molecules/projet/ProjectListItemHeading.tsx b/packages/applications/ssr/src/components/molecules/projet/ProjectListItemHeading.tsx
@@ -38,9 +38,11 @@ export const ProjectListItemHeading: FC<ProjectListItemHeadingProps> = ({
       ) : null}
     </div>
 
-    <div className="flex gap-1 md:items-center">
-      {statut && <StatutProjetBadge statut={statut} />}
-      {estNotifié !== undefined && <NotificationBadge estNotifié={estNotifié} />}
+    <div className="flex gap-1 md:items-center md:flex-row flex-col">
+      <div className="flex gap-1">
+        {statut && <StatutProjetBadge statut={statut} />}
+        {estNotifié !== undefined && <NotificationBadge estNotifié={estNotifié} />}
+      </div>
 
       <FormattedIdentifiantProjet identifiantProjet={identifiantProjet} />
     </div>

diff --git a/packages/applications/ssr/src/components/pages/candidature/lister/CandidatureListItem.tsx b/packages/applications/ssr/src/components/pages/candidature/lister/CandidatureListItem.tsx
@@ -95,16 +95,16 @@ export const CandidatureListItem: FC<CandidatureListItemProps> = ({
         </div>
       </div>
 
-      <div className="flex md:flex-1 lg:flex flex-col lg:flex-row lg:gap-4">
+      <div className="flex md:flex-1 lg:flex flex-col lg:flex-row lg:gap-4 text-sm md:text-base">
         <div className="flex lg:flex-1 lg:flex-col items-center gap-2">
           <Icon
             id={symbols.puissance.iconId}
             className={symbols.puissance.iconColor}
             title={symbols.puissance.description}
           />
-          <div className="lg:flex lg:flex-col items-center">
+          <div className="flex items-center gap-2">
             {puissanceProductionAnnuelle}
-            <span className="italic text-sm"> {unitePuissance}</span>
+            <span className="italic text-sm">{unitePuissance}</span>
           </div>
         </div>
         <div className="flex lg:flex-1 lg:flex-col items-center gap-2">
@@ -113,9 +113,9 @@ export const CandidatureListItem: FC<CandidatureListItemProps> = ({
             className={symbols.prix.iconColor}
             title={symbols.prix.description}
           />
-          <div className="lg:flex lg:flex-col items-center">
+          <div className="flex items-center">
             {prixReference}
-            <span className="italic text-sm"> €/MWh</span>
+            <span className="italic text-sm">€ par MWh</span>
           </div>
         </div>
 

diff --git a/packages/applications/ssr/src/components/pages/période/PériodeListItem.tsx b/packages/applications/ssr/src/components/pages/période/PériodeListItem.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { FC, useState } from 'react';
+import { FC, useState } from 'react';
 import Link from 'next/link';
 import Button from '@codegouvfr/react-dsfr/Button';
 import Badge from '@codegouvfr/react-dsfr/Badge';
@@ -77,7 +77,7 @@ export const PériodeListItem: FC<PériodeListItemProps> = ({
       </div>
     </div>
 
-    <div className="flex flex-col gap-4 md:flex-row md:items-center">
+    <div className="flex flex-col gap-4 mb-4 md:mb-0 md:flex-row md:items-center">
       <div className="flex md:flex-1 flex-col gap-1 text-sm">
         {notifiéLe && (
           <div className="flex items-center gap-2">
@@ -213,7 +213,7 @@ const Stat: FC<StatProps> = ({
       <div className="flex lg:flex-1 lg:flex-col items-center gap-2">
         <Icon {...iconProps} />
 
-        <div className="lg:flex lg:flex-col items-center">
+        <div className="flex gap-2 lg:flex-col items-center">
           <Link
             href={Routes.Candidature.lister({
               appelOffre,

diff --git a/packages/applications/ssr/src/components/templates/ListPage.template.tsx b/packages/applications/ssr/src/components/templates/ListPage.template.tsx
@@ -40,7 +40,7 @@ export const ListPageTemplate = <TItem,>({
 }: ListPageTemplateProps<TItem>) => (
   <PageTemplate banner={<Heading1 className="text-theme-white">{heading}</Heading1>}>
     <div className="flex flex-col md:flex-row gap-5 md:gap-10">
-      <div className="flex flex-col gap-3 pb-2 border-solid border-0 border-b md:border-b-0 md:w-1/4">
+      <div className="flex flex-col gap-3 pb-2 md:w-1/4">
         {actions.length ? (
           <>
             {actions.map((a) => (
@@ -59,7 +59,7 @@ export const ListPageTemplate = <TItem,>({
 
       <div className="flex flex-col gap-3 flex-grow md:w-3/4">
         <div className="w-full flex justify-end">
-          <div className="w-2/3">
+          <div className="md:w-2/3 w-full">
             {search ? <Search label={search.label} params={search.params} /> : null}
           </div>
         </div>