From d16ce17e36623fad4803c98c793e3b04d90fe76e Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 2 Apr 2018 14:35:09 -0300
Subject: [PATCH] SaveChangesDialog

---
 .../routes/Configure/components/Configure.js  | 25 ++++------
 .../components/SaveChangesDialog.css          | 19 ++++++++
 .../Configure/components/SaveChangesDialog.js | 46 +++++++++++++++++++
 3 files changed, 73 insertions(+), 17 deletions(-)
 create mode 100644 client/coral-admin/src/routes/Configure/components/SaveChangesDialog.css
 create mode 100644 client/coral-admin/src/routes/Configure/components/SaveChangesDialog.js

diff --git a/client/coral-admin/src/routes/Configure/components/Configure.js b/client/coral-admin/src/routes/Configure/components/Configure.js
index dcc9308b8..137f685cf 100644
--- a/client/coral-admin/src/routes/Configure/components/Configure.js
+++ b/client/coral-admin/src/routes/Configure/components/Configure.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
-import { Button, List, Item, Dialog } from 'coral-ui';
+import { Button, List, Item } from 'coral-ui';
 import { can } from 'coral-framework/services/perms';
 import styles from './Configure.css';
+import SaveChangesDialog from './SaveChangesDialog';
 
 class Configure extends React.Component {
   render() {
@@ -21,21 +21,12 @@ class Configure extends React.Component {
 
     return (
       <div className={styles.container}>
-        <Dialog
-          className={cn(styles.dialog, 'talk-admin-configure-save-dialog')}
-          id="saveDialog"
-          open={this.props.saveDialog}
-          onCancel={this.props.hideSaveDialog}
-          title={t('configure.unsaved_changes')}
-        >
-          {t('configure.save_dialog_copy')}
-          <Button onClick={this.props.saveChanges}>
-            {t('configure.save_settings')}
-          </Button>
-          <Button onClick={this.props.discardChanges}>
-            {t('configure.discard_changes')}
-          </Button>
-        </Dialog>
+        <SaveChangesDialog
+          saveDialog={this.props.saveDialog}
+          hideSaveDialog={this.props.hideSaveDialog}
+          saveChanges={this.props.saveChanges}
+          discardChanges={this.props.discardChanges}
+        />
         <div className={styles.leftColumn}>
           <List
             onChange={this.props.setActiveSection}
diff --git a/client/coral-admin/src/routes/Configure/components/SaveChangesDialog.css b/client/coral-admin/src/routes/Configure/components/SaveChangesDialog.css
new file mode 100644
index 000000000..e77dbab34
--- /dev/null
+++ b/client/coral-admin/src/routes/Configure/components/SaveChangesDialog.css
@@ -0,0 +1,19 @@
+.buttonActions {
+  padding-top: 10px;
+}
+
+.dialog {
+  padding: 20px;
+}
+
+.close {
+  font-size: 20px;
+  line-height: 14px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  color: #363636;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/routes/Configure/components/SaveChangesDialog.js b/client/coral-admin/src/routes/Configure/components/SaveChangesDialog.js
new file mode 100644
index 000000000..f65dfdd09
--- /dev/null
+++ b/client/coral-admin/src/routes/Configure/components/SaveChangesDialog.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { Button, Dialog } from 'coral-ui';
+import styles from './SaveChangesDialog.css';
+import t from 'coral-framework/services/i18n';
+
+const SaveChangesDialog = ({
+  saveDialog,
+  hideSaveDialog,
+  saveChanges,
+  discardChanges,
+}) => (
+  <Dialog
+    className={cn(styles.dialog, 'talk-admin-configure-save-dialog')}
+    id="saveDialog"
+    open={saveDialog}
+    onCancel={hideSaveDialog}
+    title={t('configure.unsaved_changes')}
+  >
+    <span className={styles.close} onClick={hideSaveDialog}>
+      ×
+    </span>
+    {t('configure.save_dialog_copy')}
+    <div
+      className={cn(
+        styles.buttonActions,
+        'talk-admin-configure-save-dialog-button-actions'
+      )}
+    >
+      <Button onClick={saveChanges} cStyle="green">
+        {t('configure.save_settings')}
+      </Button>
+      <Button onClick={discardChanges}>{t('configure.discard_changes')}</Button>
+    </div>
+  </Dialog>
+);
+
+SaveChangesDialog.propTypes = {
+  saveDialog: PropTypes.bool.isRequired,
+  hideSaveDialog: PropTypes.func.isRequired,
+  saveChanges: PropTypes.func.isRequired,
+  discardChanges: PropTypes.func.isRequired,
+};
+
+export default SaveChangesDialog;