fix: design fix pour nouveaux comptes-rendus (#1816)

SocialGouv · Dec 20, 2023 · f723698 · f723698
1 parent 4878c9b
commit f723698
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 55 deletions.
diff --git a/dashboard/src/components/IncrementorSmall.js b/dashboard/src/components/IncrementorSmall.js
@@ -36,12 +36,12 @@ export default function IncrementorSmall({ service, team, date, count: initialVa
         -
       </button>
       <input
-        className="tw-w-12 tw-border-none tw-bg-none tw-text-center tw-text-black75"
+        className="tw-mx-1 tw-w-10 tw-border-none tw-bg-none tw-text-center tw-text-black75"
         aria-label={`Nombre de ${service}`}
         min="0"
         id={`${service}-count`}
         data-test-id={dataTestId || `${service}-count`}
-        type="number"
+        // type="number"
         value={value}
         disabled={disabled}
         onChange={(e) => setValue(Number(e.currentTarget.value))}

diff --git a/dashboard/src/scenes/report/components/ActionsReport.js b/dashboard/src/scenes/report/components/ActionsReport.js
@@ -34,7 +34,7 @@ export const ActionsOrConsultations = ({ actions, consultations }) => {
           <TabsNav
             className="tw-m-0 tw-flex-wrap tw-justify-start tw-border-b-0 tw-py-0.5 tw-pl-0 [&_button]:tw-text-xl"
             tabs={tabs}
-            renderTab={(caption) => <h3 className="tw-m-0 tw-text-xl tw-font-medium">{caption}</h3>}
+            renderTab={(caption) => <h3 className="tw-m-0 tw-text-base tw-font-medium">{caption}</h3>}
             onClick={(_, index) => setActiveTab(index === 0 ? 'Actions' : 'Consultations')}
             activeTabIndex={activeTab.includes('Actions') ? 0 : 1}
           />
@@ -64,7 +64,7 @@ export const ActionsOrConsultations = ({ actions, consultations }) => {
             </button>
           </div>
         </div>
-        <div className="w-full tw-max-w-lg tw-bg-white tw-px-7 tw-pb-3">
+        <div className="w-full tw-max-w-lg tw-bg-white tw-px-7 tw-pb-1">
           <ActionsOrConsultationsFilters setFilterStatus={setFilterStatus} filterStatus={filterStatus} disabled={!data.length} />
         </div>
         <div className="tw-grow tw-overflow-y-auto tw-border-t tw-border-main tw-border-opacity-20">
@@ -104,20 +104,24 @@ const ActionsOrConsultationsFilters = ({ setFilterStatus, filterStatus, disabled
   return (
     <>
       <div className="tw-flex tw-justify-between">
-        <div className="tw-shrink-0 tw-grow tw-pl-1 tw-pr-2">
-          <label htmlFor="action-select-status-filter">Filtrer par statut</label>
-          <SelectCustom
-            inputId="action-select-status-filter"
-            options={mappedIdsToLabels}
-            getOptionValue={(s) => s._id}
-            getOptionLabel={(s) => s.name}
-            name="status"
-            onChange={(s) => setFilterStatus(s.map((s) => s._id))}
-            isClearable
-            isDisabled={disabled}
-            isMulti
-            value={mappedIdsToLabels.filter((s) => filterStatus.includes(s._id))}
-          />
+        <div className="tw-flex tw-w-full tw-shrink-0 tw-grow tw-items-center tw-pl-1 tw-pr-2">
+          <label htmlFor="action-select-status-filter" className="tw-text-xs">
+            Filtrer par statut
+          </label>
+          <div className="tw-w-full">
+            <SelectCustom
+              inputId="action-select-status-filter"
+              options={mappedIdsToLabels}
+              getOptionValue={(s) => s._id}
+              getOptionLabel={(s) => s.name}
+              name="status"
+              onChange={(s) => setFilterStatus(s.map((s) => s._id))}
+              isClearable
+              isDisabled={disabled}
+              isMulti
+              value={mappedIdsToLabels.filter((s) => filterStatus.includes(s._id))}
+            />
+          </div>
         </div>
       </div>
     </>

diff --git a/dashboard/src/scenes/report/components/CommentsReport.js b/dashboard/src/scenes/report/components/CommentsReport.js
@@ -33,7 +33,7 @@ export const CommentsSocialAndMedical = ({ comments, commentsMedical }) => {
           <TabsNav
             className="tw-m-0 tw-flex-wrap tw-justify-start tw-border-b-0 tw-py-0.5 tw-pl-0 [&_button]:tw-text-xl"
             tabs={tabs}
-            renderTab={(caption) => <h3 className="m-0 tw-text-xl tw-font-medium">{caption}</h3>}
+            renderTab={(caption) => <h3 className="m-0 tw-text-base tw-font-medium">{caption}</h3>}
             onClick={(_, index) => setActiveTab(index === 0 ? 'Commentaires' : 'Commentaires médicaux')}
             activeTabIndex={activeTab.includes('Commentaires médicaux') ? 1 : 0}
           />

diff --git a/dashboard/src/scenes/report/components/ObservationsReport.js b/dashboard/src/scenes/report/components/ObservationsReport.js
@@ -15,12 +15,12 @@ export const ObservationsReport = ({ observations, period, selectedTeams }) => {
 
   return (
     <>
-      <section title="Observations" className="tw-relative tw-m-2 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-bg-main tw-pt-1 tw-pb-3">
-        <p className="tw-m-0 tw-w-full tw-text-center tw-text-3xl tw-font-semibold tw-text-white">{observations.length}</p>
-        <p className="tw-m-0 tw-w-full tw-text-center tw-font-normal tw-text-white">observation{observations.length > 1 ? 's' : ''}</p>
+      <section title="Observations" className="tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
+        <p className="tw-m-0 tw-w-full tw-text-center tw-text-2xl tw-font-semibold tw-text-white">{observations.length}</p>
+        <p className="tw-m-0 tw-w-full tw-text-center tw-text-sm tw-font-normal tw-text-white">observation{observations.length > 1 ? 's' : ''}</p>
         <button
           title="Passer les observations en plein écran"
-          className="tw-absolute tw-top-1 tw-right-1 tw-h-6 tw-w-6 tw-rounded-full tw-text-white tw-transition hover:tw-scale-125 disabled:tw-cursor-not-allowed disabled:tw-opacity-30"
+          className="tw-absolute -tw-top-1.5 -tw-right-1.5 tw-h-6 tw-w-6 tw-rounded-full tw-text-white tw-transition hover:tw-scale-125 disabled:tw-cursor-not-allowed disabled:tw-opacity-30"
           onClick={() => setFullScreen(true)}>
           <FullScreenIcon />
         </button>

diff --git a/dashboard/src/scenes/report/components/PassagesReport.js b/dashboard/src/scenes/report/components/PassagesReport.js
@@ -17,12 +17,12 @@ export const PassagesReport = ({ passages, period, selectedTeams }) => {
 
   return (
     <>
-      <section title="Passages" className="tw-relative tw-m-2 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-bg-main tw-pt-1 tw-pb-3">
-        <p className="tw-m-0 tw-w-full tw-text-center tw-text-3xl tw-font-semibold tw-text-white">{passages.length}</p>
-        <p className="tw-m-0 tw-w-full tw-text-center tw-font-normal tw-text-white">passage{passages.length > 1 ? 's' : ''}</p>
+      <section title="Passages" className="tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
+        <p className="tw-m-0 tw-w-full tw-text-center tw-text-2xl tw-font-semibold tw-text-white">{passages.length}</p>
+        <p className="tw-m-0 tw-w-full tw-text-center tw-text-sm tw-font-normal tw-text-white">passage{passages.length > 1 ? 's' : ''}</p>
         <button
           title="Passer les passages en plein écran"
-          className="tw-absolute tw-top-1 tw-right-1 tw-h-6 tw-w-6 tw-rounded-full tw-text-white tw-transition hover:tw-scale-125 disabled:tw-cursor-not-allowed disabled:tw-opacity-30"
+          className="tw-absolute -tw-top-1.5 -tw-right-1.5 tw-h-6 tw-w-6 tw-rounded-full tw-text-white tw-transition hover:tw-scale-125 disabled:tw-cursor-not-allowed disabled:tw-opacity-30"
           onClick={() => setFullScreen(true)}>
           <FullScreenIcon />
         </button>

diff --git a/dashboard/src/scenes/report/components/PersonsReport.js b/dashboard/src/scenes/report/components/PersonsReport.js
@@ -15,14 +15,14 @@ export const PersonsReport = ({ personsCreated, period, selectedTeams }) => {
 
   return (
     <>
-      <section title="Personnes créées" className="tw-relative tw-m-2 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-bg-main tw-pt-1 tw-pb-3">
-        <p className="tw-m-0 tw-w-full tw-text-center tw-text-3xl tw-font-semibold tw-text-white">{personsCreated.length}</p>
-        <p className="tw-m-0 tw-w-full tw-text-center tw-font-normal tw-text-white">
+      <section title="Personnes créées" className="tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
+        <p className="tw-m-0 tw-w-full tw-text-center tw-text-2xl tw-font-semibold tw-text-white">{personsCreated.length}</p>
+        <p className="tw-m-0 tw-w-full tw-text-center tw-text-sm tw-font-normal tw-text-white">
           personne{personsCreated.length > 1 ? 's' : ''} créée{personsCreated.length > 1 ? 's' : ''}
         </p>
         <button
           title="Passer les personnes créées en plein écran"
-          className="tw-absolute tw-top-1 tw-right-1 tw-h-6 tw-w-6 tw-rounded-full tw-text-white tw-transition hover:tw-scale-125 disabled:tw-cursor-not-allowed disabled:tw-opacity-30"
+          className="tw-absolute -tw-top-1.5 -tw-right-1.5 tw-h-6 tw-w-6 tw-rounded-full tw-text-white tw-transition hover:tw-scale-125 disabled:tw-cursor-not-allowed disabled:tw-opacity-30"
           onClick={() => setFullScreen(true)}>
           <FullScreenIcon />
         </button>

diff --git a/dashboard/src/scenes/report/components/RencontresReport.js b/dashboard/src/scenes/report/components/RencontresReport.js
@@ -17,12 +17,12 @@ export const RencontresReport = ({ rencontres, period, selectedTeams }) => {
 
   return (
     <>
-      <section title="Rencontres" className="tw-relative tw-m-2 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-bg-main tw-pt-1 tw-pb-3">
-        <p className="tw-m-0 tw-w-full tw-text-center tw-text-3xl tw-font-semibold tw-text-white">{rencontres.length}</p>
-        <p className="tw-m-0 tw-w-full tw-text-center tw-font-normal tw-text-white">rencontre{rencontres.length > 1 ? 's' : ''}</p>
+      <section title="Rencontres" className="tw-relative tw-m-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-main">
+        <p className="tw-m-0 tw-w-full tw-text-center tw-text-2xl tw-font-semibold tw-text-white">{rencontres.length}</p>
+        <p className="tw-m-0 tw-w-full tw-text-center tw-text-sm tw-font-normal tw-text-white">rencontre{rencontres.length > 1 ? 's' : ''}</p>
         <button
           title="Passer les rencontres en plein écran"
-          className="tw-absolute tw-top-1 tw-right-1 tw-h-6 tw-w-6 tw-rounded-full tw-text-white tw-transition hover:tw-scale-125 disabled:tw-cursor-not-allowed disabled:tw-opacity-30"
+          className="tw-absolute -tw-top-1.5 -tw-right-1.5 tw-h-6 tw-w-6 tw-rounded-full tw-text-white tw-transition hover:tw-scale-125 disabled:tw-cursor-not-allowed disabled:tw-opacity-30"
           onClick={() => setFullScreen(true)}>
           <FullScreenIcon />
         </button>

diff --git a/dashboard/src/scenes/report/components/ServicesReport.js b/dashboard/src/scenes/report/components/ServicesReport.js
@@ -76,7 +76,7 @@ export default function ServicesReport({ period, selectedTeamsObject }) {
   return (
     <div className="tw-py-2 print:tw-mb-4">
       <div className="tw-flex tw-items-center tw-justify-between tw-px-3">
-        <h3 className="tw-w-full tw-py-2 tw-text-xl tw-font-medium tw-text-black">Services effectués</h3>
+        <h3 className="tw-w-full tw-py-2 tw-text-base tw-font-medium tw-text-black">Services effectués</h3>
         <button
           title="Passer les actions/consultations en plein écran"
           className="tw-h-6 tw-w-6 tw-rounded-full tw-text-main tw-transition hover:tw-scale-125 disabled:tw-opacity-30"
@@ -88,7 +88,7 @@ export default function ServicesReport({ period, selectedTeamsObject }) {
         {!serviceSumsForAllReports ? (
           <Spinner />
         ) : (
-          <div className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-rounded-2xl tw-bg-gray-100 tw-p-4">
+          <div className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-rounded-2xl tw-py-4">
             {teamIds.length > 1 ? (
               <>
                 <div className="tw-mb-6 tw-flex tw-items-center tw-justify-between tw-border-b-gray-300 tw-pb-2 tw-font-medium">
@@ -152,7 +152,7 @@ function ServicesFullScreen({ open, onClose, period, isSingleDay, teamIds, servi
         <div className="py-2 tw-px-4 print:tw-mb-4">
           {teamIds.map((teamId) => {
             return (
-              <div key={teamId} className="tw-mb-4 tw-rounded-2xl tw-bg-gray-100 tw-p-4">
+              <div key={teamId} className="tw-mb-4 tw-rounded-2xl tw-bg-gray-100 tw-py-4">
                 <div
                   className={[
                     'tw-flex tw-items-center tw-justify-between tw-font-medium',
@@ -213,23 +213,22 @@ const ServiceByTeam = ({ team, disabled, dateString, dataTestIdPrefix = '', serv
 
   return (
     <div>
-      <div className="tw-mb-4 tw-border-b tw-border-slate-300">
+      <div className="tw-mb-4 tw-border-b tw-border-slate-300 tw-px-2">
         {groupedServices.map((group, index) => (
           <button
             key={group + index}
-            className={
-              selected === group.groupTitle
-                ? 'tw-mb-[-1px] tw-rounded-t tw-border tw-border-slate-300 tw-border-b-[#f8f8f8] tw-px-4 tw-py-2'
-                : 'tw-px-4 tw-py-2  tw-text-main tw-outline-slate-300 hover:tw-outline'
-            }
+            className={[
+              selected === group.groupTitle ? 'tw-bg-main/10 tw-text-black' : 'tw-hover:text-gray-700 tw-text-main',
+              'tw-rounded-md tw-px-3 tw-py-2 tw-text-sm tw-font-medium',
+            ].join(' ')}
             onClick={() => setSelected(group.groupTitle)}>
             {group.groupTitle}
           </button>
         ))}
       </div>
       {/* This key is used to refresh incrementators on team change. */}
       {/* We could avoid this by mapping on something that actually represents what is displayed (eg: services) */}
-      <div key={team._id}>
+      <div key={team._id} className="tw-px-4">
         {selectedServices.map((service) => (
           <IncrementorSmall
             dataTestId={`${dataTestIdPrefix}${service}-${services[service] || 0}`}

diff --git a/dashboard/src/scenes/report/components/Transmissions.js b/dashboard/src/scenes/report/components/Transmissions.js
@@ -26,9 +26,7 @@ export default function Transmissions({ period, selectedTeamsObject, reports })
 
   return (
     <div>
-      <h3 className="tw-w-full tw-px-3 tw-py-2 tw-text-center tw-text-xl tw-font-medium tw-text-black">
-        👋&nbsp;Comment s'est passée la&nbsp;journée&nbsp;?
-      </h3>
+      <h3 className="tw-w-full tw-px-3 tw-py-2 tw-text-base tw-font-medium tw-text-black">👋&nbsp;Comment s'est passée la&nbsp;journée&nbsp;?</h3>
       {days.map((day) => {
         return (
           <details open={days.length === 1} className="tw-my-2 tw-p-2" key={day}>

diff --git a/dashboard/src/scenes/report/view.js b/dashboard/src/scenes/report/view.js
@@ -345,11 +345,11 @@ const View = () => {
               viewAllOrganisationData || selectedTeamIds.length ? 'tw-flex' : 'tw-hidden',
             ].join(' ')}>
             <div className="tw-mb-12 tw-min-h-1/2 tw-basis-6/12 tw-overflow-auto">
-              <div className="tw-mb-4 tw-h-[50vh] tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+              <div className="tw-mb-4 tw-h-[60vh] tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
                 <ActionsOrConsultations actions={actions} consultations={consultations} />
               </div>
               {canSeeComments && (
-                <div className="tw-h-[50vh] tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
+                <div className="tw-h-[60vh] tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
                   <CommentsSocialAndMedical comments={comments} commentsMedical={commentsMedical} />
                 </div>
               )}
@@ -361,26 +361,26 @@ const View = () => {
                 }}
                 className="tw-mb-4 tw-grid tw-gap-4">
                 {organisation.passagesEnabled && (
-                  <div className="tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow-2xl">
+                  <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow-2xl">
                     <PassagesReport passages={passages} period={period} selectedTeams={selectedTeams} />
                   </div>
                 )}
                 {organisation.rencontresEnabled && (
-                  <div className="tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow">
+                  <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow">
                     <RencontresReport rencontres={rencontres} period={period} selectedTeams={selectedTeams} />
                   </div>
                 )}
                 {organisation.territoriesEnabled && (
-                  <div className="tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow">
+                  <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow">
                     <ObservationsReport observations={observations} period={period} selectedTeams={selectedTeams} />
                   </div>
                 )}
-                <div className="tw-overflow-hidden tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow">
+                <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-main tw-shadow">
                   <PersonsReport personsCreated={personsCreated} period={period} selectedTeams={selectedTeams} />
                 </div>
               </div>
               {organisation.receptionEnabled && (
-                <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-bg-gray-100 tw-shadow">
+                <div className="tw-rounded-lg tw-border tw-border-zinc-200 tw-shadow">
                   <ServicesReport selectedTeamsObject={selectedTeamsObject} period={period} />
                 </div>
               )}