merge with 2.0.0-m3

scm-ui-components/packages/ui-components/src/modals/Modal.js

@@ -8,12 +8,17 @@ type Props = {
   body: any,
   footer?: any,
   active: boolean,
-  className?: string
+  className?: string,
+  headColor: string
 };
 
 class Modal extends React.Component<Props> {
+  static defaultProps = {
+    headColor: "light"
+  };
+
   render() {
-    const { title, closeFunction, body, footer, active, className } = this.props;
+    const { title, closeFunction, body, footer, active, className, headColor } = this.props;
 
     const isActive = active ? "is-active" : null;
 
@@ -26,7 +31,7 @@ class Modal extends React.Component<Props> {
       <div className={classNames("modal", className, isActive)}>
         <div className="modal-background" />
         <div className="modal-card">
-          <header className="modal-card-head">
+          <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
             <p className="modal-card-title is-marginless">{title}</p>
             <button
               className="delete"

scm-ui/styles/scm.scss

@@ -207,6 +207,10 @@ $danger-25: scale-color($danger, $lightness: 75%);
   background-color: $danger-25;
 }
 
+.has-background-brown {
+  background-color: #000000b3;
+}
+
 // tags
 .tag:not(body) {
   border: 1px solid transparent;