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>
               )}
 

packages/design-system/lib/components/Modal/modal.module.css

@@ -30,14 +30,10 @@
 }
 
 .header {
-  --button-dimension: 32px;
-
-  box-sizing: content-box;
   display: flex;
   align-items: flex-start;
-  min-height: var(--button-dimension);
   position: relative;
-  padding: var(--Space-x3) var(--Space-x3) 0;
+  padding: var(--Space-x3) var(--Space-x7) 0 var(--Space-x3);
 }
 
 .content {
@@ -57,17 +53,9 @@
 }
 
 .close {
-  background: none;
-  border: none;
-  cursor: pointer;
   position: absolute;
+  top: var(--Space-x2);
   right: var(--Space-x2);
-  width: var(--button-dimension);
-  height: var(--button-dimension);
-  display: flex;
-  align-items: center;
-  padding: 0;
-  justify-content: center;
 }
 
 .verticalCenter {

packages/design-system/lib/components/TextLink/textLink.module.css

@@ -32,3 +32,11 @@
     opacity: 0.7;
   }
 }
+
+.theme-interactive-default:not(.disabled) {
+  color: var(--Text-Interactive-Default);
+
+  &:hover {
+    color: var(--Text-Interactive-Default-Hover);
+  }
+}

packages/design-system/lib/components/TextLink/variants.ts

@@ -13,6 +13,7 @@ export const config = {
     theme: {
       Primary: styles['theme-primary'],
       Inverted: styles['theme-inverted'],
+      InteractiveDefault: styles['theme-interactive-default'],
     },
   },
   defaultVariants: {