diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 3a70242d..58587a5c 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -64,7 +64,8 @@ class Overlay extends React.Component {
const {
ariaLabel,
title,
- children
+ children,
+ actions,
} = this.props;
return (
@@ -77,9 +78,12 @@ class Overlay extends React.Component {
>
{title}
-
+
+ {actions}
+
+
{children}
@@ -91,6 +95,7 @@ class Overlay extends React.Component {
Overlay.propTypes = {
children: PropTypes.element,
+ actions: PropTypes.element,
closeOverlay: PropTypes.func,
title: PropTypes.string,
ariaLabel: PropTypes.string,
@@ -99,6 +104,7 @@ Overlay.propTypes = {
Overlay.defaultProps = {
children: null,
+ actions: null,
title: 'Modal',
closeOverlay: null,
ariaLabel: 'modal',
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index 58602f5b..c8eafd1b 100644
--- a/client/styles/components/_overlay.scss
+++ b/client/styles/components/_overlay.scss
@@ -34,11 +34,15 @@
flex: 1 0 auto;
}
+.overlay__actions {
+ display: flex;
+}
+
.overlay__title {
font-size: #{21 / $base-font-size}rem;
}
.overlay__close-button {
@include icon();
- padding: #{3 / $base-font-size}rem 0;
+ padding: #{3 / $base-font-size}rem 0 #{3 / $base-font-size}rem #{10 / $base-font-size}rem;
}