ui-core: add close button to pickers

- use the Modal component to display the calendar picker to harmonize with tolerance and time picker
- add a modal.css file with the modal base styles to avoid repeating the code
- add a close button to the Modal component

Signed-off-by: SharglutDev <[email protected]>

ui-core/src/components/Modal.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 
+import { X } from '@osrd-project/ui-icons';
+
 import { useModalPosition } from '../hooks/useModalPosition';
 import useOutsideClick from '../hooks/useOutsideClick';
 
@@ -31,6 +33,9 @@ const InputModal = ({ inputRef, isOpen, onClose, children }: ModalProps) => {
         className="modal-content"
         style={{ top: modalPosition.top, left: modalPosition.left }}
       >
+        <button className="close-button" onClick={onClose}>
+          <X size="lg" />
+        </button>
         {children}
       </div>
     </div>

ui-core/src/components/inputs/datePicker/DatePicker.tsx

@@ -6,6 +6,7 @@ import cx from 'classnames';
 import { type CalendarSlot } from '.';
 import CalendarPicker, { type CalendarPickerPublicProps } from './CalendarPicker';
 import useDatePicker from './useDatePicker';
+import InputModal from '../../Modal';
 import Input, { type InputProps } from '../Input';
 
 type BaseDatePickerProps = {
@@ -69,7 +70,7 @@ export const DatePicker = (props: DatePickerProps) => {
           statusWithMessage={statusWithMessage}
         />
       </div>
-      {showPicker && (
+      <InputModal inputRef={inputRef} isOpen={showPicker} onClose={() => setShowPicker(false)}>
         <div className="calendar-picker-wrapper">
           <CalendarPicker
             {...props.calendarPickerProps}
@@ -80,7 +81,7 @@ export const DatePicker = (props: DatePickerProps) => {
             selectableSlot={selectableSlot}
           />
         </div>
-      )}
+      </InputModal>
     </div>
   );
 };

ui-core/src/styles/inputs/datePicker.css

@@ -13,17 +13,10 @@
   }
 
   .calendar-picker {
-    position: absolute;
-    width: fit-content;
-    border-radius: 0.5rem;
-    box-shadow:
-      0 0.813rem 0.938rem -0.438rem rgba(31, 27, 23, 0.1),
-      0 0.188rem 0.375rem rgba(31, 27, 23, 0.2);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    @apply bg-white-100;
 
     .calendar-navigation-btn {
       width: 2rem;

ui-core/src/styles/inputs/index.css

@@ -14,3 +14,4 @@
 @import './timePicker.css';
 @import './tokenInput.css';
 @import './tolerancePicker.css';
+@import './modal.css';

ui-core/src/styles/inputs/modal.css

@@ -0,0 +1,33 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: theme('colors.white.100');
+  border-radius: 0.5rem;
+  box-shadow:
+    0px 1px 0px rgba(255, 255, 255, 1) inset,
+    0px 4px 7px -3px rgba(24, 68, 239, 0.19),
+    0px 1px 3px rgba(49, 46, 43, 0.2);
+  position: absolute;
+
+  .close-button {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    color: theme('colors.grey.50');
+
+    &:hover {
+      color: theme('colors.grey.90');
+    }
+
+    &:active {
+      color: theme('colors.grey.20');
+    }
+  }
+}

ui-core/src/styles/inputs/timePicker.css

@@ -10,24 +10,8 @@
     display: none;
   }
 
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-  }
-
   .modal-content {
-    background-color: #fff;
     padding: 4.563rem;
-    border-radius: 0.313rem;
-    box-shadow:
-      0px 1px 0px rgba(255, 255, 255, 1) inset,
-      0px 4px 7px -3px rgba(24, 68, 239, 0.19),
-      0px 1px 3px rgba(49, 46, 43, 0.2);
-    position: absolute;
   }
 
   .time-picker-container {

ui-core/src/styles/inputs/tolerancePicker.css

@@ -20,13 +20,6 @@
   }
 
   .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-
     .tolerance-picker-section {
       display: flex;
       gap: 1rem;
@@ -56,14 +49,7 @@
   }
 
   .modal-content {
-    background-color: #fff;
     padding: 1.25rem;
-    border-radius: 0.313rem;
-    box-shadow:
-      0px 1px 0px rgba(255, 255, 255, 1) inset,
-      0px 4px 7px -3px rgba(24, 68, 239, 0.19),
-      0px 1px 3px rgba(49, 46, 43, 0.2);
-    position: absolute;
   }
 
   .time-picker-container {