Style last update authoring text in pno form

MTES-MCT · Oct 16, 2024 · ed1b7e4 · ed1b7e4
1 parent a932218
commit ed1b7e4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/frontend/src/features/PriorNotification/components/LogbookPriorNotificationForm/Form.tsx b/frontend/src/features/PriorNotification/components/LogbookPriorNotificationForm/Form.tsx
@@ -111,9 +111,9 @@ export function Form({ detail, initialFormValues }: FormProps) {
                 <>
                   <hr />
 
-                  <p
+                  <LastUpdateText
                     title={detail.operationDate}
-                  >{`Dernière modification par ${detail.logbookMessage.message.updatedBy} ${customDayjs(detail.operationDate).fromNow()}.`}</p>
+                  >{`Dernière modification par ${detail.logbookMessage.message.updatedBy} ${customDayjs(detail.operationDate).fromNow()}.`}</LastUpdateText>
                 </>
               )}
             </>
@@ -187,6 +187,12 @@ const AuthorTrigramInput = styled(FormikTextInput)`
   width: 120px;
 `
 
+const LastUpdateText = styled.p`
+  color: ${p => p.theme.color.slateGray};
+  font-style: italic;
+  margin-top: 16px;
+`
+
 const ActionWrapper = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/Content.tsx b/frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/Content.tsx
@@ -206,9 +206,9 @@ export function Content({ detail, isValidatingOnChange, onClose, onSubmit, onVer
             <>
               <hr />
 
-              <p
+              <LastUpdateText
                 title={detail.operationDate}
-              >{`Dernière modification par ${detail.logbookMessage.message.updatedBy} ${customDayjs(detail.operationDate).fromNow()}.`}</p>
+              >{`Dernière modification par ${detail.logbookMessage.message.updatedBy} ${customDayjs(detail.operationDate).fromNow()}.`}</LastUpdateText>
             </>
           )}
         </Body>
@@ -313,6 +313,12 @@ const Body = styled.div`
   }
 `
 
+const LastUpdateText = styled.p`
+  color: ${p => p.theme.color.slateGray};
+  font-style: italic;
+  margin-top: 16px;
+`
+
 const Footer = styled.div`
   border-top: 1px solid ${p => p.theme.color.lightGray};
   display: flex;