fix: changed modal new variant to updated design

CHANGELOG.md

@@ -21,6 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changes
 
+- Changed modal `new` variant to use UI as updated designs
+
 ### Added
 
 ### Fixed

src/components/Modal/Modal.stories.tsx

@@ -44,7 +44,13 @@ export default {
         type: 'boolean'
       }
     },
-    variant: { defaultValue: 'Default' },
+    variant: {
+      defaultValue: 'default',
+      control: {
+        type: 'select',
+        options: ['default', 'new']
+      }
+    },
     content: {
       defaultValue: 'A modal content',
       control: {

src/components/Modal/index.css

@@ -28,6 +28,11 @@
       /* Apply display */
       @apply flex;
     }
+
+    /* Define a light background that matches with new design for qadense */
+    &.new {
+      @apply bg-white bg-opacity-90;
+    }
   }
 
   /* The container inside the background, the modal "card" itself */
@@ -43,9 +48,9 @@
     /* Adds the default border radius */
     /* Animate the fadeUp effect */
     @apply relative shadow-xl my-0 mx-auto md:mt-14 bg-white max-w-full min-w-screen-90 md:min-w-initial pui-border-radius pui-animate-fadeUp;
-    /* Define a border radius that matches with new design */
+    /* Define square border radius that matches with new design for qadense */
     &.new {
-      border-radius: 20px 20px 20px 20px;
+      @apply rounded-none shadow-2xl;
     }
     /* Centers modal container */
     &.center {

src/components/Modal/index.tsx

@@ -110,7 +110,7 @@ export const Modal: React.FC<PropsWithChildren<ModalProps>> = ({
 
   return (
     <ReactPortal selector="#modal-root">
-      <div className={classnames('pui-modal', { open: isOpen })}>
+      <div className={classnames('pui-modal', { open: isOpen }, { new: variant === 'new' })}>
         <div
           className={classnames('pui-modal-container', { new: variant === 'new' }, { center: position === 'center' })}
         >