feat(home): move edge device to view [EE-4559] (#8189)

Co-authored-by: matias.spinarolli <matias.spinarolli@portainer.io>

app/react/components/modals/Modal/CloseButton.tsx

@@ -12,7 +12,7 @@ export function CloseButton({
   return (
     <button
       type="button"
-      className={clsx(styles.close, className, 'absolute top-2 right-2')}
+      className={clsx(styles.close, className, 'absolute top-4 right-5')}
       onClick={() => onClose()}
     >
       ×

app/react/components/modals/Modal/Modal.module.css

@@ -1,3 +1,7 @@
+.overlay[data-reach-dialog-overlay] {
+  background: hsla(0, 0%, 0%, 0.8);
+}
+
 .modal-dialog {
   width: 450px;
   display: inline-block;

app/react/components/modals/Modal/Modal.tsx

@@ -33,7 +33,10 @@ export function Modal({
     <Context.Provider value>
       <DialogOverlay
         isOpen
-        className="flex items-center justify-center z-50"
+        className={clsx(
+          styles.overlay,
+          'flex items-center justify-center z-50'
+        )}
         onDismiss={onDismiss}
         role="dialog"
       >

app/react/components/modals/Modal/ModalFooter.tsx

@@ -1,15 +1,11 @@
-import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 
 import { useModalContext } from './Modal';
-import styles from './ModalFooter.module.css';
 
 export function ModalFooter({ children }: PropsWithChildren<unknown>) {
   useModalContext();
 
   return (
-    <div className={clsx(styles.modalFooter, 'flex justify-end')}>
-      {children}
-    </div>
+    <div className="flex justify-end gap-3 [&>*]:flex-1 pt-3">{children}</div>
   );
 }

app/react/components/modals/Modal/ModalHeader.tsx

@@ -24,7 +24,7 @@ export function ModalHeader({ title, modalType }: Props) {
         />
       )}
       {typeof title === 'string' ? (
-        <h5 className="font-bold">{title}</h5>
+        <h5 className="font-bold m-0">{title}</h5>
       ) : (
         title
       )}

app/react/components/modals/Modal/index.tsx

@@ -3,6 +3,8 @@ import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
 import { ModalFooter } from './ModalFooter';
 
+export { ModalType, type OnSubmit } from './types';
+
 interface WithSubComponents {
   Header: typeof ModalHeader;
   Body: typeof ModalBody;