Fix backoffice style issues

MTES-MCT · Nov 30, 2023 · afc0621 · afc0621
1 parent b647920
commit afc0621
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 58 deletions.
diff --git a/...in/kotlin/fr/gouv/cnsp/monitorfish/domain/use_cases/mission_actions/GetActivityReports.kt b/...in/kotlin/fr/gouv/cnsp/monitorfish/domain/use_cases/mission_actions/GetActivityReports.kt
@@ -80,7 +80,8 @@ class GetActivityReports(
                 missions.first { mission -> mission.id == control.missionId }
             } catch (e: NoSuchElementException) {
                 logger.error(
-                    "Mission id '${control.missionId}' linked to ${control.actionType} control id '${control.id}' could not be found. Is this mission deleted ?", e
+                    "Mission id '${control.missionId}' linked to ${control.actionType} control id '${control.id}' could not be found. Is this mission deleted ?",
+                    e,
                 )
 
                 return@map null

diff --git a/frontend/src/features/BackOffice/components/BackofficeMenu/index.tsx b/frontend/src/features/BackOffice/components/BackofficeMenu/index.tsx
@@ -31,9 +31,8 @@ const Wrapper = styled.div`
   flex-direction: column;
   letter-spacing: 0.5px;
   line-height: 1;
-  min-width: 200px;
+  min-width: 240px;
   padding: 16px 24px;
-  width: 200px;
 `
 
 const StyledNavLink = styled(NavLink)`

diff --git a/frontend/src/features/Backoffice/tableCells.jsx b/frontend/src/features/Backoffice/tableCells.jsx
@@ -362,29 +362,28 @@ export const renderRowExpanded = rowData => {
   return (
     <div
       style={{
-        float: 'left',
         background: COLORS.white,
         padding: '0 20px 20px 40px'
       }}
     >
       <Fields>
         <TableBody>
-          <Field>
+          <tr>
             <Key>Engins</Key>
             <Value>{rowData.gears?.join(', ') || <NoValue>-</NoValue>}</Value>
-          </Field>
-          <Field>
+          </tr>
+          <tr>
             <Key>Zones FAO</Key>
             <Value>{rowData.faoAreas?.join(', ') || <NoValue>-</NoValue>}</Value>
-          </Field>
-          <Field>
+          </tr>
+          <tr>
             <Key>Espèces cibles</Key>
             <Value>{rowData.targetSpecies?.join(', ') || <NoValue>-</NoValue>}</Value>
-          </Field>
-          <Field>
+          </tr>
+          <tr>
             <Key>Prises accessoires</Key>
             <Value>{rowData.bycatchSpecies?.join(', ') || <NoValue>-</NoValue>}</Value>
-          </Field>
+          </tr>
         </TableBody>
       </Fields>
     </div>
@@ -415,53 +414,26 @@ const DeleteIcon = styled(DeleteIconSVG)`
 const TableBody = styled.tbody``
 
 const Fields = styled.table`
-  padding: 0;
-  width: inherit;
-  display: table;
-  margin: 0;
-  min-width: 40%;
-  line-height: 0.2em;
   text-align: left;
 `
 
-const Field = styled.tr`
-  margin: 5px 5px 5px 0;
-  border: none;
-  background: none;
-  line-height: 0.5em;
-`
-
 const Key = styled.th`
-  color: ${COLORS.slateGray};
-  flex: initial;
-  display: inline-block;
-  margin: 0;
-  border: none;
-  padding: 5px 5px 5px 0;
-  background: none;
-  width: max-content;
-  line-height: 0.5em;
-  height: 0.5em;
+  color: ${p => p.theme.color.slateGray};
   font-size: 13px;
   font-weight: normal;
+  line-height: 1.5;
+  width: 140px;
 `
 
 const Value = styled.td`
+  color: ${p => p.theme.color.gunMetal};
   font-size: 13px;
-  color: ${COLORS.gunMetal};
-  margin: 0;
-  text-align: left;
-  padding: 1px 5px 5px 5px;
-  background: none;
-  border: none;
-  line-height: normal;
   font-weight: 500;
 `
 
 const NoValue = styled.span`
-  color: ${COLORS.slateGray};
+  color: ${p => p.theme.color.slateGray};
   font-weight: 300;
-  line-height: normal;
 `
 
 const Delete = styled.div`

diff --git a/.../features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx b/.../features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components'
 import { useDebouncedCallback } from 'use-debounce'
 
 import { useGetFleetSegmentsQuery } from '../../../../api/fleetSegment'
-import { COLORS } from '../../../../constants/constants'
 import { LoadingSpinnerWall } from '../../../../ui/LoadingSpinnerWall'
 import { BackOfficeTitle } from '../../../BackOffice/components/BackOfficeTitle'
 import {
@@ -244,12 +243,12 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron
         }}
         onSortColumn={handleSortColumn as any}
         renderRowExpanded={renderRowExpanded}
-        rowExpandedHeight={125}
+        rowExpandedHeight={100}
         rowHeight={36}
         rowKey="id"
         sortColumn={sortColumn}
         sortType={sortType}
-        width={720}
+        width={769}
       >
         <Table.Column align="center" width={50}>
           <Table.HeaderCell> </Table.HeaderCell>
@@ -261,12 +260,12 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron
           <SegmentCellWithTitle dataKey="segment" />
         </Table.Column>
 
-        <Table.Column sortable width={130}>
+        <Table.Column sortable width={140}>
           <Table.HeaderCell>Nom du segment</Table.HeaderCell>
           <SegmentCellWithTitle dataKey="segmentName" />
         </Table.Column>
 
-        <Table.Column sortable width={140}>
+        <Table.Column sortable width={160}>
           <Table.HeaderCell>Obj. contrôles Port</Table.HeaderCell>
           <ModifiableCell
             dataKey="targetNumberOfControlsAtPort"
@@ -279,7 +278,7 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron
           />
         </Table.Column>
 
-        <Table.Column sortable width={140}>
+        <Table.Column sortable width={160}>
           <Table.HeaderCell>Obj. contrôles Mer</Table.HeaderCell>
           <ModifiableCell
             dataKey="targetNumberOfControlsAtSea"
@@ -307,7 +306,7 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron
           />
         </Table.Column>
 
-        <Table.Column width={30}>
+        <Table.Column width={34}>
           <Table.HeaderCell> </Table.HeaderCell>
           <DeleteCell dataKey="id" id="id" onClick={deleteControlObjectiveRow} />
         </Table.Column>
@@ -336,12 +335,12 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron
 }
 
 const AddSegment = styled.div`
-  text-align: left;
+  color: ${p => p.theme.color.gunMetal};
+  line-height: 10px;
   margin-left: 5px;
   margin-top: -10px;
-  line-height: 10px;
+  text-align: left;
   width: fit-content;
-  color: ${COLORS.gunMetal};
 `
 
 const Wrapper = styled.div`
@@ -355,21 +354,25 @@ const Wrapper = styled.div`
     margin-top: -3px;
   }
 
+  .rs-picker-toggle {
+    width: 120px;
+  }
+
   .rs-picker-default .rs-picker-toggle.rs-btn-xs {
     padding-left: 5px;
   }
 
   .rs-picker-has-value .rs-btn .rs-picker-toggle-value,
   .rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value {
-    color: ${COLORS.charcoal};
+    color: ${p => p.theme.color.charcoal};
   }
 
   .rs-picker-toggle-wrapper .rs-picker-toggle.rs-btn-xs {
     padding-right: 17px;
   }
 
   .rs-input:focus {
-    background: ${COLORS.charcoal};
-    color: ${COLORS.white};
+    background: ${p => p.theme.color.charcoal};
+    color: ${p => p.theme.color.white};
   }
 `
diff --git a/frontend/src/features/ControlObjective/components/ControlObjectiveTable/index.tsx b/frontend/src/features/ControlObjective/components/ControlObjectiveTable/index.tsx
@@ -181,7 +181,7 @@ const Year = styled.div`
 
   .rs-picker-default .rs-picker-toggle.rs-btn-xs {
     padding-left: 5px;
-    width: 120px;
+    width: 144px;
   }
 
   .rs-picker-has-value .rs-btn .rs-picker-toggle-value,

diff --git a/frontend/src/pages/BackofficePage.tsx b/frontend/src/pages/BackofficePage.tsx
@@ -44,9 +44,14 @@ export function BackofficePage() {
 }
 
 const BackofficeWrapper = styled.div`
+  box-sizing: border-box;
   display: flex;
   font-size: 13px;
   height: 100%;
   overflow: hidden;
   width: 100%;
+
+  * {
+    box-sizing: border-box;
+  }
 `