@indico-data/design-system 2.45.1 → 2.45.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.45.1",
+  "version": "2.45.2",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/legacy/components/modals/ModalBase/ModalBase.stories.tsx

@@ -28,10 +28,8 @@ function StoryRender(props: any) {
         open modal
       </button>
 
-      <ModalBase {...props} open={isOpen} clickToDismiss={handleClose}>
-        <p>
-          There is nothing to this modal at all. It is completely up to you to style its contents.
-        </p>
+      <ModalBase {...props} open={isOpen} width="300px" clickToDismiss={handleClose}>
+        There is nothing to this modal at all. It is completely up to you to style its contents.
       </ModalBase>
     </>
   );

package/src/legacy/components/modals/ModalBase/ModalBase.styles.tsx

@@ -17,12 +17,18 @@ function ModalAdapter(props: any): React.ReactElement {
       closeTimeoutMS={120}
       appElement={document.getElementById(props.node || 'root')}
     >
-      {props.children}
+      <div className="modal-content">{props.children}</div>
     </ReactModal>
   );
 }
 
 export const StyledModalBase = styled(ModalAdapter)`
+  .modal-content {
+    background-color: var(--pf-primary-color-600);
+    padding: var(--pf-padding-4);
+    border-radius: var(--pf-rounded-lg);
+  }
+
   .${(props) => props.className}__content {
     position: absolute;
     top: 70px;
@@ -51,7 +57,7 @@ export const StyledModalBase = styled(ModalAdapter)`
 
   .ReactModal__Overlay {
     opacity: 0;
-
+    background-color: rgba(0, 0, 0, 0.5);
     transition: opacity 120ms ease-in-out;
   }