feat(BOOK-469): Enter details design changes with guarantee/non-guarantee flow

Approved-by: Bianca Widstam

packages/design-system/lib/components/Modal/index.tsx

@@ -4,15 +4,14 @@ import { cx } from 'class-variance-authority'
 import { AnimatePresence, motion } from 'motion/react'
 import { type PropsWithChildren, useEffect, useState } from 'react'
 import {
+  Modal as AriaModal,
   Dialog,
   DialogTrigger,
-  Modal as AriaModal,
   ModalOverlay,
 } from 'react-aria-components'
 import { useIntl } from 'react-intl'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
-import Subtitle from '../Subtitle'
 
 import {
   type AnimationState,
@@ -23,8 +22,9 @@ import {
 import { fade, slideInOut } from './motionVariants'
 import { modalContentVariants } from './variants'
 
-import styles from './modal.module.css'
+import { IconButton } from '../IconButton'
 import { Typography } from '../Typography'
+import styles from './modal.module.css'
 
 const MotionOverlay = motion.create(ModalOverlay)
 const MotionModal = motion.create(AriaModal)
@@ -45,7 +45,7 @@ function InnerModal({
   const intl = useIntl()
 
   const contentClassNames = modalContentVariants({
-    withActions: withActions,
+    withActions,
   })
 
   function modalStateHandler(newAnimationState: AnimationState) {
@@ -97,13 +97,15 @@ function InnerModal({
             <>
               {!hideHeader && (
                 <header
-                  className={`${styles.header} ${!subtitle ? styles.verticalCenter : ''}`}
+                  className={cx(styles.header, {
+                    [styles.verticalCenter]: !subtitle,
+                  })}
                 >
                   <div>
                     {title && (
-                      <Subtitle type="one" color="uiTextHighContrast">
-                        {title}
-                      </Subtitle>
+                      <Typography variant="Title/Subtitle/lg">
+                        <h3>{title}</h3>
+                      </Typography>
                     )}
                     {subtitle && (
                       <Typography variant="Body/Lead text">
@@ -112,13 +114,23 @@ function InnerModal({
                     )}
                   </div>
 
-                  <button
-                    onClick={close}
-                    type="button"
+                  <IconButton
+                    onPress={close}
                     className={styles.close}
+                    type="button"
+                    aria-label={intl.formatMessage({
+                      id: 'common.close',
+                      defaultMessage: 'Close',
+                    })}
+                    theme="Black"
+                    style="Muted"
                   >
-                    <MaterialIcon icon="close" color="Icon/Feedback/Neutral" />
-                  </button>
+                    <MaterialIcon
+                      icon="close"
+                      color="Icon/Feedback/Neutral"
+                      size={24}
+                    />
+                  </IconButton>
                 </header>
               )}