diff --git a/CHANGELOG.md b/CHANGELOG.md index d72c655..486ce07 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx index 761190a..c95e99c 100644 --- a/src/components/Modal/Modal.stories.tsx +++ b/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: { diff --git a/src/components/Modal/index.css b/src/components/Modal/index.css index afe9621..69e3ce3 100644 --- a/src/components/Modal/index.css +++ b/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 { diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 31b1107..1937c42 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -110,7 +110,7 @@ export const Modal: React.FC> = ({ return ( -
+