Implement concept for modal windows

client/public/style.css

@@ -8,9 +8,12 @@
   --blue-lighten-82: #a2c5ff;
 
   --silver-base: #f8f8f8;
+  --silver-lighten-99: #fcfcfc;
   --silver-darken-80: #cdcdcd;
   --silver-darken-87: #dedede;
   --silver-darken-94: #efefef;
+
+  --grey-darken-33: #535353;
 }
 
 * {
@@ -101,8 +104,8 @@ body:not(.loading) > .loader {
 /* <buttons> */
 
 .btn {
-  min-width: 92px;
-  height: 30px;
+  min-width: 120px;
+  height: 35px;
   border-radius: 3px;
   font-size: 13px;
   font-weight: bold;
@@ -140,7 +143,7 @@ body:not(.loading) > .loader {
 }
 
 .btn-secondary {
-  color: #535353;
+  color: var(--grey-darken-33);
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
   border: solid 1px var(--silver-darken-80);
   background-color: var(--silver-base);
@@ -162,7 +165,7 @@ body:not(.loading) > .loader {
 }
 
 .btn + .btn {
-  margin-left: 10px;
+  margin-left: 15px;
 }
 
 /* </buttons>

client/src/app/primitives/__tests__/ModalSpec.js

@@ -81,7 +81,7 @@ describe('<Modal>', function() {
     });
 
 
-    it('should invoke passed onClose prop for background click', function() {
+    it('should NOT invoke passed onClose prop for background click', function() {
 
       // given
       wrapper = mount(<Modal onClose={ onCloseSpy } />);
@@ -90,7 +90,7 @@ describe('<Modal>', function() {
       wrapper.first().simulate('click');
 
       // then
-      expect(onCloseSpy).to.be.called;
+      expect(onCloseSpy).to.not.be.called;
     });
 
 

client/src/app/primitives/modal/Modal.js

@@ -16,6 +16,8 @@ import classNames from 'classnames';
 import FocusTrap from './FocusTrap';
 import EscapeTrap from './EscapeTrap';
 
+import CloseIcon from '../../../../resources/icons/Close.svg';
+
 import css from './Modal.less';
 
 
@@ -60,21 +62,15 @@ export default class Modal extends PureComponent {
     } = this.props;
 
     return ReactDOM.createPortal(
-      <div className={ css.ModalOverlay } onClick={ this.handleBackgroundClick }>
+      <div className={ css.ModalOverlay }>
         <div className={ classNames(css.ModalContainer, className) } ref={ this.modalRef }>
-          { onClose && (<Close onClick={ this.close } />) }
           { children }
+          { onClose && (<Close onClick={ this.close } />) }
         </div>
       </div>,
       document.body
     );
   }
-
-  handleBackgroundClick = event => {
-    if (event.target === event.currentTarget) {
-      this.close();
-    }
-  };
 }
 
 Modal.Body = Body;
@@ -104,9 +100,9 @@ function Close(props) {
   } = props;
 
   return (
-    <span className="close" onClick={ onClick }>
-      ×
-    </span>
+    <button className="close" onClick={ onClick }>
+      <CloseIcon />
+    </button>
   );
 }
 

client/src/app/primitives/modal/Modal.less

@@ -21,27 +21,88 @@
 
 :local(.ModalContainer) {
   position: fixed;
-  margin: 10% auto;
   left: 0;
   right: 0;
-  max-width: 600px;
-  height: auto;
-  background: white;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-  border-radius: 2px;
-  padding: 20px;
+
+  width: 636px;
+
+  margin: 10vh auto 6vh;
+  padding: 0;
   z-index: 1001;
 
+  /* ensures round corners are properly cut */
+  overflow: hidden;
+  border: solid 1px var(--silver-darken-87);
+  border-radius: 3px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+
+  background-color: var(--silver-lighten-99);
+  color: var(--grey-darken-33);
+
+  &,
+  & > form {
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+
+    max-height: 84vh;
+  }
+
+  /* Content */
+
+  .modal-header {
+    padding: 20px 60px 20px 20px;
+
+    background-color: var(--silver-base);
+    font-size: 16px;
+
+    border-bottom: solid 1px var(--silver-darken-87);
+
+    .modal-title {
+      margin: 0;
+
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+
+  .modal-body {
+    padding: 10px 30px 20px 20px;
+
+    overflow-y: auto;
+
+    font-size: 14px;
+  }
+
+  .modal-footer {
+    padding: 15px 20px;
+
+    border-top: solid 1px var(--silver-darken-87);
+
+    text-align: right;
+  }
+
+  /* Close button */
+
   .close {
-    vertical-align: middle;
-    font-size: 2rem;
-    line-height: 2rem;
     position: absolute;
-    top: 15px;
-    right: 15px;
+    top: 20px;
+    right: 20px;
+
+    width: 22px;
+    height: 22px;
+    padding: 0;
+
+    border: none;
+    border-radius: 3px;
+    background-color: transparent;
 
     &:hover {
-      color: orange;
+      background-color: var(--silver-darken-94)
+    }
+
+    &:focus {
+      background-color: var(--silver-darken-87);
     }
   }
 }

client/src/plugins/privacy-preferences/PrivacyPreferences.js

@@ -84,7 +84,7 @@ export default class PrivacyPreferences extends PureComponent {
           onClose={ this.onClose }
           preferences={ preferences }
           onSaveAndClose={ this.onSaveAndClose }
-          hasCancel={ !isInitialPreferences } />
+          canCloseWithoutSave={ !isInitialPreferences } />
       }
     </React.Fragment>;
   }

client/src/plugins/privacy-preferences/PrivacyPreferencesView.js

@@ -70,11 +70,11 @@ class PrivacyPreferencesView extends PureComponent {
     const {
       onClose,
       onSaveAndClose,
-      hasCancel
+      canCloseWithoutSave
     } = this.props;
 
     return (
-      <Modal className={ css.View }>
+      <Modal className={ css.View } onClose={ canCloseWithoutSave && onClose }>
 
         <Modal.Title>{ TITLE }</Modal.Title>
 
@@ -100,7 +100,7 @@ class PrivacyPreferencesView extends PureComponent {
 
         <Modal.Footer>
           <div className="form-submit">
-            { hasCancel && (
+            { canCloseWithoutSave && (
               <button className="btn btn-secondary" type="submit" onClick={ onClose }>
                 { CANCEL_BUTTON_TEXT }
               </button>

client/src/plugins/privacy-preferences/__tests__/PrivacyPreferencesViewSpec.js

@@ -91,9 +91,9 @@ describe('<PrivacyPreferencesView>', function() {
     });
 
 
-    it('should render cancel button is prop set', function() {
+    it('should render cancel button if prop is set', function() {
 
-      wrapper = mount(<PrivacyPreferencesView hasCancel={ true } />);
+      wrapper = mount(<PrivacyPreferencesView canCloseWithoutSave />);
 
       const cancel = wrapper.find('.btn').at(1);
 
@@ -194,7 +194,7 @@ describe('<PrivacyPreferencesView>', function() {
       const wrapper = mount(
         <PrivacyPreferencesView
           preferences={ {} }
-          hasCancel={ true }
+          canCloseWithoutSave
           onClose={ () => {} }
           onSaveAndClose={ onSaveAndClose } />
       );