SaveChangesDialog

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}

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

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;