Fix prior notification list, card & form box-sizing [WIP]

MTES-MCT · Aug 27, 2024 · a324b6a · a324b6a
1 parent 5ed77bb
commit a324b6a
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 9 deletions.
diff --git a/frontend/src/components/SideWindowCard.tsx b/frontend/src/components/SideWindowCard.tsx
@@ -18,6 +18,7 @@ export function SideWindowCard({ children, onBackgroundClick, ...nativeProps }:
 }
 
 const Box = styled.div`
+  box-sizing: border-box;
   bottom: 0;
   display: flex;
   justify-content: flex-end;
@@ -26,6 +27,10 @@ const Box = styled.div`
   right: 0;
   top: 0;
   z-index: 1000;
+
+  * {
+    box-sizing: border-box;
+  }
 `
 
 const Overlay = styled.div`

diff --git a/frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/Content.tsx b/frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/Content.tsx
@@ -220,7 +220,7 @@ export function Content({ detail, isValidatingOnChange, onClose, onSubmit, onVer
           </Button>
 
           {!isNewPriorNotification && (
-            <Button
+            <SyledButtonWithIcon
               accent={Accent.PRIMARY}
               disabled={isReadOnly || isVerifiedAndSent}
               Icon={isVerifiedAndSent ? Icon.Check : Icon.Send}
@@ -232,7 +232,7 @@ export function Content({ detail, isValidatingOnChange, onClose, onSubmit, onVer
               }
             >
               {isVerifiedAndSent ? 'Diffusé' : 'Diffuser'}
-            </Button>
+            </SyledButtonWithIcon>
           )}
         </Footer>
       </FrontendErrorBoundary>
@@ -291,17 +291,26 @@ const Intro = styled.p<{
 `
 
 const Footer = styled.div`
+  align-items: center;
   border-top: 1px solid ${p => p.theme.color.lightGray};
+  column-gap: 8px;
   display: flex;
   justify-content: flex-end;
   padding: 16px 32px;
-  min-height: 30px;
 
-  > .Element-Button:not(:first-child) {
-    margin-left: 8px;
+  > .Element-Button {
+    > span:last-child {
+      padding-top: 1px;
+    }
   }
+`
+
+const SyledButtonWithIcon = styled(Button)`
+  align-items: stretch;
+  padding: 4px 12px;
 
-  > div {
-    margin-left: 8px;
+  > span {
+    align-items: center;
+    display: flex;
   }
 `
diff --git a/frontend/src/features/PriorNotification/components/shared/DownloadButton/index.tsx b/frontend/src/features/PriorNotification/components/shared/DownloadButton/index.tsx
@@ -10,6 +10,7 @@ import { Accent, Button, customDayjs, Dropdown, Icon } from '@mtes-mct/monitor-u
 import { downloadAsPdf } from '@utils/downloadAsPdf'
 import printJS from 'print-js'
 import { useMemo } from 'react'
+import styled from 'styled-components'
 
 import { HTML_STYLE } from './template'
 import { getHasAuthorizedLandingDownload, getHtmlContent } from './utils'
@@ -79,7 +80,12 @@ export function DownloadButton({
   return (
     <>
       {hasAuthorizedLandingDownload && (
-        <Dropdown accent={Accent.SECONDARY} Icon={Icon.Download} placement="topEnd" title="Télécharger les documents">
+        <StyledDropdown
+          accent={Accent.SECONDARY}
+          Icon={Icon.Download}
+          placement="topEnd"
+          title="Télécharger les documents"
+        >
           <>
             {!isPriorNotificationDocumentAvailable && (
               <Dropdown.Item disabled title="Document non généré">
@@ -107,7 +113,7 @@ export function DownloadButton({
               </Dropdown.Item>
             )}
           </>
-        </Dropdown>
+        </StyledDropdown>
       )}
       {!hasAuthorizedLandingDownload && (
         <>
@@ -137,3 +143,15 @@ export function DownloadButton({
     </>
   )
 }
+
+const StyledDropdown = styled(Dropdown)`
+  font-size: 13px;
+
+  * {
+    font-size: 13px;
+  }
+
+  > button {
+    padding: 3px 12px;
+  }
+`
diff --git a/frontend/src/features/SideWindow/components/Page.tsx b/frontend/src/features/SideWindow/components/Page.tsx
@@ -3,9 +3,14 @@ import styled from 'styled-components'
 import { NoRsuiteOverrideWrapper } from '../../../ui/NoRsuiteOverrideWrapper'
 
 export const Page = styled(NoRsuiteOverrideWrapper)`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   margin-bottom: 20px;
   overflow: auto;
+
+  * {
+    box-sizing: border-box;
+  }
 `