Fix no footer modal border (#1456)

gear-tech · Nov 23, 2023 · 13d7e2e · 13d7e2e
1 parent 2aca796
commit 13d7e2e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/utils/gear-ui/package-lock.json b/utils/gear-ui/package-lock.json
diff --git a/utils/gear-ui/package.json b/utils/gear-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/ui",
-  "version": "0.5.20",
+  "version": "0.5.21",
   "description": "React UI components used across Gear applications",
   "author": "Gear Technologies",
   "license": "GPL-3.0",

diff --git a/utils/gear-ui/src/components/Modal/Modal.module.scss b/utils/gear-ui/src/components/Modal/Modal.module.scss
@@ -82,6 +82,11 @@
   background-color: #29292b;
   border-left: $borderModal;
   border-right: $borderModal;
+
+  &.withoutFooter {
+    border-bottom: $borderModal;
+    border-radius: 0 0 $borderRadiusMedium $borderRadiusMedium;
+  }
 }
 
 .footer {

diff --git a/utils/gear-ui/src/components/Modal/Modal.tsx b/utils/gear-ui/src/components/Modal/Modal.tsx
@@ -39,7 +39,7 @@ const Modal = ({ heading, close, children, footer, className, size = 'normal' }:
   const { bodyStyle, headerRef, footerRef } = useMaxHeight();
 
   const modalClassName = clsx(styles.modal, styles[size]);
-  const bodyClassName = clsx(styles.body, className);
+  const bodyClassName = clsx(styles.body, className, !footer && styles.withoutFooter);
 
   const handleOverlayClick = ({ target, currentTarget }: MouseEvent) => {
     if (target === currentTarget) close();