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; }