+
- { onClose && () }
{ children }
+ { onClose && () }
,
document.body
);
}
-
- handleBackgroundClick = event => {
- if (event.target === event.currentTarget) {
- this.close();
- }
- };
}
Modal.Body = Body;
@@ -104,9 +100,9 @@ function Close(props) {
} = props;
return (
-
- ×
-
+
);
}
diff --git a/client/src/app/primitives/modal/Modal.less b/client/src/app/primitives/modal/Modal.less
index 1feec5c6b..04cf1e39f 100644
--- a/client/src/app/primitives/modal/Modal.less
+++ b/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);
}
}
}
diff --git a/client/src/plugins/privacy-preferences/PrivacyPreferences.js b/client/src/plugins/privacy-preferences/PrivacyPreferences.js
index 5f2e634c9..664ac2e14 100644
--- a/client/src/plugins/privacy-preferences/PrivacyPreferences.js
+++ b/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 } />
}
;
}
diff --git a/client/src/plugins/privacy-preferences/PrivacyPreferencesView.js b/client/src/plugins/privacy-preferences/PrivacyPreferencesView.js
index 89b9ec588..8db73032f 100644
--- a/client/src/plugins/privacy-preferences/PrivacyPreferencesView.js
+++ b/client/src/plugins/privacy-preferences/PrivacyPreferencesView.js
@@ -70,11 +70,11 @@ class PrivacyPreferencesView extends PureComponent {
const {
onClose,
onSaveAndClose,
- hasCancel
+ canCloseWithoutSave
} = this.props;
return (
-
+
{ TITLE }
@@ -100,7 +100,7 @@ class PrivacyPreferencesView extends PureComponent {
- { hasCancel && (
+ { canCloseWithoutSave && (
diff --git a/client/src/plugins/privacy-preferences/__tests__/PrivacyPreferencesViewSpec.js b/client/src/plugins/privacy-preferences/__tests__/PrivacyPreferencesViewSpec.js
index 642581791..8d5693dac 100644
--- a/client/src/plugins/privacy-preferences/__tests__/PrivacyPreferencesViewSpec.js
+++ b/client/src/plugins/privacy-preferences/__tests__/PrivacyPreferencesViewSpec.js
@@ -91,9 +91,9 @@ describe('
', function() {
});
- it('should render cancel button is prop set', function() {
+ it('should render cancel button if prop is set', function() {
- wrapper = mount();
+ wrapper = mount();
const cancel = wrapper.find('.btn').at(1);
@@ -194,7 +194,7 @@ describe('', function() {
const wrapper = mount(
{} }
onSaveAndClose={ onSaveAndClose } />
);